/* ==========================================================================
CASTLE — MOBIL KATMANI v1.1 (YEREL)
--------------------------------------------------------------------------
KAPSAM SOZU
Bu dosyadaki HER kural @media (max-width: 1239px) icindedir.
Yani 1240px ve ustu -- masaustu -- bu dosyadan MATEMATIKSEL OLARAK
etkilenemez. Canliya 26.08'de eklenen castle-home-header.css tamamen
(min-width: 1240px) icinde oldugu icin iki dosyanin kesisimi bostur.
YAPILAN IS IKI BASLIKTA
A) ONARIM -- mobilde bozuk calisan seyler
B) YENILEME -- arama karti, arac kartlari, alt aksiyon cubugu
DOKUNULMAYAN: marka rengi, yazi tipi, footer, ofis sayfasi, odeme
sayfasi, kampanya/SSS/yorum bolumleri, dil satirinin rengi.
DOM'a dokunulmaz -> basliklar, canonical, hreflang, JSON-LD, sitemap
aynen kalir. Dogrulamasi: lab/seo_invariance.py
========================================================================== */
@media screen and (max-width: 1239px) {
/* --------------------------------------------------------------------------
0. JETONLAR — mevcut marka dilinden turetildi, yeni renk uydurulmadi
-------------------------------------------------------------------------- */
:root {
--m-red: #ED1C24; /* sitenin mevcut --color-1 degeri */
--m-ink: #453f3f; /* sitenin mevcut --color-5 degeri */
--m-text: #5a5555;
--m-muted: #8b8585;
--m-line: #e2e2e2;
--m-soft: #f6f6f7;
--m-r: 12px; /* kart yaricapi (sablon 5px; olculu buyutuldu) */
--m-pill: 999px;
--m-tap: 44px; /* en kucuk dokunma hedefi */
--m-bar-h: 58px; /* alt aksiyon cubugu */
--m-safe-b: env(safe-area-inset-bottom, 0px);
--m-safe-l: env(safe-area-inset-left, 0px);
--m-safe-r: env(safe-area-inset-right, 0px);
--m-sh-1: 0 1px 2px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.05);
--m-sh-2: 0 6px 16px rgba(0,0,0,.08), 0 16px 32px rgba(0,0,0,.07);
--m-ease: cubic-bezier(.22,.61,.36,1);
}
/* ==========================================================================
A) O N A R I M
========================================================================== */
/* --- A1. Yatay tasma ------------------------------------------------------
Bazi bolumler ekrandan tasip sayfayi saga kaydirilabilir yapiyordu. */
/* DIKKAT: "overflow-x: hidden" YAZILMAZ.
html/body uzerinde overflow-x:hidden tarayicida bir KAYDIRMA KABI
olusturur ve icerideki "position: sticky" ogeleri (baslik cubugu)
calismaz hale gelir. "clip" ayni tasma korumasini saglar ama kaydirma
kabi olusturmaz, sticky calismaya devam eder. */
body { overflow-x: clip; }
img, svg, video, iframe { max-width: 100%; }
/* viewport-fit=cover (castle-mobile.js ekler) acilinca yatay modda
icerigin centik altina girmemesi icin tek dis kaba pay. */
.container {
box-sizing: border-box;
padding-left: var(--m-safe-l);
padding-right: var(--m-safe-r);
}
/* --- A2. Baslik cubugu ----------------------------------------------------
Sorun: .header ic dolgusu 20px + logo 60px -> 100px yukseklik. Ekranin
sekizde biri sadece logoya gidiyordu.
Ayrica iki hamburger .header'in KARDESI ve position:absolute; baslik
yapiskan yapilinca sayfanin ortasinda asili kaliyorlardi. Bu yuzden
castle-mobile.js onlari .header_inner icine tasir. */
/* Yapiskan baslik iki farkli yapiyi ayni anda karsilamak zorunda:
- IC SAYFALARDA .header YALNIZCA baslik cubugudur (58px) -> o yapisir.
- ANA SAYFADA .header showcase ve main icerigi de sarar (13.000px)
-> orada yapismasi anlamsiz; .header_inner yapisir.
Bu yuzden IKISINE de sticky verilir; hangisi uygunsa o devreye girer.
Ozgulluk notu: snappy'de body[data-page="sub"] .header (0,2,1)
position:relative veriyor. Duz ".header" (0,1,0) onu yenemez; bu
yuzden asagidaki secici ayni ozgullukte yazildi ve sonra geldigi
icin kazanir. */
body[data-page] .header,
.header {
position: sticky;
top: 0;
z-index: 900;
padding: 0 !important;
background: #fff;
}
.header .header_inner {
position: sticky;
top: 0;
z-index: 900;
background: #fff;
border-bottom: 1px solid transparent;
transition: border-color .2s var(--m-ease), box-shadow .2s var(--m-ease);
display: flex;
align-items: center;
justify-content: center;
height: 58px;
min-height: 58px;
padding: 0 52px !important; /* iki yandaki hamburgerlere yer */
}
body.m-scrolled .header .header_inner {
border-bottom-color: var(--m-line);
box-shadow: 0 1px 8px rgba(0,0,0,.06);
}
.header_inner_logo { display: flex; align-items: center; }
.header_inner_logo img { height: 30px; width: auto; }
/* Hamburgerler (JS ile header_inner icine tasindi) */
.header_inner > .s-hamburger {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%);
left: auto !important;
right: auto !important;
inset-inline-start: 4px !important;
inset-inline-end: auto !important;
margin: 0 !important;
width: var(--m-tap);
height: var(--m-tap);
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 10px;
}
/* Sag dugme artik "hamburger" degil, HESAP + DIL kontrolu.
Ayni ayni paneli (#menu2: Giris Yap / Uye Ol / dil / para birimi)
aciyor -- islev degismedi, yalnizca ne oldugu anlasilir hale geldi. */
.header_inner > .s-hamburger.hamburgerRight {
left: auto !important;
right: auto !important;
inset-inline-start: auto !important;
inset-inline-end: 6px !important;
width: auto !important;
min-width: var(--m-tap);
height: 36px;
padding: 0 9px;
gap: 6px;
border: 1px solid var(--m-line);
border-radius: var(--m-pill);
background: #fff;
}
/* Iki cizgili hamburger gorseli gizlenir; yerine ikon + dil kodu gelir */
.header_inner > .s-hamburger.hamburgerRight .s-hamburger-container { display: none !important; }
.m-hesap {
display: flex;
align-items: center;
gap: 5px;
pointer-events: none; /* tiklama 'ya gitsin */
}
.m-hesap svg {
width: 19px; height: 19px;
fill: none; stroke: var(--m-ink); stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.m-hesap-dil {
font-size: 11.5px;
font-weight: 700;
letter-spacing: .04em;
color: var(--m-ink);
}
.m-hesap-ok {
width: 8px; height: 8px;
border-right: 1.6px solid var(--m-muted);
border-bottom: 1.6px solid var(--m-muted);
transform: rotate(45deg) translate(-1px,-1px);
}
.header_inner > .s-hamburger:active { background: var(--m-soft); }
.s-hamburger-line { background: var(--m-ink); }
/* --- A3. Dil satiri -------------------------------------------------------
KARAR: mobilde tamamen kaldirildi.
Sebep: (1) header'in ustunde durup onu ekranin tepesinden asagi itiyordu,
(2) ISLEVI ZATEN VAR -- sag taraftaki panel (#menu2) icinde TR/EN/AR/RU
ve para birimi listesi bulunuyor. Iki ayri dil secici gereksiz.
Dil kesfedilebilirligi kaybolmasin diye sagdaki dugmeye mevcut dil kodu
rozet olarak yazilir (castle-mobile.js -> hesapDugmesi).
Bu bilesen bizim kendi eklentimiz (castle-lang.js); Turev'e ait degil. */
.cl-bar { display: none !important; }
/* Akilli dil onerisi seridi (.cl-tip) sayfanin yonunu miras aliyor.
Arapca sayfada yon RTL oldugu icin serit icindeki TURKCE cumlenin
soru isareti sola kaciyordu ("?görüntülemek ister misiniz").
"plaintext" tarayiciya yonu metnin kendi ilk harfinden secmesini
soyler -- oneri hangi dilde olursa olsun dogru calisir. */
.cl-tip, .cl-tip * { unicode-bidi: plaintext; }
.cl-bar--kullanilmiyor { padding: 5px 8px !important; }
.cl-bar ul, .cl-bar ol {
display: flex !important;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
justify-content: center;
}
.cl-bar li { list-style: none; }
.cl-bar a {
min-height: 32px !important;
display: inline-flex !important;
align-items: center;
padding: 0 14px !important;
font-size: 12px !important;
}
/* --- A4. Hero -------------------------------------------------------------
Sorun: slider gorsellerinde (1920x1080) baslik metni FOTOGRAFIN ICINE
gomulu. Sabit yukseklik + object-fit:cover verilince mobilde metnin
sol tarafi kesiliyordu ("...ZLA ALAN" gibi). Gorsel kendi oraninda
gosterilir -> hic kirpilmaz, tum kelimeler okunur.
Kalici cozum metinsiz gorsel + HTML basliktir; rapora islendi. */
.showcase {
display: block !important; /* snappy flex; arama karti yan yana dusuyordu */
height: auto !important;
min-height: 0 !important;
}
.showcase_slider,
.showcase_slider_wrapper,
.showcase_slider_wrapper_slide,
.showcase_slider_wrapper_slide_img {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
aspect-ratio: 16 / 9;
}
.showcase_slider_wrapper_slide_img img { width: 100%; height: 100%; object-fit: cover; }
/* --- A5. Ic sayfa basligi (H1) -------------------------------------------
BULGU: .banner_top mobilde display:none idi. Yani /carlist, /offices gibi
sayfalarin H1 basligi telefonda HIC gorunmuyordu. */
.banner_top {
display: block !important;
height: auto !important;
background: #fff !important;
}
.banner_top_inner {
display: block !important;
height: auto !important;
padding: 14px 14px 12px !important;
}
.banner_top_inner h1 {
margin: 0 !important;
font-size: 22px !important;
line-height: 1.3 !important;
color: var(--m-ink) !important;
text-align: start !important;
}
/* --- A6. Arac sinifi filtresi --------------------------------------------
BULGU 1: filtre satirinin her ogesi mobilde display:none idi --
telefonla gelen kullanici EKONOMIK / SUV / VAN diye
filtreleyemiyordu.
BULGU 2: liste justify-content:center; tasan ilk iki rozet ("Hepsi",
"PREMIUM") ekranin soluna kaciyor ve kaydirarak da
ulasilamiyordu. flex-start ile duzelir. */
.banner_bottom {
height: auto !important;
background: var(--m-soft) !important;
border-bottom: 1px solid var(--m-line);
}
.banner_bottom_inner { height: auto !important; padding: 0 !important; }
.banner_bottom_inner_list {
display: flex !important;
justify-content: flex-start !important;
gap: 8px;
margin: 0 !important;
padding: 10px 14px !important;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.banner_bottom_inner_list::-webkit-scrollbar { display: none; }
.banner_bottom_inner_list > li {
display: block !important;
flex: 0 0 auto;
margin: 0 !important;
padding: 0 !important;
background: #fff;
border: 1px solid var(--m-line);
border-radius: var(--m-pill);
}
.banner_bottom_inner_list > li > a {
display: flex !important;
align-items: center;
gap: 7px;
min-height: 40px;
padding: 0 13px !important;
opacity: 1 !important;
white-space: nowrap;
}
/* Secili filtre. "active" Turev'in adi (su an hic kullanilmiyor),
"m-secili" bizim eklediğimiz -- ikisi de ayni gorunumu alir. */
.banner_bottom_inner_list > li.active,
.banner_bottom_inner_list > li.m-secili {
background: var(--m-red);
border-color: var(--m-red);
box-shadow: 0 2px 8px rgba(237,28,36,.28);
}
.banner_bottom_inner_list > li.active .banner_bottom_inner_list_title,
.banner_bottom_inner_list > li.m-secili .banner_bottom_inner_list_title { color: #fff !important; }
.banner_bottom_inner_list_title {
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1 !important;
color: var(--m-ink) !important;
}
/* Ikon kabinin sablonda 13px ic dolgusu var; kutu 28px olup icerideki
![]()
0 piksele iniyor ve ikon hic gorunmuyordu. */
.banner_bottom_inner_list_icon {
width: 18px !important;
height: 18px !important;
padding: 0 !important;
margin: 0 !important;
flex: none;
display: flex !important;
align-items: center;
justify-content: center;
}
/* Ikonlar koyu zemine gore beyaz cizilmis; acik rozette gorunmez oluyordu */
.banner_bottom_inner_list_icon img {
width: 18px !important;
height: 18px !important;
filter: brightness(0) opacity(.55);
}
.banner_bottom_inner_list > li.active .banner_bottom_inner_list_icon img,
.banner_bottom_inner_list > li.m-secili .banner_bottom_inner_list_icon img {
filter: brightness(0) invert(1);
}
/* --- A6.1 Alt Sayfa "DEĞİŞTİR" ve Üst Bar Kontrast İyileştirmeleri --- */
.banner_bottom_inner_changes_middle_title {
color: #1f2937 !important;
font-size: 15px !important;
font-family: montserrat-bold, sans-serif !important;
line-height: 1.3 !important;
margin-bottom: 4px !important;
}
.banner_bottom_inner_changes_middle_date {
color: #4b5563 !important;
font-size: 13px !important;
font-family: montserrat-medium, sans-serif !important;
line-height: 1.3 !important;
}
.banner_bottom_inner_changes_icon {
border-color: #ED1C24 !important;
background: #ffffff !important;
}
.banner_bottom_inner_changes_button {
border-color: #ED1C24 !important;
color: #ED1C24 !important;
}
/* Koyu "DEĞİŞTİR" paneli içindeki kutular ve yazılar */
.banner_bottom_inner_changes_box {
background-color: #2b2727 !important;
border-radius: 16px !important;
box-shadow: 0 12px 36px rgba(0,0,0,0.4) !important;
padding: 30px 18px 24px 18px !important;
}
.banner_bottom_inner_changes_box_form_field label {
color: #ffffff !important;
font-size: 13px !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
display: block !important;
}
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_select,
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_date,
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_time {
background-color: #ffffff !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
min-height: 44px !important;
height: 44px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.12) !important;
display: flex !important;
align-items: center !important;
}
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_select select,
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_date input,
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_time select,
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom_time input {
color: #111827 !important;
background-color: transparent !important;
font-size: 14px !important;
font-weight: 600 !important;
font-family: montserrat-semibold, sans-serif !important;
}
.banner_bottom_inner_changes_box .select2-container--default .select2-selection--single,
.banner_bottom_inner_changes_box .select2-container .select2-selection--single {
background-color: transparent !important;
border: 0 !important;
height: 44px !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
}
.banner_bottom_inner_changes_box .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #111827 !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 44px !important;
padding-left: 0 !important;
}
.banner_bottom_inner_changes_box .select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: #374151 transparent transparent transparent !important;
}
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom.fifty {
display: grid !important;
grid-template-columns: 1.25fr 1fr !important;
gap: 8px !important;
}
.banner_bottom_inner_changes_box .showcase_reservation_form_inner_field_bottom.fifty > div {
min-width: 0 !important;
width: 100% !important;
}
.banner_bottom_inner_changes_box_form_field button {
background-color: #ED1C24 !important;
border-radius: 8px !important;
color: #ffffff !important;
font-size: 15px !important;
font-weight: 700 !important;
height: 46px !important;
line-height: 46px !important;
padding: 0 20px !important;
box-shadow: 0 4px 12px rgba(237,28,36,0.35) !important;
border: 0 !important;
width: 100% !important;
cursor: pointer !important;
}
/* --- A7. Cerez uyarisi ----------------------------------------------------
Sorun: snappy .gdpr'a flex-direction:column veriyor. Icerigin
"flex: 1 1 200px" temeli bu yuzden GENISLIK degil YUKSEKLIK olarak
uygulaniyor ve kutu 284px'e sisip hero'yu ve arama formunu kapatiyordu.
Ayrica top+bottom birlikte tanimli oldugu icin kutu dikeyde geriliyordu. */
.gdpr {
top: auto !important;
height: auto !important;
left: calc(10px + var(--m-safe-l)) !important;
right: calc(10px + var(--m-safe-r)) !important;
width: auto !important;
max-width: 560px;
margin-inline: auto;
/* Alt aksiyon cubugunun hemen ustune oturur -- boylece sayfa
icerigini (ozellikle "Hemen Kirala" dugmesini) en az kapatir.
WhatsApp dugmesi ise banner acikken yukari kayar (asagi bak). */
bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 8px) !important;
/* DIKKAT: buraya "display: flex !important" YAZILMAZ.
gdprOk() kabul edilince elemana satir ici style="display:none"
koyuyor; !important'li bir display kurali bunu yener ve cerez
uyarisi bir daha KAPANMAZ. snappy zaten display:flex veriyor,
biz yalnizca yonunu duzeltiyoruz. */
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 10px;
padding: 10px 12px !important;
border-radius: var(--m-r) !important;
background: rgba(30,26,26,.96) !important;
box-shadow: var(--m-sh-2);
z-index: 950 !important;
}
.gdpr_warning, .gdpr_warning * {
font-size: 11.5px !important;
line-height: 1.4 !important;
color: #d8d3d3 !important;
}
.gdpr_warning {
flex: 1 1 190px;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
}
.gdpr_warning a { color: #fff !important; }
.gdpr_accept {
flex: none;
min-height: 40px;
display: inline-flex !important;
align-items: center;
margin: 0 !important;
padding: 0 18px !important;
border: 0 !important;
border-radius: var(--m-pill) !important;
background: #fff !important;
color: var(--m-ink) !important;
font-size: 13px !important;
}
/* --- A8. Erisilebilirlik --------------------------------------------------
Klavye odagi hic gorunmuyordu. */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
outline: 3px solid rgba(237,28,36,.4);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
}
/* ==========================================================================
B) Y E N I L E M E — uc bilesen
========================================================================== */
/* --------------------------------------------------------------------------
B1. ARAMA KARTI
Sorun 1: snappy hem kaba hem alanlara height:100% veriyor; grid/flex
icinde bu "esnet" demek ve her kutu ~122px'e sisiyordu.
Dort kutu + dugme ilk ekrana sigmiyordu.
Sorun 2: .showcase_reservation_inner sabit 120px + overflow:hidden --
icine giren her sey kirpiliyordu.
-------------------------------------------------------------------------- */
.showcase_reservation {
position: relative !important;
top: auto !important;
height: auto !important;
margin-top: -28px;
padding: 0 12px;
z-index: 5;
}
.showcase_reservation_inner,
.showcase_reservation_form,
.showcase_reservation_form_inner {
height: auto !important;
min-height: 0 !important;
}
.showcase_reservation_inner {
padding: 12px !important;
border: 1px solid var(--m-line);
border-radius: var(--m-r);
background: #fff;
box-shadow: var(--m-sh-2);
overflow: visible !important;
}
/* Kupon / sekme seridi */
.showcase_reservation_cupon {
min-height: 0 !important;
padding: 9px 12px !important;
border-radius: 10px;
background-color: var(--m-soft);
}
.showcase_reservation_cupon_icon svg { width: 20px; height: 20px; }
/* Bu baslik #fff olarak tanimli -- koyu rezervasyon seridi icin
tasarlanmis. Mobilde zemin acik oldugu icin yazi gorunmez oluyordu. */
.showcase_reservation_cupon_right_title { color: var(--m-ink) !important; }
.showcase_reservation_cupon_right_text { color: var(--m-muted) !important; }
/* Alanlar: tek sutun, aralik yalnizca grid gap ile yonetilir */
.showcase_reservation_form_inner {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
/* RAKIP KIYASI (26.08, 375px olculdu)
Europcar : tek satirlik alan, 56px, 16px yazi, ikon kutunun icinde
Enterprise : tek satirlik alan, 48px
Castle : etiket ustte + deger altta = 81px <-- en hantali
Cozum: etiketi kutunun ICINE, ust kenara tasiyan "yuzen etiket" kalibi.
Etiket okunur kalir, kutu 81px'ten ~64px'e iner ve "Hemen Kirala"
ilk ekranda daha rahat gorunur. DOM'a dokunulmaz -- sadece konum. */
.showcase_reservation_form_inner_field {
position: relative;
height: auto !important;
min-height: 64px;
margin: 0 !important;
display: block;
padding: 15px 12px 5px;
border: 1px solid var(--m-line);
border-radius: 10px;
background: var(--m-soft);
transition: border-color .15s var(--m-ease), box-shadow .15s var(--m-ease);
}
.showcase_reservation_form_inner_field:focus-within {
background: #fff;
border-color: var(--m-red);
box-shadow: 0 0 0 3px rgba(237,28,36,.1);
}
.showcase_reservation_form_inner_field_top {
position: absolute;
top: 5px;
left: 12px;
right: 12px;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background-color: transparent !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
pointer-events: none; /* alta tiklamayi engellemesin */
}
/* "Farkli Adrese Teslim" baglantisi tiklanabilir kalmali */
.showcase_reservation_form_inner_field_top a { pointer-events: auto; }
.showcase_reservation_form_inner_field_top_title {
font-size: 10px !important;
line-height: 1.3 !important;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--m-muted) !important;
white-space: nowrap;
}
/* "Farkli Adrese Teslim" baglantisi saga tasiyordu */
.showcase_reservation_form_inner_field_top a {
font-size: 11px !important;
line-height: 1.25 !important;
text-align: right;
min-width: 0;
overflow-wrap: anywhere;
}
.showcase_reservation_form_inner_field_bottom {
min-height: var(--m-tap);
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
/* DIKKAT: "background" kisayolu KULLANILMAZ. Bu alanlarin konum/takvim/
saat ikonlari background-image olarak geliyor; kisayol onlari da
siliyor ve geriye 45px bos girinti kaliyor. */
background-color: transparent !important;
display: flex;
align-items: center;
gap: 8px;
}
.showcase_reservation_form_inner_field_bottom * { text-align: start !important; }
.showcase_reservation_form_inner_field_bottom_select,
.showcase_reservation_form_inner_field_bottom_date,
.showcase_reservation_form_inner_field_bottom_time {
min-height: var(--m-tap);
display: flex !important;
align-items: center;
border: 0 !important;
background-color: transparent !important;
font-size: 15px !important;
color: var(--m-ink) !important;
}
/* Ikonlar 10px'te ve 20px genisliginde -> yazi 36px'ten baslamali.
Saat kutusunda dolgu 0 oldugu icin saat, ikonun uzerine biniyordu. */
/* MANTIKSAL OZELLIK KULLANILIR (padding-left/right DEGIL).
Arapca sayfada snappy.rtl.css ikonu saga aliyor
(background-position: calc(100% - 10px) 50%). Fiziksel "padding-left"
ile bosluk YANLIS tarafta kaliyor ve tarih ikonun altina girip
"26.08.202" diye kirpiliyordu. inline-start LTR'de sol, RTL'de sag
demektir -- iki yonde de dogru calisir. */
.showcase_reservation_form_inner_field_bottom_date,
.showcase_reservation_form_inner_field_bottom_time {
padding-inline-start: 36px !important;
padding-inline-end: 6px !important;
}
/* Ofis kutusunda sagdaki acilir ok icin yer birakilir; aksi halde
"Istanbul Havalimani" okun uzerine biniyordu. */
.showcase_reservation_form_inner_field_bottom_select {
padding-inline-start: 36px !important; /* konum ikonu */
padding-inline-end: 28px !important; /* acilir ok */
}
/* Saat kutusu dar. select2 kendi ic dolgusuyla (0 20px 0 8px) ve kendi
okuyla 28px yiyor; "13:00" bu yuzden "13:..." diye kirpiliyordu.
Saatte zaten saat ikonu var, select2'nin oku gereksiz. */
.showcase_reservation_form_inner_field_bottom_time .select2-selection__rendered {
padding: 0 !important;
text-overflow: clip !important;
}
.showcase_reservation_form_inner_field_bottom_time .select2-selection__arrow { display: none !important; }
.showcase_reservation_form_inner_field_bottom_time .select2 { width: 100% !important; }
.showcase_reservation_form_inner_field_bottom_select,
.showcase_reservation_form_inner_field_bottom_date,
.showcase_reservation_form_inner_field_bottom_time { min-width: 0; }
.showcase_reservation_form_inner_field_bottom_date input,
.showcase_reservation_form_inner_field_bottom_time input,
.showcase_reservation_form_inner_field_bottom_date select,
.showcase_reservation_form_inner_field_bottom_time select {
padding-left: 0 !important;
width: 100%;
}
/* iOS, 16px'in altindaki girise odaklaninca sayfayi otomatik yakinlastirir */
.showcase_reservation_form_inner_field_bottom input,
.showcase_reservation_form_inner_field_bottom select {
min-height: var(--m-tap);
border: 0 !important;
background-color: transparent !important;
font-size: 16px !important;
color: var(--m-ink) !important;
}
/* Tarih + saat ayni satirda (JS .m-date-row sinifini ekler) */
/* Saat kutusu "13:00"u kirpmayacak kadar genis olmali */
.m-date-row { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6px; }
/* ARAPCA MARKA RENGI DUZELTMESI
BULGU: snappy.rtl.css icinde 77 yerde #e27006 (eski turuncu) SABIT
yazilmis; ayni yerlerde snappy.min.css var(--color-1) kullaniyor.
Sonuc: Arapca sitenin tamami turuncu, digerleri Castle kirmizisi.
Bu bir sablon uretim hatasi (rtl dosyasi marka rengi temalanmadan
uretilmis). Tam cozum rtl dosyasinin yeniden uretilmesidir ve
masaustunu de ilgilendirir -- oraya dokunmuyorum.
Burada yalnizca MOBILDEKI birincil eylemi markaya hizaliyorum ki
dort dil ayni gorunsun. */
.showcase_reservation_form_inner_field.button button {
background-color: var(--m-red) !important;
}
/* Ana eylem */
.showcase_reservation_form_inner_field.button {
padding: 0;
border: 0;
background: transparent;
}
.showcase_reservation_form_inner_field.button a,
.showcase_reservation_form_inner_field.button > div,
.showcase_reservation_form_inner_button {
min-height: 52px !important;
border-radius: 10px !important;
font-size: 16px !important;
}
/* --------------------------------------------------------------------------
B2. ARAC KARTLARI
Once: tek kart 802px -- bir ekranda tek arac bile gorunmuyordu.
Ozellikler alt alta madde listesiydi; her ikonun arkasinda 26px gri
kare vardi. Simdi rozet dizisi: kart ~520px.
-------------------------------------------------------------------------- */
.cars_list {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin: 0 !important;
padding: 14px 12px !important;
}
.cars_list > li {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--m-line);
border-radius: var(--m-r);
background: #fff;
box-shadow: var(--m-sh-1);
/* ekran disindaki kartlarin yerlesimini hesaplama -> akici kaydirma */
content-visibility: auto;
contain-intrinsic-size: 520px;
}
.cars_list_top_img {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
padding: 8px 12px;
background: linear-gradient(180deg, #fff 0%, var(--m-soft) 100%);
}
.cars_list_top_img img {
max-height: 100%;
width: auto;
object-fit: contain;
mix-blend-mode: multiply; /* PNG'lerin beyaz zeminini yumusatir */
}
.cars_list_top_title {
background: transparent !important;
padding: 12px 14px 0 !important;
font-size: 17px !important;
line-height: 1.25 !important;
color: var(--m-ink) !important;
text-align: start !important;
}
.cars_list_top_title > div {
margin-top: 3px;
font-size: 12.5px !important;
color: var(--m-muted) !important;
}
/* Gri blok zeminler kaldirilir, dolgu tek yerden verilir */
.cars_list_top_middle,
.cars_list_top_bottom {
background: transparent !important;
padding: 0 !important;
border-top: 1px solid var(--m-line);
}
.cars_list_top_middle_title,
.cars_list_top_bottom_title {
padding: 13px 14px 6px !important;
font-size: 10.5px !important;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--m-muted) !important;
text-align: start !important;
}
.cars_list_top_middle_list,
.cars_list_top_bottom_list {
display: flex !important;
flex-wrap: wrap;
gap: 6px;
margin: 0 !important;
padding: 0 14px 14px !important;
}
.cars_list_top_middle_list > li,
.cars_list_top_bottom_list > li {
display: inline-flex !important;
align-items: center;
gap: 5px;
width: auto !important;
margin: 0 !important;
padding: 5px 9px !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-pill) !important;
background: var(--m-soft) !important;
}
/* Ikon kutusunun 26px gri karesi rozet icinde gereksiz */
.cars_list_top_middle_list_icon,
.cars_list_top_bottom_list_icon {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
flex: none;
background: transparent !important;
}
.cars_list_top_middle_list_icon img,
.cars_list_top_bottom_list_icon img { width: 16px; height: 16px; opacity: .65; }
.cars_list_top_middle_list_title,
.cars_list_top_bottom_list_title {
font-size: 12px !important;
line-height: 1 !important;
color: var(--m-text) !important;
white-space: nowrap;
}
/* Eylem satiri kartin dibine yapisir */
.cars_list_buttons {
margin: auto 0 0 !important;
padding: 12px 14px !important;
gap: 8px;
border-top: 1px solid var(--m-line);
}
.cars_list_buttons > a {
min-height: 48px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 10px !important;
font-size: 14px !important;
line-height: 1.2 !important;
text-align: center;
}
/* --------------------------------------------------------------------------
B3. ALT AKSIYON CUBUGU
Sablonda .app-bar var ama BOS. Dolduruluyor: sayfanin her yerinden
tek dokunusla arama, filo, telefon, WhatsApp.
-------------------------------------------------------------------------- */
body { padding-bottom: calc(var(--m-bar-h) + var(--m-safe-b)); }
.app-bar {
height: calc(var(--m-bar-h) + var(--m-safe-b)) !important;
padding-bottom: var(--m-safe-b);
padding-left: var(--m-safe-l);
padding-right: var(--m-safe-r);
background: rgba(255,255,255,.95) !important;
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
border-top: 1px solid var(--m-line);
box-shadow: 0 -4px 16px rgba(0,0,0,.06);
z-index: 940 !important;
}
.m-bar-item {
flex: 1 1 0;
min-width: 0;
height: var(--m-bar-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
font-size: 10px;
line-height: 1;
color: var(--m-text);
text-decoration: none;
-webkit-tap-highlight-color: transparent;
}
.m-bar-item svg {
width: 21px; height: 21px;
fill: none; stroke: currentColor; stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
.m-bar-item.is-active { color: var(--m-red); }
.m-bar-item:active { background: var(--m-soft); }
/* --------------------------------------------------------------------------
B3b. WHATSAPP DUGMESI (istenen duzeltme)
Once: 62px daire, sonsuz nabiz animasyonu, alt cubuga ve cerez
uyarisina biniyordu, secim karti masaustu icin tasarlanmisti.
-------------------------------------------------------------------------- */
/* Canlidaki mevcut WhatsApp balonu ve karti MOBILDE gizlenir; yerine
asagidaki dugme + alttan acilan sayfa gelir. Masaustunde eski bilesen
oldugu gibi calismaya devam eder -- bu blok oraya ulasmaz. */
.c-wa-btn, .c-card { display: none !important; }
.m-wa {
position: fixed;
right: auto;
inset-inline-end: calc(14px + var(--m-safe-r));
bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 14px);
width: 54px;
height: 54px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #25D366;
box-shadow: 0 4px 14px rgba(37,211,102,.4);
cursor: pointer;
z-index: 960;
transition: transform .15s var(--m-ease);
}
.m-wa:active { transform: scale(.94); }
/* Cerez seridi acikken dugme onun ustune cikar. Seridin gercek
yuksekligi castle-mobile.js tarafindan --m-gdpr-h olarak yazilir. */
body.m-gdpr-open .m-wa {
bottom: calc(var(--m-bar-h) + var(--m-safe-b) + 8px + var(--m-gdpr-h, 90px) + 12px);
}
.m-wa { transition: transform .15s var(--m-ease), bottom .2s var(--m-ease); }
.m-wa svg { width: 29px; height: 29px; fill: #fff; }
/* Tek seferlik dikkat cekme: 3 turda durur. Sonsuz animasyon pil yakar
ve zamanla gorunmez hale gelir. */
.m-wa::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
animation: m-ping 2.2s var(--m-ease) 3;
}
@keyframes m-ping {
0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); }
100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
/* Sube secimi: masaustu karti degil, alttan acilan sayfa */
.m-sheet-bg {
position: fixed;
inset: 0;
background: rgba(0,0,0,.45);
opacity: 0;
pointer-events: none;
transition: opacity .22s var(--m-ease);
z-index: 970;
}
.m-sheet-bg.is-open { opacity: 1; pointer-events: auto; }
.m-sheet {
position: fixed;
left: 0; right: 0; bottom: 0;
max-height: 84vh;
overflow-y: auto;
overscroll-behavior: contain;
padding: 8px 14px calc(14px + var(--m-safe-b));
background: #fff;
border-radius: 16px 16px 0 0;
box-shadow: 0 -8px 40px rgba(0,0,0,.2);
transform: translateY(102%);
transition: transform .28s var(--m-ease);
z-index: 980;
}
.m-sheet.is-open { transform: translateY(0); }
.m-sheet-grip {
width: 38px; height: 4px;
margin: 4px auto 12px;
border-radius: var(--m-pill);
background: var(--m-line);
}
.m-sheet h4 {
margin: 0 0 2px;
font-size: 16px;
color: var(--m-ink);
}
.m-sheet-sub {
margin: 0 0 12px;
font-size: 12.5px;
color: var(--m-muted);
}
.m-sheet-item {
display: flex;
align-items: center;
gap: 12px;
min-height: 58px;
margin-bottom: 8px;
padding: 11px 13px;
border: 1px solid var(--m-line);
border-radius: var(--m-r);
text-decoration: none;
background: #fff;
}
.m-sheet-item:active { background: var(--m-soft); }
.m-sheet-item .m-ico {
width: 38px; height: 38px;
flex: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--m-soft);
font-size: 17px;
}
.m-sheet-item strong {
display: block;
font-size: 14px;
line-height: 1.3;
color: var(--m-ink);
}
.m-sheet-item span {
display: block;
margin-top: 2px;
font-size: 12px;
line-height: 1.35;
color: var(--m-muted);
}
.m-sheet-item.is-wa .m-ico { background: #e9faf0; }
.m-sheet-item.is-call .m-ico { background: #fdeced; }
/* --------------------------------------------------------------------------
B3c. YAN PANELLER (#menu ve #menu2)
Ust dil seridi kaldirildigi icin sagdaki panel artik dilin ve uyeligin
ANA yuzeyi. Sablonun kirmizi mmenu panelini sadelestiriyoruz.
Islev ve baglantilar aynen kalir; sadece okunurluk artar.
-------------------------------------------------------------------------- */
.mobile_container.mm-spn,
.mobile_container.mm-spn.mm-spn--dark {
background: #fff !important;
color: var(--m-ink) !important;
}
/* mmenu'nun ust "Menu" seridi */
.mobile_container.mm-spn.mm-spn--navbar::before {
color: var(--m-muted) !important;
font-size: 11px !important;
letter-spacing: .08em;
text-transform: uppercase;
}
.mobile_container.mm-spn::after { border-color: var(--m-line) !important; }
.mobile_container_menu > li > a,
.mobile_container.mm-spn a {
color: var(--m-ink) !important;
font-size: 15px !important;
}
.mobile_container_menu > li {
border-bottom: 1px solid var(--m-line);
}
.mobile_container_menu > li > a {
display: flex !important;
align-items: center;
min-height: 52px;
padding: 0 18px !important;
}
.mobile_container_menu > li > a:active { background: var(--m-soft) !important; }
/* Alt blok: dil + para birimi */
.mobile_container_bottom {
padding: 14px 14px calc(16px + var(--m-safe-b)) !important;
background: #fff !important;
border-top: 1px solid var(--m-line);
}
.mobile_container_bottom_lang,
.mobile_container_bottom_currency {
display: flex !important;
/* sablon sutun yonunde diziyordu -> her rozet tam genislige yayiliyordu */
flex-direction: row !important;
flex-wrap: wrap;
gap: 6px;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
/* CSS ile uretilen basliklar -- DOM'a icerik eklenmez */
.mobile_container_bottom_lang::before { content: "Dil"; }
.mobile_container_bottom_currency::before { content: "Para birimi"; }
html:lang(en) .mobile_container_bottom_lang::before { content: "Language"; }
html:lang(en) .mobile_container_bottom_currency::before { content: "Currency"; }
html:lang(ru) .mobile_container_bottom_lang::before { content: "Язык"; }
html:lang(ru) .mobile_container_bottom_currency::before { content: "Валюта"; }
html:lang(ar) .mobile_container_bottom_lang::before { content: "اللغة"; }
html:lang(ar) .mobile_container_bottom_currency::before { content: "العملة"; }
.mobile_container_bottom_lang::before,
.mobile_container_bottom_currency::before {
flex: 1 0 100%;
margin-bottom: 2px;
font-size: 10.5px;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--m-muted);
}
.mobile_container_bottom_currency { margin-top: 14px !important; }
.mobile_container_bottom_lang a,
.mobile_container_bottom_currency a {
display: inline-flex !important;
align-items: center;
justify-content: center;
flex: 0 0 auto !important;
width: auto !important;
min-width: 54px;
min-height: 40px;
margin: 0 !important;
padding: 0 14px !important;
border: 1px solid var(--m-line) !important;
border-radius: var(--m-pill) !important;
background: #fff !important;
color: var(--m-ink) !important;
font-size: 13px !important;
}
/* Para birimi baglantilari icerideki 'a genislik/dolgu tasiyor;
rozetler farkli boyutlara dagiliyordu. */
.mobile_container_bottom_lang a > span,
.mobile_container_bottom_currency a > span {
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
font-size: 13px !important;
line-height: 1 !important;
color: inherit !important;
}
.mobile_container_bottom_lang a.active,
.mobile_container_bottom_currency a.active {
background: var(--m-red) !important;
border-color: var(--m-red) !important;
color: #fff !important;
}
/* --------------------------------------------------------------------------
B4. "ONE CIKAN ARACLAR" SERIDI (.content_campaign)
Bu bolum POST /Ajax.aspx (e=campaignauto) ile doluyor. Karti arac
listesindekiyle ayni dile getiriyoruz.
-------------------------------------------------------------------------- */
.content_campaign { padding: 26px 0 !important; }
.content_campaign_container { padding: 0 !important; }
.content_campaign_inner { padding: 0 !important; }
/* DIKKAT: buraya "overflow: visible" yazilmaz. 15 slayt x 351px = ~5.200px
ve serit sayfayi yatayda tasiriyor. Swiper zaten kabini kirpmali. */
.content_campaign_inner_slider {
padding: 0 12px 8px !important;
overflow: hidden !important;
}
.content_campaign_inner_list > li {
height: auto !important;
background: #fff;
border: 1px solid var(--m-line);
border-radius: var(--m-r);
box-shadow: var(--m-sh-1);
overflow: hidden;
}
.content_campaign_inner_list > li > a { display: block; }
/* DOM sirasi: etiket, gorsel, FIYAT, baslik. Okuma sirasi "once ne
aldigin, sonra kac para" olmali; flex order ile GORSEL sira degistirilir
(DOM'a dokunulmaz, ekran okuyucu sirasi ayni kalir). */
.content_campaign_inner_list_top {
position: relative;
display: flex !important;
flex-direction: column;
padding: 0 !important;
}
.content_campaign_inner_list_top_img { order: 1; }
.content_campaign_inner_list_top_title { order: 2; }
.content_campaign_inner_list_top_price { order: 3; }
.content_campaign_inner_list_top_img {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 10;
padding: 8px 12px;
background: linear-gradient(180deg, #fff 0%, var(--m-soft) 100%);
}
.content_campaign_inner_list_top_img img {
max-height: 100%; width: auto;
object-fit: contain;
mix-blend-mode: multiply;
}
/* Segment etiketi (EKONOMIK / SUV ...) gorselin uzerine rozet olur */
.content_campaign_inner_list_top_label {
position: absolute;
top: 10px; left: 10px;
z-index: 2;
padding: 4px 9px;
border-radius: var(--m-pill);
background: rgba(255,255,255,.92);
border: 1px solid var(--m-line);
font-size: 10.5px !important;
letter-spacing: .05em;
color: var(--m-ink) !important;
}
.content_campaign_inner_list_top_title {
padding: 10px 14px 0 !important;
font-size: 16px !important;
line-height: 1.25 !important;
color: var(--m-ink) !important;
text-align: start !important;
}
.content_campaign_inner_list_top_title > div {
margin-top: 2px;
font-size: 12.5px !important;
color: var(--m-muted) !important;
text-align: start !important; /* saga yaslanmis geliyordu */
}
.content_campaign_inner_list_top_price {
display: flex !important;
align-items: baseline;
gap: 6px;
flex-wrap: wrap;
padding: 6px 14px 12px !important;
text-align: start !important;
}
.content_campaign_inner_list_top_price > *:not(.content_campaign_inner_list_top_price_value) {
font-size: 12px !important;
color: var(--m-muted) !important;
text-align: start !important;
}
.content_campaign_inner_list_top_price_value {
font-size: 19px !important;
line-height: 1.15 !important;
color: var(--m-ink) !important;
letter-spacing: -.02em;
}
.content_campaign_inner_list_top_price .currency { font-size: .72em; margin-left: 2px; }
.content_campaign_inner_list_bottom.buttons {
display: flex !important;
align-items: stretch;
gap: 8px;
padding: 12px 14px !important;
border-top: 1px solid var(--m-line);
}
.content_campaign_inner_list_bottom_title {
flex: 1 1 auto;
min-height: 46px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 10px;
background: var(--m-red);
color: #fff !important;
font-size: 14px !important;
}
.content_campaign_inner_list_bottom_discount {
flex: 0 0 auto;
min-height: 46px;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 11px;
border-radius: 10px;
background: var(--m-ink);
color: #fff !important;
line-height: 1.15;
}
.content_campaign_inner_list_bottom_discount span { font-size: 9.5px !important; color: #fff !important; }
/* Swiper sayfa noktalari: 15 arac var, varsayilan cizgiler iki satira
tasiyordu. Kucuk yuvarlak noktalar tek satira sigar. */
.content_campaign .swiper-pagination {
position: static !important;
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 5px;
margin-top: 14px;
padding: 0 12px;
}
.content_campaign .swiper-pagination-bullet {
width: 6px !important;
height: 6px !important;
margin: 0 !important;
border-radius: 50% !important;
flex: none;
opacity: 1;
background: #d9d4d4 !important;
transition: background .2s var(--m-ease), transform .2s var(--m-ease);
}
.content_campaign .swiper-pagination-bullet-active {
background: var(--m-red) !important;
transform: scale(1.35);
}
/* --------------------------------------------------------------------------
B5. "KAMPANYALAR" (.content_advantage) ve YORUMLAR (.content_customer)
-------------------------------------------------------------------------- */
.content_advantage, .content_customer { padding: 26px 0 !important; }
/* Ekran disindaki bolumlerin yerlesimini tarayici hesaplamasin --
uzun ana sayfada kaydirma akiciligi ve ilk cizim suresi icin. */
/* Yalnizca metin agirlikli yorum kartlarinda. Kampanya kartlarinda
KULLANILMAZ: icindeki lazy gorselin yuklenmesini geciktiriyordu. */
.content_customer_inner_list > li {
content-visibility: auto;
contain-intrinsic-size: 180px;
}
.content_advantage_inner, .content_customer_inner { padding: 0 12px !important; }
.content_advantage_inner_list,
.content_customer_inner_list {
display: grid !important;
grid-template-columns: 1fr;
gap: 12px;
margin: 0 !important;
padding: 0 !important;
}
.content_advantage_inner_list > li,
.content_customer_inner_list > li {
width: auto !important;
margin: 0 !important;
background: #fff;
border: 1px solid var(--m-line);
border-radius: var(--m-r);
box-shadow: var(--m-sh-1);
overflow: hidden;
}
.content_advantage_inner_list > li > a { display: block; }
/* BULGU: kampanya gorselleri KARE (1024x1024, 2048x2048, 655x595).
16:9'a zorlanip object-fit:cover verilince yuksekligin ~%44'u
kirpiliyordu -- kullanici "ustu kapanmis gibi" diye bildirdi.
Gorseller kendi oraninda gosterilir: hicbir sey kirpilmaz.
Asiri uzun bir gorsel gelirse max-height + contain devreye girer. */
.content_advantage_inner_list_top_img {
/* Gorseller KARE oldugu icin kutu da kare. "contain" ile hicbiri
kirpilmaz; kare olmayan tek gorselde (655x595) ince bir bosluk
kalir. Sabit oran, gorsel inmeden once de kutuyu ayakta tutar --
"height:auto" denendi, gorsel yuklenene kadar yukseklik 0 olup
yerlesim ziplariyordu. */
aspect-ratio: 1 / 1;
height: auto;
background: var(--m-soft);
}
.content_advantage_inner_list_top_img img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
/* Kampanya kartinin baslik seridi.
Sablonda "Detay" kutusunun zemini de yazisi da ayni koyu renk (#453f3f)
-- yazi gorunmuyordu. Baslik ise .one-line ile tek satira kirpiliyor,
mobilde "Premium Deneyim, Yeni B..." diye kesiliyordu. */
.content_advantage_inner_list_top_label {
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 14px !important;
background: #fff !important;
}
.content_advantage_inner_list_top_label_right {
order: 1;
width: 100% !important;
background: transparent !important;
color: var(--m-ink) !important;
font-size: 15px !important;
line-height: 1.35 !important;
text-align: start !important;
/* .one-line kirpmasini iptal et */
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
.content_advantage_inner_list_top_label_left {
order: 2;
display: inline-flex !important;
align-items: center;
width: auto !important;
min-height: 38px;
padding: 0 16px !important;
border-radius: var(--m-pill) !important;
background: var(--m-red) !important;
color: #fff !important;
font-size: 13px !important;
line-height: 1 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
text-align: center !important;
}
.content_advantage_inner_list_bottom { padding: 0 14px 14px !important; }
/* Basligin aynisi olan aciklama satiri (bkz. castle-mobile.js -> kopyaBaslik) */
.content_advantage_inner_list_bottom.m-kopya { display: none !important; }
/* Yorum kartlari */
.content_customer_inner_list > li { padding: 14px !important; }
.content_customer_inner_list_name {
font-size: 14px !important;
color: var(--m-ink) !important;
text-align: start !important;
margin-bottom: 6px;
}
.content_customer_inner_list_text {
font-size: 13.5px !important;
line-height: 1.5 !important;
color: var(--m-text) !important;
text-align: start !important;
}
/* Alt tanitim seridi */
.content_advantage_inner_bottom {
margin-top: 16px;
padding: 14px !important;
border-radius: var(--m-r);
background: var(--m-soft);
}
.content_advantage_inner_bottom_left_title {
font-size: 15px !important;
line-height: 1.35 !important;
color: var(--m-ink) !important;
text-align: start !important;
}
/* --------------------------------------------------------------------------
B6. SIKCA SORULAN SORULAR
-------------------------------------------------------------------------- */
.content_faq { padding: 26px 0 !important; }
.content_faq_inner { padding: 0 12px !important; }
.content_faq_inner_content {
margin-bottom: 8px;
padding: 13px 14px !important;
border: 1px solid var(--m-line);
border-radius: 10px;
background: #fff;
}
.content_faq_inner_content_title,
h2.content_faq_inner_content_title {
margin: 0 0 5px !important;
padding: 0 !important;
font-size: 14.5px !important;
line-height: 1.4 !important;
color: var(--m-ink) !important;
text-align: start !important;
}
.content_faq_inner_content_text {
margin: 0 !important;
padding: 0 !important;
font-size: 13.5px !important;
line-height: 1.55 !important;
color: var(--m-text) !important;
text-align: start !important;
}
.content_faq_inner_content_img { display: none; }
/* Bolum basliklari */
.content_title { padding: 0 12px 14px !important; }
/* Rakiplerde bolum basligi 32px (Europcar 32-36, Enterprise 32).
20px cok siliktir; Turkce uzun kelimeler icin 24px dengeli. */
.content_title h2 {
margin: 0 !important;
font-size: 24px !important;
line-height: 1.25 !important;
color: var(--m-ink) !important;
text-align: start !important;
}
.content_title h2::after,
.content_title::after { left: 12px !important; transform: none !important; }
/* --------------------------------------------------------------------------
B7. ARAC SINIFI FILTRESI — secim daha okunur
Kaydirilirken basligin altina yapisir, aktif rozet net belli olur ve
secilen rozet gorunur alana kaydirilir (castle-mobile.js).
-------------------------------------------------------------------------- */
/* NOT: filtre seridini basligin altina yapistirmak denendi ve
KALDIRILDI. Sticky bir oge yalnizca EBEVEYNININ kutusu icinde
yapisir; buradaki ebeveyn .banner ve sadece birkac yuz piksel
yuksekliginde -- arac listesi boyunca yapismasi mumkun degil.
Gercekten istenirse JS ile "scroll sonrasi fixed" yapilmali;
ayri bir is olarak notlandi. */
.banner_bottom_inner_list > li {
transition: background .15s var(--m-ease), border-color .15s var(--m-ease);
}
.banner_bottom_inner_list > li.active {
box-shadow: 0 2px 8px rgba(237,28,36,.28);
}
/* Seridin sag ucunda "devami var" ipucu */
.banner_bottom_inner { position: relative; }
.banner_bottom_inner::after {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0;
width: 26px;
pointer-events: none;
background: linear-gradient(90deg, rgba(246,246,247,0), rgba(246,246,247,1));
}
} /* === @media (max-width: 1239px) SONU ================================== */