/* JetFood Flowers (Florist One dikeyi). Tasarim dili BILEREK Shop'un ayni: ayni max-width, ayni radius/renk token'lari, ayni sol ray + mobil chip kalibi. Fark yalniz iki yerde: (1) kart gorseli PORTRE (duzenlemeler dikey; FO fotograflari ~450x515), (2) fiyat satiri iki katli — urun fiyati + "delivered" toplami. Ikinci satir sus degil: en buyuk funnel sizintimiz sifir-etkilesim cikisi ve $69.95'lik bir urunun gercek maliyeti $96.24. Sok sonda patlamasin. NOT: Shop kartlarindaki `mix-blend-mode: multiply` BURADA KULLANILMIYOR. O numara beyaz zeminli paket fotografi icin; cicek fotograflarinin zemini yumusak gri/gradyan ve multiply onlari kirletiyor. */ .flw-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px 56px 20px; color: rgb(25,25,25); } /* ---- hero ---- */ .flw-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 36px 0 22px 0; } .flw-hero h1 { font-size: 36px; font-weight: 700; letter-spacing: -1px; line-height: 42px; margin: 0; } .flw-hero .flw-sub { font-size: 15px; color: rgb(118,118,118); margin-top: 6px; max-width: 640px; } .flw-pill { display: inline-flex; align-items: center; gap: 9px; background: rgb(255,240,244); border-radius: 24px; padding: 10px 20px; font-size: 13.5px; font-weight: 600; color: rgb(214,0,54); white-space: nowrap; } .flw-pill svg { flex-shrink: 0; } /* ---- layout: sol ray + ana kolon (menu/Shop/lists kalibi) ---- */ .flw-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 32px; align-items: start; } /* min-width:0 SART: icerideki overflow-x seritler kolonu min-content'e itip mobil cerceveden tasiyor (lists redesign'da yasandi). */ .flw-main { min-width: 0; } .flw-rail { position: sticky; top: 84px; } .flw-rail h3 { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(163,163,163); margin: 0 0 10px; } .flw-rail + .flw-rail-group { margin-top: 22px; } .flw-rail-group { margin-top: 22px; } .flw-rail a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13.5px; color: rgb(60,60,60); text-decoration: none; } .flw-rail a:hover { color: rgb(255,0,60); } .flw-rail a.is-active { color: rgb(255,0,60); font-weight: 600; } .flw-rail a i { font-style: normal; font-size: 11.5px; color: rgb(180,180,180); font-variant-numeric: tabular-nums; } /* ---- mobil chip satirlari. 16 cipi TEK seride koyma dersi (Shop sekmesi): etiketli satirlara bol, yoksa kategoriler ekranin saginda kaybolur. ---- */ .flw-chipbar { display: none; } .flw-chipgroup { min-width: 0; max-width: 100%; } .flw-chipgroup span.chip-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgb(163,163,163); margin: 12px 0 7px; } .flw-chiprow { display: flex; gap: 8px; overflow-x: auto; min-width: 0; max-width: 100%; padding-bottom: 4px; scrollbar-width: none; -ms-overflow-style: none; } .flw-chiprow::-webkit-scrollbar { display: none; } .flw-chip { flex: 0 0 auto; border: 1px solid rgb(234,234,234); border-radius: 18px; padding: 7px 15px; font-size: 13px; color: rgb(25,25,25); text-decoration: none; white-space: nowrap; } .flw-chip--active { background: rgb(40,40,40); border-color: rgb(40,40,40); color: #fff; } .flw-chip--active:hover { color: #fff; } /* ---- bolum basliklari ---- */ .flw-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 30px 0 6px 0; } .flw-section-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.4px; margin: 0; } .flw-section-head a { font-size: 13.5px; font-weight: 600; color: rgb(255,0,60); text-decoration: none; } .flw-note { font-size: 12.5px; color: rgb(140,140,140); margin: 0 0 16px; } /* ---- occasion fayanslari ---- */ .flw-occ-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; } .flw-occ { display: flex; flex-direction: column; gap: 3px; background: rgb(248,248,248); border: 1px solid rgb(238,238,238); border-radius: 14px; padding: 15px 16px; text-decoration: none; color: rgb(25,25,25); transition: border-color .15s ease, transform .15s ease; } .flw-occ:hover { border-color: rgb(214,214,214); transform: translateY(-2px); color: rgb(25,25,25); } .flw-occ b { display: block; font-size: 14px; font-weight: 600; } .flw-occ i { display: block; font-style: normal; font-size: 11.5px; line-height: 16px; color: rgb(163,163,163); } /* Tek basina duran genis fayans (agac karti). flw-occ'u inline style ile display:block'a cevirmek flex column'u olduruyor ve b/i ayni satira akiyor — o yuzden ayri sinif. */ .flw-occ--wide { max-width: 520px; } /* ---- urun grid + kart ---- */ .flw-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; } .flw-card { display: block; text-decoration: none; color: rgb(25,25,25); } .flw-card:hover { color: rgb(25,25,25); } .flw-card:hover .flw-card__img { border-color: rgb(206,206,206); } /* Grid ogesinin varsayilan min boyutu auto = icerigin DOGAL boyutu; bir img konunca satir sisip aspect-ratio kutusunu asiyor. min-*:0 SART. */ .flw-card__img { position: relative; display: block; min-width: 0; min-height: 0; aspect-ratio: 4 / 5; background: rgb(250,250,250); border: 1px solid rgb(234,234,234); border-radius: 12px; overflow: hidden; transition: border-color .15s ease; } .flw-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .flw-card__body { display: block; padding-top: 8px; } .flw-card__name { display: block; font-size: 13.5px; font-weight: 600; line-height: 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .flw-card__price { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .flw-card__delivered { display: block; font-size: 11.5px; color: rgb(150,150,150); font-variant-numeric: tabular-nums; } .flw-loadmore { display: block; width: 100%; max-width: 320px; margin: 28px auto 0; background: #fff; border: 1px solid rgb(220,220,220); border-radius: 24px; padding: 12px 20px; font-size: 14px; font-weight: 600; color: rgb(25,25,25); cursor: pointer; } .flw-loadmore:hover { border-color: rgb(160,160,160); } .flw-count { text-align: center; font-size: 12.5px; color: rgb(163,163,163); margin-top: 12px; } /* ---- baslik satiri (kategori sayfasi) ---- */ .flw-crumb { font-size: 12.5px; color: rgb(163,163,163); padding-top: 26px; } .flw-crumb a { color: rgb(163,163,163); text-decoration: none; } .flw-crumb a:hover { color: rgb(255,0,60); } .flw-title { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 8px 0 2px 0; } .flw-title h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0; } .flw-sortbar { display: flex; gap: 8px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; } .flw-sortbar::-webkit-scrollbar { display: none; } .flw-sortbar a { flex: 0 0 auto; font-size: 12.5px; color: rgb(118,118,118); text-decoration: none; border: 1px solid transparent; border-radius: 14px; padding: 4px 11px; white-space: nowrap; } .flw-sortbar a.is-active { border-color: rgb(230,230,230); background: rgb(248,248,248); color: rgb(25,25,25); font-weight: 600; } /* ---- urun detay (PDP) ---- */ .flw-pdp { display: grid; grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr); gap: 44px; align-items: start; padding-top: 8px; } .flw-pdp__img { min-width: 0; min-height: 0; aspect-ratio: 4 / 5; background: rgb(250,250,250); border: 1px solid rgb(234,234,234); border-radius: 16px; overflow: hidden; } .flw-pdp__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .flw-pdp h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.6px; line-height: 34px; margin: 0 0 10px; } .flw-price-block { padding: 4px 0 14px; } .flw-price-block .p-main { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; } .flw-price-block .p-break { display: block; font-size: 13px; color: rgb(118,118,118); margin-top: 6px; line-height: 20px; } .flw-desc { font-size: 14.5px; line-height: 23px; color: rgb(70,70,70); } .flw-dim { font-size: 12.5px; color: rgb(150,150,150); margin-top: 10px; } .flw-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 360px; margin-top: 20px; background: rgb(255,0,60); border: 0; border-radius: 26px; padding: 15px 26px; font-size: 15.5px; font-weight: 700; color: #fff; text-decoration: none; cursor: pointer; } .flw-cta:hover { background: rgb(224,0,52); color: #fff; } .flw-trust { list-style: none; margin: 18px 0 0; padding: 0; } .flw-trust li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: rgb(90,90,90); padding: 5px 0; } .flw-trust svg { flex-shrink: 0; margin-top: 2px; stroke: rgb(255,0,60); } /* ---- agac sayfasi ---- */ /* Iki kolon: sol = gorseller (.flw-tree-visuals), sag = metin (.flw-tree-text). IC ICE sarmalayici BILEREK duruyor: tek duz grid'de sag kolonun surekli akmasi icin span gerekiyor ve span, satir yuksekligini bolusturup basligin altinda 63px hayalet bosluk uretti (olculdu). Mobilde sarmalayicilar `display: contents` ile kaldirilip dort blok tek tek siralaniyor. */ .flw-tree-hero { display: grid; grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: 40px; align-items: start; padding-top: 10px; } .flw-tree-visuals, .flw-tree-text { min-width: 0; } .flw-tree-proof { margin-top: 12px; } .flw-tree-offer > .flw-trust { margin-top: 16px; } .flw-tree-cert { min-width: 0; border: 1px solid rgb(234,234,234); border-radius: 14px; overflow: hidden; background: rgb(250,250,250); } .flw-tree-cert img { width: 100%; display: block; } /* 4 kolon: onerilen adetler FO'nun kendi sayfasinda da dortlu tek satir; 3 kolonda dorduncu kart tek basina alt satira dusuyordu. */ .flw-tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 14px; } .flw-tier { display: flex; flex-direction: column; gap: 4px; border: 1px solid rgb(230,230,230); border-radius: 14px; padding: 16px; text-decoration: none; color: rgb(25,25,25); } .flw-tier:hover { border-color: rgb(255,0,60); color: rgb(25,25,25); } .flw-tier b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .flw-tier span { font-size: 12.5px; color: rgb(118,118,118); } /* Serbest adet secici (agac sayfasi). FO'nun kendi sayfasinda da "Select Your Own Number of Trees" var; sabit kademe listesi tek basina anlamli adedi (yas, yildonumu) secmeye izin vermiyor. */ .flw-treecustom { margin-top: 16px; max-width: 520px; } /* `.flw-ff > span` (0,1,1) bu satiri (0,1,0) eziyordu: satir flex olmuyor, 96px'lik adet kutusu tam genislige aciliyor ve "Continue" alt satira dusuyordu. Ozgullugu esitlemek icin ana sinifla nitelendi. Ayni tuzak ailesi: [[reference_btn_primary_conflict]]. `.flw-ff > span`in bulastirdigi metin stilleri de burada geri aliniyor. */ .flw-treecustom .flw-treerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 14px; font-weight: 400; color: rgb(25,25,25); margin-bottom: 0; } /* Ayni ozgulluk tuzaginin ikinci yarisi: `.flw-ff input` (0,1,1) ile `.flw-treerow input` (0,1,1) esit ozgullukte ve `.flw-ff input` dosyada DAHA SONRA geldigi icin `width: 100%` kazaniyordu. Ana sinifla nitelendi. */ .flw-treecustom .flw-treerow input { width: 96px; flex: 0 0 auto; box-sizing: border-box; border: 1px solid rgb(224,224,224); border-radius: 10px; padding: 11px 12px; font-size: 15px; font-family: inherit; font-variant-numeric: tabular-nums; } .flw-treecustom .flw-treerow input:focus { outline: none; border-color: rgb(255,0,60); } .flw-treetotal { flex: 1 1 auto; min-width: 0; font-size: 13.5px; color: rgb(90,90,90); font-variant-numeric: tabular-nums; } .flw-cta--sm { width: auto; max-width: none; margin-top: 0; padding: 11px 22px; font-size: 14px; flex: 0 0 auto; } /* ---- checkout ---- */ .flw-co { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 32px; align-items: start; } .flw-co__main { min-width: 0; } .flw-panel { background: #fff; border: 1px solid rgb(234,234,234); border-radius: 14px; padding: 20px; margin-bottom: 14px; } .flw-panel__t { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .flw-panel__s { font-size: 12.5px; color: rgb(140,140,140); margin-bottom: 14px; } .flw-form { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; } .flw-ff { grid-column: span 3; display: block; min-width: 0; } .flw-ff--full { grid-column: span 6; } .flw-ff--sm { grid-column: span 1; } .flw-ff--md { grid-column: span 2; } .flw-ff > span { display: block; font-size: 12px; font-weight: 600; color: rgb(90,90,90); margin-bottom: 5px; } .flw-ff > span em { font-style: normal; font-weight: 400; color: rgb(163,163,163); } .flw-ff input, .flw-ff select, .flw-ff textarea { width: 100%; box-sizing: border-box; border: 1px solid rgb(224,224,224); border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: inherit; color: rgb(25,25,25); background: #fff; } .flw-ff input:focus, .flw-ff select:focus, .flw-ff textarea:focus { outline: none; border-color: rgb(255,0,60); } .flw-ff textarea { resize: vertical; min-height: 78px; } .flw-ff .flw-cc { min-height: 44px; } .flw-charcount { font-size: 11.5px; color: rgb(163,163,163); margin-top: 4px; text-align: right; } .flw-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgb(70,70,70); margin-top: 12px; cursor: pointer; } .flw-check input { margin-top: 2px; flex-shrink: 0; } .flw-err { font-size: 13px; color: rgb(200,0,40); margin-top: 10px; min-height: 18px; } .flw-btn { display: block; width: 100%; background: rgb(255,0,60); border: 0; border-radius: 26px; padding: 15px 20px; font-size: 15.5px; font-weight: 700; color: #fff; cursor: pointer; margin-top: 14px; } .flw-btn:hover { background: rgb(224,0,52); } .flw-btn[disabled] { opacity: .55; cursor: default; } .flw-linklike { display: inline-block; background: none; border: 0; padding: 8px 0 0; font-size: 13px; color: rgb(118,118,118); cursor: pointer; text-decoration: none; } .flw-testbadge { display: inline-block; background: rgb(255,243,205); color: #9a6b00; border-radius: 10px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; margin-bottom: 12px; } /* yan ozet */ .flw-side { position: sticky; top: 84px; } .flw-side__item { display: flex; gap: 12px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid rgb(240,240,240); margin-bottom: 12px; } .flw-side__item img { width: 64px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid rgb(234,234,234); flex-shrink: 0; } .flw-side__nm { font-size: 13.5px; font-weight: 600; line-height: 18px; } .flw-side__sub { font-size: 12px; color: rgb(150,150,150); margin-top: 3px; } .flw-sum { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: rgb(70,70,70); padding: 4px 0; } .flw-sum--total { font-size: 16px; font-weight: 700; color: rgb(25,25,25); border-top: 1px solid rgb(240,240,240); margin-top: 8px; padding-top: 10px; } .flw-sum span:last-child { font-variant-numeric: tabular-nums; } .flw-sidenote { font-size: 11.5px; color: rgb(150,150,150); line-height: 17px; margin-top: 12px; } .flw-sidenote a { color: rgb(118,118,118); } /* ---- onay sayfasi ---- */ .flw-done { max-width: 620px; margin: 0 auto; padding-top: 34px; text-align: center; } .flw-done__tick { width: 54px; height: 54px; border-radius: 27px; background: rgb(232,248,238); display: inline-flex; align-items: center; justify-content: center; } .flw-done h1 { font-size: 27px; font-weight: 700; letter-spacing: -0.6px; margin: 16px 0 6px; } .flw-done .flw-done__sub { font-size: 14.5px; color: rgb(118,118,118); } .flw-receipt { text-align: left; background: #fff; border: 1px solid rgb(234,234,234); border-radius: 14px; padding: 22px; margin-top: 22px; } .flw-receipt h3 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(163,163,163); margin: 0 0 12px; } .flw-kv { display: flex; justify-content: space-between; gap: 14px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px solid rgb(245,245,245); } .flw-kv b { font-weight: 600; text-align: right; } .flw-kv:last-child { border-bottom: 0; } .flw-ordernum { display: inline-block; font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; } /* ---- politika sayfasi ---- */ .flw-prose { max-width: 760px; margin: 0 auto; padding-top: 30px; } .flw-prose h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.7px; margin: 0 0 6px; } .flw-prose h2 { font-size: 17px; font-weight: 700; margin: 28px 0 8px; } .flw-prose p, .flw-prose li { font-size: 14.5px; line-height: 24px; color: rgb(70,70,70); } .flw-prose ul { padding-left: 20px; } /* ---------------------------------------------------------------- responsive */ @media (max-width: 1023px) { .flw-layout { grid-template-columns: minmax(0,1fr); gap: 0; } .flw-rail, .flw-rail-group { display: none; } .flw-chipbar { display: block; min-width: 0; max-width: 100%; } .flw-occ-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } .flw-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; } .flw-pdp { grid-template-columns: minmax(0,1fr); gap: 22px; } /* Tek kolonda 4/5 portre gorsel TAM GENISLIK kapliyor ve urunun ADINI, FIYATINI ve CTA'sini katlanmanin altina itiyor -- olculdu (390x660 CSS): gorsel 453px, ad 645., fiyat 694., CTA 802. pikselde. Kare kirpma 362px'e indiriyor, ad ve fiyat birinci ekranda kaliyor. `object-fit: cover` zaten tanimli, kirpma ortadan. */ .flw-pdp__img { aspect-ratio: 1 / 1; } /* Mobil sira: BASLIK -> gorsel -> teklif -> sertifika. Eskiden iki gorsel en ustte ust uste duruyordu (748px) ve sayfanin KENDI BASLIGI 942. piksele, fiyat kademeleri 1704'e dusuyordu (olculdu, 390x660 CSS). */ .flw-tree-hero { grid-template-columns: minmax(0,1fr); row-gap: 18px; column-gap: 0; } /* Sarmalayicilari kaldir: cocuklar dogrudan grid ogesi olur, siralari tek tek verilebilir. Iki duz <div>, rol tasimiyorlar. */ .flw-tree-visuals, .flw-tree-text { display: contents; } .flw-tree-intro { order: 1; } .flw-tree-media { order: 2; } .flw-tree-offer { order: 3; } .flw-tree-proof { order: 4; margin-top: 0; } /* Agac fotografi mobilde KIRPILIYOR: 4/5 portre tam genislikte 411px yer kapliyordu ve tek isi ruh hali vermek (fiziksel teslimat yok, teslim edilen sey sertifika). 3/2'de 241px'e iniyor. */ .flw-tree-media .flw-tree-cert { aspect-ratio: 3 / 2; } .flw-tree-media .flw-tree-cert img { width: 100%; height: 100%; object-fit: cover; } /* Teklif blogunun ICINDE de sira degisiyor: FO'nun 8 maddesi 480px yer kapliyor ve fiyati 1229. piksele itiyordu. Maddeler guven metni, fiyat ise KARAR -- mobilde karar once, maddeler altina. (Metinler FO'nun Provider Materials'i; kirpilmiyor, yalnizca sirasi degisiyor.) Politika linki en sonda: `p.flw-note` fiyat notundan (div) boyle ayirt ediliyor. */ .flw-tree-offer { display: flex; flex-direction: column; } .flw-tree-offer > * { order: 1; } .flw-tree-offer > .flw-trust { order: 2; margin-top: 26px; } .flw-tree-offer > p.flw-note { order: 3; } .flw-tree-offer > .flw-section-head { padding-top: 0 !important; } .flw-co { grid-template-columns: minmax(0,1fr); } .flw-side { position: static; } } @media (max-width: 599px) { .flw-wrap { padding: 0 14px 44px 14px; } .flw-hero { padding: 24px 0 14px 0; } .flw-hero h1 { font-size: 27px; line-height: 32px; } .flw-occ-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .flw-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; } .flw-tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } .flw-form { grid-template-columns: repeat(4, minmax(0,1fr)); } .flw-ff { grid-column: span 4; } .flw-ff--full { grid-column: span 4; } .flw-ff--sm { grid-column: span 1; } .flw-ff--md { grid-column: span 2; } .flw-title h1 { font-size: 24px; } .flw-panel { padding: 16px; } } /* ---- Onizleme bandi ---- Vitrin kapali ama biz iceriyiz. Bant SESSIZ OLMAMALI: "canliya alindi" sanilmasi en pahali yanlis anlama. Sayfa akisinin icinde, sabit degil — sabit bir bant JetChat FAB'inin kosesiyle ve mobil sepet cubuguyla yarisirdi (bkz. reference_jetchat_launcher_corner). */ .flw-preview { display: flex; align-items: flex-start; gap: 10px; max-width: 1240px; margin: 0 auto; padding: 11px 20px 12px; background: rgb(255,243,205); color: #7a5200; font-size: 12.5px; line-height: 1.5; } .flw-preview b { flex: 0 0 auto; font-weight: 700; } .flw-preview code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 4px; } .flw-preview__dot { flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: #b45309; } @media (max-width: 599px) { .flw-preview { padding: 10px 14px 11px; } } /* ---- teslim tarihi secici (ozel takvim) -------------------------------- Native <select id="delivery_date"> DOM'da KALIYOR ve deger oradan okunuyor; asagidaki katmani JS uretir, `.flw-dp--on` isaretini de JS koyar. JS calismazsa akis eskisi gibi select ile suruyor. Neden takvim: select 26 tarihi duz liste veriyordu ve EKSIK gunlerin neden eksik oldugunu sakliyordu. Takvimde Pazar ve tatil gunleri gorunur ve ustu cizili — "6 Eylul neden yok" sorusu dogmuyor. */ .flw-dp { position: relative; } .flw-dp--on > select { display: none; } .flw-dp__t { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid rgb(224,224,224); border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: inherit; color: rgb(25,25,25); text-align: left; cursor: pointer; } .flw-dp__t:hover:not([disabled]) { border-color: rgb(180,180,180); } .flw-dp__t[disabled] { background: rgb(250,250,250); color: rgb(150,150,150); cursor: default; } .flw-dp__t.is-open, .flw-dp__t:focus-visible { outline: none; border-color: rgb(255,0,60); } /* svg'ye tiklama butona degil path'e dusuyordu; closest() kullanmamak icin ikonlari tiklamaya kapatiyoruz. */ .flw-dp__t svg, .flw-dp__nav svg { flex: 0 0 auto; color: rgb(160,160,160); pointer-events: none; } .flw-dp__t .flw-dp__chev { margin-left: auto; } .flw-dp__val { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flw-dp__val.flw-dp__ph { color: rgb(150,150,150); } .flw-dp__tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: rgb(214,0,54); background: rgb(255,240,244); border-radius: 10px; padding: 3px 8px; white-space: nowrap; } .flw-dp__pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 322px; max-width: 100%; box-sizing: border-box; background: #fff; border: 1px solid rgb(228,228,228); border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.13); padding: 14px; } .flw-dp__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .flw-dp__cap { flex: 1 1 auto; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: -0.2px; } .flw-dp__nav { flex: 0 0 auto; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgb(232,232,232); border-radius: 8px; cursor: pointer; padding: 0; } .flw-dp__nav:hover:not([disabled]) { border-color: rgb(160,160,160); } .flw-dp__nav[disabled] { opacity: .3; cursor: default; } .flw-dp__wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .flw-dp__wd span { text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgb(175,175,175); } .flw-dp__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .flw-dp__c { position: relative; display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 9px; font-size: 13.5px; font-variant-numeric: tabular-nums; color: rgb(205,205,205); -webkit-user-select: none; user-select: none; } /* Acik gun: tiklanabilir ve dolu. Kapali gun: soluk + ustu cizili, sebebi title'da. Pencere disi: yalnizca soluk (kapali degil, HENUZ acilmamis). */ .flw-dp__c--open { color: rgb(25,25,25); font-weight: 600; cursor: pointer; background: rgb(248,248,248); } .flw-dp__c--open:hover { background: rgb(255,240,244); color: rgb(214,0,54); } .flw-dp__c--open:focus-visible { outline: 2px solid rgb(255,0,60); outline-offset: 1px; } .flw-dp__c--closed { text-decoration: line-through; text-decoration-thickness: 1px; cursor: default; } .flw-dp__c--out { color: rgb(224,224,224); cursor: default; } .flw-dp__c--sel { background: rgb(255,0,60); color: #fff; } .flw-dp__c--sel:hover { background: rgb(255,0,60); color: #fff; } .flw-dp__c--today::after { content: ''; position: absolute; bottom: 5px; left: 50%; margin-left: -2px; width: 4px; height: 4px; border-radius: 50%; background: rgb(255,0,60); } .flw-dp__c--sel.flw-dp__c--today::after { background: #fff; } .flw-dp__foot { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgb(242,242,242); font-size: 11.5px; line-height: 17px; color: rgb(150,150,150); } .flw-dp__foot b { color: rgb(214,0,54); font-weight: 700; } .flw-dp__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .flw-dp__grab, .flw-dp__bd { display: none; } .flw-dp__grab { border: 0; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer; } /* Mobil: alt sayfa (sheet). Tam genislik, parmak boyu hucreler. */ @media (max-width: 599px) { .flw-dp--open .flw-dp__bd { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2147483000; background: rgba(0,0,0,.34); } .flw-dp__pop { position: fixed; z-index: 2147483001; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(0,0,0,.2); } /* Tutamak gercek bir kapatma dugmesi; dokunma hedefi cubuktan buyuk olmali, o yuzden yuksekligi seffaf dolgu ile 22px'e cikariyoruz. */ .flw-dp__grab { display: block; width: 64px; height: 22px; background: transparent; margin: -2px auto 6px; position: relative; } .flw-dp__grab::before { content: ''; position: absolute; top: 9px; left: 13px; width: 38px; height: 4px; border-radius: 2px; background: rgb(222,222,222); } .flw-dp__grab:active::before { background: rgb(190,190,190); } .flw-dp__c { height: 44px; font-size: 15px; } /* Sag-alt kose JetChat FAB'inin (76px, z-max) — sheet acikken onu gizliyoruz, yoksa balon takvimin son satirini ve dipnotu ortuyor (bkz. reference_jetchat_launcher_corner). */ html.flw-dp-sheet #jetchat-container { display: none !important; } }