/* ============================================================
Search Widget (MakeMyTrip-style)
Prefix: dc-sw- (dreamstour .banner-form, .form-item ile çakışmasın)
Ikonografi: isax-* (Bootstrap Icons kullanmıyoruz)
============================================================ */
.dc-sw-container {
position: relative;
width: 100%;
/* 🔴 `max-width: 1210px` KALDIRILDI. Motor kendi sarmalayicisindan (`.container`)
DAR kaliyordu ve sayfanin geri kalaniyla hizalanmiyordu. Olculdu (2026-08-28,
ana sayfa):
1440px -> motor 115..1325 (1210) · icerik 60..1380 (1320) = her yanda 55px
1280px -> motor 82..1198 · icerik 70..1210 = 12px
768px -> motor 36..732 · icerik 24..744 = 12px
⭐ Genisligi artik EBEVEYN belirler: header ve alttaki kartlar hangi `.container`
icindeyse motor da onunla ayni kenarlardan baslar/biter.
⚠️ Sonuc sayfasinda ayni kural gecerli; oradaki hizayi
`tools/liste-hizalama-dogrula.js` (51 vaka) olcuyor. */
margin: 0 auto;
}
/* Hero (non-compact) modunda floating tabs slogan'la çakışmasın diye üst boşluk —
tab'lar transform: translateY(-75%) ile container üstüne ~60px taşıyor,
slogan font-size clamp 2.5rem (~50px line-height) + buffer hesabı: 6rem güvenli. */
.dc-sw-container:not(.dc-sw-compact) {
/* OT.105: 6rem -> 3.25rem. Sekmeler `translateY(-75%)` ile karta biniyor;
gereken bosluk sekmelerin YUKSEKLIGININ dortte uctu, 96px degil. */
/* 🔴 OT.105 IKINCI TUR: 6rem -> 3.25rem -> 1.5rem.
Ilk indirimim REGRESYON URETTI: bu bosluk yuzen sekmelerin hero sloganini
ORTMEMESI icindi ve kullanici ortusmeyi bildirdi. Sekmeler artik KARTIN
ICINDE oldugu icin ortusme YAPISAL OLARAK imkansiz; kalan yalniz nefes payi. */
margin-top: 1.5rem;
}
/* ---------- Hero motor sarmalayicisi: HEADER ILE BIREBIR (Ot.105) ----------
🔴 OLCULDU: header'in menu seridi (div.header-nav) .main-header .container-fluid
icinde duruyor ve o kap GENIS EKRANDA 1320px'de TAVANLANIYOR:
VW 1440 -> container-fluid 60..1380 · header-nav 72..1368
VW 1301 -> container-fluid 0..1301 · header-nav 12..1289
VW 1200 -> header-nav 12..1188 · VW 768 -> header-nav 12..756
Motor ise Bootstrap .container tavanindaydi (1140 / 1320) ve hiza YALNIZ
1440'ta TESADUFEN tutuyordu:
VW 1301 -> kart 93..1209 (sol +81, sag -80) <- kullanicinin gordugu
VW 1200 -> kart 42..1158 (+30 / -30)
⭐ Header'in davranisi birebir uretiliyor: 1320 tavani + 12px dolgu. Boylece
motorun kenarlari HER genislikte logo ve menuyle ayni dikeyde basliyor/bitiyor.
⚠️ Sade "container-fluid" YETMEDI: o tavansizdir ve 1440'ta 12..1428 verip
header'dan 60px TASIYORDU (olculdu, bu yuzden tavan ACIKCA yaziliyor).
⛔ Yalniz HERO icin: sonuc sayfalarindaki motor .dc-sw-results-wrap icinde ve
orada zaten sayfa icerigiyle hizali (olculdu, Ot.101). */
.dc-sw-hero-wrap {
max-width: 1320px;
margin-left: auto;
margin-right: auto;
padding-left: 12px;
padding-right: 12px;
}
/* ---------- Floating Tabs ---------- */
/* 🔴 OT.105 — YUZEN KUTU KALDIRILDI, SERIT KARTIN ICINE ALINDI.
Eski hali DORT sikayeti birden uretiyordu ve dordu de OLCULDU:
· hero basligini ORTUYORDU (kullanici ekran goruntusuyle bildirdi)
· sol kenari kartla hizali DEGILDI (masaustu +24px, 768'de +143px)
· kendi radius'u 18px, kartinki 6px -> gozle gorulur uyumsuzluk
· yuzen kutu olarak GEREKSIZ YER kapliyordu
⭐ Akisa alininca dordu de KAYNAGINDA kapandi: ayri zemin/golge/radius YOK,
serit kartin kendi yuzeyinde ve kartin dolgusuyla hizali. */
.dc-sw-tabs {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 8px;
gap: 26px;
padding: 0 0 10px;
/* 🔴 OT.105/3 — TEK KENARLIK. Once serit ile satir ARASINDA 13px bosluk vardi ve
IKI AYRI cizgi goruluyordu (seridin alti + satirin ustu). Kullanici: "zaten bir
border var, alttaki inputlarin ust borderini kaldirip buradakini kullanirsak
iki border arasindaki boslugu da kaldirabiliriz."
⭐ Bosluk 0; satirin `border-top`u asagida KALDIRILIYOR. Ikisi TEK cizgi olur. */
margin: 0;
border-bottom: 1px solid #E5E7EB;
}
/* ⭐ OT.107 / backlog #12 — URUN SEKMELERI GIZLI (otel detayi).
Sekme dugmeleri basilmayinca serit BOS kalir; alt dolgusu (10px) gereksiz bir
bosluk uretir. Yalnizca O DOLGU sifirlanir.
⛔ `border-bottom` KALIR — `.dc-sw-row` bilerek `border-top: none` tasiyor ve ust
cizgisini buradan aliyor (asagidaki "TEK KENARLIK" notu). Kenarligi da kaldirmak
arama satirini USTSUZ birakirdi.
⚠️ Serit ICINDE trip secenekleri de var (OT.105/4). Bayrak bugun yalnizca otel
detayinda set ediliyor ve orada o secenekler zaten `data-sw-tab` ile gizli;
ucus sayfasinda kullanilirsa dolgu geri gerekebilir. */
.dc-sw-no-tabs .dc-sw-tabs {
padding-bottom: 0;
}
.dc-sw-tab {
background: none;
border: none;
/* OT.105: ikon USTTE (column) -> YAN YANA (row). Dikey dizilim seridi iki
kat uzun yapiyordu; kullanici "cok yer kapliyor" dedi. */
padding: 3px 2px;
display: flex;
flex-direction: row;
align-items: center;
gap: 7px;
cursor: pointer;
color: #9B9B9B;
font-size: 14px;
font-weight: 500;
position: relative;
min-width: 0;
white-space: nowrap;
transition: color 0.15s ease;
}
.dc-sw-tab i { font-size: 18px; line-height: 1; }
.dc-sw-tab:hover { color: color-mix(in srgb, var(--brand-primary) 70%, #fff); }
.dc-sw-tab.dc-sw-active { color: var(--brand-primary); font-weight: 600; }
.dc-sw-tab.dc-sw-active::after {
content: "";
position: absolute;
bottom: -10px; left: 0; right: 0;
height: 3px;
background: var(--brand-primary);
border-radius: 2px;
}
/* ---------- Search Card ---------- */
.dc-sw-card {
background: #fff;
border-radius: 6px;
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.12);
/* OT.105: 46/36 -> 32/20. Ust dolgu yuzen sekmelerin karta binmesi icindir
(`translateY(-75%)`), sifirlanamaz; olculdu ve 32px binmeyi tasiyor. */
/* OT.105 ikinci tur: ust dolgu ESKIDEN yuzen sekmelerin binme payiydi;
sekmeler ice alininca o gerekce kalkti ve dolgu her yandan esitlendi. */
padding: 18px;
position: relative;
}
.dc-sw-panel { display: none; }
.dc-sw-panel.dc-sw-active { display: block; }
/* ---------- Trip Row (radio + checkbox + book-link) ---------- */
/* 🔴 OT.105/4 — SEKME SATIRININ SAG UCU. Kendi seridi olmaktan cikti; ayri dolgu,
ayri kenarlik ve ayri satir YOK. `margin-left: auto` onu saga iter, boylece solda
urun sekmeleri / sagda ucus tipi durur ve iki kume ARALARINDAKI ~600px ile ayrisir.
⛔ Serit PAYLASILIR: yalnizca ucus sekmesi acikken gorunur (asagidaki kural). */
.dc-sw-trip-row {
display: flex;
align-items: center;
gap: 22px;
margin-left: auto;
padding: 0;
}
/* Ucus disi sekmelerde gizli. Tek kaynak: JS'in kaba yazdigi `data-sw-tab`. */
.dc-sw-container:not([data-sw-tab="flights"]) .dc-sw-trip-row { display: none; }
/* Dar ekranda sekmelerle ayni satira sigmaz -> kendi satirina iner (wrap zaten acik),
ve sola yaslanir; saga yasli yarim satir kotu gorunurdu. */
@media (max-width: 767.98px) {
.dc-sw-trip-row { margin-left: 0; flex-basis: 100%; }
}
.dc-sw-trip-options { display: flex; gap: 26px; }
.dc-sw-radio {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
/* OT.105/3: 15 -> 13px. Kullanici "Tek Yon, Gidis-Donus ve Direkt Ucus metinleri
tasarima gore biraz buyuk gorunuyor" dedi. */
font-size: 13px;
color: #4A4A4A;
user-select: none;
margin: 0;
}
.dc-sw-radio input { position: absolute; opacity: 0; pointer-events: none; }
.dc-sw-radio-circle {
width: 16px; height: 16px;
border: 2px solid #C4C4C4;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
transition: all 0.15s ease;
flex-shrink: 0;
position: relative;
}
/* İç tik — isax yerine pseudo-element ile cizildi (guaranteed render) */
.dc-sw-radio-circle::after {
content: "";
display: none;
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 2px;
}
.dc-sw-radio.dc-sw-checked .dc-sw-radio-circle { background: var(--brand-primary); border-color: var(--brand-primary); }
.dc-sw-radio.dc-sw-checked .dc-sw-radio-circle::after { display: block; }
.dc-sw-radio.dc-sw-checked .dc-sw-radio-label { color: #1A1A1A; font-weight: 700; }
.dc-sw-check {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
/* OT.105/3: 15 -> 13px. Kullanici "Tek Yon, Gidis-Donus ve Direkt Ucus metinleri
tasarima gore biraz buyuk gorunuyor" dedi. */
font-size: 13px;
color: #4A4A4A;
user-select: none;
margin: 0;
}
.dc-sw-check input { position: absolute; opacity: 0; pointer-events: none; }
.dc-sw-check-square {
width: 16px;
height: 20px;
border: 2px solid #C4C4C4;
border-radius: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #fff;
transition: all 0.15s ease;
flex-shrink: 0;
position: relative;
}
.dc-sw-check-square::after {
content: "";
display: none;
width: 6px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 2px;
}
.dc-sw-check.dc-sw-checked .dc-sw-check-square { background: var(--brand-primary); border-color: var(--brand-primary); }
.dc-sw-check.dc-sw-checked .dc-sw-check-square::after { display: block; }
.dc-sw-check.dc-sw-checked .dc-sw-radio-label { color: #1A1A1A; font-weight: 700; }
.dc-sw-book-link {
color: #1A1A1A;
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.dc-sw-book-link:hover { color: var(--brand-primary); }
/* ---------- Form Row (5 cols flight, 4 cols hotel) ---------- */
.dc-sw-row {
display: flex;
border: 1px solid #E5E7EB;
/* ⛔ UST KENARLIK YOK: sekme seridinin `border-bottom`u bu satirin ust cizgisidir.
Ikisi de kartin ic genisligini kapladigi icin kenarlar birebir ortusur. */
border-top: none;
border-radius: 0 0 4px 4px;
position: relative;
background: #fff;
align-items: stretch;
}
.dc-sw-col {
flex: 1;
/* OT.105: 16px 22px -> 10px 16px (kullanici: "cok bosluk var"). */
padding: 10px 16px;
border-right: 1px solid #E5E7EB;
cursor: pointer;
transition: background 0.15s ease, box-shadow 0.15s ease;
min-width: 0;
/* 🔴 OT.105/4: `column` -> `row wrap`. Etiket tam genislik alip kendi satirinda
kalir; DEGER ile ALT BILGI ayni satirda yan yana durur. Boylece havalimani adi /
gun adi / kabin sinifi geri gelir ama satir YUKSELMEZ.
⚠️ Acilir menuler `position: absolute` oldugu icin flex ogesi DEGILDIR,
bu degisiklikten etkilenmezler (olculdu). */
/* 🔴 OT.105/5 — FLEX WRAP YERINE GRID.
`row wrap` + `min-width: 0` YETMEDI: flex, sigmayan ogeyi hala ALT SATIRA
atiyor. OLCULDU (uzun ad "Esenboga International Airport"): deger ve alt bilgi
AYRI satirlara dustu, satir yuksekligi 66 -> 84px ve ARA dugmesi de onunla
birlikte buyudu (kullanici bildirdi).
⭐ Grid bunu YAPISAL OLARAK cozer: `grid-template-areas` deger ile alt bilgiyi
AYNI SATIRA baglar — sigmasa da ayrilamazlar. Alt bilgi kolonu
`minmax(0, 1fr)` oldugu icin kisalir ve tabandaki `text-overflow: ellipsis`
devreye girer.
⚠️ Acilir menuler `position: absolute` — grid akisina girmezler (olculdu). */
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"label label"
"value sub";
align-items: baseline;
align-content: start;
position: relative;
}
.dc-sw-col > .dc-sw-field-label { grid-area: label; }
.dc-sw-col > .dc-sw-field-value { grid-area: value; min-width: 0; max-width: 100%; }
.dc-sw-col > .dc-sw-field-sub { grid-area: sub; }
/* "Nereye" col swap button ile çakışmasın — swap absolute konumla "Nereden"/"Nereye"
sınırına oturduğundan sağ yarısı "Nereye" alanına taşıyor. Swap görünür olduğu
tüm breakpoint'lerde (>=576px, <576'da swap gizli) sol padding artırılır. */
@media (min-width: 576px) {
.dc-sw-flights-form .dc-sw-col[data-field="to"] {
padding-left: 48px;
}
}
/* Hotel formu oranları */
.dc-sw-hotels-form .dc-sw-col[data-field="hotel-city"] { flex: 2; }
.dc-sw-hotels-form .dc-sw-col[data-field="checkin"] { flex: 1; }
.dc-sw-hotels-form .dc-sw-col[data-field="checkout"] { flex: 1; }
/* OT.105/3: 1.5 -> 1.05. Kullanici "yolcu/sinif alanini sagdan sola daraltirsak ARA
butonunu PNR'daki SORGULA gibi uzatabiliriz" dedi. Kazanilan genislik dugmeye gider. */
.dc-sw-hotels-form .dc-sw-col[data-field="rooms-guests"] { flex: 1.05; }
.dc-sw-flights-form .dc-sw-col[data-field="travellers"] { flex: 0.85; }
.dc-sw-col:last-child { border-right: none; }
.dc-sw-col:hover { background: #F9FAFB; }
.dc-sw-col.dc-sw-active {
background: rgba(var(--bs-primary-rgb), 0.15);
}
.dc-sw-col.dc-sw-active .dc-sw-field-label,
.dc-sw-col.dc-sw-active .dc-sw-field-label i,
.dc-sw-col.dc-sw-active .dc-sw-field-value {
color: var(--brand-primary);
}
/* Invalid state — SEARCH/APPLY validation flag'i */
.dc-sw-col.dc-sw-invalid {
background: #FEF2F2;
box-shadow: inset 0 0 0 2px #EF4444;
animation: dc-sw-shake 0.3s ease;
}
.dc-sw-col.dc-sw-invalid .dc-sw-field-label,
.dc-sw-col.dc-sw-invalid .dc-sw-field-label i,
.dc-sw-col.dc-sw-invalid .dc-sw-field-value,
.dc-sw-col.dc-sw-invalid .dc-sw-field-sub,
.dc-sw-col.dc-sw-invalid .dc-sw-field-placeholder {
color: #B91C1C !important;
}
.dc-sw-col.dc-sw-invalid.dc-sw-active {
background: rgba(var(--bs-primary-rgb), 0.15);
box-shadow: inset 0 0 0 2px var(--brand-primary);
}
.dc-sw-child-age-select.dc-sw-invalid {
border-color: #EF4444;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
@keyframes dc-sw-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* Return clear button (× - round trip'ten one way'e dön) */
.dc-sw-clear-return {
display: none;
align-items: center;
justify-content: center;
background: #D1D5DB;
border: none;
border-radius: 50%;
width: 18px;
height: 18px;
color: #4A4A4A;
cursor: pointer;
margin-left: 4px;
font-size: 11px;
padding: 0;
line-height: 1;
transition: all 0.15s;
}
.dc-sw-clear-return:hover { background: #9CA3AF; color: #fff; }
.dc-sw-col[data-field="return"].dc-sw-show-clear .dc-sw-clear-return {
display: inline-flex;
}
/* ⭐ TEK YON secilyken "Donus" alani PASIF gorunur.
🔴 Olculdu (2026-08-28): tek yon seciliyken alan TAM OPAK duruyordu; ekranda
secim durumunun hicbir izi yoktu.
⛔ GIZLENMEZ ve DEVRE DISI BIRAKILMAZ: alana tiklamak zaten gidis-donuse gecirir
(`search-widget.js`, olculdu) ve bu kesif yolu KORUNMALIDIR. Yalnizca
"su an kullanilmiyor" bilgisi gorsellestirilir.
⛔ Solukluk KOLONA degil ICERIGE uygulanir: kolonun kendisi soluklasirsa
ayrac cizgisi ve zemin de soluklasir, satir bozuk gorunur. */
.dc-sw-col[data-field="return"].dc-sw-passive .dc-sw-field-label,
.dc-sw-col[data-field="return"].dc-sw-passive .dc-sw-field-value,
.dc-sw-col[data-field="return"].dc-sw-passive .dc-sw-field-placeholder,
.dc-sw-col[data-field="return"].dc-sw-passive .dc-sw-field-sub {
opacity: 0.55;
transition: opacity 0.15s ease;
}
/* Fare/klavye ile yaklasinca tam gorunur olur — tiklanabilir oldugu belli olsun. */
.dc-sw-col[data-field="return"].dc-sw-passive:hover .dc-sw-field-label,
.dc-sw-col[data-field="return"].dc-sw-passive:hover .dc-sw-field-value,
.dc-sw-col[data-field="return"].dc-sw-passive:hover .dc-sw-field-placeholder,
.dc-sw-col[data-field="return"].dc-sw-passive:focus-within .dc-sw-field-label,
.dc-sw-col[data-field="return"].dc-sw-passive:focus-within .dc-sw-field-value,
.dc-sw-col[data-field="return"].dc-sw-passive:focus-within .dc-sw-field-placeholder {
opacity: 1;
}
.dc-sw-field-label {
font-size: 12px;
color: #6B7280;
margin-bottom: 3px;
font-weight: 400;
display: flex;
align-items: center;
gap: 4px;
}
.dc-sw-field-label i { font-size: 12px; color: #6B7280; line-height: 1; }
/* 🔴 OT.105 — YUKSEKLIK DUSURULDU (kullanici: "cok bosluk var, gereksiz fazla
yukseklik olusuyor"). OLCULDU (390px, ana sayfa, once): kolon 142px ve kartin
tamami 640px; ARA dugmesi 844px'lik telefon ekraninin 66px ALTINDA kaliyordu.
Kolon yuksekliginin dokumu: etiket 13+8 · deger 36+6 · alt yuva 39 · dolgu 32.
⚠️ `margin-bottom` ile `.dc-sw-field-placeholder`in `margin-top`u ESIT KALMALI:
dolu durumda ust bosluk buradan, bos durumda oradan gelir; ayrisirlarsa alan
doldurulunca satir tam FARK kadar kisalir (Ot.101'de olculmus 4px kusuru). */
.dc-sw-field-value {
font-size: 20px;
font-weight: 700;
color: #000;
line-height: 1.15;
margin-bottom: 4px;
min-height: 24px; /* empty state'te col yüksekliği bozulmasın */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Empty value: SW_X lokalize metin büyük ama yumuşak renk — placeholder hissi korunur */
/* --- PNR alanlari -------------------------------------------------------
Gorunum `.dc-sw-field-value` ile AYNI olmali (ayni satirda yan yana duruyorlar),
ama oge bir INPUT: tarayici varsayilanlari (kenarlik, zemin, ic bosluk, yazi tipi)
ACIKCA sifirlanir; yoksa PNR sekmesi digerlerinden farkli gorunur. */
.dc-sw-pnr-input {
font-size: 20px;
font-weight: 700;
color: #000;
line-height: 1.15;
min-height: 24px;
width: 100%;
border: 0;
outline: 0;
padding: 0;
background: transparent;
font-family: inherit;
text-overflow: ellipsis;
}
.dc-sw-pnr-input::placeholder { color: #9CA3AF; font-weight: 600; }
/* Klavyeyle gezen kullanici odagi GORMELI (kenarlik yok, gorsel isaret sart). */
.dc-sw-pnr-input:focus-visible { box-shadow: 0 2px 0 0 currentColor; }
.dc-sw-field-value.dc-sw-empty {
margin-bottom: 0;
color: #9CA3AF;
font-weight: 600;
}
/* --- Alan icine dogrudan yazma (Faz-4e) ---------------------------------
Menu icindeki ARAMA KUTUSU kaldirildi; yazilabilir tek yuzey ALANIN
KENDISI. Eleman bilerek DIV kaldi (INPUT'a cevrilmedi): site.js'in
`smartSearch` secicileri `input[...]` ile basladigi icin ayni alana
IKINCI bir autocomplete baglanmasi boylece YAPISAL OLARAK imkansiz.
Bos-durum etiketi artik metin dugumu DEGIL ::before -- kullanicinin
yazmaya baslamadan once SILMESI gereken gercek bir metin kalmiyor. */
.dc-sw-field-value[data-sw-editable] {
cursor: text;
outline: none;
caret-color: var(--brand-primary);
}
.dc-sw-field-value[data-sw-editable].dc-sw-empty::before {
content: attr(data-empty-text);
pointer-events: none;
}
/* Odakta uzun metin: `overflow:hidden` + `ellipsis` ikilisi imleci kirpiyordu.
Kaydirma acilir, kaydirma CUBUGU gizlenir (32px'lik kutuda cubuk sigmaz). */
.dc-sw-field-value[data-sw-editable]:focus {
overflow-x: auto;
text-overflow: clip;
scrollbar-width: none;
}
.dc-sw-field-value[data-sw-editable]:focus::-webkit-scrollbar { display: none; }
.dc-sw-field-value span {
font-size: 13px;
font-weight: 500;
color: #4A4A4A;
margin-left: 2px;
}
.dc-sw-date-value { font-size: 20px; }
.dc-sw-date-value.dc-sw-empty { margin-bottom: 0; }
.dc-sw-field-sub {
font-size: 11px;
color: #6B7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Yer tutucuyla AYNI yuva — ayni sabit yuksekligi paylasir (yukaridaki not).
⚠️ OT.105: 39 -> 30. Sayi keyfi DEGIL, hala IKI SATIRLIK rezerv: 11px x 1.35 x 2.
Tek satira dusurulemez — olculdu (1440, ucus): "Donus tarihi ekle — daha iyi
indirimler icin" yer tutucusu 167px'lik kolonda IKI SATIRA sariyor ve rezerv
tek satira inerse Ot.101'de kapatilan "alan dolunca kart kisaliyor" kusuru
geri gelir. Yalnizca YAZI BOYU kucultuldu, SATIR SAYISI degil. */
min-height: 30px;
}
.dc-sw-hidden { display: none !important; }
/* 🔴 OT.105/3 — ALANLARIN ALTINDAKI BELIRTICI METINLER KALDIRILDI.
Kullanici: "inputlarin altindaki havalimani adi, sehir veya havalimani girin, sali
vs gibi belirtici metinleri kaldirirsak inputlarin yuksekliklerini azaltabiliriz."
OLCULDU: yuva (sub + placeholder) her kolonda 30px yer kapliyordu ve kolon
yuksekliginin ~%30'uydu.
⚠️ BEDELI ACIKCA KABUL EDILDI — bu satirlar bilgi tasiyordu:
· havalimani ADI (Ot.101'de kullanici karariyla eklenmisti: "buyuk yazi = IATA
kodu, alt satir = havalimani adi") -> artik yalniz kod gorunur
· tarihin GUN ADI ("Sali", "Cuma")
· ucusta KABIN SINIFI ("Ekonomi") -> motorda artik gorunmuyor
⭐ Yan etki: Ot.101'in "bos/dolu ayni yukseklik" degismezi (deger `margin-bottom`
ile yer tutucu `margin-top` ESIT olmali) artik KENDILIGINDEN saglanir; yuva
olmadigi icin kisalacak bir sey yok. Kurallar yine de YERINDE birakildi:
yuva geri acilirsa degismez de geri gelsin. */
/* ⭐ OT.105/4 — ALT SATIR GERI GELDI, AMA ARTIK DEGERIN YANINDA (kullanici onayi).
Once tamamen gizlemistim ve UC bilgi kaybolmustu: havalimani ADI (Ot.101'de
kullanici karariyla eklenmisti), tarihin GUN ADI, ucusta KABIN SINIFI.
⭐ Kolon `row wrap` yapilinca etiket kendi satirini alir, deger ile alt bilgi
AYNI satirda yan yana durur -> bilgi geri gelir, YUKSEKLIK ARTMAZ.
⛔ Yer tutucu ("Sehir, otel veya bolge arayin") GIZLI KALIR: o bir ipucu metniydi,
degerin yaninda tekrar etmesi anlamsiz olurdu. */
.dc-sw-field-placeholder { display: none; }
.dc-sw-field-sub {
display: block;
/* 🔴 OT.105/4: SATIR ICI oldugu icin tiklamayi YUTUYORDU — uzerine tiklayinca odak
BODY'ye gidiyor ve tus hic islenmiyordu (olculdu). Alt bilgi salt GORUNTUDUR,
tiklamayi kolona gecirir. */
pointer-events: none;
min-height: 0;
font-size: 12px;
margin-left: 7px;
/* 🔴 OT.105/5 — UZUN AD ALT SATIRA GECIYORDU (kullanici: "Esenboga International
Airport" gibi uzun adlarda input yukseklik kazaniyor, ARA butonu asiri buyuyor).
⛔ Sebep METIN sarmasi DEGIL: kolon `row wrap` oldugu icin alt bilgi bir FLEX
OGESI ve sigmayinca ALT SATIRA dusuyordu; `white-space: nowrap` bunu onlemez.
⭐ `min-width: 0` + `flex: 0 1 auto` -> oge min-content'in ALTINA kisalabilir,
boylece satirda kalir ve tabandaki `text-overflow: ellipsis` devreye girer.
⚠️ Deger (IATA kodu) BILEREK kisalmaz (`flex: 0 0 auto`): kisalirsa kullanici
hangi havalimanini sectigini KAYBEDER; kisalmasi gereken aciklayici metindir. */
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
/* Yuva gidince degerin alt bosluguna da gerek kalmadi. */
.dc-sw-field-value { margin-bottom: 0; }
.dc-sw-field-placeholder {
font-size: 11px;
color: #9CA3AF;
/* ⛔ Deger `.dc-sw-field-value`in `margin-bottom`u ile ESIT OLMAK ZORUNDA:
dolu durumda ust bosluk oradan gelir, bos durumda ise `.dc-sw-empty` o
margin'i SIFIRLAR ve bosluk buradan gelir. Iki deger esit degilse kolon
dolduruldugunda tam ARADAKI FARK kadar kisalir — olculdu: 4px (Ot.101).
⚠️ OT.105: ikisi birden 6 -> 4 tasindi; ESITLIK korundu. */
margin-top: 4px;
line-height: 1.35;
white-space: normal;
/* 🔴 ALAN DOLDURULUNCA SATIR KISALIYORDU. Bos durumda burada YER TUTUCU (uzun
metin, 1440px'te IKI SATIR), dolu durumda ALT SATIR (tek satir) duruyor;
ikisi ayni yuvayi paylastigi icin kolon yuksekligi degisiyordu.
Olculdu (1440, ucus): bos kolonlar 145px — hepsi ona gore geriliyordu;
"Nereye" doldurulunca 125px'e dusuyor, yani kart kullanicinin gozunun
onunde ~20px kisaliyordu.
⭐ Cozum: yuvaya IKI SATIRLIK sabit yer ayrilir; boylece bos/dolu ve
kisa/uzun metin AYNI yuksekligi uretir. (Ot.105: 11px x 1.35 x 2 = 30px;
eskiden 13px x 1.5 x 2 = 39px. Satir sayisi DEGISMEDI, yalniz yazi boyu.)
⛔ `.dc-sw-field-sub` ile AYNI deger olmak zorunda — ayni yuvayi paylasiyorlar. */
min-height: 30px;
}
/* ---------- Swap Button ---------- */
.dc-sw-swap {
/* 🔴 ESKIDEN `position:absolute; left:20%; top:50%`. Yuzde bir TAHMINDIR ve
kolonlar esit olmadigi icin HICBIR kirilimda dogru degildi. Olculdu (2026-08-28):
1440px: ayrac x=334 (%16.75) · ok merkezi x=372 -> YATAY SAPMA +38px
768px: yatay sapma 0 ama satir sarildigi icin -> DIKEY SAPMA -93px
⭐ Dugme DOM'da zaten "Nereden" ile "Nereye" ARASINDA duruyor; akisa alinca
ayracin TAM uzerine oturur — genislikler ne olursa olsun, her kirilimda.
⛔ `margin: 0 -18px` ile net genislik SIFIR: kolon genisliklerini DEGISTIRMEZ,
dolayisiyla sarma (wrap) noktalari da kaymaz. */
position: relative;
align-self: center;
flex: 0 0 36px;
margin: 0 -18px;
width: 36px;
height: 36px;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 3;
color: #4A4A4A;
transition: all 0.15s ease;
font-size: 14px;
padding: 0;
}
.dc-sw-swap:hover {
color: var(--brand-primary);
border-color: var(--brand-primary);
box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb),0.1);
}
.dc-sw-swap i { line-height: 1; }
/* ---------- SEARCH Submit ---------- */
/* 🔴 OT.105 — MUTLAK KONUM KALDIRILDI, DUGME SATIRIN SON HUCRESI OLDU.
Eskiden `.dc-sw-container`in dogrudan cocuguydu ve `position:absolute` ile
konumlaniyordu. Satirin YUKSEKLIGI panele gore degistigi icin (ucusta trip-row
var, otelde yok) dugme satirla ASLA tam hizalanamiyordu — OLCULDU: satir
310..411 iken dugme 364..411, yani 101px'lik satirin ALT 47px'i.
Kullanici: "bu ara butonu sag alt yasli olmamali".
⭐ Flex ogesi olunca satirin `align-items: stretch` degeri onu her kirilimde ve
her panelde satir yuksekligine tasiyor — SIHIRLI SAYI YOK.
⚠️ Satirin `border-radius: 4px` degeri var ama `overflow:hidden` YAZILAMAZ:
acilir menuler satirin icinden tasarak aciliyor, kirpilirlardi. Bu yuzden
dugmenin SAG koseleri elle yuvarlaniyor. */
.dc-sw-submit {
flex: 0 0 auto;
align-self: stretch;
/* OT.105/3: 118 -> 156. PNR panelinde iki kolon oldugu icin SORGULA zaten genisti;
ARA da ayni agirliga getirildi (kazanc yolcu/oda kolonundan alindi). */
/* OT.105/4: 156 -> 190px, font 15 -> 17px (kullanici istegi).
⛔ `flex: 0 0 auto` ile SABIT durur ve genisligi digerlerinden ALIR; ama dar
ekranda alanlari ezmemesi icin asagida (<=1200) `flex-shrink` aciliyor. */
min-width: 190px;
padding: 0 26px;
/* ⭐ Ot.106 (kullanici istegi): GRADIENT KALDIRILDI — "dogrudan renk ve beyaz iskelet".
Eskiden IKI katmanli gradient vardi: ustte beyaz parlama, altta markanin acik
tonundan koyu tonuna gecis. Ikisi de kalkti; artik DUZ marka rengi.
⛔ `--brand-primary` KIRACIYA GORE degisir ve bu satir onu AYNEN kullanir; sabit
bir renk yazmak dort kiracinin markasini bozardi. */
background: var(--brand-primary);
color: #fff;
/* OT.105/5: kullanici "harflerin arasi biraz acik olsun, fontu biraz daha
buyutelim" dedi. 17 -> 19px, harf araligi 0.8 -> 1.8px.
⚠️ En uzun etiket "SORGULA" (8 harf): 19px + 1.8px aralik ~ 130px + 52px dolgu
= ~182px, dugmenin 190px alt siniri altinda kalir; kirpilma YOK. */
font-size: 19px;
font-weight: 700;
letter-spacing: 1.8px;
border: none;
border-radius: 0 0 3px 0; /* satirin ust kenarligi kalkti: yalniz SAG ALT kose */
cursor: pointer;
/* ⛔ `inset ... rgba(255,255,255,.3)` de KALKTI: o beyaz ic cizgi gradientin parlama
katmaninin kardesiydi ve duz renk uzerinde yine parlak bir kabartma birakiyordu.
Dis golge (derinlik) korundu — gradient degil. */
box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
z-index: 3;
}
.dc-sw-submit:hover {
filter: brightness(1.06);
box-shadow: 0 6px 14px rgba(var(--bs-primary-rgb),0.34);
}
.dc-sw-submit:active { filter: brightness(0.98); }
/* ============================================================
Dropdown Panels (ortak base)
============================================================ */
.dc-sw-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 0;
min-width: 100%;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
z-index: 10;
cursor: default;
animation: dc-sw-dropdown-in 0.15s ease;
}
.dc-sw-dropdown.dc-sw-open { display: block; }
@keyframes dc-sw-dropdown-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- City Dropdown ---------- */
.dc-sw-city-dd {
width: 420px;
max-width: 90vw;
padding: 16px;
}
/* ⛔ Menu ici arama kutusunun ve "Populer Sehirler" basliginin bicimleri
KALDIRILDI (Faz-4e): ureticileri silindi. Olu olduklari IKI KEZ olculdu —
depo genelinde 0 tuketici (yalniz tanimlari vardi) VE calisan sayfada
`.dc-sw-city-dd input` = 0, `.dc-sw-section-label` = 0 dugum. */
.dc-sw-city-list {
max-height: 320px;
overflow-y: auto;
}
.dc-sw-city-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 10px;
border-radius: 6px;
cursor: pointer;
transition: background 0.1s;
}
.dc-sw-city-item:hover, .dc-sw-city-item.dc-sw-active { background: rgba(var(--bs-primary-rgb), 0.10); }
.dc-sw-iata {
font-size: 13px;
font-weight: 700;
background: #F3F4F6;
padding: 4px 8px;
border-radius: 4px;
color: #4A4A4A;
min-width: 44px;
text-align: center;
}
.dc-sw-city-icon {
flex-shrink: 0;
width: 30px;
font-size: 18px;
color: var(--brand-primary);
text-align: center;
line-height: 1;
}
.dc-sw-city-name {
font-size: 15px;
font-weight: 600;
color: #1A1A1A;
line-height: 1.2;
}
.dc-sw-city-country {
font-size: 12px;
color: #6B7280;
margin-top: 2px;
}
.dc-sw-city-text { flex: 1; min-width: 0; }
.dc-sw-city-name, .dc-sw-city-country {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-sw-no-results { padding: 20px; text-align: center; color: #9CA3AF; font-size: 14px; }
.dc-sw-loading { padding: 16px; text-align: center; color: #9CA3AF; font-size: 13px; }
/* ---------- Calendar Popup (shared) ---------- */
.dc-sw-cal-popup {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: 620px;
max-width: calc(100vw - 40px);
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
z-index: 10;
display: none;
animation: dc-sw-dropdown-in 0.15s ease;
cursor: default;
padding: 0;
}
.dc-sw-cal-popup.dc-sw-open { display: block; }
.dc-sw-cal-tabs {
display: flex;
align-items: center;
gap: 16px;
padding: 14px 20px;
border-bottom: 1px solid #E5E7EB;
}
.dc-sw-cal-tab {
background: none;
border: none;
padding: 6px 2px;
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
color: #1A1A1A;
font-size: 15px;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: all 0.15s ease;
line-height: 1.2;
}
.dc-sw-cal-tab:hover { color: var(--brand-primary); }
.dc-sw-cal-tab.dc-sw-active {
color: var(--brand-primary);
border-bottom-color: var(--brand-primary);
}
.dc-sw-cal-tab i { font-size: 16px; color: currentColor; line-height: 1; }
.dc-sw-cal-tab-date { line-height: 1.2; }
.dc-sw-cal-tab-date.dc-sw-empty { color: #9CA3AF; font-weight: 400; }
.dc-sw-cal-sep { color: #9CA3AF; font-size: 16px; user-select: none; }
.dc-sw-cal-body { padding: 20px; position: relative; }
/* ⭐ OT.105/4 — TAKVIM KAPATMA DUGMESI (yalniz telefon).
Kullanici: "responsive de tarih inputlari acildiginda bir kapanis butonu koyalim,
takvimi acan kapatabilsin."
⛔ >=576px'te GIZLI: masaustunde takvim akista aciliyor ve dis-tiklama alani genis;
orada ikinci bir kapatma yolu gorsel gurultu olurdu. Telefonda ise takvim ekrana
SABITLENMIS alt sayfa (Ot.105/3) ve disina tiklanacak yer neredeyse yok. */
.dc-sw-cal-close {
display: none;
background: none;
border: none;
color: #6B7280;
font-size: 26px;
line-height: 1;
padding: 0 4px;
margin-left: 10px;
cursor: pointer;
/* Dokunma hedefi: 44px kurali */
min-width: 44px;
min-height: 44px;
}
@media (max-width: 575.98px) {
.dc-sw-cal-close { display: inline-flex; align-items: center; justify-content: center; }
}
.dc-sw-cal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.dc-sw-cal-nav {
background: none;
border: none;
padding: 6px 10px;
color: var(--brand-primary);
cursor: pointer;
font-size: 18px;
transition: color 0.15s;
line-height: 1;
}
.dc-sw-cal-nav:hover { color: color-mix(in srgb, var(--brand-primary) 82%, #000); }
.dc-sw-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.dc-sw-cal-nav i { line-height: 1; }
.dc-sw-cal-months {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.dc-sw-cal-month-title {
text-align: center;
font-size: 14px;
font-weight: 700;
color: #1A1A1A;
margin-bottom: 10px;
}
.dc-sw-cal-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 4px;
}
.dc-sw-cal-weekdays span {
text-align: center;
font-size: 11px;
color: #9CA3AF;
font-weight: 600;
padding: 4px 0;
}
.dc-sw-cal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.dc-sw-cal-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
cursor: pointer;
border-radius: 6px;
color: #1A1A1A;
transition: all 0.1s;
user-select: none;
}
.dc-sw-cal-day:hover:not(.dc-sw-disabled):not(.dc-sw-empty) {
background: rgba(var(--bs-primary-rgb), 0.10);
color: var(--brand-primary);
}
.dc-sw-cal-day.dc-sw-disabled {
color: #D1D5DB;
cursor: not-allowed;
}
.dc-sw-cal-day.dc-sw-empty { cursor: default; }
.dc-sw-cal-day.dc-sw-selected {
background: var(--brand-primary);
color: #fff;
font-weight: 700;
border-radius: 2px;
}
.dc-sw-cal-day.dc-sw-today {
border: 1px solid var(--brand-primary);
font-weight: 600;
}
.dc-sw-cal-day.dc-sw-in-range {
background: rgba(var(--bs-primary-rgb),0.12);
color: #1A1A1A;
border-radius: 0;
}
.dc-sw-cal-day.dc-sw-in-range:hover {
background: rgba(var(--bs-primary-rgb),0.22);
color: var(--brand-primary);
}
.dc-sw-cal-day.dc-sw-selected.dc-sw-range-start:not(.dc-sw-range-end) {
border-radius: 2px 0 0 2px;
}
.dc-sw-cal-day.dc-sw-selected.dc-sw-range-end:not(.dc-sw-range-start) {
border-radius: 0 2px 2px 0;
}
.dc-sw-cal-day.dc-sw-selected.dc-sw-range-start.dc-sw-range-end {
border-radius: 2px;
}
/* ---------- Travellers Dropdown ---------- */
.dc-sw-trav-dd {
width: 360px;
max-width: 90vw;
padding: 20px;
right: 0; left: auto;
}
.dc-sw-tr-section {
font-size: 11px;
color: #9CA3AF;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
margin-bottom: 10px;
}
.dc-sw-tr-counter {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.dc-sw-tr-info {
display: flex;
flex-direction: column;
}
.dc-sw-tr-title {
font-size: 15px;
font-weight: 600;
color: #1A1A1A;
}
.dc-sw-tr-hint {
font-size: 12px;
color: #6B7280;
margin-top: 2px;
}
.dc-sw-tr-ctrls {
display: inline-flex;
align-items: center;
border: 1px solid #D1D5DB;
border-radius: 24px;
padding: 2px 4px;
background: #fff;
flex-shrink: 0;
}
.dc-sw-tr-btn {
width: 28px; height: 28px;
border: none;
background: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #4A4A4A;
font-size: 16px;
padding: 0;
line-height: 1;
transition: all 0.15s ease;
}
.dc-sw-tr-btn:hover:not(:disabled) {
background: rgba(var(--bs-primary-rgb), 0.10);
color: var(--brand-primary);
}
.dc-sw-tr-btn:disabled { opacity: 0.3; cursor: not-allowed; color: #9CA3AF; }
.dc-sw-tr-value { font-size: 15px; font-weight: 700; min-width: 26px; text-align: center; color: #1A1A1A; }
.dc-sw-tr-divider {
height: 1px;
background: #E5E7EB;
margin: 14px 0;
}
.dc-sw-tr-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.dc-sw-tr-pill {
padding: 8px 14px;
border: 1px solid #D1D5DB;
border-radius: 20px;
background: #fff;
font-size: 13px;
color: #4A4A4A;
cursor: pointer;
transition: all 0.15s;
}
.dc-sw-tr-pill:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.dc-sw-tr-pill.dc-sw-active {
background: rgba(var(--bs-primary-rgb), 0.10);
border-color: var(--brand-primary);
color: var(--brand-primary);
font-weight: 600;
}
.dc-sw-tr-done {
width: 100%;
margin-top: 18px;
padding: 12px;
background: var(--brand-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
letter-spacing: 0.5px;
transition: background 0.15s;
}
.dc-sw-tr-done:hover { background: color-mix(in srgb, var(--brand-primary) 82%, #000); }
/* ---------- Rooms & Guests Dropdown ---------- */
.dc-sw-rg-dd {
width: 400px;
max-width: 90vw;
padding: 20px;
right: 0;
left: auto;
}
.dc-sw-rg-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
gap: 12px;
}
.dc-sw-rg-info {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
}
.dc-sw-rg-label {
font-size: 16px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.2;
}
.dc-sw-rg-hint {
font-size: 12px;
color: #6B7280;
margin-top: 4px;
}
.dc-sw-rg-counter {
display: inline-flex;
align-items: center;
border: 1px solid #D1D5DB;
border-radius: 24px;
padding: 2px 4px;
background: #fff;
flex-shrink: 0;
}
.dc-sw-rg-btn {
background: none;
border: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #4A4A4A;
cursor: pointer;
border-radius: 50%;
font-size: 16px;
padding: 0;
line-height: 1;
transition: all 0.15s ease;
}
.dc-sw-rg-btn:hover:not(:disabled) {
background: rgba(var(--bs-primary-rgb), 0.10);
color: var(--brand-primary);
}
.dc-sw-rg-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.dc-sw-rg-value {
font-size: 15px;
font-weight: 700;
color: #1A1A1A;
min-width: 26px;
text-align: center;
}
.dc-sw-rg-info-text {
font-size: 12px;
color: #6B7280;
line-height: 1.5;
padding: 4px 0 10px;
}
.dc-sw-rg-divider {
height: 1px;
background: #E5E7EB;
margin: 12px 0;
}
.dc-sw-pets-card {
display: flex;
align-items: flex-start;
gap: 10px;
border: 1px solid #E5E7EB;
border-radius: 8px;
padding: 12px;
margin: 4px 0 14px;
cursor: pointer;
user-select: none;
transition: border-color 0.15s;
}
.dc-sw-pets-card:hover { border-color: var(--brand-primary); }
.dc-sw-pets-cb {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--brand-primary);
cursor: pointer;
margin-top: 2px;
}
.dc-sw-pets-info {
flex: 1;
min-width: 0;
}
.dc-sw-pets-title {
font-size: 13px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.3;
}
.dc-sw-pets-desc {
font-size: 11px;
color: #6B7280;
margin-top: 4px;
line-height: 1.5;
}
.dc-sw-pets-icon {
flex-shrink: 0;
font-size: 20px;
color: #9CA3AF;
line-height: 1;
}
.dc-sw-apply-wrap {
display: flex;
justify-content: flex-end;
}
.dc-sw-apply-btn {
padding: 10px 34px;
/* ⭐ Ot.106 — MOBIL CEKMECEDEKI AYNI DUGME. Yalniz masaustu satirindaki gradienti
kaldirmak, telefonda gradientin KALMASI demek olurdu: ayni dugmenin iki yuzu
ayrisirdi (bu deponun bir numarali kusur sinifi). */
background: var(--brand-primary);
color: #fff;
font-size: 14px;
font-weight: 700;
border: none;
border-radius: var(--dc-radius-btn, 6px) /* Ot.98/Faz-1: hap -> standart */;
cursor: pointer;
letter-spacing: 1px;
transition: transform 0.15s, box-shadow 0.15s;
}
.dc-sw-apply-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(var(--bs-primary-rgb),0.35);
}
/* Child ages */
.dc-sw-child-ages {
margin-top: 8px;
padding-top: 12px;
border-top: 1px dashed #E5E7EB;
}
.dc-sw-child-age-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.dc-sw-child-age-label {
font-size: 14px;
color: #4A4A4A;
font-weight: 500;
}
.dc-sw-child-age-select {
padding: 6px 10px;
border: 1px solid #D1D5DB;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
background: #fff;
min-width: 110px;
color: #1A1A1A;
transition: border-color 0.15s;
font-family: inherit;
}
.dc-sw-child-age-select:focus {
outline: none;
border-color: var(--brand-primary);
}
/* ============================================================
Mobile summary bar + drawer — compact widget result sayfalarında
============================================================ */
/* Summary bar — desktop'ta gizli, mobile compact'ta görünür */
.dc-sw-summary {
display: none;
width: 100%;
background: #fff;
border: 1px solid #E5E7EB;
border-radius: 12px;
padding: 10px 14px;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
text-align: left;
font-family: inherit;
}
.dc-sw-summary:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.dc-sw-summary-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.dc-sw-summary-main {
font-size: 15px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-sw-summary-meta {
font-size: 12px;
color: #6B7280;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dc-sw-summary-edit {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--brand-primary);
flex-shrink: 0;
padding: 6px 12px;
border-radius: 999px;
background: rgba(var(--bs-primary-rgb), 0.08);
}
.dc-sw-summary-edit i { font-size: 16px; line-height: 1; }
/* Drawer close button — sadece mobile drawer açıkken görünür */
.dc-sw-drawer-close {
display: none;
position: absolute;
top: 12px;
right: 12px;
width: 36px;
height: 36px;
border: none;
background: rgba(0, 0, 0, 0.06);
border-radius: 50%;
color: #4A4A4A;
cursor: pointer;
z-index: 11;
align-items: center;
justify-content: center;
padding: 0;
transition: background 0.15s;
}
.dc-sw-drawer-close:hover { background: rgba(0, 0, 0, 0.12); }
.dc-sw-drawer-close i { font-size: 22px; line-height: 1; }
/* ============================================================
Desktop sticky — CSS-only (parent: .dc-sw-results-wrap tall enough)
Result page Razor'larında widget .dc-sw-results-wrap'in direct child
olduğunda sticky scope tüm sayfaya yayılır.
============================================================ */
@media (min-width: 992px) {
.dc-sw-results-wrap {
position: relative;
}
/* Widget header.fixed altına yapışsın. JS getStickyTop() header.offsetHeight'ı
--dc-sw-sticky-top var'a yazar (default 80px). Header'ı gizlemiyoruz —
layout shift / scroll-anchor karmaşası olmasın. Widget header'ın altında
z-index 50 ile yapışır, header z-index 100 üstte normal görünür. */
.dc-sw-container.dc-sw-compact {
position: sticky;
top: var(--dc-sw-sticky-top, 80px);
z-index: 50;
}
}
/* Result page wrapper — Bootstrap container davranışı + sticky scope.
Widget direct child olduğu için sticky'nin containing block'u wrap.
overflow-anchor: none — stuck class layout shift yapsa bile browser
scroll-anchor mekanizması sayfayı yukarı çekmesin. */
.dc-sw-results-wrap {
width: 100%;
margin-left: auto;
margin-right: auto;
padding: 1.5rem 12px 0;
position: relative;
overflow-anchor: none;
}
@media (min-width: 576px) { .dc-sw-results-wrap { max-width: 540px; } }
@media (min-width: 768px) { .dc-sw-results-wrap { max-width: 720px; } }
@media (min-width: 992px) { .dc-sw-results-wrap { max-width: 960px; } }
@media (min-width: 1200px) { .dc-sw-results-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .dc-sw-results-wrap { max-width: 1320px; } }
/* Wrap içindeki nested .container'ları gereksiz padding'den kurtar */
.dc-sw-results-wrap .container {
padding-left: 0;
padding-right: 0;
max-width: 100%;
}
/* ── FAZ-5: filtre ile listenin hizalanmasi ──────────────────────────────────
Kullanicinin sozu (Duzenlemeler.docx §14): "Filtre ile liste hizalanmali,
ayni zamanda filtre listeye dogru da biraz daha genislemeli."
Ucus sonuc ekrani icin de ayni talep var (§20).
🔴 OLCULDU (1440px, /oteller/liste):
sayfa icerigi (header, filtre, kartlar) 72 .. 1368 -> 1296 px
arama motoru (.dc-sw-container) 115 .. 1325 -> 1210 px
yani iki yanda da 43 px kayma. ≤1366'da kayma YOK, cunku orada motorun
1210 tavani zaten sarmalayicinin altinda kaliyor; kusur ancak Bootstrap
`.container` 1320'ye ciktiginda (>=1400) gorunur hale geliyor.
⚠️ `.dc-sw-container`in 1210 tavani KALDIRILMIYOR — yalniz sonuc sarmalayicisi
icinde gecersiz kilaniyor. Ana sayfadaki hero motoru o tavana bagli kalir;
genisligi sarmalayici zaten sinirladigi icin burada tavan gereksizdir. */
.dc-sw-results-wrap .dc-sw-container {
max-width: none;
}
/* 🔴 OLCULDU: filtre karti kolonunu DOLDURMUYORDU — kolon 306 px iken kart her
genislikte sabit 244 px kaliyor ve liste ile arasinda ~86 px olu bosluk
biraktiriyordu. Sebep kolon genisligi DEGIL: Bootstrap'te `.offcanvas-body`
`display:flex`, dolayisiyla `.filter-sidebar` bir FLEX OGESI ve `flex: 0 1 auto`
ile ICERIGINE gore daraliyor. `.card` blok baglamda %100 olurdu, flex baglamda
olmuyor. Genisligi kolona baglamak talebin "listeye dogru genisleme" bacagini
kolon oranina hic dokunmadan karsiliyor.
⚠️ Kolonun kendisine ozel `flex-basis` YAZILMADI: ayni div ≤lg'de offcanvas
govdesidir ve oradaki genislik `--bs-offcanvas-width` ile yonetilir. */
.dc-sw-results-wrap .filter-sidebar {
width: 100%;
}
/* ============================================================
Mobile (<992px) — full widget gizli, summary bar BOTTOM-FIXED görünür
(mobile filter butonu pattern'i gibi). Summary bar tıklanınca
drawer (full-screen overlay) açılır.
============================================================ */
@media (max-width: 991.98px) {
/* ⚠️ OT.105: sekmeler ve ARA artik kartin ICINDE. Kart gizlenince ikisi de
zaten gizleniyor; ayri kural gereksiz ama ZARARSIZ DEGIL — ">" ile yazili
kalsaydi HATA VERMEDEN eslesmezdi. Kart kuralina indirgendi. */
.dc-sw-container.dc-sw-compact > .dc-sw-card { display: none; }
/* 🔴 OZET SATIRI IKI YERDE (Oturum 102, backlog #9). Kullanici bildirimi:
"sonuc sayfalarinda mobilde arama bolumu gorunmuyor". Olculdu: seride ORTME YOK
(9 noktanin 9'u ozete ait) ve cekmece dokununca ACILIYOR — kusur GORUNURLUKTE degil,
KONUMDA idi: motor ekranin en alt kenarinda duruyordu.
⛔ `.dc-sw-summary` (ortak) uzerine `position: fixed` YAZILAMAZ; ust satiri da
ekrana yapistirirdi. Sabitleme YALNIZ `-bottom` varyantina aittir. */
/* ÜST satir — sayfa AKISINDA, sonuclarin hemen ustunde (kullanicinin baktigi yer) */
.dc-sw-container.dc-sw-compact .dc-sw-summary-top {
display: flex;
position: static;
width: 100%;
margin: 0 0 12px;
}
/* ALT serit — ekrana sabit, full width (filter button gibi).
⛔ Kaldirilmadi: kullanici asagi kaydirdiginda ust satir ekrandan cikar ve
arama yine erisilemez olurdu. */
.dc-sw-container.dc-sw-compact .dc-sw-summary-bottom {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1058; /* filter btn 1055'in üstünde */
border-radius: 0;
border: none;
border-top: 1px solid #E5E7EB;
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}
.dc-sw-container.dc-sw-compact .dc-sw-summary-bottom:hover {
box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.12);
}
/* Filter button summary bar üstünde — bottom: 0'dan summary bar yüksekliği kadar yukarı */
body.dc-sw-mobile-bottom-bar .dc-mobile-filter-btn {
bottom: 64px !important;
padding-right: 64px !important; /* back-to-top butonu için sağda yer */
}
/* Back-to-top butonu mobile'da filtre bar'ının sağ ucunda görünür.
Asıl fixed konumlu element .back-to-top-icon (child anchor),
parent .back-to-top değil. */
body.dc-sw-mobile-bottom-bar .back-to-top-icon {
bottom: 72px !important;
right: 12px !important;
z-index: 1056 !important; /* filter btn 1055 üzerinde, tıklanabilir */
}
/* Body padding hem summary hem filter btn için */
body.dc-sw-mobile-bottom-bar { padding-bottom: 128px !important; }
/* Drawer açıkken bottom-fixed yerine full-screen overlay.
Bottom padding submit btn yüksekliği kadar — form son alanı butonun altında kalmasın.
scroll-padding-top close X butonu için tampon — scrollIntoView aktif alanı X altına
sokmasın.
Slide-up animation (Oturum 43): drawer alt kenardan yukarı doğru kayarak açılır
(~280ms). Material Design "decelerated easing" cubic-bezier(0.4, 0, 0.2, 1) ile
doğal his. prefers-reduced-motion ayarında animasyon disable. Kapanış animasyonu
yok (instant) — JS class kaldırma anında container görünmez olur. */
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open {
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
overflow-y: auto;
padding: 56px 16px 96px;
margin: 0;
max-width: 100%;
scroll-padding-top: 56px;
scroll-padding-bottom: 96px;
animation: dcSwSlideUp 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes dcSwSlideUp {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open {
animation: none;
}
}
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-summary { display: none; }
/* 🔴 Ot.143 — ESKIDEN TUM SERIT GIZLENIYORDU. Ucus tipi secenekleri (Tek Yon /
Gidis-Donus / Direkt Ucus) bu seridin ICINDE durdugu icin MOBIL CEKMECEDE
TAMAMEN KAYBOLUYORDU — kullanici bildirdi, olculdu: cekmece acikken @390 ve
@768'de gorunur secenek 0, masaustunde 8/8. `_SwWidget.cshtml`teki uyari da tam
bunu soyluyordu: "seridi kaldirmak onlari da goturur ve SESSIZ islev kaybi olur".
⭐ Artik yalniz SEKME DUGMELERI gizlenir; serit + trip secenekleri KALIR.
(Sekme dugmeleri drawer'da gereksiz: sayfa baglami aktif paneli zaten belirler.) */
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-tabs {
display: flex;
padding: 10px 16px 4px;
gap: 0;
}
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-tab { display: none; }
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open > .dc-sw-card { display: block; }
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-drawer-close { display: inline-flex; }
/* ARA butonu drawer'da viewport bottom'a sabit — scroll konumundan bağımsız her zaman görünür */
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-submit {
display: block;
position: fixed;
bottom: calc(16px + env(safe-area-inset-bottom));
left: 16px;
right: 16px;
top: auto;
transform: none !important;
width: auto;
margin: 0;
padding: 14px 24px;
font-size: 17px;
z-index: 10000;
}
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-submit:hover {
transform: translateY(-1px) !important;
}
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-submit:active {
transform: translateY(0) !important;
}
/* Drawer içinde dropdown/popup'lar absolute yerine inline akışta — container scroll'u
takvim/şehir listesi/oda paneli yüksekliğini dahil etsin, alt satırlar kapanmasın */
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-dropdown.dc-sw-open,
.dc-sw-container.dc-sw-compact.dc-sw-mobile-open .dc-sw-cal-popup.dc-sw-open {
position: static;
top: auto;
left: auto;
right: auto;
margin-top: 8px;
width: 100%;
max-width: 100%;
animation: none;
}
}
/* Body scroll lock when drawer open */
body.dc-sw-drawer-active { overflow: hidden; }
/* ============================================================
Compact mode = behavior marker (sticky + drawer). Görsel olarak
hero ile birebir aynı. Liste sayfasında widget ilk açılışta hero
look. Slogan list'te yok (Home'da @ViewBag.BrandSlogan).
============================================================ */
.dc-sw-container.dc-sw-compact {
/* 🔴 OT.105 REGRESYONU — GERI ALINDI (4rem korundu).
Bu degeri once 2.5rem'e, sonra 1rem'e indirdim. OLCULDU: sayfa basligi
(.main-header) position:absolute, z-index:1050 ve ALT KENARI 115px.
Motorun ust kenari 1rem'de 78'e cikiyor -> mobil sonuc sayfasinda ARAMA
OZETI SERIDI HEADER'IN ALTINDA KALIYOR ve TIKLANAMIYOR
(elementFromPoint(195,107) -> div.main-menu-wrapper, ozetin icinde DEGIL).
4rem motoru 126'ya koyar, header'dan 11px asagi. Bu bosluk KOZMETIK DEGIL,
tiklanabilirlik kosulu. */
/* 🔴 OT.105/4: SABIT DEGER KALDIRILDI. `4rem` yalniz uzerinde olctugum kiracida
yetiyordu; biletnette'in header'i 25px daha yuksek ve ozet seridi ONUN ALTINDA
kaliyordu (olculdu: pay +5px vs -20px).
⭐ Deger header'in GERCEK yuksekliginden turetiliyor (`--dc-sw-header-h`, JS yazar).
⚠️ `-44px` sabiti OLCULMUS bir taban farkidir: motorun sayfa ustunden kendi
offseti 56px, istenen nefes payi 12px -> 56 - 12 = 44. Formule DEGIL, kapiya
guveniliyor: ekran kapisi dort kiracida "ozet ust >= header alt + 8" olcer. */
/* ⚠️ -44 -> -38: canli olcumde OTEL DETAY sayfasinin taban ofseti sonuc
sayfalarindan 13px KUCUK cikti (pay 20 vs 7). Alti puan eklenince detay
13px'e, sonuc sayfalari 26px'e ciker — ikisi de rahat. */
margin-top: calc(var(--dc-sw-header-h, 115px) - 38px); /* Floating tabs breadcrumb area'ya çakışmasın (OT.105: 4rem -> 2.5rem) */
}
/* ============================================================
OT.110/2 (#26) — MASAUSTUNDE HEADER TELAFISI CIFTLENIYORDU
============================================================
🔴 OLCULDU (dort kiraci x uc kirilim, sonuc sayfasi):
MASAUSTU header alti 91 | MAIN pt=86 -> wrap pt=24 -> motor mt=53 | BOSLUK 72
TELEFON header alti 115 | MAIN pt=43 -> wrap pt=21 -> motor mt=77 | BOSLUK 26
Yukaridaki formul DOGRU calisiyor (91-38=53, 115-38=77). Sorun formulde DEGIL:
⛔ MASAUSTUNDE `MAIN`in dolgusu (86px) header'i (91px) ZATEN temizliyor, motor bir de
KENDI telafisini ekliyor -> header yuksekligi IKI KEZ sayiliyor. Mobilde MAIN yalniz
43px verdigi icin ciftlenme YOK; formul o vaka icin kalibre edilmis.
⭐ COZUM SABIT DEGER DEGIL: `margin-top: 8px` gibi bir sabit kiraci farkindaligini YOK
EDERDI — olculdu: `MAIN`in dolgusu kiraciya gore DEGISMIYOR (110px) ama header
yuksekligi DEGISIYOR (acentecode 91 / biletnette 107). Sabit deger acentecode'da
27px, biletnette'te 11px bosluk verirdi.
⭐ Bu yuzden deger yine `--dc-sw-header-h`ten TURETILIYOR:
bosluk = 110 + margin - headerAlti => 28px icin margin = headerH - 82
Sonuc dort kiracida da ~28px (mobil/tablet 26/29 ile tutarli).
⚠️ `max(8px, ...)` tabani: header beklenmedik sekilde kisa olursa motor header'in
ALTINA girmesin. Kuralin degismezi korunur: "ozet ust >= header alt + 8".
⛔ MOBIL FORMULE DOKUNULMADI — Ot.105'in iki regresyonu (hero basligi ortuldu ·
mobil ozet seridi TIKLANAMAZ oldu) tam da onu korlemesine kismaktan dogmustu. */
@media (min-width: 992px) {
.dc-sw-container.dc-sw-compact {
margin-top: max(8px, calc(var(--dc-sw-header-h, 91px) - 82px));
}
}
/* ============================================================
Stuck (scroll'da sticky tetiklendiğinde) — kompak görünüm
JS IntersectionObserver ile .dc-sw-stuck class toggle edilir.
============================================================ */
@media (min-width: 992px) {
/* margin-top SABİT 4rem — stuck class değişimi layout'u değiştirmez,
yalnızca görsel kompaktlaşma. Aksi halde IntersectionObserver
feedback loop oluşur (widget pozisyonu değişir, sentinel değişir, flicker). */
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-tabs {
display: none;
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck > .dc-sw-card {
padding: 12px 16px; /* OT.105: submit artik satirin hucresi, sag rezerv GEREKMIYOR */
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.10);
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(8px);
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-trip-row {
display: none;
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-col {
padding: 6px 14px;
}
/* 🔴 OT.105/4 — STUCK'TA "NEREDEN"/"NEREYE" CAKISIYORDU (kullanici bildirdi).
Takas dugmesi iki kolonun SINIRINA oturur ve sag yarisi "Nereye" alanina tasar;
normal durumda bunun icin `padding-left: 48px` ayrilmis. Stuck kurali ise
`padding: 6px 14px` ile o rezervi EZIYORDU -> dugme metnin uzerine biniyordu.
⚠️ Kisayol degil: rezerv stuck'ta da ACIKCA yeniden veriliyor (dugme stuck'ta
da gorunur; olculdu). */
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-flights-form .dc-sw-col[data-field="to"] {
padding-left: 46px;
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-field-value {
font-size: 16px;
min-height: 20px;
margin-bottom: 0;
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-date-value {
font-size: 16px;
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-field-label {
font-size: 11px;
margin-bottom: 2px;
}
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-field-sub,
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-field-placeholder {
display: none;
}
/* Submit hero floating yerine inline sağ kenar */
/* OT.105: stuck'ta da HUCRE — yalnizca olculer kucultuluyor. Eskiden burada
mutlak konum vardi cunku dugme satirin disindaydi; artik gerek YOK. */
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-submit {
min-width: 96px;
padding: 0 18px;
font-size: 13px;
margin: 0;
}
/* Stuck içinde dropdownlar widget altına açılsın */
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-dropdown,
.dc-sw-container.dc-sw-compact.dc-sw-stuck .dc-sw-cal-popup {
top: calc(100% + 4px);
}
}
/* ============================================================
Responsive
============================================================ */
@media (max-width: 991.98px) {
.dc-sw-row { flex-wrap: wrap; }
.dc-sw-col {
flex: 1 1 50%;
border-bottom: 1px solid #E5E7EB;
}
.dc-sw-col:nth-child(even) { border-right: none; }
.dc-sw-col:nth-last-child(-n+2) { border-bottom: none; }
/* ⛔ `left:50%; top:25%` KALDIRILDI: akistaki dugme sarilmis satirda da
Nereden/Nereye ayracinin uzerinde ve o satirin dikey ortasinda durur.
Eski deger olculmus -93px dikey sapma uretiyordu. */
.dc-sw-hotels-form .dc-sw-col[data-field="hotel-city"],
.dc-sw-hotels-form .dc-sw-col[data-field="checkin"],
.dc-sw-hotels-form .dc-sw-col[data-field="checkout"],
.dc-sw-hotels-form .dc-sw-col[data-field="rooms-guests"] {
flex: 1 1 50%;
}
.dc-sw-cal-popup {
width: 100% !important;
left: 0 !important;
right: 0 !important;
transform: none !important;
}
.dc-sw-rg-dd,
.dc-sw-trav-dd,
.dc-sw-city-dd {
width: 100%;
left: 0;
right: 0;
}
.dc-sw-cal-months { grid-template-columns: 1fr; }
.dc-sw-cal-months > *:nth-child(n+2) { display: none; }
}
/* ── OT.105 · TABLET (576-991.98): ARA SATIRIN SAG ALT KOSESINE ──────────────
🔴 OLCULDU (768px, once): ARA merkezi 384 = kartin merkezi 384 -> dugme
ORTALANMIS ve kartin altinda YUZUYORDU. Masaustunde (>=992) ayni sorun
"4b" ile cozulmustu ama tablet kirilimi ACIKTA kalmisti; kullanicinin
"desktop VE TABLETTE de satirda hizali olmali" demesinin sebebi bu.
⭐ Kalip masaustuyle AYNI: satira alt dolguyla yer acilir, dugme o seride
saga yaslanir. Sarilan 2'li izgarada dugme son kolonun UZERINE binmez.
⚠️ `bottom` kartin alt dolgusuyla ESIT (16px) — dugmenin alt kenari satirin
alt kenariyla ortusur. */
@media (min-width: 576px) and (max-width: 991.98px) {
/* OT.105 ikinci tur: mutlak konum GITTI. Sarilan 2'li izgarada dugme kendi
satirini alir ve TAM GENISLIK olur — dokunma hedefi buyuk, hiza kendiliginden. */
.dc-sw-submit {
flex: 1 1 100%;
align-self: auto;
min-height: 46px;
border-radius: 0 0 3px 3px;
font-size: 15px;
}
}
@media (max-width: 575.98px) {
/* 🔴 OT.105/3 — TAKVIM ARTIK SATIRA GORE ACILIYOR, KOLONA DEGIL.
Kullanici: "tarih alani inputu kesik aciliyor, responsive de tam ekran acilmali".
⛔ OLCULDU: kesilme YOK, tasma YOK, kesen ata YOK — sorun SIKISMAYDI.
telefon 390px -> takvim kutusu yalnizca 169px genisliginde.
⭐ SEBEP BENIM DEGISIKLIGIM: Giris/Cikis'i yan yana (%50) yapinca kolon 172px'e
dustu ve `.dc-sw-cal-popup { width: 100% }` o YARIM kolona gore hesaplandi.
⭐ COZUM KONUMLANDIRMA BAGLAMINI DEGISTIRMEK: tarih kolonlari `position: static`
olunca mutlak konumlu takvimin kapsayici blogu `.dc-sw-row` olur (o zaten
`position: relative`) ve `left/right: 0` SATIRIN tam genisligini kaplar.
⛔ Kapsam YALNIZ tarih kolonlari: `position` degisikligi o kolonun DIGER mutlak
konumlu cocuklarini da etkiler; sehir/yolcu kolonlarina DOKUNULMUYOR. */
.dc-sw-col[data-field="checkin"],
.dc-sw-col[data-field="checkout"],
.dc-sw-col[data-field="departure"],
.dc-sw-col[data-field="return"] {
position: static;
}
/* ⭐ TELEFONDA ALT SAYFA (bottom sheet). Yalniz genisligi duzeltmek YETMEDI:
olculdu, takvim satira genisleyince ekranin ALTINDAN 104px TASIYORDU ve
kullanici takvimin altini gormek icin sayfayi kaydirmak zorunda kaliyordu.
Ekrana sabitlenince tasma YAPISAL OLARAK imkansiz; tasarsa kendi icinde kayar.
⛔ CEKMECE HARIC: compact sayfalarda cekmece acikken acilir menuler BILEREK
akista (`position: static`) duruyor — orada sabitlemek cekmecenin kendi
kaydirmasini bozardi. Bu yuzden kural `:not(.dc-sw-mobile-open)` ile daraltildi. */
.dc-sw-container:not(.dc-sw-mobile-open) .dc-sw-cal-popup {
position: fixed !important;
left: 8px !important;
right: 8px !important;
top: auto !important;
bottom: 8px !important;
width: auto !important;
max-width: none !important;
/* ⛔ `.dc-sw-dropdown { min-width: 100% }` MIRAS KALIYOR ve `fixed` konumda
yuzde GORUNUME gore hesaplanir -> 390px genislik + 8px SAG TASMA (olculdu).
Kapsayici blok degisince yuzde tabani da degisir; sifirlanmasi SART. */
min-width: 0 !important;
max-height: 76vh;
overflow-y: auto;
transform: none !important;
z-index: 10001;
}
/* OT.105: 42/70 -> 26/12. Eski 70px alt dolgu, kartin ALTINA yarim tasan
yuzen ARA dugmesi icindi; dugme artik satirin ic seridine alindi. */
.dc-sw-card { padding: 26px 12px 12px; }
.dc-sw-col { flex: 1 1 100%; border-right: none; }
.dc-sw-col:not(:last-child) { border-bottom: 1px solid #E5E7EB; }
/* 🔴 KULLANICI KARARI (Ot.105): sehir/rota TAM GENISLIK, tarihler YAN YANA.
Once dort alanin dordu de alt alta idi ve satir 528px tutuyordu; olculdu:
kart 640px ve ARA dugmesi 844px'lik telefonda 66px EKRAN ALTINDA kaliyordu.
⛔ `nth-child` KULLANILMADI ve bu bilincli: formun dogrudan cocuklari
arasinda GIZLI ``ler ve `dc-autocomplete-wrapper` var (olculdu:
oteller formunda kolonlar 8..11. cocuk), yani `nth-child(even)` bugun
bile YANLIS kolonlari sec1yor. Olcut alanin KENDI kimligi: `data-field`. */
.dc-sw-hotels-form .dc-sw-col[data-field="hotel-city"],
.dc-sw-hotels-form .dc-sw-col[data-field="rooms-guests"],
.dc-sw-flights-form .dc-sw-col[data-field="from"],
.dc-sw-flights-form .dc-sw-col[data-field="to"],
.dc-sw-flights-form .dc-sw-col[data-field="travellers"] {
flex: 1 1 100%;
}
.dc-sw-hotels-form .dc-sw-col[data-field="checkin"],
.dc-sw-hotels-form .dc-sw-col[data-field="checkout"],
.dc-sw-flights-form .dc-sw-col[data-field="departure"],
.dc-sw-flights-form .dc-sw-col[data-field="return"] {
flex: 1 1 50%;
}
/* Yan yana duran ciftin SOLUNA dikey ayrac. `nth-child` yerine yine kimlik. */
.dc-sw-hotels-form .dc-sw-col[data-field="checkin"],
.dc-sw-flights-form .dc-sw-col[data-field="departure"] {
border-right: 1px solid #E5E7EB;
}
/* ARA: satirin ic seridinde, TAM GENISLIK (mobilde dokunma hedefi buyuk olmali) */
/* OT.105 ikinci tur: telefonda da HUCRE — kendi satirinda, tam genislik. */
.dc-sw-submit {
flex: 1 1 100%;
align-self: auto;
min-height: 46px;
border-radius: 0 0 3px 3px;
}
.dc-sw-field-value, .dc-sw-date-value { font-size: 18px; }
.dc-sw-trip-row { flex-direction: column; align-items: flex-start; gap: 14px; }
.dc-sw-trip-options { gap: 20px; flex-wrap: wrap; }
.dc-sw-tabs { padding: 8px 24px; gap: 30px; }
.dc-sw-tab i { font-size: 24px; }
.dc-sw-submit { padding: 0 24px; font-size: 16px; }
.dc-sw-swap { display: none; }
.dc-sw-city-dd, .dc-sw-trav-dd, .dc-sw-rg-dd { width: 100%; }
.dc-sw-child-age-row { flex-wrap: wrap; gap: 6px; }
.dc-sw-child-age-select { min-width: 100%; }
/* Compact mobile — SEARCH butonu padding'i azalt */
.dc-sw-compact .dc-sw-card { padding: 16px 12px 20px; }
.dc-sw-compact .dc-sw-submit { width: 100%; padding: 12px; }
}
/* ============================================================
ACILIR MENU TASMASI — Oturum 74
============================================================
SORUN: ana sayfada "Oda & Misafir" (ve diger) acilir menuleri aciliyor ama
ALTTA KALIYOR; menunun alt kismi bir sonraki bolumun altinda kayboluyor.
NEDEN: .hero-sec-eight `z-index: 1` tasiyor ve bu KENDI YIGIN BAGLAMINI yaratir.
Menunun `z-index: 10`'u o baglamin ICINDE gecerlidir; disari cikamaz. Hero ayrica
`height: 846px` + `justify-content: flex-end` ile widget'i alt kenara yaslar,
dolayisiyla menu her zaman hero sinirinin disina tasar.
COZUM: cocugu yukseltmek ISE YARAMAZ (baglam tavani degismez) -- ATA yukseltilir.
`:has()` sayesinde bu yalnizca bir menu ACIKKEN olur; kapaliyken hero'nun yigin
sirasi aynen korunur, yani header/modal gibi diger katmanlarla catismaz.
Not: `:has()` tum guncel tarayicilarda destekli (2023+). Desteklemeyen eski bir
tarayicida davranis BUGUNKUYLE AYNI kalir -- gerileme uretmez.
============================================================ */
/* ────────────────────────────────────────────────────────────────
OTURUM 75 DUZELTMESI — onceki surum YETMEDI, IKI sebebi vardi.
(1) ATA SAYISI EKSIK SAYILMISTI. Yalniz .hero-sec-eight yukseltilmisti.
Oysa site.css:1064 ARADA IKI YIGIN BAGLAMI DAHA yaratiyor:
.hero-sec-eight .hero-content,
.hero-sec-eight .container { position: relative; z-index: 1; }
Gercek zincir: hero > container > hero-content > dc-sw-container > card > col > menu
(2) `.dc-sw-panel.dc-sw-open` SELEKTORU HIC ESLESMIYORDU (olu kod).
JS `.dc-sw-panel`e `dc-sw-active` ekler, `dc-sw-open` DEGIL
(search-widget.js:198,205). `dc-sw-open` yalniz `.dc-sw-dropdown`
(ve ayni elemanda olan `.dc-sw-cal-popup`) uzerine konur.
──────────────────────────────────────────────────────────────── */
.hero-sec-eight:has(.dc-sw-dropdown.dc-sw-open) {
z-index: 100;
}
/* Aradaki IKI baglam da yukselir — biri atlanirsa menu yine hapis kalir. */
.hero-sec-eight:has(.dc-sw-dropdown.dc-sw-open) > .container,
.hero-sec-eight:has(.dc-sw-dropdown.dc-sw-open) .hero-content {
z-index: 60;
}
/* Widget kabi da kendi icinde yukselir: ayni karttaki komsu alanlar (tarih, sehir)
menunun uzerine binmesin. */
.dc-sw-container:has(.dc-sw-dropdown.dc-sw-open) {
z-index: 50;
}
/* ────────────────────────────────────────────────────────────────
"KESIK" GORUNMENIN IKINCI ve YIGIN BAGLAMINDAN BAGIMSIZ SEBEBI:
menu VIEWPORT'tan tasiyor.
🔴 BURADA STATIK BIR `max-height` YAZILMAZ. Bir kere yazildi
(`calc(100vh - 120px)`) ve TARAYICIDA OLCULUNCA hic baglamadigi gorildu:
1440x900, 3 cocuk secili -> menu y=456'da basliyor, 585px uzunlukta,
alt kenar 1041 (ekran 900). Kural 780px tavan koyuyor; menu zaten
585px oldugu icin kural devreye HIC girmiyor, tasma aynen suruyor.
Sebep: tasmayi belirleyen sey viewport'un YUKSEKLIGI degil, menunun
BASLADIGI noktanin ALTINDA kalan bosluktur — ve o nokta alanin sayfadaki
yerine gore degisir. Bu deger CSS'te bilinemez, JS'te olculur:
bkz. search-widget.js -> konumlaAcilirMenu().
Yukseklik ve yon (asagi/yukari) JS tarafindan satir ici stil olarak verilir;
burada yalnizca menunun kendi icinde KAYABILIR olmasi saglanir.
──────────────────────────────────────────────────────────────── */
.dc-sw-dropdown.dc-sw-open {
overflow-y: auto;
overscroll-behavior: contain; /* menu sonuna gelince sayfa kaymasin */
}
/* Altta yer kalmadiginda menu YUKARI acilir. Mobilde olculdu: tetikleyicinin
alti 757, ekran 844, cerez bandi 135px -> altta kalan yer EKSI 48px, yani
menu icin asagida hic yer yok. Tek dogru davranis yon degistirmek. */
.dc-sw-dropdown.dc-sw-up {
top: auto;
bottom: calc(100% + 8px);
}
/* ⚠️ Takvim eskiden `max-height: none; overflow-y: visible` ile MUAF tutuluyordu.
Gerekce "kendi ic yerlesimini yonetir" idi; ama olculdugunde takvimin de
ekrandan tastigi gorildu (1280x560'ta 338px asagida). Ic yerlesimi korumak
ile tasmaya goz yummak ayni sey degildir: tavan izgarayi bozmaz, yalniz
takvimi kendi icinde kaydirir. Muafiyet KALDIRILDI. */
/* ═══════════════════════════════════════════════════════════════════════════════
FAZ-4 · ARAMA MOTORU İÇ DÜZENİ (Oturum 98)
───────────────────────────────────────────────────────────────────────────────
TALEP: "Arama motoru sol köşesi, uçak/otel/PNR düğmeleri buraya gelsin.
Arama düğmesini bu fotodaki gibi sağa alalım. Arama motoru ekranda çok büyük,
boyutunu biraz daha küçültelim, ama daracık ve küçücük bir hâle getirmeyelim."
⛔ TÜMÜ `min-width: 992px` İÇİNDE — ve bu ZORUNLU:
≤991.98px'te widget'ın sekme + kart + gönder bloğu `display:none` oluyor ve
yerine ekranın ALTINA sabitlenen bir özet şeridi + çekmece geçiyor. Submit
düğmesine `>` birleştiricisiyle yaslanan YEDİ kural var (mobilde gizle,
çekmecede ekrana sabitle, stuck'ta sağa al). Bu blok mobil kırılıma hiç
girmediği için o kuralların hiçbirine dokunmuyor.
⭐ ÖLÇÜLMÜŞ ZEMİN (tahmin yok):
· `.dc-sw-container` kutusu ile `.dc-sw-card` kutusu AYNI (tabs absolute).
· Alan satırının ALTI ile kartın ALTI arasındaki mesafe DÖRT ölçümde de
SABİT 36px (kartın alt dolgusu). Satır YÜKSEKLİĞİ ise panele göre
değişiyor (otel 127px · uçuş 147-166px) — bu yüzden konumlandırma
satırın MERKEZİNE değil, kartın ALTINA yaslandı: panelden bağımsız.
═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
/* ── 4a · SEKMELER SOL ÜST KÖŞEYE ────────────────────────────────────────
Önceki: `left:50%; transform:translate(-50%,-75%)` (ortalanmış).
Yatay ortalama kalkıyor, dikey taşma (-75%) KORUNUYOR — o taşma kartın
üstüne binen tasarımın kendisi. */
/* OT.105: sekmeler artik akista ve kartin dolgusuyla hizali; konumlandirmaya
gerek YOK. Yalnizca genis ekranda biraz daha ferah aralik. */
.dc-sw-tabs {
gap: 32px;
}
/* ── 4a · KUTU BİRAZ KÜÇÜLSÜN ────────────────────────────────────────────
"daracık ve küçücük bir hâle getirmeyelim" dendiği için ölçülü:
üst dolgu 46 -> 38, alt dolgu 36 -> 28. Alt dolgu ARA düğmesinin
yaslandığı referans olduğu için aşağıdaki `bottom` değeriyle birlikte
düşünülmeli. */
.dc-sw-card {
/* OT.105: 38/28 -> 26/18. Alt dolgu ARA dugmesinin yaslandigi referanstir
(asagidaki `bottom` ile birlikte dusunulmeli). */
/* OT.105 ikinci tur: ARA artik satirin HUCRESI, kartin alt dolgusuna
yaslanmiyor -> ust/alt esitlendi. */
padding-top: 18px;
padding-bottom: 18px;
}
/* ── 4b · ARA DÜĞMESİ SATIRIN SAĞINA ─────────────────────────────────────
🔴 DOM'DA TAŞINMADI. Düğme `