/* ====================================================================================================== WRS Car — tasarım v3 "Uygulama gibi, sade" Yalnız v3'te yüklenir: sunucu (design.js) + styles-v2.css + bu dosya (en son) + v3.js + alt sekme çubuğu basar. v2'nin işaretlemesi ve stilleri temel alınır; burada yalnız farklar var (.d3 önekli). Fikir: mobilde ilk ekran = arama. Pazarlama bölümleri sadeleşir, gezinme alttaki sekme çubuğundan yapılır (Ara · Rezervasyonlar · Favoriler · Destek). Birincil düğme altın zemin + lacivert yazı (kontrast 6,8). Masaüstünde (≥900 px) sekme çubuğu yoktur; v2 düzeni daha sade ve soğuk gri zeminle kalır. ====================================================================================================== */ html.d3{ --v3-bg:#F2F3F5; --v3-card:#FFFFFF; --v3-ink:#0F2A40; --v3-mut:#4B5565; --v3-line:#E3E6EA; --v3-gold:#C9AD7D; --v3-gold-h:#D6BE93; --v3-tab-h:64px; --v3-r:20px; --v2-bg:var(--v3-bg); --paper:var(--v3-bg); } .d3 body{ background:var(--v3-bg) } /* ---------- ortak: birincil düğme altın, kartlar beyaz ve yumuşak ---------- */ /* ana düğmeler altın zemin + lacivert yazı (müşteri kararı: lacivertten geri alındı) */ .d3 .btn.primary, .d3 .search-card > #searchBtn{ background:var(--v3-gold); color:var(--v3-ink) } .d3 .btn.primary:hover, .d3 .search-card > #searchBtn:hover{ background:var(--v3-gold-h) } /* üst şerit kurumsal lacivert (müşteri isteği) — yalnız .top değişir, sayfanın geri kalanı açık zeminde kalır */ .d3 .top, .d3 .top.scrolled{ background:#0F2A40; -webkit-backdrop-filter:none; backdrop-filter:none; color:#F6F4EE; border-bottom-color:transparent; box-shadow:none } .d3 .top .brand img{ mix-blend-mode:normal } .d3 .top .v2-nav a{ color:#F6F4EE } .d3 .top .v2-nav a:hover{ background:rgba(255,255,255,.1) } .d3 .top .lp-btn, .d3 .top .wfav-pill{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.4); color:#F6F4EE } .d3 .top .lp-btn:hover, .d3 .top .wfav-pill:hover{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.7) } .d3 .top .wfav-pill svg{ fill:var(--v3-gold) } .d3 .top .auth-pill{ background:#fff; border-color:#fff; color:#0F2A40 } .d3 .top .auth-pill:hover{ background:#F2F3F5 } .d3 .top :focus-visible{ outline-color:var(--v3-gold) } .d3 .btn.primary svg{ fill:currentColor } .d3 .car{ border-radius:var(--v3-r); border-color:var(--v3-line) } /* sade: tanıtım bantları kalkar (bilgiler güven kartları ve SSS'te zaten var) */ .d3 .v2-band, .d3 .d2-home > .v2-wow, .d3 .d2-home > .v2-facts{ display:none !important } /* ---------- ana ekran: v1'in arama üstündeki yazıları, küçük ve sıkı; arama alanı ilk ekranda ---------- */ .d3 .v2-display, .d3 .v2-hero-eyebrow{ display:none !important } .d3 .hero-text > .eyebrow{ display:inline-flex; align-self:flex-start; margin:0 0 8px; font-size:11.5px; padding:5px 12px; letter-spacing:.12em; color:#6E4F1A; background:rgba(201,173,125,.18) } .d3 .hero-text > h1{ position:static !important; width:auto !important; height:auto !important; margin:0 0 6px !important; padding:0; overflow:visible !important; clip:auto !important; white-space:normal !important; border:0; font-size:clamp(28px,3.4vw,40px); font-weight:700; letter-spacing:-.025em; line-height:1.12; color:var(--v3-ink) } .d3 .hero .lead{ display:block; margin:0 0 10px; font-size:16px; line-height:1.45; color:var(--v3-mut); max-width:62ch } .d3 .hero-text > .trust{ display:flex; flex-direction:row; flex-wrap:wrap; gap:6px 16px; margin:0 0 14px; font-size:13.5px; color:var(--v3-ink) } .d3 .hero-text > .trust li, .d3 .hero-text > .trust li span{ gap:6px; font-weight:500; color:var(--v3-ink) !important } /* v1 kuralı koyu zemin için açık renk veriyordu */ .d3 .hero-text > .trust svg{ width:16px; height:16px; fill:#1E8E5A } [dir=rtl].d3 .hero-text > .eyebrow{ letter-spacing:0 } @media (min-width:900px){ .d3 .hero-text > .eyebrow{ align-self:center } } /* ---------- alt sekme çubuğu (≤899 px) ---------- */ .d3-tabs{ display:none } @media (max-width:899px){ .app-shell.d3 body{ padding-bottom:calc(var(--v3-tab-h) + var(--safe-b)) } .app-shell .d3-tabs{ position:fixed; z-index:29; /* araç detayı (sheet, z 30-31) ve tarih seçici üstte kalır */ inset-inline:0; bottom:0; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; height:calc(var(--v3-tab-h) + var(--safe-b)); padding-bottom:var(--safe-b); background:rgba(255,255,255,.94); -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px); border-top:1px solid var(--v3-line); box-shadow:0 -6px 24px rgba(15,42,64,.06) } .d3-tab{ appearance:none; border:0; background:none; font:inherit; color:var(--v3-mut); text-decoration:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:44px; padding:6px 2px; position:relative; font-size:11.5px; font-weight:600; letter-spacing:.01em; -webkit-tap-highlight-color:transparent } .d3-tab[hidden]{ display:none } .d3-tab svg{ width:24px; height:24px; fill:currentColor; transition:transform .18s var(--ease, ease) } .d3-tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-inline:2px } .d3-tab[aria-current="page"]{ color:var(--v3-ink) } .d3-tab[aria-current="page"]::before{ content:""; position:absolute; top:0; left:50%; width:28px; height:3px; margin-left:-14px; border-radius:0 0 3px 3px; background:var(--v3-gold) } .d3-tab:active svg{ transform:scale(.9) } .d3-tab:focus-visible{ outline:2px solid var(--v3-ink); outline-offset:-4px; border-radius:12px } /* sabit öğeler sekme çubuğunun üstüne */ /* sohbet balonu uygulamada da görünür (yalnız "Destek" sekmesine gizlemek iOS'ta sohbeti bulunmaz yapıyordu): sekme çubuğunun üstünde durur */ .app-shell.d3 .wc-fab{ bottom:calc(var(--v3-tab-h) + 14px + var(--safe-b)) } .app-shell.d3 .wc-panel{ bottom:calc(var(--v3-tab-h) + 86px + var(--safe-b)); /* balonun (56-60 px) üstünde açılır */ max-height:calc(100vh - var(--v3-tab-h) - 98px - var(--safe-b) - env(safe-area-inset-top,0px)) } .app-shell.d3 .toast{ bottom:calc(var(--v3-tab-h) + 16px + var(--safe-b)) } .app-shell.d3 .consent{ bottom:calc(var(--v3-tab-h) + 10px + var(--safe-b)) } .app-shell.d3 .d2-preview{ bottom:calc(var(--v3-tab-h) + 12px + var(--safe-b)) } .d3 .foot{ padding-bottom:28px } .d3 #installBtn{ display:none !important } .app-shell.d3 .top .wfav-pill{ display:none !important } /* favoriler sekmesi var */ /* ---------- ilk ekran: yalnız arama ---------- */ .d3 .top{ min-height:56px } .d3 .top .brand img{ height:30px; width:auto } .d3 .hero{ align-items:stretch; text-align:start; padding:18px 16px 8px } .d3 .hero-text{ align-items:flex-start; max-width:none } .d3 .v2-trust{ display:none } .d3 .hero-text > h1{ font-size:clamp(23px,6.4vw,28px) } .d3 .hero .lead{ font-size:14.5px } .d3 .hero-text > .trust{ font-size:12.5px; gap:4px 12px } .d3 .hero .search-card{ max-width:none; border-radius:24px; border-color:var(--v3-line); box-shadow:0 10px 30px rgba(15,42,64,.08); padding:8px } .d3 .search-card > .field:not(.collapsible){ background:var(--v3-bg); border-radius:16px; margin:4px; padding:10px 14px 8px } /* teslim yeri kutusu = alış yeri kutusu (gri kutu, etiket içeride); kapalıyken yer kaplamaz */ .d3 .search-card > #dropField .collapsible-inner{ background:var(--v3-bg); border-radius:16px; margin:4px; padding:10px 14px 8px; gap:1px } .d3 .search-card > #dropField:not(.open) .collapsible-inner{ margin-block:0 } .d3 #dropField .combo input{ background:transparent; border:0; border-radius:0; padding:3px 0; min-height:32px } .d3 #dropField .combo input:focus{ outline:none } .d3 .search-card > #dropField:focus-within .collapsible-inner{ box-shadow:inset 0 0 0 2px var(--v3-ink) } .d3 #dropField label{ padding-inline-start:0 } .d3 .search-card > #dropField.invalid .collapsible-inner{ box-shadow:inset 0 0 0 2px #B42318 } .d3 #dropField.invalid .combo input{ box-shadow:none } .d3 #searchForm:focus{ outline:none } .d3 .search-card > .field.half::before{ display:none } .d3 .search-card .field > label, .d3 .search-card .collapsible-inner > label{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--v3-mut) } .d3 .search-card input[type=text], .d3 .date-trigger{ font-size:17px !important; font-weight:600; min-height:32px } /* tarih kutusu: gün üst satırda, saat alt satırda → "4 Eki Paz · 10:0…" gibi kesilmez */ .d3 .date-trigger{ align-items:flex-start } .d3 .date-trigger .dt-label{ display:flex; flex-direction:column; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25 } .d3 .date-trigger .dt-sep{ display:none } .d3 .date-trigger .dt-day, .d3 .date-trigger .dt-time{ white-space:nowrap } .d3 .date-trigger .dt-time{ font-weight:600; color:var(--v3-mut); font-size:15px } .d3 .date-trigger svg{ margin-top:3px } .d3 .search-card > #searchBtn{ margin:8px 4px 4px; min-height:56px; border-radius:16px; font-size:17px } .d3 .search-card > .fineprint{ font-size:12.5px } /* bölümler: daha sıkı, daha küçük başlıklar */ .d3 .d2-home > *:not(.hero){ padding-block:28px } .d3 .sec-head h2, .d3 .how h2, .d3 .seo-intro h2, .d3 .v2-air h2, .d3 .contact h2{ font-size:26px; letter-spacing:-.02em } .d3 .sec-head{ margin-bottom:16px } .d3 .sec-head p:not(.v2-eyebrow){ font-size:15px } .d3 .v2-map.wm{ border-radius:20px } /* dünya → Türkiye rota haritası mobilde de görünür (kompakt) */ .d3 .v2-air{ row-gap:16px } /* araç detayı: tam ekrana yakın alt panel */ .d3 .sheet{ max-height:94vh } } /* telefonda açık sohbet tam ekran sayfadır (styles.css, body.chat-open #wrsChat) */ /* klavye açıkken (v3.js html.kb-open: yazı alanı odakta) sekme çubuğu ve balon klavyenin üstünde yüzmesin */ @media (max-width:899px){ .app-shell.kb-open .d3-tabs, .app-shell.kb-open .wc-fab{ display:none !important } } /* çok dar ekran: sekme etiketleri sığsın */ @media (max-width:360px){ .d3-tab{ font-size:10.5px } } /* ---------- masaüstü: v2 düzeni, daha sade ---------- */ @media (min-width:900px){ .d3 .hero{ padding-block:44px 40px } .d3 .hero-text{ align-items:center; text-align:center } .d3 .hero-text > .trust{ justify-content:center; margin-bottom:22px } } @media (prefers-reduced-motion: reduce){ .d3-tab svg{ transition:none } } /* ---------- Faz A: mobilde yatay, sade sonuç kartı (foto solda; ad, tek satır özellik, etiket, toplam + depozito sağda) ---------- */ @media (max-width:899px){ .d3 .grid{ grid-template-columns:1fr; gap:12px } .d3 .car:not(.skeleton){ display:grid; grid-template-columns:minmax(104px,34%) 1fr; align-items:stretch } .d3 .car:not(.skeleton) .car-art{ min-height:0; height:100%; padding:10px 6px; display:flex; align-items:center } .d3 .car:not(.skeleton) .car-art.photo{ padding:0 } .d3 .car:not(.skeleton) .car-art svg{ height:74px } .d3 .car:not(.skeleton) .car-art.photo img{ height:100% !important; min-height:128px } .d3 .car:not(.skeleton) .car-art .cls{ top:8px; inset-inline-start:8px; font-size:9.5px; padding:3px 7px; letter-spacing:.06em } .d3 .car:not(.skeleton) .car-art .badge{ top:auto; bottom:8px; inset-inline-end:auto; inset-inline-start:8px; font-size:10px; padding:3px 7px } .d3 .car:not(.skeleton) .wfav-heart{ width:34px; height:34px; top:6px; inset-inline-end:6px } .d3 .car:not(.skeleton) .car-art .cls{ max-width:calc(100% - 52px); white-space:normal; line-height:1.25 } .d3 .car:not(.skeleton) .wfav-heart svg{ width:18px; height:18px } .d3 .car-body{ padding:12px 14px 12px; gap:6px } .d3 .car h3{ font-size:16.5px; line-height:1.2 } .d3 .car .sub{ font-size:12.5px; margin-top:2px } .d3 .car .specs-line{ font-size:12.5px } .d3 .car .car-tag{ font-size:11.5px; padding:3px 8px 3px 6px } .d3 .car .price-row{ border-top:0; padding-top:4px; align-items:flex-end } .d3 .car .price .total{ font-size:21px } .d3 .car .price .per, .d3 .car .dep{ font-size:11.5px } .d3 .car .btn{ width:auto; min-height:32px; padding:0; margin-top:-2px; align-self:flex-end; background:none; border:0; color:var(--v3-ink); font-size:13.5px; font-weight:700; box-shadow:none } .d3 .car .btn:active{ transform:none } .d3 .car .btn .lbl-long{ display:none } .d3 .car .btn .lbl-short{ display:inline } .d3 .car .btn .lbl-short::after{ content:" \203A"; font-size:17px } [dir=rtl].d3 .car .btn .lbl-short::after{ content:" \2039" } .d3 .car:hover{ transform:none } } /* ---------- mobil ana ekran: yazı yok, doğrudan arama; arama sonrası kart yerine tek satır özet ---------- */ .d3-sum{ display:none } @media (max-width:899px){ /* başlık/tanıtım yazıları mobilde gizli (h1 arama motorları ve ekran okuyucular için DOM'da kalır) */ .d3 .hero-text > .eyebrow, .d3 .hero .lead, .d3 .hero-text > .trust{ display:none !important } .d3 .hero-text > h1{ position:absolute !important; width:1px !important; height:1px !important; margin:-1px !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; white-space:nowrap !important } .d3 .hero{ padding-top:12px } /* arama yapıldı: arama kartı gizlenir, sonuçların başında özet düğmesi */ .d3.d3-searched .hero{ display:none } .d3.d3-searched .results{ padding-top:12px; scroll-margin-top:0 } .d3 .d3-sum{ display:flex; align-items:center; gap:12px; width:100%; margin:0 0 12px; padding:12px 16px; border:1px solid var(--v3-line); border-radius:16px; background:#fff; color:var(--v3-ink); text-align:start; font:inherit; cursor:pointer; box-shadow:0 4px 14px rgba(15,42,64,.06) } .d3:not(.d3-searched) .d3-sum{ display:none } .d3 .d3-sum-txt{ display:flex; flex-direction:column; min-width:0; flex:1 } .d3 .d3-sum b{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .d3 .d3-sum small{ font-size:13px; color:var(--v3-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .d3 .d3-sum svg{ width:20px; height:20px; fill:var(--v3-ink); flex:none } .d3 .d3-sum:focus-visible{ outline:2px solid var(--v3-ink); outline-offset:2px } } @media (max-width:899px){ /* mobil sıra: arama → (sonuçlar) → araçlar → havalimanları → güven/bilgi bölümleri */ .d3 .d2-home > *{ order:10 } .d3 .d2-home > .hero{ order:0 } .d3 .d2-home > #results{ order:1 } .d3 .d2-home > #featured{ order:2 } .d3 .d2-home > #airports{ order:3 } } @media (max-width:899px){ /* sonuç ekranı: özet → "N araç" + filtre/sırala tek satır → ARAÇLAR; fiyat alarmı ve "bana uygun araç" listenin altında */ .d3 .results:not([hidden]){ display:flex; flex-direction:column } .d3 .results > .d3-sum{ order:0 } .d3 .results > .results-head{ order:1; margin-bottom:10px; gap:8px } .d3 .results > #grid, .d3 .results > #empty, .d3 .results > #error{ order:2 } .d3 .results > .wpa{ order:3; margin-top:16px } .d3 .results > .ai-recommend{ order:4 } .d3 #resultsMeta{ display:none } .d3 #resultsTitle{ font-size:20px; margin:0 } .d3 .results-head .tools{ width:100%; gap:8px } .d3 #filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:-16px; padding:2px 16px; gap:8px } .d3 #filters::-webkit-scrollbar{ display:none } .d3 #filters .chip{ flex:none; min-height:38px; padding:0 14px; font-size:13.5px } .d3 .featured .sec-head p:not(.v2-eyebrow){ display:none } } /* ---------- iOS uygulaması (html.wrs-app): web görünümü tam ekran; başlık saat/pil şeridini kendi lacivert zeminiyle kaplar ---------- */ .wrs-app.d3 .top, .wrs-app.d3 .top.scrolled{ top:0 !important; padding-top:calc(10px + env(safe-area-inset-top,0px)) } .wrs-app.d3 .top::before{ display:none !important } /* ---------- mobil ilk ekran: tek niyet cümlesi + hızlı havalimanı seçimi + 3 güven tiki; yumuşak ("kaymak gibi") giriş ---------- */ @media (max-width:899px){ .d3 .d3-intro{ display:block; margin:2px 0 14px; color:var(--v3-ink) } .d3 .d3-h{ display:block; font-size:clamp(26px,7.4vw,32px); line-height:1.12; font-weight:700; letter-spacing:-.028em; text-wrap:balance } .d3 .d3-h > span{ display:inline-block; animation:d3Rise .7s cubic-bezier(.2,.7,.2,1) both } .d3 .d3-h > .d3-h-gold{ animation-delay:.14s; padding-bottom:2px; background:linear-gradient(90deg,#C9AD7D,#E3CFA4 55%,#C9AD7D) no-repeat 0 100% / 0% 4px; animation:d3Rise .7s cubic-bezier(.2,.7,.2,1) .14s both, d3Line .9s cubic-bezier(.65,0,.35,1) .6s forwards } [dir=rtl].d3 .d3-h > .d3-h-gold{ background-position:100% 100% } .d3 .d3-sub{ display:block; margin-top:8px; font-size:15px; color:var(--v3-mut); animation:d3Rise .7s cubic-bezier(.2,.7,.2,1) .28s both } .d3 .hero .search-card{ animation:d3Rise .8s cubic-bezier(.2,.7,.2,1) .34s both } .d3 .quick-pick{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:2px 4px 6px; padding:2px 0 4px; scroll-snap-type:x proximity } .d3 .quick-pick::-webkit-scrollbar{ display:none } .d3 .qp{ flex:none; scroll-snap-align:start; display:inline-flex; align-items:baseline; gap:6px; min-height:38px; padding:8px 14px; border-radius:999px; border:1px solid var(--v3-line); background:#fff; color:var(--v3-ink); font:inherit; font-size:14px; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease } .d3 .qp b{ font-weight:600 } .d3 .qp small{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--v3-mut) } .d3 .qp:active{ transform:scale(.96) } .d3 .qp[aria-pressed="true"]{ background:var(--v3-ink); border-color:var(--v3-ink); color:#fff } .d3 .qp[aria-pressed="true"] small{ color:var(--v3-gold) } .d3 .qp:focus-visible{ outline:2px solid var(--v3-ink); outline-offset:2px } /* "Araç bul": açılışta bir kez ışık süzülür */ .d3 .search-card > #searchBtn{ position:relative; overflow:hidden } .d3 .search-card > #searchBtn::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%); transform:translateX(-120%); animation:d3Shine 1.1s ease 1.3s 1 both; pointer-events:none } .d3 .search-card > .fineprint{ display:none } .d3 .d3-ticks{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; list-style:none; margin:6px 4px 4px; padding:0; font-size:12.5px; font-weight:600; color:var(--v3-ink) } .d3 .d3-ticks li{ display:inline-flex; align-items:center; gap:5px } .d3 .d3-ticks li::before{ content:""; width:14px; height:14px; flex:none; background:#1E8E5A; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat } } @keyframes d3Rise{ from{ opacity:0; transform:translateY(10px); filter:blur(4px) } to{ opacity:1; transform:none; filter:none } } @keyframes d3Line{ to{ background-size:100% 4px } } @keyframes d3Shine{ to{ transform:translateX(120%) } } @media (prefers-reduced-motion: reduce){ .d3 .d3-h > span, .d3 .d3-sub, .d3 .hero .search-card{ animation:none !important } .d3 .d3-h > .d3-h-gold{ animation:none !important; background-size:100% 4px } .d3 .search-card > #searchBtn::after{ display:none } } /* ---------- uygulama alt menüsü: düz beyaz, ince çizgi, seçili sekmede ikon arkasında kapsül (iOS/Android standardı) ---------- */ @media (max-width:899px){ .app-shell.d3{ --v3-tab-h:66px } .app-shell .d3-tabs{ background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid #E3E6EA; box-shadow:none } .d3-tab{ gap:4px; font-size:12px; font-weight:600; color:#5A6472 } .d3-tab svg{ box-sizing:content-box; width:24px; height:24px; padding:4px 20px; border-radius:999px; transition:background .2s ease } .d3-tab[aria-current="page"]{ color:var(--v3-ink); font-weight:700 } .d3-tab[aria-current="page"] svg{ background:#E4EAF1 } .d3-tab[aria-current="page"]::before{ display:none } .d3-tab:active svg{ transform:none; background:#EEF1F5 } } @media (max-width:899px){ /* marka sloganı başlıkta; niyet cümlesi alt satırda biraz daha belirgin */ .d3 .d3-sub{ font-size:15.5px; font-weight:500; color:var(--v3-ink); opacity:.78 } } @media (max-width:899px){ /* sonuç başlığı: "N araç bulundu" solda, sıralama sağda aynı satırda; altında yatay kayan filtre çipleri (sağ kenarda solma = kaydırılabilir) */ .d3 .results > .results-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:10px; row-gap:10px } .d3 .results-head > div:first-child{ grid-column:1; grid-row:1; min-width:0 } .d3 .results-head .tools{ display:contents } .d3 .results-head .select-wrap{ grid-column:2; grid-row:1 } .d3 .results-head .select-wrap select{ min-height:38px; padding:0 30px 0 12px; border-radius:999px; font-size:13.5px; font-weight:600; background:#fff; border:1px solid var(--v3-line) } [dir=rtl].d3 .results-head .select-wrap select{ padding:0 12px 0 30px } .d3 #resultsTitle{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .d3 #filters{ grid-column:1 / -1; grid-row:2; margin-inline:-16px; padding:2px 16px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent) } [dir=rtl].d3 #filters{ -webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent); mask-image:linear-gradient(270deg,#000 calc(100% - 36px),transparent) } .d3 #filters .chip{ background:#fff; border:1px solid var(--v3-line); color:var(--v3-ink); font-weight:500 } .d3 #filters .chip[aria-pressed="true"]{ background:var(--v3-ink); border-color:var(--v3-ink); color:#fff } } @media (max-width:899px){ .d3 #resultsTitle{ font-size:19px } .d3 .results-head .select-wrap select{ max-width:42vw; text-overflow:ellipsis } }