/* ===================================================================================================== * kingstur-sonuc.css — Otobüs / uçak sonuç sayfası görünümü * ----------------------------------------------------------------------------------------------------- * Kapsam: (sayfa PHP'sinde satır içi eklenir) * Önek: .ks-* — sitedeki hiçbir eski sınıfla çakışmaz. * * Bölümler * 1 Değişkenler ve sayfa zemini * 2 Gün şeridi (‹ 23 Ağu | 24 Ağu | 25 Ağu ›) * 3 İki kolonlu düzen (sol filtre + sonuçlar) * 4 Sol filtre paneli * 5 Sonuç başlığı (adet + sıralama) * 6 Sefer kartı * 7 Mobil filtre çubuğu ve alttan açılan panel * 8 Duyarlı kırılımlar * ===================================================================================================== */ /* ===================================================================================================== 1 — DEĞİŞKENLER VE SAYFA ZEMİNİ ===================================================================================================== */ .ks-sonuc { /* Marka rengi: önce kendi değişkenin (--kt-brand), sonra sitenin --kng-color'ı, ikisi de yoksa varsayılan. Böylece kırmızını bir yerden değiştirince burası da uyar. */ --ks-brand: var(--kt-brand, var(--kng-color, #e01b22)); --ks-brand-dark: #b8151b; --ks-brand-soft: rgba(224, 27, 34, .08); --ks-brand-ring: rgba(224, 27, 34, .22); --ks-navy: #171a52; --ks-ink: #12131a; --ks-ink-2: #63656f; --ks-ink-3: #9a9ca6; --ks-yesil: #0f8a4d; --ks-yesil-soft: rgba(15, 138, 77, .10); --ks-yuzey: #ffffff; --ks-yuzey-2: #f5f6fa; --ks-cizgi: #e8e8ee; --ks-cizgi-2: #d8d9e2; --ks-r-sm: 10px; --ks-r-md: 14px; --ks-r-lg: 18px; --ks-hap: 999px; --ks-hiz: .16s cubic-bezier(.22, .61, .36, 1); --ks-sh-1: 0 1px 2px rgba(16, 20, 40, .05), 0 4px 14px rgba(16, 20, 40, .06); --ks-sh-2: 0 10px 30px rgba(16, 20, 40, .12), 0 2px 6px rgba(16, 20, 40, .06); --ks-sh-3: 0 22px 60px rgba(10, 14, 30, .18); --ks-cubuk-h: 0px; /* mobil filtre çubuğu yüksekliği — JS yazar */ } html.ks-sonuc body { background: var(--ks-yuzey-2); } /* OTEL DETAY: sayfa zeminine dokunma. Orası eskiden beyaz, öyle kalsın. */ html.ks-otel-detay body { background: #ffffff !important; } /* Eski sayfa kabuğu: liste alanının etrafındaki eski boşluk/çerçeveler sıfırlanır. */ html.ks-sonuc .bilet-container { max-width: none; width: auto; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; } .ks-sayfa { padding: 0 0 48px; } .ks-kap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; } .ks-sayfa, .ks-sayfa *, .ks-sayfa *::before, .ks-sayfa *::after, .ks-ara, .ks-ara *, .ks-ara *::before, .ks-ara *::after, .ks-panel, .ks-panel *, .ks-panel *::before, .ks-panel *::after { box-sizing: border-box; } /* [hidden] her zaman kazansın: aşağıdaki flex/grid kuralları onu ezmesin. */ .ks-sayfa [hidden], .ks-panel [hidden] { display: none !important; } /* ===================================================================================================== 1b — MASAÜSTÜNDE KATLANAN ARAMA ALANI ("Aramayı Düzenle") ----------------------------------------------------------------------------------------------------- <992px'de bu bar hiç görünmez; orada arama özeti kingstur-arama-ozet.js'in işi. ===================================================================================================== */ .ks-ara { display: none; } @media (min-width: 992px) { html.ks-sonuc .ks-ara { display: block; background: var(--ks-yuzey); border-bottom: 1px solid var(--ks-cizgi); } .ks-ara__ic { display: flex; align-items: center; gap: 18px; padding-top: 14px; padding-bottom: 14px; } .ks-ara__yazi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ks-ara__baslik { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--ks-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-ara__alt { font-size: 13px; color: var(--ks-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-ara__btn { flex: 0 0 auto; height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border: 1px solid var(--ks-brand); border-radius: var(--ks-r-sm); background: var(--ks-yuzey); color: var(--ks-brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background var(--ks-hiz), color var(--ks-hiz); } .ks-ara__btn:hover { background: var(--ks-brand-soft); } .ks-ara__btn svg { width: 15px; height: 15px; fill: currentColor; } /* Katlıyken formu gizle, açıkken özet yazısını gizle. */ html.ks-sonuc.ks-ara-kapali .search_container_area { display: none !important; } /* OTEL DETAY'da İKİ arama alanı var (otel-detay.php): .search_container_area.h-1 -> sayfanın üstü, "Otel Bul" -> KATLANIR .search_container_area.h-2 -> "Odalar" sekmesi, "Oda bul" -> HEP AÇIK KALIR Katlama ikisini birden gizleyince "tarih / misafir" kutusu da kayboluyordu. */ html.ks-otel-detay.ks-ara-kapali .search_container_area.h-2 { display: block !important; } html.ks-sonuc:not(.ks-ara-kapali) .ks-ara__yazi { visibility: hidden; } /* Otel detayda form hep açık geliyor; şerit boş bir düğmeden ibaret kalmasın, otelin adı yazılı dursun. */ html.ks-otel-detay:not(.ks-ara-kapali) .ks-ara__yazi { visibility: visible; } html.ks-sonuc:not(.ks-ara-kapali) .ks-ara { border-bottom: 0; } html.ks-sonuc:not(.ks-ara-kapali) .ks-ara__ic { padding-bottom: 0; } } /* ===================================================================================================== 2 — GÜN ŞERİDİ ===================================================================================================== */ .ks-gunler { position: relative; display: flex; align-items: stretch; gap: 6px; margin: 16px 0 18px; padding: 6px; background: var(--ks-yuzey); border: 1px solid var(--ks-cizgi); border-radius: var(--ks-r-md); box-shadow: var(--ks-sh-1); } .ks-gunler__kaydir { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ks-gunler__kaydir::-webkit-scrollbar { display: none; } .ks-gun { flex: 1 0 auto; min-width: 92px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--ks-r-sm); background: transparent; color: var(--ks-ink-2); font: inherit; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--ks-hiz), color var(--ks-hiz), border-color var(--ks-hiz); } .ks-gun:hover { background: var(--ks-yuzey-2); color: var(--ks-ink); text-decoration: none; } .ks-gun__gun { font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: capitalize; opacity: .85; } .ks-gun__tarih { font-size: 14.5px; font-weight: 700; color: var(--ks-ink); white-space: nowrap; } .ks-gun--secili { background: var(--ks-brand-soft); border-color: var(--ks-brand-ring); color: var(--ks-brand); } .ks-gun--secili .ks-gun__tarih, .ks-gun--secili .ks-gun__gun { color: var(--ks-brand); } .ks-gun--pasif { opacity: .35; pointer-events: none; } .ks-gunler__ok { flex: 0 0 auto; width: 34px; align-self: center; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ks-cizgi); border-radius: 50%; background: var(--ks-yuzey); color: var(--ks-ink-2); cursor: pointer; text-decoration: none; transition: background var(--ks-hiz), color var(--ks-hiz), border-color var(--ks-hiz); } .ks-gunler__ok:hover { background: var(--ks-brand-soft); border-color: var(--ks-brand-ring); color: var(--ks-brand); } .ks-gunler__ok svg { width: 16px; height: 16px; fill: currentColor; display: block; } .ks-gunler__ok[aria-disabled="true"] { opacity: .3; pointer-events: none; } /* ===================================================================================================== 3 — İKİ KOLONLU DÜZEN ===================================================================================================== */ .ks-duzen { display: grid; grid-template-columns: 288px minmax(0, 1fr); align-items: start; gap: 22px; } .ks-yan { position: sticky; top: 12px; min-width: 0; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px; } .ks-yan::-webkit-scrollbar { width: 6px; } .ks-yan::-webkit-scrollbar-thumb { background: var(--ks-cizgi-2); border-radius: 6px; } .ks-ana { min-width: 0; } /* ===================================================================================================== 4 — SOL FİLTRE PANELİ ===================================================================================================== */ .ks-filtreler { background: var(--ks-yuzey); border: 1px solid var(--ks-cizgi); border-radius: var(--ks-r-md); box-shadow: var(--ks-sh-1); overflow: hidden; } .ks-filtreler__ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--ks-cizgi); } .ks-filtreler__baslik { font-size: 15px; font-weight: 800; color: var(--ks-ink); letter-spacing: -.01em; } .ks-temizle { padding: 0; border: 0; background: none; color: var(--ks-brand); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .ks-temizle:hover { text-decoration: underline; } .ks-temizle[hidden] { display: none !important; } .ks-blok { border-bottom: 1px solid var(--ks-cizgi); } .ks-blok:last-child { border-bottom: 0; } .ks-blok__bas { width: 100%; display: flex; align-items: center; gap: 8px; padding: 13px 16px; border: 0; background: none; color: var(--ks-ink); font: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.25; /* Bootstrap'in 1.5'i sayfadan sayfaya fark yaratmasın */ text-align: start; cursor: pointer; } .ks-blok__bas span:first-child { flex: 1 1 auto; min-width: 0; } .ks-rozet { flex: 0 0 auto; min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: var(--ks-hap); background: var(--ks-brand); color: #fff; font-size: 11px; font-weight: 700; } .ks-rozet[hidden] { display: none !important; } .ks-blok__ok { flex: 0 0 auto; width: 14px; height: 14px; fill: var(--ks-ink-3); transition: transform var(--ks-hiz); } .ks-blok--kapali .ks-blok__ok { transform: rotate(-90deg); } .ks-blok__ic { padding: 0 16px 15px; } .ks-blok--kapali .ks-blok__ic { display: none; } /* --- Kalkış saati kutucukları --------------------------------------------------------------------- */ .ks-saatler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .ks-saat { padding: 9px 6px; border: 1px solid var(--ks-cizgi-2); border-radius: var(--ks-r-sm); background: var(--ks-yuzey); color: var(--ks-ink-2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all var(--ks-hiz); } .ks-saat:hover { border-color: var(--ks-brand-ring); color: var(--ks-ink); } .ks-saat.ks-secili { background: var(--ks-brand-soft); border-color: var(--ks-brand); color: var(--ks-brand); } /* --- Onay kutusu listesi --------------------------------------------------------------------------- */ .ks-liste-ara { width: 100%; margin-bottom: 10px; padding: 8px 11px; border: 1px solid var(--ks-cizgi-2); border-radius: var(--ks-r-sm); background: var(--ks-yuzey); color: var(--ks-ink); font: inherit; font-size: 13px; outline: none; } .ks-liste-ara:focus { border-color: var(--ks-brand); box-shadow: 0 0 0 3px var(--ks-brand-soft); } .ks-secenekler { display: flex; flex-direction: column; gap: 2px; max-height: 232px; overflow-y: auto; scrollbar-width: thin; margin: 0 -6px; padding: 0 6px; } .ks-secenekler::-webkit-scrollbar { width: 6px; } .ks-secenekler::-webkit-scrollbar-thumb { background: var(--ks-cizgi-2); border-radius: 6px; } .ks-sec { display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 8px; cursor: pointer; user-select: none; transition: background var(--ks-hiz); } .ks-sec:hover { background: var(--ks-yuzey-2); } .ks-sec[hidden] { display: none !important; } .ks-sec input { position: absolute; opacity: 0; width: 0; height: 0; } .ks-kutu { flex: 0 0 auto; width: 18px; height: 18px; border: 1.5px solid var(--ks-cizgi-2); border-radius: 5px; background: var(--ks-yuzey); position: relative; transition: all var(--ks-hiz); } .ks-kutu::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--ks-hiz); } .ks-sec input:checked ~ .ks-kutu { background: var(--ks-brand); border-color: var(--ks-brand); } .ks-sec input:checked ~ .ks-kutu::after { transform: rotate(45deg) scale(1); } .ks-sec input:focus-visible ~ .ks-kutu { box-shadow: 0 0 0 3px var(--ks-brand-soft); } .ks-sec__ad { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ks-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-sec__adet { flex: 0 0 auto; font-size: 11.5px; color: var(--ks-ink-3); } .ks-bos-uyari { padding: 6px 2px; font-size: 12.5px; color: var(--ks-ink-3); } .ks-bos-uyari[hidden] { display: none !important; } /* --- Kaydırma çubuğu (fiyat / süre) ---------------------------------------------------------------- */ .ks-aralik__deger { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 700; color: var(--ks-ink); } .ks-aralik input[type="range"] { width: 100%; height: 22px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .ks-aralik input[type="range"]:focus { outline: none; } .ks-aralik input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: var(--ks-cizgi-2); } .ks-aralik input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ks-cizgi-2); } .ks-aralik input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 2px solid #fff; border-radius: 50%; background: var(--ks-brand); box-shadow: 0 1px 4px rgba(16, 20, 40, .28); } .ks-aralik input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 2px solid #fff; border-radius: 50%; background: var(--ks-brand); box-shadow: 0 1px 4px rgba(16, 20, 40, .28); } .ks-aralik__uclar { display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; font-size: 11.5px; color: var(--ks-ink-3); } /* ===================================================================================================== 5 — SONUÇ BAŞLIĞI (adet + sıralama) ===================================================================================================== */ .ks-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; padding: 12px 16px; background: var(--ks-yuzey); border: 1px solid var(--ks-cizgi); border-radius: var(--ks-r-md); box-shadow: var(--ks-sh-1); } .ks-bar__sayi { min-width: 0; font-size: 14px; color: var(--ks-ink-2); } .ks-bar__sayi b { color: var(--ks-ink); font-size: 16px; font-weight: 800; } .ks-sirala { display: flex; align-items: center; gap: 8px; } .ks-sirala__etiket { font-size: 12.5px; color: var(--ks-ink-3); white-space: nowrap; } .ks-sirala select { height: 38px; padding: 0 34px 0 12px; border: 1px solid var(--ks-cizgi-2); border-radius: var(--ks-r-sm); background-color: var(--ks-yuzey); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2363656f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 18px 18px; color: var(--ks-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; } .ks-sirala select:focus { border-color: var(--ks-brand); box-shadow: 0 0 0 3px var(--ks-brand-soft); } .ks-yon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--ks-cizgi-2); border-radius: var(--ks-r-sm); background: var(--ks-yuzey); color: var(--ks-ink-2); cursor: pointer; transition: all var(--ks-hiz); } .ks-yon:hover { border-color: var(--ks-brand-ring); color: var(--ks-brand); } .ks-yon svg { width: 16px; height: 16px; fill: currentColor; transition: transform var(--ks-hiz); } .ks-yon.ks-secili { border-color: var(--ks-brand); background: var(--ks-brand-soft); color: var(--ks-brand); } .ks-yon.ks-secili svg { transform: rotate(180deg); } /* ===================================================================================================== 6 — SEFER KARTI ===================================================================================================== */ .ks-liste { display: flex; flex-direction: column; gap: 12px; } .ks-kart { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ks-yuzey); border: 1px solid var(--ks-cizgi); border-radius: var(--ks-r-md); box-shadow: var(--ks-sh-1); overflow: hidden; transition: box-shadow var(--ks-hiz), border-color var(--ks-hiz), transform var(--ks-hiz); } .ks-kart:hover { border-color: var(--ks-cizgi-2); box-shadow: var(--ks-sh-2); } .ks-kart.ks-gizli { display: none !important; } /* --- Firma --- */ .ks-kart__firma { display: flex; align-items: center; gap: 10px; padding: 14px 16px 0; min-width: 0; } .ks-kart__logo { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: var(--ks-yuzey-2); } .ks-kart__logo--harf { display: inline-flex; align-items: center; justify-content: center; color: var(--ks-ink-3); font-size: 20px; font-weight: 800; } .ks-kart__firma-yazi { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ks-kart__firma-ad { min-width: 0; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--ks-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-kart__koltuk { display: inline-block; align-self: flex-start; padding: 1px 7px; border-radius: var(--ks-hap); background: var(--ks-yuzey-2); border: 1px solid var(--ks-cizgi); font-size: 11px; font-weight: 700; color: var(--ks-ink-2); white-space: nowrap; } /* --- Orta: saatler ve güzergâh --- */ .ks-kart__orta { padding: 12px 16px 14px; min-width: 0; } .ks-yol { display: grid; grid-template-columns: minmax(0, auto) minmax(40px, 1fr) minmax(0, auto); align-items: center; gap: 10px; } .ks-yol__uc { min-width: 0; } .ks-yol__uc--varis { text-align: end; } .ks-yol__saat { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ks-ink); line-height: 1.15; white-space: nowrap; } .ks-yol__ust { font-size: 10.5px; font-weight: 700; color: var(--ks-brand); vertical-align: super; margin-inline-start: 2px; } .ks-yol__yer { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ks-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-yol__ara { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-bottom: 2px; } .ks-yol__sure { font-size: 11.5px; font-weight: 700; color: var(--ks-ink-2); white-space: nowrap; } .ks-yol__cizgi { position: relative; width: 100%; height: 2px; border-radius: 2px; background: repeating-linear-gradient(to right, var(--ks-cizgi-2) 0 6px, transparent 6px 10px); } .ks-yol__cizgi::before, .ks-yol__cizgi::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: 2px solid var(--ks-brand); border-radius: 50%; background: var(--ks-yuzey); transform: translateY(-50%); } .ks-yol__cizgi::before { inset-inline-start: -1px; } .ks-yol__cizgi::after { inset-inline-end: -1px; } /* --- Özellik rozetleri --- */ .ks-ozellikler { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } .ks-oz { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 4px 9px; border: 1px solid var(--ks-cizgi); border-radius: var(--ks-hap); background: var(--ks-yuzey-2); color: var(--ks-ink-2); font-size: 11.5px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ks-oz i { font-size: 12px; color: var(--ks-ink-3); } .ks-oz--iyi { background: var(--ks-yesil-soft); border-color: rgba(15, 138, 77, .22); color: var(--ks-yesil); } .ks-oz--iyi i { color: var(--ks-yesil); } .ks-kart__tarih { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ks-ink-3); } /* --- Fiyat / eylem --- */ .ks-kart__eylem { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--ks-cizgi); background: var(--ks-yuzey); /* mobilde beyaz; ≥992px'te gri panele dönüyor */ } .ks-kart__fiyat { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .ks-kart__fiyat small { font-size: 11px; color: var(--ks-ink-3); font-weight: 600; } .ks-kart__fiyat b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: var(--ks-ink); white-space: nowrap; } html.ks-sonuc .ks-kart .select-seat-btn { /* Eski seferler/otobus css'inde bu düğme absolute konumlanıyordu; mobilde kartların dışına kaçıp yalnızca ilk kartta görünmesinin sebebi buydu. Konum sıfırlanıyor. */ position: static !important; float: none !important; inset: auto !important; margin: 0 !important; flex: 0 0 auto; min-width: 140px; height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px; border: 0; border-radius: var(--ks-r-sm); background: var(--ks-brand); color: #fff; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .01em; text-transform: none; cursor: pointer; box-shadow: 0 2px 10px rgba(224, 27, 34, .22); transition: background var(--ks-hiz), box-shadow var(--ks-hiz), transform var(--ks-hiz); } html.ks-sonuc .ks-kart .select-seat-btn:hover { background: var(--ks-brand-dark); box-shadow: 0 4px 16px rgba(224, 27, 34, .3); } html.ks-sonuc .ks-kart .select-seat-btn:active { transform: translateY(1px); } html.ks-sonuc .ks-kart .select-seat-btn i { font-size: 16px; } /* --- Sonuç yok --- */ .ks-yok { display: none; padding: 46px 20px; text-align: center; background: var(--ks-yuzey); border: 1px solid var(--ks-cizgi); border-radius: var(--ks-r-md); box-shadow: var(--ks-sh-1); } .ks-yok.ks-acik { display: block; } .ks-yok__baslik { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--ks-ink); } .ks-yok__yazi { margin: 0 0 16px; font-size: 13.5px; color: var(--ks-ink-2); } /* ===================================================================================================== 6b — UÇUŞ KARTI (html.ks-ucus) ----------------------------------------------------------------------------------------------------- Uçuş kartlarının HTML'i ucuslar-metotlar.php'deki renderBilet() ile üretiliyor ve Bootstrap ızgarası kullanıyor. Markup'a DOKUNULMUYOR; burada sadece görünüm yeniden yazılıyor. Böylece ucuslar.js'in bel bağladığı sınıflar (.sefer-card, .select-seat-btn, .btn-detay, .bilet-yon-container, .price-button ...) aynen yerinde kalıyor. ===================================================================================================== */ html.ks-ucus .ks-ana .bilet-yon-container { display: flex; flex-direction: column; gap: 12px; } html.ks-ucus .ks-ana .bilet-yon-container.d-none { display: none !important; } html.ks-ucus .ks-ana .bilet-modal-container { display: block; } /* --- Kart kabuğu --- */ html.ks-ucus .ks-ana .sefer-card { position: relative; align-items: stretch !important; /* sağdaki gri panel kart boyunca uzasın */ margin: 0 !important; padding: 0 !important; /* iç boşluğu kolonlar veriyor */ background: var(--ks-yuzey); border: 1px solid var(--ks-cizgi); border-radius: var(--ks-r-md); box-shadow: var(--ks-sh-1); overflow: hidden; transition: box-shadow var(--ks-hiz), border-color var(--ks-hiz); --bs-gutter-x: 0; } html.ks-ucus .ks-ana .sefer-card:hover { border-color: var(--ks-cizgi-2); box-shadow: var(--ks-sh-2); } html.ks-ucus .ks-ana .sefer-card.ks-gizli { display: none !important; } /* Toplam yolculuk süresi rozeti: tek segmentte ortadaki süreyle aynı şeyi yazıyor, gizli. Çok segmentli biletlerde (gidiş+dönüş tek kart) toplam süre anlamlı, o zaman gösteriliyor. */ html.ks-ucus .ks-ana .sefer-card > .position-absolute { display: none !important; } html.ks-ucus .ks-ana .sefer-card:has(.seperator) > .position-absolute { display: block !important; position: static !important; order: -1; width: 100%; max-width: 100%; flex: 0 0 100%; padding: 10px 16px 0 !important; font-size: 11.5px; font-weight: 600; color: var(--ks-ink-3); } /* Sol blok: uçuş bilgisi */ html.ks-ucus .ks-ana .sefer-card > .col-md-8, html.ks-ucus .ks-ana .sefer-card > .col-md-10 { flex: 1 1 auto !important; /* kalan alanı doldur ki sağdaki gri panel kenara yaslansın */ width: auto !important; max-width: none !important; display: flex; align-items: center; padding: 14px 16px !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row { width: 100%; } /* -------------------------------------------------------------------------------------------------- Sağ blok (fiyat + düğme) MOBİL : kartın altında tam genişlikte beyaz şerit — solda fiyat, sağda düğme (otobüs kartındaki düzenin birebir aynısı) ≥768px : sağda dikey gri panel — üstte fiyat, altında düğme -------------------------------------------------------------------------------------------------- */ html.ks-ucus .ks-ana .sefer-card > .col-md-4, html.ks-ucus .ks-ana .sefer-card > .col-md-2 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; display: flex; align-items: center; padding: 12px 14px !important; border-top: 1px solid var(--ks-cizgi); background: var(--ks-yuzey); } /* Eski ucuslar.css'ten gelen beyaz kutu / çerçeve iptal */ html.ks-ucus .ks-ana .price-button, html.ks-ucus .ks-ana .bilet-fiyat-form { margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row { display: flex !important; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; height: auto !important; text-align: start !important; } /* Kalan koltuk uyarısı kendi satırında */ html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > .col-md-6, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row > .col-md-12 { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; padding: 0 !important; text-align: start !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > *:empty, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row > *:empty { display: none !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > .col, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row > .col { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; padding: 0 !important; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; } html.ks-ucus .ks-ana .price-button { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 !important; } html.ks-ucus .ks-ana .bilet-fiyat-form { flex: 0 0 auto; margin: 0; } html.ks-ucus .ks-ana .select-seat-btn { width: auto !important; min-width: 152px; } html.ks-ucus .ks-ana .btn-detay { margin: 0 !important; } @media (min-width: 768px) { html.ks-ucus .ks-ana .sefer-card > .col-md-4, html.ks-ucus .ks-ana .sefer-card > .col-md-2 { flex: 0 0 208px !important; width: 208px !important; max-width: 208px !important; padding: 14px 16px !important; border-top: 0; border-inline-start: 1px solid var(--ks-cizgi); background: var(--ks-yuzey-2); } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; text-align: center !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > .col-md-6, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row > .col-md-12, html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > .col, html.ks-ucus .ks-ana .sefer-card > .col-md-2 > .row > .col { flex: 0 0 auto !important; width: 100% !important; flex-direction: column; align-items: stretch; text-align: center !important; } html.ks-ucus .ks-ana .price-button { flex-direction: column; align-items: stretch; gap: 8px; } html.ks-ucus .ks-ana .bilet-fiyat-form { width: 100%; } html.ks-ucus .ks-ana .select-seat-btn { width: 100% !important; min-width: 0; } html.ks-ucus .ks-ana .btn-detay { margin-top: 7px !important; } } /* JS'in düğmeden ayırdığı fiyat yazısı */ html.ks-ucus .ks-ana .ks-kart__fiyat { text-align: start; } @media (min-width: 768px) { html.ks-ucus .ks-ana .ks-kart__fiyat { text-align: center; } } html.ks-ucus .ks-ana .ks-kart__fiyat b { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ks-ink); white-space: nowrap; } html.ks-ucus .ks-ana .sefer-card .row { margin-inline: 0 !important; } /* Sol bloğun içi: logo — bagaj — (kalan alan) saatler. Bootstrap kolon genişlikleri eziliyor ki saat/güzergâh alanı geniş kalsın. Yurt dışı gidiş-dönüşte araya giren .seperator (col-12) satırı böler. */ html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row { display: flex !important; flex-wrap: wrap; align-items: center; gap: 14px; } html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .logo-col, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .logo-col { flex: 0 0 124px !important; width: 124px !important; max-width: 124px !important; padding: 0 !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .col-md-3:not(.logo-col), html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .col-md-3:not(.logo-col) { flex: 0 0 138px !important; width: 138px !important; max-width: 138px !important; padding: 0 !important; text-align: start !important; } html.ks-ucus .ks-ana .luggage-info { max-width: 100%; white-space: normal; } html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .col-md-6, html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .col-md-5, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .col-md-6, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .col-md-5 { flex: 1 1 240px !important; width: auto !important; max-width: none !important; min-width: 0; padding: 0 0 0 6px !important; } html.ks-ucus .ks-ana .sefer-card .seperator { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; padding-block: 6px !important; } /* --- Hava yolu ve bagaj --- */ html.ks-ucus .ks-ana .firma-logo { width: auto; max-width: 116px; max-height: 40px; object-fit: contain; } html.ks-ucus .ks-ana .luggage-info { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--ks-cizgi); border-radius: var(--ks-hap); background: var(--ks-yuzey-2); color: var(--ks-ink-2); font-size: 11.5px; font-weight: 600; line-height: 1.5; } html.ks-ucus .ks-ana .luggage-info i { color: var(--ks-ink-3); } html.ks-ucus .ks-ana .luggage-info small { font-size: inherit; } /* --- Saatler ve güzergâh --- */ html.ks-ucus .ks-ana .time.row { display: grid !important; grid-template-columns: minmax(0, auto) minmax(48px, 1fr) minmax(0, auto); align-items: center; gap: 10px; width: 100%; } html.ks-ucus .ks-ana .time .left, html.ks-ucus .ks-ana .time .mid, html.ks-ucus .ks-ana .time .right { width: auto; max-width: none; flex: none; padding: 0 !important; min-width: 0; } html.ks-ucus .ks-ana .time .right { text-align: end; } html.ks-ucus .ks-ana .departure, html.ks-ucus .ks-ana .arrival { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--ks-ink); white-space: nowrap; } html.ks-ucus .ks-ana .flight-origin, html.ks-ucus .ks-ana .flight-arrival { margin-top: 2px; } html.ks-ucus .ks-ana .airport { font-size: 12.5px; font-weight: 600; color: var(--ks-ink-2); white-space: nowrap; } html.ks-ucus .ks-ana .time .mid { display: flex; flex-direction: column; align-items: center; gap: 5px; } html.ks-ucus .ks-ana .time .duration { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--ks-ink-2); white-space: nowrap; } /* Eski süslü ok yerine kesikli çizgi + iki uç noktası */ html.ks-ucus .ks-ana .animated-arrow { position: relative; display: block; width: 100%; height: 2px; margin: 0; border-radius: 2px; background: repeating-linear-gradient(to right, var(--ks-cizgi-2) 0 6px, transparent 6px 10px); transform: none; } html.ks-ucus .ks-ana .animated-arrow > * { display: none !important; } html.ks-ucus .ks-ana .animated-arrow::before, html.ks-ucus .ks-ana .animated-arrow::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; border: 2px solid var(--ks-brand); border-radius: 50%; background: var(--ks-yuzey); transform: translateY(-50%); } html.ks-ucus .ks-ana .animated-arrow::before { inset-inline-start: -1px; } html.ks-ucus .ks-ana .animated-arrow::after { inset-inline-end: -1px; } html.ks-ucus .ks-ana .transfers { padding: 2px 9px; border-radius: var(--ks-hap); font-size: 11px; font-weight: 700; white-space: nowrap; } html.ks-ucus .ks-ana .transfers.direct { background: var(--ks-yesil-soft); color: var(--ks-yesil); } html.ks-ucus .ks-ana .transfers.connecting { background: var(--ks-yuzey-2); border: 1px solid var(--ks-cizgi); color: var(--ks-ink-2); } /* Yurt dışı gidiş-dönüş: iki segment arasındaki çizgi */ html.ks-ucus .ks-ana .seperator hr { border-color: var(--ks-cizgi); opacity: 1; } /* --- Fiyat ve butonlar --- */ html.ks-ucus .ks-ana .seat-info strong { gap: 4px; font-size: 11px; font-weight: 700; color: #c2410c; white-space: nowrap; } html.ks-ucus .ks-ana .price-button { padding: 0 !important; } html.ks-ucus .ks-ana .select-seat-btn { position: static !important; /* eski css'te absolute olabiliyor, kart dışına kaçıyordu */ float: none !important; inset: auto !important; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0 !important; padding: 0 14px; border: 0; border-radius: var(--ks-r-sm); background: var(--ks-brand); color: #fff !important; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; text-align: center; text-decoration: none; text-transform: none; cursor: pointer; box-shadow: 0 2px 10px rgba(224, 27, 34, .22); transition: background var(--ks-hiz), box-shadow var(--ks-hiz); } html.ks-ucus .ks-ana .select-seat-btn:hover { background: var(--ks-brand-dark); box-shadow: 0 4px 16px rgba(224, 27, 34, .3); } html.ks-ucus .ks-ana .btn-detay { display: inline-block; margin-top: 7px; color: var(--ks-ink-2) !important; font-size: 12.5px; font-weight: 600; text-decoration: underline; } html.ks-ucus .ks-ana .btn-detay:hover { color: var(--ks-brand) !important; } /* --- "Gidiş bileti seçiniz" şeridi (kart değil, bilgi çubuğu) --- */ html.ks-ucus .ks-ana .selected-bilet-indicator { display: flex !important; align-items: center; justify-content: center; margin: 0 0 12px !important; padding: 12px 16px !important; background: var(--ks-brand-soft); border: 1px solid var(--ks-brand-ring); border-radius: var(--ks-r-md); box-shadow: none; color: var(--ks-brand); font-size: 14px; font-weight: 700; } html.ks-ucus .ks-ana .selected-bilet-indicator:hover { box-shadow: none; } /* --- Uçuş kartı: dar ekran --- */ @media (max-width: 767.98px) { html.ks-ucus .ks-ana .sefer-card { padding: 12px 14px !important; } html.ks-ucus .ks-ana .logo-col { text-align: start !important; } html.ks-ucus .ks-ana .firma-logo { max-height: 32px; } html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row { row-gap: 10px; } html.ks-ucus .ks-ana .departure, html.ks-ucus .ks-ana .arrival { font-size: 18px; } html.ks-ucus .ks-ana .select-seat-btn { min-height: 42px; font-size: 15px; } } /* ===================================================================================================== 6c — OTEL LİSTESİ SOL FİLTRE PANELİ (html.ks-otel) ----------------------------------------------------------------------------------------------------- filtre.php'ye DOKUNULMUYOR. kingstur-sonuc.js, otel filtresine .ks-filtreler / .ks-blok / .ks-sec / .ks-kutu / .ks-secenekler sınıflarını ekliyor; böylece YUKARIDAKİ 4. BÖLÜMÜN kuralları — yani uçak ve otobüsün kullandığı kuralların TAM AYNISI — otelde de geçerli. Burada sadece filtre.css'in ID'li (#filters_col ...) kurallarını devre dışı bırakan düzeltmeler var; ID seçici sınıf seçiciden güçlü olduğu için bunlar şart. ===================================================================================================== */ html.ks-otel #filters_col { padding: 0 !important; border: 1px solid var(--ks-cizgi) !important; border-radius: var(--ks-r-md) !important; background: var(--ks-yuzey) !important; box-shadow: var(--ks-sh-1) !important; overflow: hidden !important; } /* Panel başlığı ("Filtrele") */ html.ks-otel #filters_col_bt { display: flex !important; align-items: center; gap: 9px; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-bottom: 1px solid var(--ks-cizgi) !important; border-radius: 0 !important; background: none !important; color: var(--ks-ink) !important; font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-decoration: none !important; } html.ks-otel #filters_col_bt .fa-cog { color: var(--ks-brand); } html.ks-otel #filters_col_bt .collapse-arrow { right: 16px !important; font-size: 13px !important; color: var(--ks-ink-3) !important; } /* Bloklar — .ks-blok kuralları geçerli; sadece filtre.css artıklarını temizliyoruz */ html.ks-otel .filter_type { margin: 0 !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--ks-cizgi) !important; background: none !important; } html.ks-otel #collapseFilters > .filter_type:last-child { border-bottom: 0 !important; } html.ks-otel .filter_type > h6 { display: none !important; } html.ks-otel #filters_col .ks-blok--basliksiz > .secenekler { padding: 12px 16px !important; } /* Liste işaretleri: filtre.css'te "list-style: disc; padding-left: 22px" var. Bu kural hem sol kolonda hem de alttan açılan panelde geçerli olmalı — bloklar panele TAŞINDIĞI için #filters_col kapsamı orada iş görmez. */ html.ks-otel #filters_col ul, html.ks-otel .ks-blok ul, html.ks-otel .ks-secenekler, html.ks-otel .kt-sayfa__govde ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } html.ks-otel #filters_col li, html.ks-otel .ks-blok li, html.ks-otel .kt-sayfa__govde li { margin: 0 !important; padding: 0 !important; list-style: none !important; } html.ks-otel #filters_col li::marker, html.ks-otel .ks-blok li::marker, html.ks-otel .kt-sayfa__govde li::marker { content: none !important; } /* Onay kutusu satırı — DİKKAT: burada #filters_col kapsamı KULLANILMAZ. Mobilde bloklar #filters_col'dan alınıp alttaki panele TAŞINIYOR; ID kapsamlı bir kural orada geçersiz kalır ve filtre.css'in .container_check / .checkmark kuralları geri döner (20px kutu, absolute sayaç). filtre.css'te !important olmadığı için sınıf seçici + !important her iki yerde de kazanır. */ html.ks-otel .ks-sec { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 7px 6px !important; padding-right: 6px !important; margin: 0 !important; cursor: pointer; } html.ks-otel .ks-sec input { position: absolute !important; display: block !important; opacity: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important; pointer-events: none !important; } html.ks-otel .ks-kutu { position: relative !important; display: block !important; flex: 0 0 18px !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 18px !important; height: 18px !important; border: 1.5px solid var(--ks-cizgi-2) !important; border-radius: 5px !important; background: var(--ks-yuzey) !important; } html.ks-otel .ks-sec input:checked ~ .ks-kutu, html.ks-otel .container_check input:checked ~ .checkmark { border-color: var(--ks-brand) !important; background: var(--ks-brand) !important; } html.ks-otel .ks-kutu::after { content: "" !important; position: absolute !important; display: block !important; left: 5px !important; top: 1.5px !important; right: auto !important; bottom: auto !important; width: 5px !important; height: 10px !important; margin: 0 !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; border-radius: 0 !important; background: none !important; opacity: 0; transform: rotate(45deg) !important; } html.ks-otel .ks-sec input:checked ~ .ks-kutu::after { opacity: 1; } html.ks-otel .ks-sec__ad { flex: 1 1 auto !important; min-width: 0 !important; color: var(--ks-ink-2) !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.35 !important; } /* Sayaç: filtre.css'te position:absolute; right:0 — satır düzenini bozuyordu */ html.ks-otel .ks-sec__adet, html.ks-otel .ks-sec .count, html.ks-otel #filters_col .count { position: static !important; right: auto !important; left: auto !important; top: auto !important; flex: 0 0 auto !important; margin-inline-start: auto !important; color: var(--ks-ink-3) !important; font-size: 11.5px !important; font-weight: 600 !important; } html.ks-otel .custom-star-star { color: var(--ks-brand) !important; letter-spacing: 1px; } html.ks-otel .custom-star-star .fa-star { color: #d9d9e1; } html.ks-otel .custom-star-star .fa-star.voted { color: var(--ks-brand); } /* Sıralama kutusu */ html.ks-otel #siralama_bicimi { width: 100%; height: 40px !important; margin: 0; padding: 0 34px 0 12px !important; border: 1px solid var(--ks-cizgi-2) !important; border-radius: var(--ks-r-sm) !important; background-color: var(--ks-yuzey) !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2363656f'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 18px 18px !important; color: var(--ks-ink) !important; font-size: 13.5px !important; font-weight: 600; outline: none; -webkit-appearance: none; appearance: none; } html.ks-otel #siralama_bicimi:focus { border-color: var(--ks-brand) !important; box-shadow: 0 0 0 3px var(--ks-brand-soft); } /* Fiyat aralığı */ html.ks-otel #price-slider { margin: 6px 4px 14px; } html.ks-otel .noUi-connect { background: var(--ks-brand) !important; } html.ks-otel .noUi-handle { border-color: var(--ks-brand) !important; } html.ks-otel .form-floating > .form-control { height: 46px; border-radius: var(--ks-r-sm); border-color: var(--ks-cizgi-2); font-size: 13.5px; } html.ks-otel .form-floating > label { font-size: 12px; color: var(--ks-ink-3); } html.ks-otel .toggle-link { display: inline-block !important; position: static !important; margin-top: 8px; background: none !important; color: var(--ks-brand) !important; font-size: 12.5px; font-weight: 700; text-decoration: none; } html.ks-otel .toggle-link:hover { text-decoration: underline; } /* "Haritada göster" kartı da aynı kart diliyle */ html.ks-otel .kt-harita-kart { border: 1px solid var(--ks-cizgi) !important; border-radius: var(--ks-r-md) !important; box-shadow: var(--ks-sh-1) !important; } /* --- Otel: alttan açılan filtre panelinde blok başlığı (aç/kapa oku) görünmesin ------------------ Uçak ve otobüsteki panelde nasılsa burada da öyle: başlık gizli, içerik hep açık. */ html.ks-otel .kt-sayfa__govde .ks-blok__bas { display: none !important; } html.ks-otel .kt-sayfa__govde .ks-blok__ic, html.ks-otel .kt-sayfa__govde .filter_type > div, html.ks-otel .kt-sayfa__govde .filter_type > ul, html.ks-otel .kt-sayfa__govde .filter_type > a { display: block !important; padding-inline: 0 !important; } html.ks-otel .kt-sayfa__govde .filter_type > h6 { display: none !important; } html.ks-otel .kt-sayfa__govde .ks-secenekler { max-height: none !important; } html.ks-otel .kt-sayfa__govde .ks-sec { padding: 9px 2px !important; } /* ===================================================================================================== 6d — UÇUŞ KARTI MOBİL ÜST SATIRI (logo + hava yolu + fiyat) ----------------------------------------------------------------------------------------------------- .ks-ucus-ust öğesini ucuslar-filtre.php'deki kartUstleriKur() basıyor. Mobilde kart: [logo + firma ......... fiyat] / saatler / bagaj / [Detaylar Bileti Seç] ≥768px'te bu satır gizlenir, eski (onaylanan) masaüstü düzeni aynen kalır. ===================================================================================================== */ .ks-ucus-ust { order: -2; /* toplam süre satırından da önce gelsin */ flex: 0 0 100% !important; width: 100% !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px 0; } .ks-ucus-ust__firma { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } .ks-ucus-ust__logo { flex: 0 0 auto; width: auto; max-width: 58px; max-height: 22px; object-fit: contain; } .ks-ucus-ust__ad { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ks-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-ucus-ust__fiyat { flex: 0 0 auto; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--ks-ink); white-space: nowrap; } @media (max-width: 767.98px) { /* logo ve fiyat üst satıra taşındı; asıllarını gizle */ html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .logo-col, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .logo-col { display: none !important; } html.ks-ucus .ks-ana .ks-kart__fiyat { display: none !important; } html.ks-ucus .ks-ana .sefer-card > .col-md-8, html.ks-ucus .ks-ana .sefer-card > .col-md-10 { padding: 12px 14px !important; } /* bagaj rozeti kendi satırında, sola dayalı */ html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .col-md-3:not(.logo-col), html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .col-md-3:not(.logo-col) { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; order: 2; } html.ks-ucus .ks-ana .sefer-card > .col-md-8 > .row > .col-md-6, html.ks-ucus .ks-ana .sefer-card > .col-md-10 > .row > .col-md-5 { order: 1; } /* alt şerit: Detaylar solda, Bileti Seç sağda */ html.ks-ucus .ks-ana .price-button { justify-content: flex-end; flex: 0 0 auto; } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > .col { justify-content: space-between; } html.ks-ucus .ks-ana .sefer-card > .col-md-4 > .row > .col > div:not(.price-button) { order: -1; } } @media (min-width: 768px) { .ks-ucus-ust { display: none !important; } } /* ===================================================================================================== 6e — UÇUŞ PAKETİ SEÇME EKRANI (.bilet-modal) ----------------------------------------------------------------------------------------------------- Markup ucuslar-metotlar.php'deki renderBiletModal / renderSecenekFiyat çıktısı; DOKUNULMADI. ucuslar.css'teki eski kurallar !important kullandığı için buradaki düzen kuralları da !important ile yazıldı: yatay kaydırma, kart içi kaydırma çubukları ve kırpılan başlıklar tamamen sıfırlanıyor. Fiyatı düğmeden başlık satırına taşıyan kod: ucuslar-filtre.php -> paketleriDuzenle() ===================================================================================================== */ html.ks-ucus .bilet-modal .modal-dialog { max-width: 1080px !important; width: auto !important; } html.ks-ucus .bilet-modal .modal-content { border: 0 !important; border-radius: 20px !important; background: var(--ks-yuzey-2) !important; box-shadow: 0 30px 80px rgba(10, 14, 30, .28) !important; overflow: hidden !important; max-height: 90vh !important; } html.ks-ucus .bilet-modal .modal-header { position: relative !important; flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 16px 58px !important; border-bottom: 1px solid var(--ks-cizgi) !important; background: var(--ks-yuzey) !important; } html.ks-ucus .bilet-modal .modal-header > span { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--ks-ink) !important; text-align: center !important; } html.ks-ucus .bilet-modal .modal-header .close { position: absolute !important; inset-inline-end: 14px !important; top: 50% !important; transform: translateY(-50%) !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--ks-cizgi) !important; border-radius: 50% !important; background: var(--ks-yuzey) !important; color: var(--ks-ink) !important; font-size: 21px !important; line-height: 1 !important; opacity: 1 !important; cursor: pointer; } html.ks-ucus .bilet-modal .modal-header .close:hover { border-color: var(--ks-brand) !important; color: var(--ks-brand) !important; } html.ks-ucus .bilet-modal .modal-body { flex: 1 1 auto !important; padding: 18px !important; background: var(--ks-yuzey-2) !important; overflow-y: auto !important; overflow-x: hidden !important; max-height: none !important; } /* --- Sarmalayıcıları tamamen düzleştir (yatay kaydırma / sabit genişlik yok) --- */ html.ks-ucus .bilet-modal .modal-body > .fiyatlar, html.ks-ucus .bilet-modal .details, html.ks-ucus .bilet-modal .details.row, html.ks-ucus .bilet-modal .flights, html.ks-ucus .bilet-modal .flight { display: block !important; position: static !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; list-style: none !important; overflow: visible !important; flex: none !important; transform: none !important; } html.ks-ucus .bilet-modal .flys { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)) !important; align-items: stretch !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; overflow: visible !important; white-space: normal !important; transform: none !important; } html.ks-ucus .bilet-modal .ucret-container { display: block !important; position: static !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; flex: none !important; overflow: visible !important; transform: none !important; } html.ks-ucus .bilet-modal .fly-container { display: block !important; position: static !important; width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } /* --- Kart --- */ html.ks-ucus .bilet-modal .fly-content-container { position: static !important; display: flex !important; flex-direction: column !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--ks-cizgi) !important; border-radius: var(--ks-r-md) !important; background: var(--ks-yuzey) !important; box-shadow: var(--ks-sh-1) !important; overflow: hidden !important; transform: none !important; } /* --- Başlık: paket adı solda, fiyat sağda --- */ html.ks-ucus .bilet-modal .fly-title-container { position: static !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 14px 15px 12px !important; border: 0 !important; border-bottom: 1px solid var(--ks-cizgi) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } html.ks-ucus .bilet-modal .fly-title-container .title { position: static !important; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; /* satır içi renk iptal */ box-shadow: none !important; transform: none !important; } html.ks-ucus .bilet-modal .fly-title-container .name { display: block !important; font-size: 15.5px !important; font-weight: 800 !important; line-height: 1.3 !important; letter-spacing: -.01em; color: var(--ks-ink) !important; text-transform: none !important; white-space: normal !important; } html.ks-ucus .bilet-modal .ks-paket__fiyat { flex: 0 0 auto !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: -.02em; color: var(--ks-ink) !important; white-space: nowrap !important; } /* --- Özellikler: kart içi kaydırma yok --- */ html.ks-ucus .bilet-modal .content { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 9px !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 13px 15px !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; } html.ks-ucus .bilet-modal .content .option { display: flex !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--ks-ink-2) !important; white-space: normal !important; } html.ks-ucus .bilet-modal .content .option i, html.ks-ucus .bilet-modal .content .option svg, html.ks-ucus .bilet-modal .content .option img, html.ks-ucus .bilet-modal .content .option span:first-child:empty { flex: 0 0 auto !important; margin: 3px 0 0 !important; width: 15px !important; height: 15px !important; min-width: 15px !important; font-size: 13px !important; line-height: 1 !important; color: var(--ks-yesil) !important; fill: var(--ks-yesil) !important; } /* --- Fiyat / Seç --- */ html.ks-ucus .bilet-modal .price { position: static !important; flex: 0 0 auto !important; width: 100% !important; inset: auto !important; margin: 0 !important; padding: 0 15px 14px !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; } html.ks-ucus .bilet-modal .top-green-arrow-container { position: static !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; background-image: none !important; box-shadow: none !important; font-size: 11.5px !important; color: var(--ks-ink-3) !important; text-align: center !important; transform: none !important; } html.ks-ucus .bilet-modal .top-green-arrow-container::before, html.ks-ucus .bilet-modal .top-green-arrow-container::after { display: none !important; } html.ks-ucus .bilet-modal .top-green-arrow-container form { margin: 0 !important; padding: 0 !important; } html.ks-ucus .bilet-modal .bilet-ucret-btn { width: 100% !important; min-width: 0 !important; max-width: none !important; min-height: 46px !important; height: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-radius: var(--ks-r-sm) !important; background: var(--ks-navy) !important; background-image: none !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; letter-spacing: .01em; text-transform: none !important; cursor: pointer; box-shadow: 0 4px 14px rgba(23, 26, 82, .22) !important; } html.ks-ucus .bilet-modal .bilet-ucret-btn:hover { background: #0f1240 !important; } /* Seçili paket vurgusu */ html.ks-ucus .bilet-modal .ucret-container.selected .fly-content-container, html.ks-ucus .bilet-modal .fly-content-container.selected { border-color: var(--ks-navy) !important; box-shadow: 0 0 0 2px rgba(23, 26, 82, .18), var(--ks-sh-2) !important; } /* --- Mobil: alttan tam ekrana yakın sayfa, kartlar alt alta ve sade --- */ @media (max-width: 767.98px) { html.ks-ucus .bilet-modal .modal-dialog { max-width: none !important; width: 100% !important; margin: 0 !important; min-height: 100% !important; align-items: flex-end !important; } html.ks-ucus .bilet-modal .modal-content { border-radius: 20px 20px 0 0 !important; max-height: 94vh !important; } html.ks-ucus .bilet-modal .modal-header { padding: 15px 54px !important; } html.ks-ucus .bilet-modal .modal-header > span { font-size: 16px !important; } html.ks-ucus .bilet-modal .modal-body { padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important; } html.ks-ucus .bilet-modal .flys { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } html.ks-ucus .bilet-modal .fly-title-container { padding: 13px 14px 11px !important; } html.ks-ucus .bilet-modal .content { padding: 12px 14px !important; gap: 8px !important; } html.ks-ucus .bilet-modal .content .option { font-size: 12.5px !important; } html.ks-ucus .bilet-modal .price { padding: 0 14px 13px !important; } html.ks-ucus .bilet-modal .bilet-ucret-btn { min-height: 44px !important; font-size: 14.5px !important; } } /* ===================================================================================================== 6f — SONUÇ SAYFALARINDA MOBİL: ALT MENÜ GİZLİ, ÜSTTE GERİ TUŞU ===================================================================================================== */ @media (max-width: 991.98px) { html.ks-sonuc body nav.nav.containerss { display: none !important; } html.ks-sonuc body { padding-bottom: 0 !important; } } .kt-ust__geri { flex: 0 0 auto; width: 36px; height: 36px; display: none; align-items: center; justify-content: center; padding: 0; margin-inline-end: 2px; border: 0; border-radius: 50%; background: none; color: var(--ks-ink, #12131a); cursor: pointer; transition: background var(--ks-hiz); } .kt-ust__geri:active { background: #f0f2f8; } .kt-ust__geri svg { width: 22px; height: 22px; fill: currentColor; } html[dir="rtl"] .kt-ust__geri svg { transform: scaleX(-1); } @media (max-width: 991.98px) { html.ks-sonuc .kt-ust__geri { display: inline-flex; } } /* ===================================================================================================== 7 — MOBİL FİLTRE ÇUBUĞU VE ALTTAN AÇILAN PANEL ===================================================================================================== */ .ks-cubuk { display: none; gap: 8px; margin: 0 0 14px; padding: 2px 16px 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .ks-cubuk::-webkit-scrollbar { display: none; } /* Çip çubuğu, üstteki arama özeti şeridinin (.kt-ust) hemen altına yapışır. --ks-ust-h değerini kingstur-sonuc.js ölçüp yazıyor. */ @media (max-width: 991.98px) { html.ks-sonuc.ks-mobil .ks-cubuk { position: sticky; top: var(--ks-ust-h, 0px); z-index: 38; background: var(--ks-yuzey); border-bottom: 1px solid var(--ks-cizgi); box-shadow: 0 2px 10px rgba(16, 24, 64, .05); padding-block: 9px; } } .ks-cip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border: 1px solid var(--ks-cizgi-2); border-radius: var(--ks-hap); background: var(--ks-yuzey); color: var(--ks-ink); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; box-shadow: var(--ks-sh-1); transition: all var(--ks-hiz); } .ks-cip:hover { border-color: var(--ks-brand-ring); } .ks-cip.ks-secili { background: var(--ks-brand-soft); border-color: var(--ks-brand); color: var(--ks-brand); } .ks-cip svg { width: 14px; height: 14px; fill: currentColor; } .ks-cip__sayi { min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; border-radius: var(--ks-hap); background: var(--ks-brand); color: #fff; font-size: 10.5px; font-weight: 700; } .ks-cip__sayi[hidden] { display: none !important; } /* Alttan açılan panel */ .ks-panel[hidden] { display: none !important; } .ks-panel { position: fixed; inset: 0; z-index: 100060; } .ks-panel__perde { position: absolute; inset: 0; background: rgba(10, 14, 30, .45); opacity: 0; transition: opacity .24s ease; } .ks-panel.ks-acik .ks-panel__perde { opacity: 1; } .ks-panel__kutu { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; max-height: 78vh; background: var(--ks-yuzey); border-radius: 20px 20px 0 0; box-shadow: var(--ks-sh-3); transform: translateY(100%); transition: transform .26s cubic-bezier(.22, .61, .36, 1); } .ks-panel.ks-acik .ks-panel__kutu { transform: translateY(0); } .ks-panel__tut { flex: 0 0 auto; padding: 10px 0 4px; display: flex; justify-content: center; cursor: grab; touch-action: none; } .ks-panel__tut::before { content: ""; width: 44px; height: 4px; border-radius: 4px; background: var(--ks-cizgi-2); } .ks-panel__ust { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 18px 12px; border-bottom: 1px solid var(--ks-cizgi); } .ks-panel__baslik { margin: 0; font-size: 16px; font-weight: 800; color: var(--ks-ink); } .ks-panel__govde { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 18px 8px; } /* Panel içine taşınan bloklar kart görünümünü bırakır */ .ks-panel__govde .ks-blok { border-bottom: 0; } .ks-panel__govde .ks-blok__bas { display: none; } .ks-panel__govde .ks-blok__ic { display: block !important; padding: 8px 0 0; } .ks-panel__govde .ks-secenekler { max-height: none; } .ks-panel__alt { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ks-cizgi); background: var(--ks-yuzey); } .ks-dugme { flex: 1 1 auto; height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; border: 0; border-radius: var(--ks-r-sm); background: var(--ks-brand); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; } .ks-dugme:hover { background: var(--ks-brand-dark); } .ks-dugme--sade { flex: 0 0 auto; background: var(--ks-yuzey-2); border: 1px solid var(--ks-cizgi-2); color: var(--ks-ink); } .ks-dugme--sade:hover { background: var(--ks-cizgi); } body.ks-panel-acik { overflow: hidden; } /* ===================================================================================================== 8 — DUYARLI KIRILIMLAR ===================================================================================================== */ /* --- ≥768px: kart iki kolona geçer --------------------------------------------------------------- */ @media (min-width: 768px) { .ks-kart { grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "firma orta" "eylem eylem"; } .ks-kart__firma { grid-area: firma; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 16px 12px; border-inline-end: 1px solid var(--ks-cizgi); text-align: center; } .ks-kart__logo { width: 62px; height: 62px; } .ks-kart__logo--harf { font-size: 26px; } .ks-kart__firma-yazi { width: 100%; align-items: center; } .ks-kart__koltuk { align-self: center; } .ks-kart__firma-ad { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ks-kart__orta { grid-area: orta; padding: 16px 18px; } .ks-kart__eylem { grid-area: eylem; justify-content: flex-end; gap: 24px; } .ks-yol__saat { font-size: 22px; } } /* --- ≥992px: sol filtre + üç kolonlu kart -------------------------------------------------------- */ @media (min-width: 992px) { .ks-kart { grid-template-columns: 170px minmax(0, 1fr) 210px; grid-template-areas: "firma orta eylem"; align-items: stretch; } .ks-kart__eylem { grid-area: eylem; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 16px; border-top: 0; border-inline-start: 1px solid var(--ks-cizgi); } .ks-kart__fiyat { align-items: center; text-align: center; } html.ks-sonuc .ks-kart .select-seat-btn { width: 100%; min-width: 0; } .ks-kart__eylem { background: var(--ks-yuzey-2); } } /* --- <992px: sol kolon gizlenir, filtreler çubuk + panele iner ------------------------------------ */ @media (max-width: 991.98px) { .ks-duzen { grid-template-columns: minmax(0, 1fr); gap: 0; } .ks-yan { display: none; } html.ks-sonuc.ks-mobil .ks-cubuk { display: flex; } /* Çubuk kapsayıcının kenar boşluğunu taşıyıp kenardan kenara kaysın */ .ks-cubuk { margin-inline: -16px; } .ks-bar { padding: 11px 14px; } .ks-bar__sayi { font-size: 13.5px; } .ks-bar__sayi b { font-size: 15px; } .ks-sirala__etiket { display: none; } .ks-sirala select { height: 36px; font-size: 13px; } .ks-yon { width: 36px; height: 36px; } } /* --- <576px ---------------------------------------------------------------------------------------- */ @media (max-width: 575.98px) { .ks-kap { padding: 0 12px; } .ks-cubuk { margin-inline: -12px; padding-inline: 12px; } .ks-gunler { padding: 5px; gap: 4px; margin: 12px 0 14px; } .ks-gun { min-width: 78px; padding: 8px 8px; } .ks-gun__tarih { font-size: 13.5px; } .ks-gunler__ok { width: 30px; height: 30px; } .ks-kart__firma { padding: 12px 14px 0; } .ks-kart__orta { padding: 10px 14px 12px; } .ks-kart__eylem { padding: 11px 14px; } .ks-yol__saat { font-size: 18px; } .ks-yol__yer { font-size: 11.5px; } .ks-kart__fiyat b { font-size: 19px; } html.ks-sonuc .ks-kart .select-seat-btn { min-width: 128px; height: 42px; font-size: 13.5px; } .ks-bar { flex-wrap: nowrap; } .ks-bar__sayi { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* --- Hareket azaltma ------------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ks-sayfa *, .ks-panel * { transition-duration: .01ms !important; } }