/* ============================================================ MOBIL (<=820px) — 9 Eylul 2026 Olcek Varolpack mobilinden alindi: govde 13, h2 22, h1 26 px, yan bosluk 20 px, bolumler arasi genis nefes payi. Sayfa masaustunde 1724 birimlik sabit tuval; --AW daraltilarak yerlesim olcekleniyor, yazi boylari ayrica sabitleniyor. ============================================================ */ /* Taban: islevsel hicbir yazi 11 px altina inmiyor (detector kurali). */ @media(max-width:820px){ /* ---- MERDIVEN KIRILIMA BAGLANIYOR ---- Gulbin, 11 Eylul: "masaustunde ve mobilde AYRI AYRI olsun ama nereye koyarsak koyalim AYNI olsun." Masaustu merdiveni (--m0..--m5) tuval birimi: calc(N*100cqw/var(--AW)). Mobilde cqw, genis bir kapsayici yerine ekrana gore cozuluyor; 15 birim 375 px'te 3,26 px ediyor. Olculdu: mobilde 6 oge 3,3 px, 3 oge 4,8 px, 7 oge 7,9 px, 5 oge 8,8 px cikiyordu, hepsi mobil kurali olmayan ogeler. Cozum: ayni jeton adlari mobilde piksel merdivenine baglaniyor. Boylece kural yazilmayan her sey kendiliginde dogru kademeye dusuyor, iki merdiven de tek isimle yonetiliyor. --m0 <-> --f0 34 --m1 <-> --f1 26 --m2 <-> --f2 20 --m3 <-> --f3 17 --m4 <-> --f4 13 --m5 <-> --f5 11 */ :root{ --m0:var(--f0); --m1:var(--f1); --m2:var(--f2); --m3:var(--f3); --m4:var(--f4); --m5:var(--f5); } /* ============ MOBIL SISTEM ============ 8'lik izgara ve dort punto. Oncesinde 25 ayri bosluk ve 13 ayri punto vardi; "dagilmis" gorunmesinin sebebi buydu. Bosluk: iliskiye gore. Bagli seyler --r2, gruplar arasi iki kati --r3/--r4. Punto: dort boy, iki agirlik (400 ve 500). Baska punto yok. */ /* Punto ve bosluk olcegi ARTIK sistem.css'te. Burada ikinci bir :root vardi ve ayni token adlarini farkli degerlere baglayip sistemi eziyordu (--f2 hem 17 hem 20 gibi). Silindi. */ /* ---- ust kayan serit ---- */ .bar{height:38px} .bar .tr{font-size:var(--f5);gap:var(--r2);animation-duration:22s} /* ---- baslik cubugu ---- */ /* container-type, icindeki position:fixed ogeleri kendine bagliyor; cekmece ekrana degil basliga oturuyordu. Mobilde kapatildi. */ /* Sayfanin ust/alt lastik bant alani: koyu bolumdeyken koyu, acikta acik. theme-color tarayici cubuklarini, bu da sayfanin kendi ucunu boyuyor. */ html{background:var(--beyaz)} html.ustkoyu{background:var(--mavi-koyu)} /* Gulbin, 14 Eylul: "alttaki beyaz golgenin beyaz degil siyah olmasini istedim. sadece giris kaydirmasi icin." Giris ekraninin kendi zemini zaten --siyah; tarayici cubuklari ve lastik bant alani da orada siyah oluyor, boylece alt cubuk beyaz bir golge gibi durmuyor. Asagi inip beyaz bolumlere gecince eski davranis suruyor. */ html.ustsiyah{background:var(--siyah)} /* Safari kenar alanini yalniz degil zemininden de ornekleyebiliyor; ikisi birlikte donuyor. Bolumlerin kendi zeminleri var, govde rengi yalniz aralarda gorunur. */ html.ustsiyah body{background:var(--siyah)} /* ---- BOLUMDEN BOLUME GECIS ---- Gulbin, 14 Eylul: "bir de alandan alana gecerken animasyon olsa, ittirme gibi, adi ne tam bilmiyorum ama." Bolum goruse girerken 40 px asagidan yukari itiliyor ve aciliyor; bir onceki bolumun ustune biniyormus hissi veriyor. Yalniz transform ve opacity kullaniliyor, ikisi de yerlesimi yeniden hesaplatmiyor. Her bolum bir kez oynuyor (mobil-app.js sinifi takip birakiyor). Sure 560 ms: tek seferlik bir giris hareketi, kullanicinin gunde yuzlerce kez gordugu bir etkilesim degil. Giris ekrani disarida: o zaten ilk karede tam ekran. */ html.js .S2.itil,html.js .sstand.itil{ opacity:0;translate:0 40px;will-change:opacity,translate} html.js .S2.itil.geldi,html.js .sstand.itil.geldi{ opacity:1;translate:0 0; transition:opacity .56s cubic-bezier(.16,1,.3,1), translate .56s cubic-bezier(.16,1,.3,1)} @media(prefers-reduced-motion:reduce){ html.js .S2.itil,html.js .sstand.itil{opacity:1;translate:none}} html.ustkoyu body{background:var(--mavi-koyu)} /* Ilk kare betikten once boyansin. Gulbin: "ilk giriste zaten beyaz geliyor." Sinif JS ile takiliyor ve JS govdenin sonunda calisiyor; ondan onceki karede hala beyazdi. Ana sayfanin girisi her zaman koyu oldugu icin bu kural sinifi beklemeden zemini veriyor. */ @media(max-width:820px){ html:has(.mhero){background:var(--siyah)} } /* "header falan kaydir" derken baslik cubugunu kaldirmami istememis: "aksine sticky headeri kaldirdin". Sabit baslik geri geldi. */ .hd{top:38px;--H:56;container-type:normal} .hd.on{top:0} .hd.on .nav{inset:56px 0 0 0} .hd .artbas,.hd .hit,.hd .cartdot{display:none} .mhd{display:flex;align-items:center;justify-content:space-between; height:56px;padding:0 var(--yan);gap:var(--r2)} .mlogo{display:block;width:74px;flex:none} .mlogo svg{display:block;width:100%;height:auto} .mars{display:flex;align-items:center;gap:var(--r3)} /* sepet cekmecesindeki kapat dugmesi de parmak olcusunde olsun */ .carth button{min-height:44px;padding:0 var(--r1);margin:0 -10px;font-size:var(--f4)} /* Gulbin: "sepette tam sayfa olsun", sonra "bozuk oldu, sepette header ustune acilsin menu gibi." Artik menu cekmecesiyle BIREBIR ayni: tam genislik, basligin hemen altindan basliyor (56 px), sagdan kayma yerine acilip kapanma. Baslik ustte duruyor, sepet ikonuna tekrar basip kapatilabiliyor. */ /* Gulbin'in ornegi (14 Eylul): sepet acilinca sayfa basligi gidiyor, panel tam ekran oluyor ve kendi baslik satirini tasiyor: solda [ SEPET ] ve adet, sagda carpi. "basinca header gidebilir." */ .cartp{inset:0!important;width:100%!important;max-width:none!important; border-left:0!important;transform:none!important; opacity:0;visibility:hidden; transition:opacity .3s ease,visibility .3s} .cartp.on{opacity:1!important;visibility:visible!important} .cartv{inset:0!important} /* Sepet ya da menu acikken sayfa basligi cekiliyor: panelin kendi baslik satiri var, iki baslik ust uste durmasin. Gulbin: "menu icin de gecerli." Menu cekmecesi basligin ICINDE oldugu icin .hd'nin tamamini degil, yalnizca kendi cubugunu (.mhd ve masaustu hedefleri) gizliyoruz; yoksa cekmece de onunla birlikte kaybolurdu. */ /* Sepet acikken sayfa basligi cekiliyor (panelin kendi basligi var). Menude ise baslik KALIYOR: kapatma dugmesi orada, menu ikonu acikken saga kayip carpiya donuyor. */ body.sepet-acik .hd{opacity:0!important;pointer-events:none!important; transition:opacity .25s ease} /* Menu cekmecesi basligin altindan basliyor. */ body.menu-acik .hd .nav{inset:56px 0 0 0!important} /* ---- MENU DUGMESI: ACILINCA YERINDE CARPIYA DONUYOR ---- Gulbin, 15 Eylul: "carpi kendi yerinde kalsin, saga gitmesin." Once dugme sepet ikonunun yerine kayiyordu (--mhamkay ile olculen mesafe); kayma kaldirildi, cizgilerin carpiya donusu yerinde oluyor. Olcum kodu da JS'ten temizlendi, artik kimse kullanmiyor. */ /* Sepet dugmesi menu acikken cekiliyor, ikisi ust uste binmesin. Gulbin: "koli lazim logosu olmayacak" -> logo da cekiliyor, ustte yalnizca carpiya donmus menu dugmesi kaliyor. */ body.menu-acik .mikon,body.menu-acik .mlogo{opacity:0;pointer-events:none; transition:opacity .2s ease} /* Sepetin kendi baslik satiri, ekranin en ustunde: guvenli alan payi telefonun centigi icin. */ .cartp .carth{padding-top:calc(var(--r2) + env(safe-area-inset-top))!important} .carth .cadet{margin-right:auto;margin-left:var(--r1);font-size:var(--f5); opacity:.55;white-space:nowrap} /* Baslik dugmesindeki carpi kalkti: Gulbin "x sembolunu sevmedim, etrafindaki cerceveyi de" dedi. Yerine sitenin kendi dili: cercevesiz [ Kapat ] yazisi. Dokunma alani yine 44 px. Hamburger dugmesindeki carpi duruyor, o bir MORF: uc cizgi capraza donuyor, ayri bir sembol degil. Kollari kosede kirpilmasin diye overflow:visible orada kaliyor. */ .mikon .mix svg,.mham svg{overflow:visible} #cartx,#navx{border:0!important;background:none!important;padding:0 var(--r1)!important; min-height:44px;margin:0 calc(-1 * var(--r1)) 0 0!important; display:inline-flex!important;align-items:center; color:var(--mavi-koyu)!important;opacity:1!important; font-size:var(--f5)!important;text-transform:uppercase;cursor:pointer} #cartx::before,#navx::before{content:"[ "} #cartx::after,#navx::after{content:" ]"} /* ---- CEKMECELER ANA SAYFANIN DILINE GECIYOR ---- Gulbin, 14 Eylul: "yani anasayfada yaptigimiz tasarimlarla alakasi var mi sence." Yoktu: iki cekmece de duz beyaz liste gorunumundeydi. Ana sayfanin kart dili buraya tasindi: · kose yok, yuvarlatma yok · ayiricilar tam genislikte --cizgi kil cizgisi · basliklar [ kose parantez ] icinde, buyuk harf, Clash · dugmeler cerceveli dikdortgen, ic dolgu --r2 Renkler acik yuzey kurali: zemin --beyaz, yazi --mavi-koyu. */ .cartp,.hd .nav{border-radius:0} /* Cekmece basligi: urun kartinin ust seridiyle ayni olcu ve cizgi. */ .carth{padding:var(--r2) var(--yan)!important; border-bottom:0!important; min-height:calc(var(--r4) + var(--r0))} .carth b{font-size:var(--f3)!important;text-transform:uppercase; font-weight:var(--ag-baslik)} .carth b::before{content:"[ "} .carth b::after{content:" ]"} .carth button{border:var(--cizgi) solid var(--mavi-koyu)!important; padding:0 var(--r12)!important;margin:0!important; min-height:var(--buton-yuk);text-transform:uppercase; font-size:var(--f5)!important;color:var(--mavi-koyu)!important;opacity:1!important} /* Sepet satirlari: kartin serit dili, tam genislikte ayirici. */ .cartb{padding:0!important} .cartrow{padding:var(--r2) var(--yan)!important; border-bottom:var(--cizgi) solid var(--mavi-koyu)!important;margin:0} .cartrow .th{border:var(--cizgi) solid var(--mavi-koyu)!important;border-radius:0} .cartf{padding:var(--r3) var(--yan) var(--r5)!important; border-top:var(--cizgi) solid var(--mavi-koyu)!important} .cartf a{border-radius:0;text-transform:uppercase; min-height:var(--buton-yuk);display:flex!important; align-items:center;justify-content:center;font-size:var(--f4)} .cartf .go{background:var(--mavi-koyu);color:var(--beyaz); border:var(--cizgi) solid var(--mavi-koyu)} .cartf .alt{border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu)} /* Bos sepet: acik yuzeyde acik yesil okunmuyordu, koyu maviye alindi. */ .cartempty{padding:var(--r5) var(--yan)!important} /* Gulbin: "beyaz zeminde yesil yazi olmamali." Panel beyaz; icindeki butun baglantilar --mavi-koyu. ("Editorde olcunu gir" .cartf .cartnote icindeydi, .cartempty kuralina takilmiyordu.) */ .cartp a:not(.go){color:var(--mavi-koyu)!important} .cartp b,.cartp .pz,.cartp .tot b{color:var(--mavi-koyu)!important} .cartempty a{color:var(--mavi-koyu)!important;text-decoration:none; border:var(--cizgi) solid var(--mavi-koyu);border-radius:0; min-height:var(--buton-yuk);display:flex;align-items:center; justify-content:center;padding:0 var(--r3);text-transform:uppercase; font-size:var(--f5)} /* Menu maddeleri de ayni kil cizgisiyle ayriliyor. */ /* Gulbin, 15 Eylul: "daha temiz bir tasarim istiyorum, gereksiz seyler cizgiler vs olmasin." Cekmecede her maddenin altinda bir cizgi vardi (bes cizgi), alt blogun ustunde bir cizgi daha, arama kutusu cerceveli, bes sosyal ikon kutulu, telefon kutulu. Hepsi kalkti; ayirici olarak bosluk kaldi. Kalan tek cizgi arama alaninin alt kili, o da yazi alani oldugu belli olsun diye. */ .hd .nav .item{border-bottom:0!important} /* Madde: ustte etiket, altinda icindekiler. Ok saga sabit. */ .hd .nav .nb{display:grid!important; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"ad ok" "ic ok"; align-items:center;column-gap:var(--r2);row-gap:var(--r0);text-align:left} /* Gulbin, 15 Eylul: "hazir urunler sektorel urunler falan bold olsun, anasayfadaki basliklar gibi ayni kalinlikta olsun." Anasayfa basligi (.h2) --ag-baslik yani 500 kullaniyor; menu maddesi de ayni jetona baglandi, ayri bir deger uydurulmadi. */ .hd .nav .nb .nbas{grid-area:ad;font-weight:var(--ag-baslik)} .hd .nav .nb .nalt{grid-area:ic;font-size:var(--f5);opacity:1; line-height:1.35;text-transform:none;font-weight:var(--ag-ince); overflow:hidden;text-overflow:ellipsis} .hd .nav .nb .arw{grid-area:ok;align-self:center} /* Cekmece basligi artik bir soru; parantezli ve iki satira kirilabilir. */ .cmbas b{font-size:var(--f2)!important;line-height:1.15;max-width:22ch} .hd .nav .nb{min-height:calc(var(--r4) + var(--r0));font-size:var(--f3)!important; text-transform:uppercase;padding:var(--r12) var(--yan)!important} /* Cekmecenin alt blogundaki kutular da cerceveli dikdortgen. */ /* Gulbin: "iconlari en alta alalim kareli sekilde olsun footerdaki gibi, koyu mavi olacak tabi." Footerdeki .ftsos kutusunun aynisi: kare, kil cerceve, ici bos. Footer koyu zeminde beyaz cerceve kullaniyor; cekmece beyaz oldugu icin cerceve ve ikon --mavi-koyu. */ .cmsos{display:flex;flex-wrap:wrap;gap:var(--r12);margin-top:0} .cmsos a{border:var(--cizgi) solid var(--mavi-koyu);border-radius:0; width:var(--buton-yuk);height:var(--buton-yuk);margin:0; display:grid;place-items:center;color:var(--mavi-koyu); transition:background .22s,color .22s,border-color .22s} .cmsos a:hover{background:var(--mavi-koyu);color:var(--beyaz)} .cmsos a svg{width:52%;height:52%;fill:currentColor;stroke:none} /* Gulbin: "sol menuyu acinca header beyaz haline donmeli." Giris ekraninda baslik seffaf ve yesil yazili duruyor; cekmece beyaz acilinca yesil yazi beyazin uzerinde kaliyordu. Cekmece acikken baslik her zaman acik haline geciyor. */ body.menu-acik .hd,body.sepet-acik .hd{ background:var(--beyaz)!important;color:var(--mavi-koyu)!important} body.menu-acik .hd .mlogo svg,body.menu-acik .hd .mlogo svg *, body.sepet-acik .hd .mlogo svg,body.sepet-acik .hd .mlogo svg *{fill:var(--mavi-koyu)} /* ikon 24px gorunuyor ama dokunma alani 44: parmak icin */ /* ---- SEPET DUGMESI: BASINCA CARPIYA DONUYOR ---- Gulbin, 14 Eylul: "sepette ustune bastigimda carpiya donsun menudeki gibi animasyonlu." Menu dugmesindekiyle ayni yontem ve ayni sure (.3s ease): ikinci bir cizim yok, ayni ikon setinin menu cizgileri capraza donuyor. Iki katman ust uste duruyor; sepet donerek soluyor, carpi donerek geliyor. Cizgi merkezleri 24'luk kutuda 6,22 / 12,00 / 17,78 olculdu; capraza giderken 5,78 birim ortaya kayiyorlar, ortadaki cizgi kayboluyor. */ .mikon{position:relative} .mikon .mio,.mikon .mix{display:grid;place-items:center; grid-area:1/1;transition:opacity .3s ease,transform .3s ease} .mikon .mix{opacity:0;transform:rotate(-90deg) scale(.7)} .mikon .mix .mxl{transform-box:fill-box;transform-origin:center; transition:transform .3s ease,opacity .2s ease} .mikon .mix .mxl:nth-child(1){transform:translateY(5.78px) rotate(45deg)} .mikon .mix .mxl:nth-child(2){opacity:0} .mikon .mix .mxl:nth-child(3){transform:translateY(-5.78px) rotate(-45deg)} .mikon[aria-expanded="true"] .mio{opacity:0;transform:rotate(90deg) scale(.7)} .mikon[aria-expanded="true"] .mix{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .mikon .mio,.mikon .mix,.mikon .mix .mxl{transition:none}} .mikon{background:none;border:0;padding:0;color:inherit;display:grid; place-items:center;width:44px;height:44px;margin:-10px;cursor:pointer} .mikon svg{width:var(--ik);height:var(--ik);fill:currentColor;stroke:none} /* Menu dugmesi de Gulbin'in kendi ikonu. Uc cizgi ayri katmanda (ikon_parcali) oldugu icin acilma hareketi aynen korunuyor; onceki uc kutusu ve onlara verilen 1,5 px kalinlik kalkti. Cizgi merkezleri 24'luk kutuda 6,22 / 12,00 / 17,78 olarak olculdu, capraza giderken 5,78 birim ortaya kayiyorlar. */ .mham{background:none;border:0;padding:0;width:44px;height:44px; margin:-14px -10px;cursor:pointer;display:grid;place-items:center; box-sizing:border-box} .mham svg{width:var(--ik);height:var(--ik);fill:currentColor;stroke:none} .mham .mhl{transition:transform .3s ease,opacity .2s ease; transform-box:fill-box;transform-origin:center} .mham[aria-expanded="true"] .mhl:nth-child(1){transform:translateY(5.78px) rotate(45deg)} .mham[aria-expanded="true"] .mhl:nth-child(2){opacity:0} .mham[aria-expanded="true"] .mhl:nth-child(3){transform:translateY(-5.78px) rotate(-45deg)} /* ---- cekmece menu ---- */ /* cekmece: serit + baslik = 94; kaydirinca serit gizlenince 56 */ /* Menu cekmecesi beyaz zeminli (Gulbin, 10 Eylul). Yazi rengi de yuzeyle birlikte donuyor: acik yuzey -> koyu yazi. */ /* Gulbin, 15 Eylul: "menuyu acinca asagiya kaydiramiyorum." Olculdu: cekmecenin ic yuksekligi 756 px, icerigi 1698 px ve scrollTop programla degisiyordu, yani kutu kaydirilabilir durumdaydi; sorun dokunma tarafinda. iOS'ta govde kilitliyken ic kaydiricinin calismasi icin gereken uc ozellik eklendi: dokunmanin dikey kaydirma sayilmasi, zincirin disari tasmamasi ve ivmeli kaydirma. */ .hd .nav{position:fixed;inset:94px 0 0 0;background:var(--beyaz);z-index:60; pointer-events:none;opacity:0;visibility:hidden; overflow-y:auto;overflow-x:hidden; touch-action:pan-y;overscroll-behavior:contain; -webkit-overflow-scrolling:touch; transition:opacity .3s ease,visibility .3s;padding:0} .hd .nav.acik{opacity:1;visibility:visible;pointer-events:auto} .hd .nav .item{position:static;width:100%;pointer-events:auto;white-space:normal; border-bottom:1px solid rgba(97,206,112,.18)} .hd .nav .nb{width:100%;justify-content:space-between;padding:var(--r2) var(--yan); font-size:var(--f4);gap:var(--r1)} /* Ok artik Gulbin'in ikon setinden: dolu form, kontur eklenmiyor. Eski cizim 11 px'lik kutuda kalin duruyordu. */ .hd .nav .nb .arw,.hd .nav .nb .arw path{width:var(--ik-s);height:var(--ik-s); fill:currentColor;stroke:none!important; paint-order:normal; transition:transform .3s ease} .hd .nav .nb .arw path{width:auto;height:auto} .hd .nav .nb[aria-expanded="true"] .arw{transform:rotate(180deg)} /* Gulbin, 15 Eylul: "golgeli uzuyor ya, onu yapmasak, alta acilsa." Mega menu masaustunde ustune binen bir panel oldugu icin golgesi var (0 30px 70px -46px); cekmecede ise akisin icinde duruyor ve golge onu "uzayan bir katman" gibi gosteriyordu. Golge kalkti. Acilis da aniden degil: yukseklik sifirdan acilarak asagi dogru iniyor, icerik de yumusakca beliriyor. Yukseklik tavani 1500 px, en uzun menu 374 px olculdu; kirpmiyor. */ .mega{position:static;display:block;border:0; padding:0 var(--yan);background:transparent;font-size:var(--f4); box-shadow:none!important; max-height:0;overflow:hidden;touch-action:pan-y;opacity:0; transition:max-height .34s cubic-bezier(.2,.8,.25,1), opacity .22s ease,padding-bottom .34s cubic-bezier(.2,.8,.25,1)} .mega.on{max-height:1500px;opacity:1;padding-bottom:var(--r2)} @media(prefers-reduced-motion:reduce){ .mega{transition:none}} /* Gulbin: "olcunu gir bulalim kismini acilan menuden cikar mobilde", sonra "menunun altina gelsin". Mega menunun icindeki kopya kapali; ayni blok cekmecede menu maddelerinin altinda kendi basina duruyor. */ .hd .nav .mega .mfind{display:none!important} /* ---- ACILIR MENULER: SADE LISTE ---- Gulbin, 15 Eylul: "acilir menuleri de duzenleyelim, cok karisik gozukuyor." Olculdu: "Hazir Urunler" acilinca panel 648 px; uc satirin her birinde kategori adi, aciklama, "Tumunu gor" ve YEDI kartlik yatay urun seridi vardi, altta da uc rozet. Toplam 21 urun karti. Cekmecede menunun isi yonlendirmek; urun seridi ve rozetler kalkti. Kalan: kategori adi, tek satir aciklama, "Tumunu gor" baglantisi. Masaustu mega menusu aynen duruyor. */ /* Gulbin, 15 Eylul: "urunlerin gorselleri vardi iyiydi onlar." Urun seridi geri geldi; kaldirilanlar yalnizca rozet satiri, not bloklari ve metin listeleri. */ .hd .nav .mega .mfoot, .hd .nav .mega .mnote, .hd .nav .mega .mlist{display:none!important} /* Serit sayfa hizasindan basliyor, iki yana tasarak kayiyor. */ /* Gulbin, 15 Eylul: "menuyu acinca asagiya kaydiramiyorum." Sebep olculdu: parmak urun seridinin uzerine gelince dikey hareket seride takiliyordu. Serit yalniz yatay kaydiriyor (touch-action:pan-x); dikey hareket artik cekmeceye gecip sayfayi kaydiriyor. Olcum: seridin disinda kaydirma zaten calisiyordu (scrollTop 21 -> 64), serit uzerinde 0'da kaliyordu. */ /* Ikinci sebep: overflow-x:auto verilince overflow-y'nin KULLANILAN degeri de auto oluyor, yani serit dikeyde de bir kaydirma kutusu sayiliyor. Dikey hareket orada baslayip hicbir yere gitmiyordu. overflow-y acikca hidden yapilinca serit yalniz yatay kutu kaliyor ve dikey hareket dogrudan cekmeceye geciyor. touch-action:pan-x da dokunma tarafinda ayni seyi soyluyor. */ .hd .nav .mstrip{display:flex;gap:var(--r12);touch-action:pan-x; overflow-y:hidden;overscroll-behavior-x:contain; margin:var(--r2) calc(-1 * var(--yan)) 0; padding:0 var(--yan); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scroll-padding-left:var(--yan); scrollbar-width:none} .hd .nav .mstrip::-webkit-scrollbar{display:none} /* ---- MENUDEKI MINI URUN KARTI ---- Gulbin: "bizim urun kartindan yap anasayfadaki gibi, minik halleri tabi, urun aciklamasi koymazsin." Ana sayfadaki .pcard'in serit dili: gorsel, cizgi, baslik, cizgi, fiyat + ok. Aciklama seridi yok. Cerceve ve cizgiler kartin kendi kenar renginden. */ /* Gulbin, 15 Eylul: "urun kartlari cok hantal." Ilk mini kart 154x179 idi: iki ayirici cizgi, iki satirlik baslik, ayri fiyat seridi ve ok. Menude kartin isi kisa bir onizleme; ince hale getirildi: · kart 154 -> 118 px · tek ayirici cizgi (yalniz gorselin alti) · baslik tek satir, tasarsa uc nokta · fiyat ayni serit icinde, ok yok Kart dili ayni: kose yok, kil cizgi, ayni renkler. */ /* Gulbin, 15 Eylul: "kare icinde urun gorseli olsun, altinda da adi ve fiyati." Kartin dis cercevesi kalkti; cerceve yalniz gorselin karesinde. Ad ve fiyat karenin ALTINDA, cercevesiz. */ .hd .nav .mcard{flex:0 0 118px;scroll-snap-align:start; display:block;border:0;background:none; color:var(--mavi-koyu);text-decoration:none;padding:0;overflow:visible} /* Masaustu kurali .mcard .ph'ye sabit yukseklik veriyor (clamp(78px,7.2vw,104px)); kare olmasi icin o eziliyor. */ .hd .nav .mcard .ph{display:grid;place-items:center; width:100%;height:auto!important;aspect-ratio:1; overflow:hidden;background:var(--beyaz); border:var(--cizgi) solid var(--mavi-koyu);margin:0} .hd .nav .mcard img{width:86%;height:86%;object-fit:contain; display:block;mix-blend-mode:normal} .hd .nav .mcard b{display:block;padding:0;margin:var(--r1) 0 0; border:0;height:auto; font-weight:var(--ag-ince);font-size:var(--f5);line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .hd .nav .mcard .mfi{display:block;padding:0;margin:var(--r0) 0 0; font-size:var(--f5);line-height:1.3;color:var(--mavi-koyu);opacity:1} .hd .nav .mcard .mfi .arw2{display:none} /* Gulbin: "tum yazilar koyu mavi olacak, buton disinda." Tarama iki kacak buldu: "Tukendi" acik maviydi, olcu bulucunun basligi da --ab-yazi rengindeydi. Ikisi de --mavi-koyu. */ /* ---- SATIR SIRASI ---- Gulbin: "baslik, kategori aciklamasi, urunler, altta da tumunu gor." Siralama CSS ile denendi (.mleft'e display:contents + order) ama o kutuyu ortadan kaldirinca serit ve gorsel olculeri bozuluyordu. Bagliantiyi seridin ardina TASIYAN kisa bir adim daha saglam; masaustu duzeni hic degismiyor. */ /* Gulbin: "tumunu gor butonu cok asagida kaldi." 44 px'lik dokunma kutusu metni ortaliyor ve ustunde bosluk birakiyordu; kutu 36'ya indi, ust bosluk --r12'den --r1'e. */ .hd .nav .mega .mrow .all{margin-top:var(--r1);min-height:36px} /* Alt dolgu yalniz acikken: kapaliyken 24 px'lik bir seride kaliyordu (max-height:0 icerigi kirpiyor ama dolgu yuksekligi ekliyor). */ .hd .nav .mega{padding:0 var(--yan)} .hd .nav .mega.on{padding-bottom:var(--r3)} .hd .nav .mega .mrow{padding:var(--r2) 0 0;margin:0;border:0;gap:0} /* Gulbin, 15 Eylul: "alt kategoriler de parantezli olsun, altindaki aciklama basliga daha yakin olsun." */ .hd .nav .mega .mrow h4{margin:0;font-size:var(--f4);line-height:1.2; text-transform:uppercase;font-weight:var(--ag-ince);color:var(--mavi-koyu)} .hd .nav .mega .mrow h4::before{content:"[ "} .hd .nav .mega .mrow h4::after{content:" ]"} .hd .nav .mega .mrow p{margin:0;font-size:var(--f5); line-height:1.45;color:var(--mavi-koyu);opacity:1} .hd .nav .mega .all{display:inline-flex;align-items:center;gap:.4em; margin-top:var(--r1);min-height:36px;font-size:var(--f5); color:var(--mavi-koyu);text-decoration:none} /* Tasarim Hizmeti menusunde yalnizca bilgi listeleri var; onlar duruyor ama tek sutuna iniyor ve ayni sade dile giriyor. */ .hd .nav .mega .minfo{display:block} .hd .nav .mega .minfo>div{padding:var(--r2) 0 0} .hd .nav .mega .minfo h4{font-size:var(--f4);text-transform:uppercase; color:var(--mavi-koyu);margin:0 0 var(--r0)} .hd .nav .mega .minfo li a,.hd .nav .mega .minfo li .pl{font-size:var(--f5); color:var(--mavi-koyu);min-height:36px} .cmolc{padding:var(--r4) var(--yan) 0} .cmolc .mfind{border-top:0;padding:0} /* Gulbin, 15 Eylul: "olcunu gir kismi menu basliklari gibi olsun." Menu maddesiyle ayni: kose parantez, buyuk harf, --f3. */ /* Gulbin: "olcunu gir bulalim da ayni sekilde" -> ayni --ag-baslik. */ .cmolc .mfind h4{font-size:var(--f3);line-height:1.15;text-transform:uppercase; font-weight:var(--ag-baslik);color:var(--mavi-koyu)!important;margin:0 0 var(--r0)} .cmolc .mfind h4::before{content:"[ "} .cmolc .mfind h4::after{content:" ]"} /* "menudeki tum yazilar koyu mavi olacak": aciklamalar soluk griydi. */ .cmolc .mfind p,.cmolc .mfind .fnote, .hd .nav .nb .nalt{color:var(--mavi-koyu)!important;opacity:1} .cmolc .mfind p{font-size:var(--f5);line-height:1.45} .hd .nav,.hd .nav *{color:var(--mavi-koyu)} /* "kutucuklar ve bul butonu ayni boyutta olacak, sosyal medya icon yuksekligini baz alip yap": dordu de --buton-yuk (sosyal kutunun olcusu) yuksekliginde ve esit genislikte. */ /* Iki secenek: urun olcusu / kutu olcusu. Secili olan dolu koyu mavi, oteki cercevesi. */ .cmolc .fmod{display:flex;gap:var(--r1);margin-top:var(--r2)} .cmolc .fmod button{flex:1 1 0;min-width:0;height:var(--buton-yuk); box-sizing:border-box;border-radius:0;cursor:pointer;font:inherit; font-size:var(--f5);text-transform:uppercase; border:var(--cizgi) solid var(--mavi-koyu);background:none; color:var(--mavi-koyu);transition:background .22s,color .22s} .cmolc .fmod button[aria-pressed="true"]{background:var(--mavi-koyu); color:var(--beyaz)} .cmolc .ffm{display:flex;align-items:center;gap:var(--r1);flex-wrap:nowrap; margin-top:var(--r2)} .cmolc .ffm input,.cmolc .ffm button{flex:1 1 0;min-width:0; height:var(--buton-yuk);box-sizing:border-box;border-radius:0} /* Gulbin, 15 Eylul: "en boy yukseklik metinleri aciklama metinleri boyutunda olsun." Aciklamalar --f5 (11 px). NOT: asagida butun metin girislerini 17 px'e sabitleyen bir kural var; sebebi iOS'un 16 px altindaki bir girise dokununca sayfayi yakinlastirmasi. Gulbin 11 px istedi, o kural burada eziliyor; telefonda kutuya dokununca sayfa bir miktar yakinlasabilir. */ .cmolc .ffm input{background:none;border:var(--cizgi) solid var(--mavi-koyu); color:var(--mavi-koyu);font:inherit;font-size:var(--f5)!important; text-align:center;padding:0;-webkit-appearance:none;appearance:none} .cmolc .ffm input::placeholder{color:var(--mavi-koyu);opacity:.5} .cmolc .ffm input:focus{outline:none;border-color:var(--mavi-acik)} .cmolc .ffm em{flex:0 0 auto;color:var(--mavi-koyu);font-size:var(--f5)} .cmolc .ffm .unit{flex:0 0 auto;color:var(--mavi-koyu);font-size:var(--f5); margin:0} /* Once gradyanli ve yesil yaziliydi; Gulbin, 15 Eylul: "buton duz koyu mavi olsun, yazi da beyaz." Animasyon ve gradyan kalkti. */ .cmolc .ffm button{border:0;cursor:pointer; background:var(--mavi-koyu);color:var(--beyaz)!important; font:inherit;font-size:var(--f4);text-transform:uppercase} .mega h4{font-size:var(--f5);margin:var(--r12) 0 var(--r0)} .mega li a{font-size:var(--f4);padding:var(--r1) 0;margin-left:0} .mrow,.mnote,.minfo,.solo{grid-template-columns:1fr!important} body.menu-acik{overflow:hidden} /* ---- CEKMECENIN ALT BLOGU ---- Gulbin, 14 Eylul: "o menuye footerdan bazi seyler eklenebilir, sosyal medya iconlari mesela, arama alani vs. menu daha kullanisli olmali." Menu maddelerinin altinda: arama kutusu, hizli baglantilar, sosyal ikonlar, telefon. Hepsi footerin kendi icerigi, ikinci bir kopya yok. Yalniz cekmecede gorunuyor; masaustu menusunde kapali. */ .cmalt{display:none} /* Gulbin: "en altta olsun iconlar." Cekmece dikey bir sutun; ikon blogu margin-top:auto ile dibe yapisiyor. Icerik uzunsa dogal akista kaliyor, kisaysa ekranin altina gidiyor. */ /* Sutun duzeni kaliyor ama en az yukseklik veriliyor: icerik kisaysa alt blok dibe gidiyor, uzunsa dogal akista kalip kaydiriliyor. margin-top:auto tek basina, kaydirilabilir bir flex kutusunda ustu erisilmez hale getirebiliyor. */ /* min-height:100% denendi ama sabit konumlu kutuda yuzde EKRANA gore hesaplaniyor; cekmece 56 px asagidan basladigi icin alt 56 px ekranin disina tasiyordu. Alt blok zaten margin-top:auto ile dibe gidiyor. */ .hd .nav.acik{display:flex;flex-direction:column} /* Gulbin: "biraz daha iconlara dogru kaydir onu, fazla bosluk var aralarinda." Dibe yapisan blok artik olcu bulucudan basliyor; ikisi birlikte asagi iniyor ve aralarinda yalniz --r3 kaliyor. */ .cmolc{margin-top:auto} .hd .nav .cmalt{display:block;padding:var(--r3) var(--yan) var(--r5); border-top:0;margin-top:0} /* Arama menu maddelerinin USTUNDE ("ne ariyorsun ustune gelsin"). */ /* Gulbin, 15 Eylul: "ne ariyorsunuz kismi cerceveli olsun." Once yalniz alt kil vardi; artik dort kenari da kil cerceve, olcu bulucunun kutulari ve sosyal ikon kareleriyle ayni dil. */ .hd .nav .cmara{display:flex;align-items:center;gap:var(--r1); border:var(--cizgi) solid var(--mavi-koyu); padding:0 var(--r1);min-height:var(--buton-yuk); /* Gulbin: "kategoriler ne ariyorsunuz altina gelsin, cok bosluk var." Alt bosluk --r4'ten --r2'ye. */ margin:var(--r12) var(--yan) var(--r2)} /* Gulbin, 15 Eylul: "arama alani karisik, ust uste binmis." Alanin ic ice iki cercevesi vardi: disaridaki bizim kutumuz, icerideki input'un kendi kenarligi. type="search" ayrica iOS'ta kendi yuvarlak cercevesini ve temizleme dugmesini ekliyor. Hepsi kapatildi, tek cerceve disaridaki kutu. */ .cmara input{flex:1;min-width:0;background:none;color:var(--mavi-koyu); font:inherit;font-size:var(--f4);padding:var(--r1) 0; border:0!important;outline:0;box-shadow:none!important;border-radius:0; -webkit-appearance:none;appearance:none} .cmara input::-webkit-search-decoration, .cmara input::-webkit-search-cancel-button, .cmara input::-webkit-search-results-button{-webkit-appearance:none;display:none} .cmara input::placeholder{color:var(--mavi-koyu);opacity:1} .cmara input:focus{outline:none} .cmara button{background:none;border:0;padding:0;cursor:pointer; color:var(--mavi-koyu);display:grid;place-items:center; width:var(--ik);height:var(--ik);flex:0 0 auto} .cmara button svg{width:var(--ik);height:var(--ik);fill:currentColor;stroke:none} .cmbag{list-style:none;margin:var(--r3) 0 0;padding:0;display:grid;gap:var(--r12)} .cmbag a{color:var(--mavi-koyu);text-decoration:none;font-size:var(--f4); display:inline-block;padding:var(--r0) 0} /* Eski, sabit 44 px'lik tanim kalkti: sosyal kutu ile olcu bulucunun kutulari tek jetondan (--buton-yuk) besleniyor, ikisi ayni boyda. */ .cmsos a svg{fill:currentColor;stroke:none} /* ---- hero ---- Masaustu sahnesi uc urunu 1724x918'lik tuvale yayiyor; telefonda o tuval 200 px'lik bir seride eziliyordu. Mobilde sahne kapali, yerine tek urunlu kendi hero'su var: gorsel, baslik, tek eylem. */ /* ---- MOBIL GIRIS ---- Yerlesim Gulbin'in Illustrator ciktisi (chipler, kose etiketleri, sus cizgisi, buton). Stand ve kutu ise masaustu slider'inin 2. ve 3. urunu: Gulbin, 11 Eylul, "ayni yere ayni olcekte masaustu slider'dan 2. ve 3. kutuyu alip buraya cekeceksin". Neden masaustunden: o tuvalde yesil cerceve urun katmanlariyla AYNI .fl grubunun icinde, tek donusum ikisini birden tasiyor. SVG'de ikisi ayri kardesti ve her senkron denemesinde (giris, salinim, donus merkezi) yeniden kayiyorlardi. Yerlesim hesabi: hedef kutular SVG'nin kendi yesil cerceve kutulari stand x 87..375 y 324..777 kutu x 373..661 y 377..771 kaynak masaustu tuvali (--AW 1724, --H 918) p2 x 542,97 y 251,50 olcu 593,58 p3 x 947,24 y 166,34 olcu 597,73 Ikisi ayri kapsayiciya konuyor: dikey yerlesimde aralarindaki oran masaustundekinden farkli, tek kutuda tasisak gorsel ezilirdi. OLCU Gulbin'in gonderdigi referans artboard goruntusunden, HER URUN AYRI olculerek alindi (tuval 754x1380, sol-ust 64,38): stand x 155..500 y 450..1010 -> tuvalin %45,8'i kutu x 575..815 y 620..1050 -> tuvalin %31,8'i 375x519'luk mobil hero'da karsiligi: stand 172 px (45,155), kutu 119 px (254,219). Onceki denemede ikisini TEK donusumle birlikte buyutmustum; o zaman kutu standla ayni boyda kaliyordu, oysa referansta stand belirgin sekilde buyuk. UC KEZ KUCUK KALDI, sebebi sonunda olculdu: gorseller KARE ve iclerinde buyuk bos alan var. Alfa sinirlari (900x900 dosyada): n_stant murekkep 458x738 konum (231,68) -> yatayda yalniz %51 n_altavize murekkep 420x450 konum (229,309) -> yatayda yalniz %47 Yani kutuyu 171 px yaptigimda GORUNEN stand 171x0,51 = 87 px kaliyordu. Artik hedef, gorunen murekkebin Gulbin'in SVG'sindeki olcuye oturmasi: stand murekkep 132 px, konum (47,161) kutu murekkep 145 px, konum (195,186) Bunun icin kare kenar stand 259,4 / kutu 310,7 px olmali; kapsayici olculeri .ly kesrinden (593,58/1724 ve 597,73/1724) geri hesaplandi. Gulbin, "biraz daha asagida olsun, kutu ve stand birbirine ortalansin yataydan": murekkep merkezleri 267,4 ve 263,7 idi, 3,7 px kacikti. Ikisi ortak merkeze (265,55) alinip 20 px asagi indirildi -> 285,55. Sonra Gulbin "stand biraz yukariya kaysin" dedi -> stand 20 px yukari, murekkep 159,2..371,9. Ardindan "cok az asagiya insin" -> 8 px asagi, murekkep 167,2..379,9, merkez 273,5. Ust etiket alti 147, alt etiket ustu 400; cakisma yok. Gulbin "kutuyu biraz kucult": kutu murekkebi 145 -> 125 px (%14). Yatay merkezi (267,5) korundu. Dikey: once standla ortalanmisti (285,5), sonra Gulbin "koli biraz daha asagiya kaysin" dedi -> yalniz kutu 20 px asagi, merkezi 305,5. Artik standla ortalanmis DEGIL, bilerek. Kutu alti 372,5; standin alti 392, etiketler 400 -> cakisma yok. */ /* Masaustu girisi mobilde gizli: yerine .mhero geciyor. Bu satir slider denemesi geri alinirken silinmisti, SVG hero geri konurken de yerine konmamisti; iki giris ust uste biniyordu. */ .S.hero{display:none} /* Gorseller kare ve iclerinde bos alan oldugu icin kapsayicilari tuvalin disina tasiyor (kutu 427 px'e kadar). Gorunen murekkep ekranin icinde ama seffaf kenar sayfayi yatayda kaydiriyordu. overflow:clip kirpiyor ve kaydirma kapsayicisi yaratmiyor. */ .mhtuval{position:relative;line-height:0;overflow:clip} /* Tuvalin ust kirpmasi CSS kenar boslugu ile degil SVG'nin viewBox'i ile yapiliyor (kapsayicinin yuksekligi SVG'nin kendi oranindan geliyor, negatif margin onu kisaltmiyordu). Cipler kalkinca viewBox ustten 21,64 -> 166,60 birime cekildi; kose etiketleri basliktan 48 px asagida. */ .mhtuval .mhsvg{display:block;width:100%;height:auto} /* SVG'nin kendi urun ve cerceve katmanlari kalkiyor, yerine masaustu urunleri geliyor. Chipler, etiketler, sus cizgisi ve buton kaliyor. */ .mhsvg .mh-urun,.mhsvg .mh-cerceve{display:none} /* SVG'nin kendi raster gorselleri de kapali. Grubu gizlemek yetmedi: Illustrator ciktisinda urun fotograflari olarak grubun DISINDA da duruyordu, bu yuzden ekranda dort stand gorunuyordu (ikisi benim koydugum masaustu urunu, ikisi SVG'nin kendi kucuk kopyasi). SVG'den geriye yalniz vektorel kisim kaliyor: cipler, kose etiketleri, sus cizgisi ve buton cercevesi. */ .mhsvg image{display:none} /* Gulbin, 14 Eylul: "ana sayfa slider da ustteki rozetleri kaldir." Uc cip tek grupta: . Gizlenince tuvalin ustunde bos bir bant kaliyor; asagidaki kirpma onu aliyor. */ .mhsvg .mh-cip{display:none} /* Gulbin, 14 Eylul: "kutunu tasarla butonu da olmasin mobil sliderda". Ayni CTA sayfanin devaminda editor bolumunde zaten duruyor. */ .mhsvg .mh-cta{display:none} /* Gulbin'in mockup'i: tuvalin dort kose etiketi ve yanlarindaki ok isaretleri kalkiyor, yerine tuvalin altinda ortali baslik ve metin. */ .mhsvg .mh-lbl,.mhsvg path.cls-85{display:none} /* ---- GIRISTE CIZILEN CERCEVELER ---- Gulbin, 14 Eylul: "mobilde giriste urun cerceveleri ve aradaki cizgi ciziliyor gibi animasyonla gelsin." Cerceveler SVG'nin icinde degil, .mhurun'daki .ucerk katmanlarinda (SVG'nin kendi .mh-cerceve yollari mobilde display:none, o yuzden animasyon hic calismiyordu). Yol uzunluklari olculmedi, pathLength="1" ile normallestirildi: kesik deseni bir birim, kaydirma bir birimden sifira iniyor, yani cizgi ucundan basina dogru "cizilmis" gibi ortaya cikiyor. Once iki cerceve, sonra aradaki kivrimli cizgi. Sinif adi mh-baglanti: "mh-cizgi" adi cizimde zaten kullaniliyordu (cls-173) ve secici yanlis ogeyi de yakaliyordu. Bu tek seferlik bir giris hareketi, kullanicinin gunde yuzlerce kez gordugu bir etkilesim degil; o yuzden 300 ms ustune cikiyor. */ /* "biraz daha yavas cizsin" -> cerceveler 1,1 sn'den 1,9'a, sonra "cok hizli ciziliyor ya yavaslasin biraz" -> 2,8 sn. Baglanti cizgisi 1,5 -> 2,6 -> 3,6 sn. */ .mhurun .ucerk path,.mhsvg .mh-baglanti{ stroke-dasharray:1;stroke-dashoffset:1; animation:mhciz 2.8s cubic-bezier(.65,0,.35,1) .3s forwards} /* Ikinci urunun cercevesi birazcik sonra basliyor, ikisi ust uste degil arka arkaya ciziliyor. */ .mhurun .mhp3 .ucerk path{animation-delay:.9s} .mhsvg .mh-baglanti{animation-duration:3.6s;animation-delay:2s} @keyframes mhciz{to{stroke-dashoffset:0}} @media(prefers-reduced-motion:reduce){ .mhurun .ucerk path,.mhsvg .mh-baglanti{ stroke-dasharray:none;stroke-dashoffset:0;animation:none}} /* Filigran: urunlerin arkasinda, sayfanin mavisiyle. Tuval ustune biniyor, tiklanmiyor, ekran okuyucuda yok. */ /* Giris ekrani tam ekranı kaplasin. Gulbin: "en alttaki beyaz golge." Olculdu: hero 774 px, ekran 812 px; kalan 38 px'te bir sonraki BEYAZ bolum goruluyordu ve Safari'nin alt cubugu onunla kaynasip beyaz bir golge gibi duruyordu. svh birimi tarayici cubuklari acilip kapanirken zipladigi icin dvh degil svh. */ .mhero{position:relative;min-height:100svh;display:flex; flex-direction:column;justify-content:center} /* "girise kaydirmadan ust kisminda gradientli olmasini istedim kesik durmaması icin": tarayicinin ust cubugu duz bir renk (theme-color), sayfanin ust kenari ise gradyanli; ikisi arasinda yatay bir kesik goruluyordu. Bu katman sayfanin tepesini cubukla ayni --siyah'a baglayip asagi dogru sifirliyor, gecis gorunmez oluyor. Yeni renk yok: cubuk da bu katman da --siyah. */ .mhero::before{content:"";position:absolute;left:0;right:0;top:0; height:calc(var(--r5) + var(--r5));z-index:2;pointer-events:none; background:linear-gradient(to bottom,var(--siyah) 0, rgba(0,0,0,.72) 34%,rgba(0,0,0,.30) 66%,rgba(0,0,0,0) 100%)} /* "koli lazim kutularin arkasina tam kesisecek sekilde olacak": urun murekkebi 100,3-270,5 px arasinda, merkezi 185. Filigran 228,6 px; merkezleri ustuste gelsin diye ust kenari 70 px'e aliniyor. */ /* Mockup'ta filigran ekrandan iki yana tasiyor, harfler kenarlardan kirpiliyor ve urunler tam ortasindan geciyor. Genislik %150'de kucuk kaliyordu, %230'a cikti: 375'te 862 px, iki satir 438 px yuksek. Urun murekkegi 100-270, merkezi 185; filigranin merkezi de oraya oturuyor (185 - 219 = -34). */ /* Gulbin: "tasmamasi lazim, tam 0'a 0 sigmasi lazim." Filigran ekranin tam genisliginde, kenarlardan tasmiyor. Logonun orani 108,6/55,2 = 1,967; 375 genislikte 190,6 px yuksek. Urun murekkebi 120,2-333,6, merkezi 231,5; filigranin merkezi de oraya otursun diye ust kenar 231,5 - 95,3 = 136 px. */ .mhero{overflow:clip} .mhfiligran{position:absolute;left:0;right:0; top:calc(var(--r5) + var(--r4) + var(--r3)); width:100%;translate:none;z-index:0;pointer-events:none;line-height:0} .mhfiligran svg{width:100%;height:auto;display:block; color:var(--mavi-acik);opacity:.6} .mhfiligran svg path,.mhfiligran svg polygon{fill:currentColor} .mhtuval{z-index:1} /* "baslik ve altindakileri biraz daha yukariya tasi": ust dolgu kalkti. */ .mhsoz{position:relative;z-index:1;padding:var(--r3) var(--yan) 0; text-align:center} /* ---- ISO / PPWR ROZETLERI ---- Gulbin'in 14 Eylul mockup'i: metinle marka logolari arasinda uc belge isareti. Cizim onun kendi Illustrator ciktisi (Artboard 17), yol verisi degistirilmedi. Genislik mockuptaki orana gore: seridin tuvali 230,43 x 61,45; ekranin %58'ini kapliyor. */ /* Gulbin: "renkler bizim yesil olacak" -> Illustrator ciktisi #87be7d ile geliyordu, yol verisi degismeden dolgu currentColor'a cevrildi ve burada marka yesiline baglandi. Ayri renk tanimi yok. "biraz daha kucultup yukariya kaydir" -> %58'den %48'e, ust bosluk --r4'ten --r2'ye (48 -> 16 px). */ .miso{position:relative;z-index:1;padding:var(--r2) var(--yan) 0; line-height:0;text-align:center;color:var(--green)} .misosvg{display:inline-block;width:48%;max-width:190px;height:auto; fill:currentColor} /* Mockup'ta baslik iki satir, kirilim virgulden sonra. 26 px'te ikinci satir 350 px istiyor, sayfa hizasi 335 veriyor ve uc satira dusuyordu; merdivenin bir alt basamagi iki satirda tutuyor. */ /* Gulbin ekran goruntusuyle netlestirdi: olcu KART basligi degil, kartlarin ustundeki BOLUM basligi ("[ Kendi olcunu tasarla ]") kadar olacak, tek fark rengi yesil. Bolum basligi --f1/500, bolum giris metni --f4/300 ve 1,45 satir araligi; hero da birebir ayni. */ /* Gulbin: "kutudan standa / koli lazim / her noktada seklinde olacak." Satir kirilimlari
ile elle veriliyor; text-wrap:balance kendi basina yeniden bolup bu kirilimi bozuyordu, kaldirildi. */ .mhbas{margin:0;color:var(--green);font-weight:var(--ag-baslik); font-size:var(--f1)!important;line-height:1.1;text-transform:uppercase} .mhmetin{margin:var(--r2) 0 0;color:var(--green)!important;font-weight:var(--ag-ince); font-size:var(--f4);line-height:1.45;max-width:32em; margin-left:auto;margin-right:auto} /* Olcek: Gulbin "su anda kucucukler" dedi. Olculdu: benim ikili urun kutum 293x177 px (konum 43,94) iken Gulbin'in SVG'sindeki urun grubu 429x351 (konum 44,152). Yani 1,4634 kat kucuk kalmisim. Sebep: urunleri SVG'deki YESIL CERCEVE kutularina gore olceklemistim, oysa o cerceveler urunun icindeki kucuk kareler, urunun sinirlari degil. Iki urun tek donusumle birlikte buyutuluyor ki aralarindaki dizilis bozulmasin. transform-origin 0 0, sonra kutuyu hedefe oteleme: otele = hedef - mevcut * olcek -> x: 44-43,4*1,4634 = -19,5 px y: 152-94,1*1,4634 = 14,2 px */ /* Olcek Gulbin'in gonderdigi referans artboard goruntusunden alindi: tuval 754x1380 px, urun ikilisi yatayda %12,1 -> %99,6 (genislik %87,5), dikeyde %29,9 -> %73,3. Mobil hero 375x519 oldugundan hedef 328 px genislik, sol kenar 45, ust kenar 155. Mevcut ikili 293,2 x 176,6 konum (43,4 , 94,1) idi -> olcek 1,1191. Onceki denemede SVG'nin urun GRUBU kutusunu (429 px) hedef almistim, o kutu gorunmeyen golge katmanlarini da sayiyor ve kutu sagdan 97 px tasiyordu. Referans olcusu tasmiyor: sag kenar 373,5 / 375. */ .mhurun{position:absolute;inset:0;pointer-events:none;} .mhp{--AW:1724;--H:918;position:absolute} .mhp2{width:200.908%;height:110.640%;left:-68.502%;top:-1.115%} .mhp3{width:206.018%;height:113.455%;left:-76.703%;top:8.371%} /* Masaustunde .prod acilista opacity:0 baslar ve sayfa betigi 220+i*130 ms sonra "in" sinifini ekler. Mobil giriste urunun hic gorunmeme riski olmasin diye taban opaklik 1'e alindi; giris animasyonu SVG'nin kendi mhGir'i ile zaten geliyor. */ .mhp .prod{position:absolute;inset:0;opacity:1;transform:none} /* Salinim mobilde orantisiz kaliyordu. bob keyframe'i dikeyde 15 px ve 0,5 derece; masaustunde stand ~500 px genisliginde oldugu icin bu %3, mobilde stand 132 px oldugu icin ayni 15 px %11 ediyor ve urun cok yukari cikip iniyor. Gulbin: "animasyonu biraz azalt". Mobil icin ayni egri, kucuk genlik: 6 px ve 0,2 derece (yaklasik %4,5, masaustundeki orana yakin). */ @keyframes bobm{0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(.2deg)}} .mhp .fl{animation-name:bobm} /* Ekranda gorunmez ama ekran okuyucuda ve arama motorunda duran baslik. */ .gizli{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} .mhero{padding-top:0} /* hero de diger koyu bantlarla ayni zemini kullaniyor: sayfada tek koyu var */ .mhero{display:block;padding:0; background:var(--siyah);background-image:var(--bgrad);color:var(--green)} /* "renkli alani da biraz daha uzat, logolarin altindaki bosluk artsin": giris ekrani tam ekrandan bir tik uzun. Ilk ekranin alt kenari kesin olarak girisin kendi koyu zemini oluyor, bir sonraki beyaz bolumun ucu asagidan sizmiyor. Bu satir yukaridaki padding:0'dan SONRA olmali; once yazdigimda hic uygulanmamisti. Sonra "renkli arkaplan da gereksiz uzadi, altini kisalt biraz": --r5'ten --r2'ye (64 -> 16 px). */ .mhero{padding-bottom:var(--r2)} .mhgorsel{display:block;position:relative;padding:var(--r5) var(--yan) 0; background:radial-gradient(60% 42% at 50% 42%, rgba(97,206,112,.18) 0%, rgba(97,206,112,0) 70%)} .mhgorsel img{display:block;width:74%;max-width:300px;height:auto;margin:0 auto; filter:drop-shadow(0 18px 20px rgba(0,0,0,.55))} .mhero h1{margin:0;font-weight:var(--ag-baslik);font-size:var(--f1);line-height:1.16; text-transform:uppercase} .mhero p{margin:var(--r2) 0 0;font-size:var(--f4);line-height:1.6;color:var(--mtn-2)} /* yan bosluk: .mhero'nun kendi dolgusu sifir, metinler kendi payini aliyor */ .mhero>h1{margin:var(--r3) var(--yan) 0} .mhero>p{margin:var(--r2) var(--yan) 0} .mhero>.mcta{margin:var(--r3) var(--yan) 0} .mhero .mcta{display:block;text-align:center; border:1px solid var(--green);color:var(--green);text-decoration:none; padding:var(--r2);font-size:var(--f5);text-transform:uppercase} /* ---- bolumler ---- */ .S2{--AW:470;padding:var(--r4) var(--yan) var(--r4)} .S2 h2{font-size:var(--f1);line-height:1.1} .S2 .lead{font-size:var(--f4);line-height:1.6;width:auto;text-align:center; margin-top:var(--r1)} .S2.lite .head{display:flex;flex-direction:column;align-items:center;gap:0} .S2.dark .lead{width:auto;margin-top:var(--r1)} .S2.dark h2{text-align:left} /* Gulbin: "ne dedilerde 4,9 olan metin ortalanmis olsun sayfaya." ve "4,9 altina biraz bosluk ver": seridin kendi ust boslugu 16 px idi, puan satirina --r2 alt bosluk eklendi, arada 32 px kaliyor. */ .S2.dark .gpuan{justify-content:center;padding-bottom:var(--r2)} /* Kart satirlari: telefonda iki sutunlu izgarada baslik uc satira kiriliyor, aciklama kirpiliyor, ok yalniz kaliyordu. Onun yerine yatay kayan serit: kart genis, yazi rahat, bolum kisa. Blog ve kategori izgarasi haric. */ .pgrid:not(.ktgizgara){ display:flex!important;grid-template-columns:none!important; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none; /* Gulbin, 14 Eylul: "kutucuklarin ustune gelince buyuyor ve kesiliyor ustten." Serit yatay kaydigi icin (overflow-x:auto) DIKEYDE de kirpiyor; kart uzerine gelince 10 px yukari kalkip %3,5 buyuyunce ust kenari seridin disina tasip kesiliyordu. Serite dikeyde yer acildi, ust bosluk kadar da negatif kenarla geri alindi, boylece yerlesim kaymiyor. */ gap:var(--r2)!important; margin:calc(var(--r2) - var(--r3)) -20px calc(-1 * var(--r3))!important; padding:var(--r3) var(--yan) var(--r3)!important; /* Gulbin, 11 Eylul: "ilk kart ekran basindan degil hiza basindan basliyor." Olculdu: seridin ic boslugu 20 px oldugu halde ilk kart x=0'da duruyordu, cunku scrollLeft 20'ye kacmisti. Sebep: scroll-snap karti KAYDIRMA ALANININ kenarina yapistirir, ic boslugu saymaz. scroll-padding-left yapisma cizgisini 20 px iceri aliyor; artik ilk kart baslikla ayni hizada, kalanlar da o hizaya yapisiyor. */ scroll-padding-left:var(--yan)} .pgrid:not(.ktgizgara)::-webkit-scrollbar{display:none} /* ---- SERIT OKLARI ---- Gulbin, 11 Eylul: "kaydirma altinda yuvarlaklar istemiyorum. yine sayfa hizalarinda saga sola ok koyalim." Nokta gostergesi kalkti. Isaretler Artboard 1'den (ok-sol 8,21 · ok-sag 9,15), yol verisi degistirilmedi. Hiza: dokunma kutusu 44, ikon 24, yani ikon kutunun icinde her yandan 10 px iceride. Satir o kadar disari cekiliyor ki GORUNEN ok tam sayfa hiza cizgisinde dursun, dokunma kutusu 44 kalsin. Renk yuzeyden geliyor (currentColor): acik bolumde koyu, koyu bolumde acik cikiyor, ayri renk kurali yok. */ .oklar{display:flex;justify-content:space-between;align-items:center; margin-top:var(--r12); margin-left:calc((var(--ik) - var(--ik-dokunma))/2); margin-right:calc((var(--ik) - var(--ik-dokunma))/2)} .oklar .ok{appearance:none;-webkit-appearance:none;background:none;border:0; padding:0;cursor:pointer;color:inherit; width:var(--ik-dokunma);height:var(--ik-dokunma); display:grid;place-items:center; transition:opacity var(--sure-hizli) var(--egri)} .oklar .ok[disabled]{opacity:.25;cursor:default} .oklar .ok svg{width:var(--ik);height:var(--ik);display:block} .oklar .ok svg path,.oklar .ok svg polygon{fill:currentColor} @media(prefers-reduced-motion:reduce){.oklar .ok{transition:none}} .pgrid:not(.ktgizgara)>*{ flex:0 0 64%;scroll-snap-align:start;min-width:0} /* Urun kartlari mockuptaki oranda: 64%'te kart 214 px'e dusuyordu, fiyat ve rozet alt alta kiriliyordu. 84% ile kart 281 px, yanindaki kartin ucu gorunmeye devam ediyor (kaydirilabilir oldugunun isareti). */ /* Gulbin: "mobilde urun kartlari biraz daha kucuk olabilir." 84 -> 76%, kart 281 -> 255 px; fiyat ve rozet hala tek satirda kaliyor. */ .pgrid:not(.ktgizgara)>.pcard:not(.blogkart){flex:0 0 76%} /* blog karti daha genis: basligi ve girisi rahat okunsun */ .blogsatir>*{flex:0 0 78%!important} /* ---- BLOG KARTI: EZILEN GORSEL VE ORTASINDAN KESILEN YAZI ---- Gulbin, 11 Eylul: "bu neden boyle" (blog kartinin yazisi yarim satirdan kesiliyor, altinda kocaman bosluk var). Olculdu (375 px): gorsel 227,3 x 61,6 -> kare olmasi gerekirken %27'sine inmis paragraf 10,6 px -> satir yuksekligi 19,5, yani 0,54 satir; bu yuzden harflerin ortasindan kesiliyor ayni seritteki saglam kartlar: gorsel 180x180 kare, paragraf tam 39 px Sebep .blogkart'taki overflow:hidden. Kaydirma kapsayicisi yarattigi icin kartin flex satirina bildirdigi dogal yukseklik cokuyor: serit 330,6'ya karar veriyor, sonra kare oranli gorsel 227 px isteyince flex hem gorseli hem paragrafi eziyor. overflow:clip ayni kirpmayi yapar ama kaydirma kapsayicisi yaratmaz, dogal yukseklik dogru hesaplanir. Olculdu: kart 326,6 -> 520,7 · gorsel 227,3 kare · paragraf tam 2 satir · tasma 0 · ok isareti gorunur. */ .blogsatir .pcard{overflow:clip} /* seritte kart genis; iki satirlik aciklama sigiyor ve karta govde katiyor */ .pgrid:not(.ktgizgara) .pcard p{-webkit-line-clamp:2} /* kategori izgarasi: iki sutun, cok dar ekranda tek */ .ktgizgara{grid-template-columns:repeat(2,1fr);gap:var(--r2)} @media(max-width:400px){.ktgizgara{grid-template-columns:1fr}} /* kalan izgaralar iki sutun */ .r3,.r4,.r5,.r6{grid-template-columns:repeat(2,1fr)!important; gap:var(--r2)!important} /* kart ic dolgusu: icerik cerceveye yapismasin */ .pcard{padding:var(--r2)!important;gap:var(--r1)} .pcard .ph{aspect-ratio:1!important} .pcard .num{font-size:var(--f5)} .pcard h3{font-size:var(--f3);line-height:1.2;margin-top:var(--r1)} .pcard p{font-size:var(--f4);line-height:1.5; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .pcard .pr{font-size:var(--f3)} .pcard .birim,.pcard .adet{font-size:var(--f5)} .pcard .arw2{width:var(--ik-s)} /* rozet seridi: alt alta duzensiz kirilyordu, yatay serit oldu */ .rband{display:flex!important;flex-wrap:wrap!important;overflow:visible; gap:var(--r1)!important;margin-top:var(--r3)!important;padding:0!important} .rband::-webkit-scrollbar{display:none} .rband span{flex:0 0 auto;white-space:nowrap} /* not: burada ikinci bir .rband kurali vardi, ustteki !important onu hic uygulatmiyordu; kaldirildi. */ .rband span,.rband a{font-size:var(--f5);padding:var(--r1) 13px} /* ---- akan seritler ---- */ .wsr{margin-top:var(--r3);padding:var(--r2) 0} .wk{flex-basis:62vw;width:62vw;padding:var(--r2);gap:var(--r1)} .wk figcaption b{font-size:var(--f3)} .wk figcaption span{font-size:var(--f5);line-height:1.4} .ysr{margin-top:var(--r2)} /* Gulbin: "urun yorumu cerceveleri yesil rengimizde urun karti cerceve kalinliginda olsun." Kalinlik zaten --cizgi, kartla ayni; renk yesile alindi. */ /* Gulbin: "ne dediler urun yorumlari biraz daha kucuk olsun." 70 -> 60vw (375'te 262 -> 225 px), yanindaki kartin ucu daha cok gorunuyor. */ /* Gulbin: "daraltmani degil, 1,5 kutu goruyorsam 2,5 kutucuk gormek istedim." 375'te 2,5 kutu = 150 px = %40. */ .yk{flex-basis:40vw;width:40vw;padding:var(--r12);gap:var(--r1); border-width:var(--cizgi);border-color:var(--green)} /* Gulbin: "kartlari uzatmissin, ayni yapida kalsin masaustuyle, daha kucuk olsun sadece." Masaustunde metin 4 satir (12 px / 18,6). Mobilde kart daraldigi icin ayni metin 8-9 satira cikip karti uzatiyordu; masaustundeki gibi 4 satirda kesiliyor, yapi ayni kaliyor. */ .yk p{font-size:var(--f4);line-height:1.55; max-height:calc(4 * 1.55em);overflow:hidden} .yb b{font-size:var(--f5)}.yb span{font-size:var(--f5)} .ya{width:30px;height:30px} .gpuan b{font-size:var(--f1)} /* ---- kurucu: dikey akis, sade ---- Sira: baslik, kurucu metni, iletisim sutunu, fotograf. Fotograf bandin alt kenarina oturuyor, bant dolgusu digerleriyle ayni. */ .krc{padding:0} .krcsahne{aspect-ratio:auto;--AW:470;display:flex;flex-direction:column; gap:0;padding:var(--r4) var(--yan) 0;overflow:hidden} .krcsahne>*{position:static} .krcsahne .krcbas{font-size:var(--f1);line-height:1.1;order:1} /* Gulbin: "yunus alaninin tum yazilari ortalanmis hizada olsun." */ .krcsol{order:2;width:100%;margin-top:var(--r3);text-align:center} .krcbtnlar{justify-content:center!important} .krcfab{align-items:center} .krcfab a{align-self:center!important} .krcetiket{font-size:var(--f3)} .krcsol p{font-size:var(--f4);line-height:1.6;margin-top:var(--r1)} .krcsag{order:3;width:100%;text-align:center;margin-top:var(--r3)} .krcgiris{font-size:var(--f4);line-height:1.6} /* Gulbin, 14 Eylul: "cozum ortaginin hemen altina bu gelecek, altina 'dilerseniz bana direkt ulasabilirsiniz' ve butonlar." Mobilde sira: baslik -> kurucu metni -> davet + butonlar -> fotograf. Metin kendini zaten tanittigi icin ("Ben Yunus Ozcaglar, Koli Lazim'in kurucusuyum") ustteki [ Kurucu ] [ Yunus Ozcaglar ] etiketi ve toptan/ e-ticaret paragrafi mobilde tekrar oluyordu; ikisi de gizlendi. Masaustunde ikisi de duruyor. */ .krcetiket,.krcgiris{display:none} .krcsag{margin-top:var(--r3)} .krcbag{margin-top:var(--r3)} .krcbag>p{font-size:var(--f4);line-height:1.6;margin-bottom:var(--r2)} .krc .ktel{font-size:var(--f4);padding:var(--r2) var(--r2)} /* Gulbin: "numara ve linkedin butonu ayni boyutta olsun." Telefon butonu dolgusuyla --buton-yuk kadar; linkedin karesi de ayni olcude. */ .krc .ktel{min-height:var(--buton-yuk);padding:0 var(--r2); display:inline-flex;align-items:center;justify-content:center} .krc .kli{width:var(--buton-yuk);height:var(--buton-yuk);flex:0 0 auto} .krcfab{margin-top:var(--r3);padding-top:var(--r2);gap:var(--r1)} .krcfab b{font-size:var(--f3)} .krcfab span{font-size:var(--f4);line-height:1.5} .krcfab a{font-size:var(--f4);align-self:flex-start} /* Gulbin: "yunusun gorseli biraz daha kucuk olsun ve biraz daha asagiya kaydir", sonra "biraz daha asagiya kaysin". Once ekrandan tasan tam genislikteydi (375 px); 275 px'e inip ortalandi, ust boslugu --r4'ten --r4'e dondu. Gulbin "alta kaydir diyorum yapmiyorsun" dedi: fotograf zaten son ogeydi ve bolumun dibine yapisikti, ust kenar eklemek onu asagi kaydirmiyor sadece bolumu uzatiyordu. Asagi kaymasi icin alt kenar negatife alindi; .krcsahne'nin overflow:hidden'i kirpiyor. */ /* Fotograf bolumun altinda, ortali. Bir ara sag alt koseye alip metni soluna gecirmistim (bolum 1000 -> 769 px); Gulbin "geri al olmadi" dedi, eski haline donuldu. */ /* "yunusun fotografini daha buyutup ... ayni konumda tutalim": 311 -> 375 px (tam ekran genisligi). Ortali ve dibe yapisik kaldigi icin konumu degismiyor, yalniz buyuyor. */ /* Fotograf ekranin tam genisliginde ve gercekten ortali: sahne esnek bir sutun oldugu icin flex-shrink kutuyu daraltiyordu (375 -> 299,8). flex:0 0 auto ile daralmiyor, margin-left:%50 + translate ile kapsayici ne kadar genis olursa olsun ekranin ortasina oturuyor. */ .krcfoto{order:4;flex:0 0 auto!important;width:100vw!important;max-width:none; margin:var(--r4) 0 calc(-1*var(--r12)) 50%;translate:-50% 0;height:auto} /* Gulbin: "footer koli lazim yazisi biraz asagiya kaysin." 48 -> 64 px. */ .ftdev{margin-top:var(--r5)!important} .krcimza{display:none} /* ---- harita ---- */ .hkap{aspect-ratio:4/5;margin-top:var(--yan)} .hbilgi{left:14px;bottom:14px;max-width:74vw;padding:var(--r2) var(--r2)} .hbilgi b{font-size:var(--f3)}.hbilgi span{font-size:var(--f5)} /* ---- blog ---- */ .blogsatir{margin-top:var(--r2)!important} .blogkart{aspect-ratio:4/5} /* Gulbin, 14 Eylul: "bloglarin ustundeki kategoriyi istemiyorum, masaustundeki gibi olsun." Masaustunde .blogkart .num zaten gizli. */ .blogkart .num{display:none!important} .blogkart h3{font-size:var(--f3);padding:0 var(--r2);line-height:1.2} .blogkart p{font-size:var(--f4);padding:0 var(--r2)} .blogkart .oku{font-size:var(--f5);margin:var(--r3) 0 var(--r3)} .blogkart .oku .arw2{width:var(--ik-s)} /* ---- footer: Artboard 2 ---- Sablonda footer mobilde de IKI SUTUN. Olculdu (tuval 1006,38): sol sutun x 95..520 (425 birim) sag sutun x 613..900 (287 birim) -> oran 1,48 : 1 sutun araligi 93 birim -> 36 px Blok sirasi zaten sablonla ayni: marka | Gizlilik / Guvenli Odeme | Iletisim. Onceden 400 px altinda tek sutuna dusuyordu, o kural kalkti. */ .ftin{display:grid;grid-template-columns:1.48fr 1fr;gap:var(--r32); padding:var(--r5) var(--yan) 0} /* ---- MARKA CERCEVESI: ARTBOARD 2'DEKI YERI VE OLCUSU ---- Gulbin, 11 Eylul: "logo cercevesi tam cizgide degil, onu tam uste hizala ve biraz kucult." Artboard 2'den olculdu (tuval 1006,38 x 6293,64): footer zemini rect y=4768,30 h=1525,35 cerceve polyline x 91,02..230,34 y 4768,30..4999,57 Yani cerceve footerin ust kenariyla TAM hizali (fark 0) ve genisligi 139,32 birim = tuvalin %13,84'u. 375 px ekranda 51,9 px. ANCAK: 51,9 px ekranda kucuk kaldi (Gulbin, "cok kuculmus biraz buyut"). Genislik --ft-marka jetonuna baglandi, o da baslik logosuyla ayni: 66 px. Ust hiza degismedi, cerceve hala footerin tam tepesinde. Kodda ne vardi: ust kenardan 23 px asagidaydi (.ftin ust dolgusu 64 px, h3 ust bosluk -41,25 px) ve genislik 26vw = 97,5 px, yani olcunun neredeyse iki kati. 26vw tuval olcumunden once elle konmus bir degerdi. Masaustunde ayni iliski zaten var: .ft ust dolgusu 80,19 ile h3'un -80,19 ust bosluğu birbirini goturuyor, cerceve footerin tepesinde duruyor. */ .ftmarka h3{margin-top:calc(-1*var(--r5))} .ftmarka h3 svg{width:var(--ft-marka)} /* Iki sutun ancak yer varsa. Olculdu (11 px Clash, gercek metin genisligi): "Geri Odeme Ve Iade Politikasi" 215 px "Koli Lazim (c) 2022-2026 Tum haklari..." 231 px Ikisi yan yana + 32 aralik = 478 px, oysa 375'lik ekranda kullanilabilir alan 335 px. Sablonda siğiyor cunku tuval 1006 birim; gercek telefonda sigmiyor ve her baglanti iki satira kiriliyor. 560 px'in altinda tek sutun: hicbir metin kirilmiyor. */ @media(max-width:560px){ /* Tek sutuna dusunce bloklar arasi bosluk 24 px kaliyordu, ic ritim ise 18,45. Ikisi birbirine cok yakin olunca bloklar ayri bolum gibi okunmuyordu; Gulbin 11 Eylul: "iletisim kismi biraz asagiya insin". Artboard 2'de blok arasi iki yerden olculdu: sol sutun ISO alti 5557,42 -> "Guvenli Odeme" ustu 5649,62 = 92,20 sag sutun son bag. 5549,91 -> "Iletisim" ustu 5640,96 = 91,05 Ortalama 91,63 birim = 375 px ekranda 34,1 px. En yakin jeton --r32. 560 px ustunde zaten --r32 idi, iki kirilim da ayni oldu. */ .ftin{grid-template-columns:1fr;gap:var(--r32)} } .ftin>*{min-width:0} /* ---- FOOTER SUS CIZGISI: MASAUSTUNDEKI SEKIL ---- Gulbin, 11 Eylul: "en altta koli lazim ustune gelen cizgi dagiliyor, masaustundeki gibi koli lazim logosunun ustunde duracak, ayni sekilde." Sebep olculdu: svg.ftsus'un viewBox'i 1734x935,82 ve preserveAspectRatio "none". Kutu footerin tamamiydi (inset:0). masaustu 1440 px : kutu 1440x736 -> yatay 0,831 dikey 0,787 (fark %5) mobil 375 px : kutu 375x1221 -> yatay 0,216 dikey 1,305 (6 kat) Mobilde footer dort sutun alt alta binince 1221 px'e cikiyor ve cizim dikeyde alti kat geriliyordu. Cozum: kutuyu footer yuksekliginden ayirip masaustundeki oranin aynisini vermek. Masaustunde kutunun alti footerin alti, "koli lazim" yazisi da kutunun alt %30,8'i. aspect-ratio 1440/736 ile mobilde de ayni: 375 / 1,957 = 191,7 px kutu, icindeki yazi 59 px = %30,8. */ svg.ftsus{inset:auto 0 0 0;width:100%;height:auto; aspect-ratio:1440/736} /* ---- FOOTER TIPOGRAFISI: MASAUSTUYLE AYNI ---- Gulbin, 11 Eylul: "masaustundeki yazi stilleri ayni olacak." Masaustu footer akiskan: birim x genislik / 1724. 1440 px ekranda olculdu: .ft h3 40 birim -> 33,41 px, agirlik 500, beyaz -> --f0 (34) .ft ul a 16 birim -> 13,36 px, agirlik 400, #cfe6dc -> --f4 (13) .ftmetin 15 birim -> 12,53 px, agirlik 400, beyaz -> --f4 (13) .fttelif 15 birim -> 12,53 px, agirlik 400, yesil -> --f4 (13) Mobilde ayni formul 375 px'te basligi 8,7 px'e dusuruyordu; onun yerine olculen masaustu degerleri sabitlendi. .ft b (adres icindeki vurgu) listeden cikti: masaustunde punto degil, yalnizca renk ve agirlik aliyor. */ .ft h3,.ft h4{font-size:var(--f0);line-height:1.08} .ft a,.ft p,.ft li,.ft span{font-size:var(--f4);line-height:1.6} .ftmetin,.fttelif{font-size:var(--f4)} /* ---- urun sayfasi ---- */ .ukirinti,.ukirinti a,.ukirinti span{font-size:var(--f5);line-height:1.5} .ust,.alt{grid-template-columns:1fr!important;gap:var(--r3)!important} /* Artboard 2 (Gulbin, 10 Eylul): yorum ve "diger tercihler" kartlari YAN YANA UCLU. Alt alta yiginca bu iki blok 2.627 px yer kapliyordu. */ .ukartlar{grid-template-columns:repeat(3,1fr)!important;gap:var(--r1)!important} .ukartlar .ukart{padding:var(--r1)!important;gap:var(--r1)} .ukartlar .ukart h3,.ukartlar .ukart b{font-size:var(--f5)!important;line-height:1.25} /* Yorum kartlari: sayfaya TAM 3 kart sigiyor, hicbiri kesilmiyor. Sol kenar sayfa hizasinda. Serit kaydirmali kaliyor: yorum sayisi ucten fazla olursa kendiliginden kayar. Kart genisligi: 3w + 2 bosluk = 100% -> w = (100% - 2g)/3 */ .uyorumlar{display:flex!important;grid-template-columns:none!important; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none; gap:var(--r2)!important;margin:var(--r2) 0 0!important;padding:0 0 var(--r0)!important} .uyorumlar::-webkit-scrollbar{display:none} .uyorumlar>*{flex:0 0 calc((100% - 2*var(--r2))/3); scroll-snap-align:start;min-width:0} .uyorumlar .ukart{padding:var(--r1)!important;gap:var(--r1)} .uyorumlar .ukart p{display:block;font-size:var(--f5)!important;line-height:1.45} .uyorumlar .ukart b{font-size:var(--f5)!important} .uyorumlar .ukart .yy{font-size:var(--f5)!important} /* diger tercihler uclu kalir, metni yok */ .ukartlar:not(.uyorumlar) .ukart p{display:none} .ukartlar .ukart .yy,.ukartlar .ukart figcaption{font-size:var(--f5)!important} .ukartlar .ukart .arw2{width:12px!important} /* Artboard 2: bolum basliklari kucuk buyuk harf etiket. Sayfanin tek buyuk basligi urun adi. */ /* Sablonda hicbir yazida opaklik yok, hepsi var(--ab-yazi) tam guclu. Ben .7 koymustum, basliklar gri goruunuyordu. Kalkti. */ .alt h2,.urun2 h2,.urun2 h2.ikinci{font-size:var(--f5)!important; color:var(--ab-yazi);margin-bottom:var(--r1)} /* fiyat olcege: 18 px stray idi */ .ucubuk b,.sptcubuk b{font-size:var(--f3)!important} /* ---- urun sayfasi: cqw dolgular mobilde cokuyordu ---- .urun2 mobilde --AW'yi sifirlamiyor, 1724 kaliyor. 330 px'lik kapta calc(16*100cqw/1724) = 3,06 px ediyor: kargo kutusunun ve ucuz teshir hucrelerinin ic bosluu yok oluyordu, yazi cerceveye yapisiyordu. Artboard 2'de bunlar rahat kutular. Olculer --r sistemine baglandi. */ /* Gulbin, 16 Eylul: "header ve kirintilar arasinda cok bosluk var, biraz yukariya almalisin, boslugu kis yani." Ust dolgu 48 -> 16; kategori sayfasindaki .S2.ktg ust boslugu ile ayni degere indi. */ /* Gulbin, 16 Eylul: "neler yaptik altinda fazla bosluk kaldi sadece." Alt dolgu 48 idi; seridin kendi 16 px'lik alt dolgusuyla birlikte son kartin altinda 62 px kaliyordu. Sayfadaki bloklar arasi bosluk 24. */ .urun2{padding:var(--r2) var(--yan) var(--r3)!important;margin-top:0!important} .ukargo{padding:var(--r2)!important;margin-top:var(--r3)!important} .ustat div{padding:var(--r2) var(--r1)!important} .ustat{margin-top:var(--r3)!important} .usec{margin-top:var(--r2)!important} .usepet{margin-top:var(--r3)!important;gap:var(--r1)!important} .uakor{margin-top:var(--r4)!important} .ukart b,.ukart h3{font-size:var(--f3);line-height:1.2} .ukart p{font-size:var(--f4);line-height:1.5} .ukart .yy,.ukart .uno{font-size:var(--f5)}.ukart .pr{font-size:var(--f3)} .ukargo b,.ukargo span{font-size:var(--f5)} .uoynat{width:46px;height:46px;font-size:var(--f4)} .uakor summary{font-size:var(--f3);padding:var(--r2) var(--r2)} .uakor .uicerik{font-size:var(--f4);line-height:1.6;padding:0 var(--r2) var(--r2)} .ustat b{font-size:var(--f1)} .ustat span{font-size:var(--f5)} .ubaslik{font-size:var(--f1);line-height:1.1} .uozet{font-size:var(--f4);line-height:1.6} /* Dort punto disina cikan hicbir yazi kalmasin. Bolum stillerindeki daha ozel seciciler (.r5 .pcard h3 gibi) burayi yenmesin diye kesin. */ .pcard h3,.blogkart h3,.ukart b,.ukart h3{font-size:var(--f3)!important} .krz,.pcard .birim,.pcard .adet,.pmore a,.rband span,.rband a, .wk figcaption span{font-size:var(--f5)!important} .S2 h2,.krcbas,.ssbas,.ubaslik{font-size:var(--f1)!important} /* masaustunde .S2.krc basligi bir ust basamak (--m0); mobilde de oyle */ .S2.krc h2,.krcsahne .krcbas{font-size:var(--f0)!important} .wk figcaption b,.krcetiket,.krcfab b{font-size:var(--f3)!important} .ft{padding-top:0!important} .pcard p,.ukart p,.blogkart p{font-size:var(--f4) !important} .pcard .pr,.ukart .pr{font-size:var(--f3)!important} .pcard .pr.calc{font-size:var(--f5)!important;line-height:1.35} .pcard .num,.ukart .uno,.blogkart .num{font-size:var(--f5)!important} .yk .yy,.yb span,.gpuan span,.ukart .yy{font-size:var(--f5)!important} .ft a,.ft p,.ft li,.ft span,.ftmetin{font-size:var(--f4)!important} /* masaustunde telif ile metin ayni punto; mobilde --f5'e dusuyordu */ .fttelif{font-size:var(--f4)!important} /* ============ DOKUNMA TABANI ============ Parmakla kullanilan her sey en az 44x44. Olculdu: bu blok oncesinde alti sayfada 174 hedef 44'un altindaydi (sayac dugmeleri 13 px genis, footer baglantilari 15 px yuksek, sosyal ikonlar 34x34). Satir ici prozadaki baglantilar disarida: onlar metnin parcasi. */ .mlogo{min-height:44px;display:flex;align-items:center} /* sayac: eksi ve arti tam dokunma karesi */ .usayac button,.edsay button,.sptadet button{ min-width:44px!important;min-height:44px!important; display:flex;align-items:center;justify-content:center} /* kirinti yolu: satir 44 px olsun */ /* Kirinti yolu bir CUMLE, dokunma hedefi degil: satir ici baglantilar WCAG 2.5.8'de istisna. 15 px dolgu verince satir 8 px'ten 47 px'e cikti, sablonda 21 tuval birimi (8 px). Dolgu kalkti. */ .ukirinti,.sykirinti{align-items:center!important} .ukirinti a,.sykirinti a{padding:0;display:inline} /* "Alisverise devam et" ve ozetteki odeme butonu parmak olcusune */ .sptdevam{min-height:44px;display:inline-flex;align-items:center} .uekle,.uekle.sptode,.mactb,.sptcubuk .uekle{min-height:48px!important;font-size:var(--f4)!important} /* footer baglanti listeleri gezinme, satir yuksekligi parmak olcusu */ .ft ul{gap:0!important} /* Footer baglanti listesi: 36 px satir. WCAG AA dokunma tabani 24x24, 44 px Apple HIG olcusu. Tek sutunda 12 baglanti 44'er piksel olunca footer 1554 px'e cikiyordu, sablonda 591. */ .ft ul a,.ft ul li a{min-height:var(--ft-satir);display:flex;align-items:center; line-height:var(--ft-lh)} .ft ul{gap:0!important} /* ---- FOOTER SOSYAL SATIRI ---- Gulbin, 11 Eylul: "sosyal medya butonlarini kucultelim biraz. sikca sorulan sorular ve iso ikonlari ile aralıklari hakkimizda iletisim blog aralıklariyla ayni olsun, fazla dipdibe olmus." Artboard 2'den olculdu (tuval 1006,38 -> 375 px, katsayi 0,37262): kare 50,66 birim -> 18,9 px (kodda 44 px idi) kare arasi 12,00 birim -> 4,5 px (kodda 8 px) Not: kare tasarimdaki 18,9'a da, once denenen 24'e de inmedi; Gulbin ikisini de kucuk buldu. --sos-kutu = --ft-satir (36 px), yani buton tam bir baglanti satiri kadar. Bu olcude kare arasi tasarim oraniyla (%23,7 x 36 = 8,5 px) --r1'e denk geliyor, o yuzden 8 px'te kaldi. isaret %52,1 kutu orani (kodda %54,5) SSS -> sosyal 35,28 birim -> 13,2 px (kodda 12,8) sosyal -> ISO 38,81 birim -> 14,5 px (kodda 4,8 <-- sikisiklik burada) baglanti arasi 24,65 birim -> 9,2 px (kodda 15,2) Kare 18,9 px'e indirilmedi: WCAG 2.5.8 AA dokunma tabani 24x24 ve bunlar gercek baglanti. --sos-kutu 24 px'te durdu, isaret orani tasarimdaki %52. Dikey ritim koddaki baglanti satirina baglandi: gorunen bosluk --ft-bosluk = 15,2 px. Son baglantinin kutusu metnin altinda --ft-yarim kadar pay biraktigi icin sosyal satira --ft-yarim, ISO satirina (ustunde pay birakmayan sert kenar oldugundan) --ft-bosluk verildi. */ .ftsos{flex-wrap:wrap!important;gap:var(--r1)!important; margin-top:var(--ft-yarim)} .ftsos a{width:var(--sos-kutu)!important;height:var(--sos-kutu)!important; flex:0 0 var(--sos-kutu)} .ftiso{margin-top:var(--ft-bosluk)} /* Alttaki "koli lazim" yazisi: alt kenari zaten footerin alt kenariyla ayni (Artboard 2'de de oyle, tuval altinda 1,7 birim kirpiliyor), o yuzden "asagiya kaysin" ustundeki bosluk demek. Sablonda 8vw = 30 px idi, --r4'e (48) alindi. Gulbin, 11 Eylul: "biraz daha asagiya kaysin". */ .ftdev{margin-top:var(--r4)} /* ---- FOOTER SUTUN ICI DIKEY RITIM ---- Gulbin, 11 Eylul: "guvenli odemede etbis visa gorselleri cok dip dibe, onlarin da arasini ac ayni boslukta." Olculdu, ayni kusur dort yerde vardi (blok kutulari arasi): Guvenli Odeme metin -> Visa 3,47 px Guvenli Odeme Visa -> ETBIS 3,04 px Iletisim telefon -> adres 2,39 px Marka telif -> liste 4,34 px (gorunen 13,56) Hepsi sablondan geliyordu: 16/14/11/20 tuval birimi bolu 1724, yani masaustunde dogru olan degerler mobilde 2-4 piksele dusuyordu. Kural: iki blok arasindaki GORUNEN bosluk --ft-bosluk (18,45 px). Komsu 36 px'lik baglanti satiri varsa o kutu zaten --ft-yarim kadar pay birakiyor, o durumda kalan yarim veriliyor (.ftsos'ta da ayni mantik). */ .ftmetin{margin-bottom:var(--ft-bosluk)} .ftetbis{margin-top:var(--ft-bosluk)} .fttelif{margin-bottom:var(--ft-yarim)} .ftbilgi + .ftmetin{margin-top:var(--ft-yarim)} /* sepet satiri: urun adi, adet kutusu ve sil dugmesi */ .sptad{min-height:44px;display:flex;align-items:center} .sptadet input,.spt input[type=number]{min-width:44px!important;min-height:44px} .sptsil{min-width:44px!important;min-height:44px} /* iOS metin girisine odaklaninca 16 px altindaki yaziyi yakinlastiriyor, sayfa kayiyor. Butun metin girisleri --f2 (17 px). */ input[type=text],input[type=number],input[type=email],input[type=tel], input[type=search],input:not([type]),select,textarea{font-size:var(--f3)!important} /* ============ TEK ETIKET STILI (Artboard 2, cls-5) ============ Sablonda su yazilarin HEPSI ayni sinif: OLCU, ADET, RENK, bolum etiketleri (URUN YORUMLARI vb.), kirinti yolu, rozetler, teshir altyazilari, kargo cubugu yazisi, akordeon basliklari. Tek deger: 26,8 tuval birimi, var(--ab-yazi), agirlik 300, buyuk harf. Kodda uc punto (11/13/17), iki agirlik (400/500) ve iki renk vardi. */ /* DOGRUDAN COCUK: .usec span iken ozel acilir listenin icindeki de bu kurala giriyordu; varyasyon adi buyuk harfe donuyordu. Gulbin: "varyasyonlar da metin duzeninde olsun." */ .usec>span, .alt h2,.urun2 h2,.urun2 h2.ikinci, .ukirinti,.ukirinti a,.sykirinti,.sykirinti a, .urozet, .ustat span,.symeta span, .ukargo b, .uakor summary{ font-size:var(--f5)!important; font-weight:var(--ag-ince)!important; text-transform:uppercase!important; letter-spacing:normal!important} /* RENK BURADA YOK, bilerek: bu etiketler hem acik hem koyu yuzeyde kullaniliyor. Rengi yuzey tasir. Once color:var(--ab-yazi) yazmistim, koyu bantlarda koyu yazi cikip kontrast 1,3'e dusuyordu. */ /* ---- Artboard 2'nin kendi olcegi ---- Gulbin: "masaustuyle ayni olceklemede olacak". Sablonun tuvali 1006,38 birim; asagidaki puntolar sablondan BIREBIR aliniyor ve tuvale gore olcekleniyor, elle secilmis piksel degil. 70,67 br -> urun basligi (390 px ekranda 27,4 px) 58,48 br -> buyuk sayi 12/3/3000 (22,7 px) 26,80 br -> etiket ve buton (10,4 px -> 11 px tabani) Kucuk metinler sablonda yer tutucu olarak cizilmis (7,07 br = 2,7 px), onlar okunur tabanda kaliyor. */ .ubaslik,.urun2 h1{font-size:var(--f1)!important} .ustat b,.symeta b{font-size:var(--f2)!important} .usec>span,.ustat span,.symeta span,.urozet{ font-size:var(--f5)!important} /* olcek disinda kalan son bilesenler: bunlar birden fazla sayfada goruldugu icin sahibi mobil.css, tek tek uretici degil */ /* TEK IKON RECETESI: butun UI ikonlari ayni kutu, ayni form. Gulbin, 14 Eylul: "iconlari da kalinlik vermeden dogal hali ile kullanalim, ss'teki dosyada var." Ikonlar artik onun kendi setinden (Artboard 9dd) geliyor ve DOLU form: konturu cizimin kendi icinde. Eski "fill:none + stroke-width:var(--ik-cizgi)" recetesi kalkti, hicbirine disaridan kalinlik verilmiyor. */ .mikon svg,.mtbi svg,.arw2,.oku svg{fill:currentColor;stroke:none} /* ---- IKONA BASMA HAREKETI ---- Gulbin, 14 Eylul: "sana yolladigim iconlara bastigimda animasyon gelsin." Iki katman var: 1) BASILI TUTARKEN: ikon %88'e kuculuyor, 120 ms. Parmak dokundugu anda tepki veriyor, birakinca geri aciliyor. ease-out kullaniliyor, hareket ilk anda hizli olsun diye (ease-in gecikmis hissettirir). 2) BIRAKINCA: ikonun kendi yonunde tek seferlik bir kacis. Oklar isaret ettikleri yone gidip donuyor, sepet hafif yatiyor, menu sikisiyor, arama buyutec gibi zipliyor. Suresi 380 ms, UI icin ust sinir olan 300'u sadece tek seferlik bu vurgu asiyor. Hareketi azalt diyen cihazlarda ikisi de kapali. */ .mikon,.mtbi,.arw2,.oku svg,.mham{ transition:transform 120ms cubic-bezier(.23,1,.32,1)} .mikon:active,.mtbi:active,.mham:active, a:active>.arw2,a:active .oku svg{transform:scale(.88)} /* :active parmak kalkinca biter; vurgu icin kisa omurlu sinif (mobil-app.js pointerdown'da takiyor, animasyon bitince cikariyor). */ .ikvur{animation:ikvur .38s cubic-bezier(.2,.8,.25,1)} .ikvur-ok{animation:ikvurok .38s cubic-bezier(.2,.8,.25,1)} @keyframes ikvur{ 0%{transform:scale(.88)} 55%{transform:scale(1.08)} 100%{transform:scale(1)}} /* Ok kendi yonune kaciyor: ok-sag-asagi oldugu icin sag-asagi. */ @keyframes ikvurok{ 0%{transform:translate(0,0)} 45%{transform:translate(26%,26%)} 100%{transform:translate(0,0)}} @media(prefers-reduced-motion:reduce){ .mikon,.mtbi,.arw2,.oku svg,.mham{transition:none} .ikvur,.ikvur-ok{animation:none}} .arw2{width:var(--ik-s)!important;height:auto!important} .mikon svg{width:var(--ik);height:var(--ik)} /* Dolu marka amblemleri (sosyal medya, LinkedIn) ayri katalog: dolu formda kaliyorlar, kontur ailesine alinmiyor. Ortak olan yalniz kutu. */ .kli svg{width:var(--ik)!important;height:var(--ik)!important; fill:currentColor;stroke:none} /* footer sosyal isareti kutunun %52'si: Artboard 2'de %52,1, masaustu kuralinda da 52%. Sabit 24 px verilirse kucuk kutuyu tastan tasa doldurur. */ .ftsos svg{width:52%!important;height:52%!important; fill:currentColor;stroke:none} .ktgmetin h3{font-size:var(--f3)} .ktgmetin p{font-size:var(--f4)} .edozeladet i{font-size:var(--f5)} .tool .kust{font-size:var(--f5)} .ukart .ustat b,.ustat b{font-size:var(--f3)} .ukargo b,.ukargo span{font-size:var(--f4)} .usec>span{font-size:var(--f5)} .alt h2,.alt h2.ikinci{font-size:var(--f1)} .uicerik p,.uakor .uicerik p{font-size:var(--f4)} /* "daha fazlasini gor" ve benzeri bolum sonu baglantilari parmak olcusu */ .pmore a,.kli{min-height:44px;display:inline-flex;align-items:center} .kli{min-width:44px;justify-content:center} /* footer telif satiri 65 px'lik sutunda alti satira kiriliyordu */ .fttelif{width:auto!important;max-width:none!important} /* ============ BİLEŞEN AİLELERİ: HER AİLE KENDİ İÇİNDE TEK ============ Gülbin, 10 Eylül: "rozetler ayrı bir ölçü, butonlar ayrı, droplar ayrı, kendi içlerinde aynı olsun." Ölçüm: rozet 56/23/14 px, buton 44-48 px ve 11-13 punto, açılır menü 44-47 px ve kimi çerçevesizdi. */ /* ---- ROZET: kart üstü tek satır çip ---- */ .krz,.pcard .num,.uno,.mbadge,.rband span,.rband a{ min-height:var(--rozet-yuk)!important; font-size:var(--rozet-punto)!important; padding:var(--rozet-dolgu)!important; display:inline-flex;align-items:center; line-height:1;border-radius:var(--kose)} /* ---- ROZET: görsel üstü kutulu, iki satıra kadar ---- */ .urozet{ min-height:var(--rozetb-yuk)!important; font-size:var(--rozetb-punto)!important; padding:var(--rozetb-dolgu)!important; display:flex;align-items:center;justify-content:center; border:var(--cizgi) solid currentColor;border-radius:var(--kose)} /* ---- BUTON: birincil, ikincil, çip, sessiz ---- */ .uekle,.ednumune,.edadetbtn,.ktgs,.mactb,.go,.kbtn a,.pmore a,.sptdevam{ min-height:var(--buton-yuk)!important; font-size:var(--buton-punto)!important; padding:var(--buton-dolgu)!important; display:inline-flex;align-items:center;justify-content:center; line-height:1;border-radius:var(--kose)} /* ---- AÇILIR MENÜ ve METİN GİRİŞİ ---- */ select,.usec select,.ktgsirala select, input[type=text],input[type=number],input[type=email],input[type=tel], input[type=search],input:not([type]),textarea{ min-height:var(--acilir-yuk)!important; font-size:var(--acilir-punto)!important; padding:var(--acilir-dolgu)!important; border:var(--cizgi) solid currentColor;border-radius:var(--kose)} /* Gulbin, 16 Eylul: "quantity ve sepete ekleyi duzenleyelim, ust uste binmeler vs olmus." Sebep yukaridaki genel kural: adet sayacinin kutusu ZATEN cerceveli, icindeki sayi girisi de ayrica cerceve aliyordu; kutunun icinde ikinci bir kutu cikiyor, arti ve eksi dugmeleri o cerceveye yapisiyordu. Cercevesi olan sayaclarda giris cercevesiz kaliyor, dolgusu da satiri sismesin diye sifirlaniyor. */ .usayac input,.sptadet input,.edsay input{ border:0!important;padding:0!important;background:none!important} /* ---- BASLIK AGIRLIGI ---- Once Artboard 2'ye bakip mobil basliklari 300'e sabitlemistim. Gulbin, 14 Eylul: "masaustunde nasilsa aynisi olsun ayni buyukluk ayni kalinlik." Mobile ozel agirlik dayatmasi kaldirildi; her baslik masaustundeki agirligini miras aliyor (bolum basliklari 500, kart basliklari kendi degeri). Footer kurali asagida, o zaten 500'du. */ /* Footer disarida: Gulbin 11 Eylul'de footerin masaustuyle ayni olmasini istedi, masaustunde .ft h3 agirligi 500. */ .ft h3,.ft h4{font-weight:var(--ag-baslik)!important} /* ---- BOLUM ALTI: ROZETLER, BUTON YOK ---- Gulbin, 14 Eylul: once "rozetler aciklamanin altina gelsin, daha fazlasini gor butonu da kartlarin altinda kalsin" demisti; ardindan "mobile ozel daha fazlasini gor butonu olmasin, rozetler onun yerine gelsin." Sonuc: mobilde buton gizli, rozet seridi kartlarin altinda, DOM sirasinda. Yeniden siralamaya gerek kalmadi, masaustu zaten tek satir olarak duruyor. */ .pmore{display:none} /* "Daha fazlasini gor" ve blogtaki "Tum yazilar" /* ---- ACIKLAMA METINLERI: TEK SATIR ARALIGI ---- Gulbin: "aciklama yazilarinin tamaminin satir arasi biraz daha dar olsun ve hepsi esit olsun." Olculdu: lead/ssgiris/krcgiris/ftmetin 1,6 (20,8 px), kart ve blog metni 1,5 (19,5 px). Hepsi 1,45'e cekildi. */ .S2 .lead,.pcard p,.blogkart p,.sstand .ssgiris,.krcgiris,.krcsol p, .krcbag>p,.ftmetin,.fttelif,.wk figcaption span, .mhmetin{line-height:1.45!important} /* ---- YAZI DUZENI: ORTALI ---- Gulbin, 14 Eylul: "mobilde yazi duzenimiz ortalanmis sekilde olsun." Bolum basliklari, giris metinleri ve kart icerikleri ortalaniyor. Disarida kalanlar: klip hucrelerinin [01] etiketleri (mutlak konumlu, sayfa hizasina dayali), form ve editor arayuzu, footer sutunlari. */ /* .S2.lite .lead{text-align:left} bolum stilinde ve o stil mobil.css'ten sonra geliyor; ayni ozgulluk kaybediyor, bu yuzden !important. */ .S2 h2,.S2 .head,.S2 .lead,.S2.lite .lead,.S2.dark .lead{text-align:center!important} /* Gulbin: "urun kartlarinda sola yaslama metin kullanalim." Blog karti disarida, o kendi ortali duzeninde kaliyor. */ .pcard:not(.blogkart),.pcard:not(.blogkart) h3, .pcard:not(.blogkart) p,.pcard:not(.blogkart) .pr{text-align:left} /* ---- URUN KARTI YERLESIMI ---- Gulbin bir referans kart gonderdi: "ayni cizgi rengi vs olsun ama su yerlesim kullanilabilir, font vs bizimki gibi olacak ama tasarim sekli hosuma gitti." Tarif: "sol uste 1-2 yazariz, yine saga stokta veya ozel olcu, onun isigi da mavi olsun. ortada urun gorseli, altta adi aciklamasi ve fiyati, fiyatin sagina da okumuz gelir." HTML'e dokunulmadi: kartin zaten var olan ogeleri izgara alanlarina dagitildi. Ayirici cizgiler kartin kendi kenar renginden miras aliniyor (border-color:inherit), boylece koyu ve acik bolumde kartin cercevesiyle ayni ton; ayri bir renk tanimlanmadi. */ .pcard:not(.blogkart){ display:grid; /* 1. sutun daralabilir olmali: ozel olcu kartinda "Olcuye gore aninda hesaplanir" metni auto sutunu sisirip ok sutununu sifira indiriyordu, ok kartin disina tasip overflow:hidden ile kirpiliyordu. */ /* Fiyat sutunu auto: icerigi kadar yer aliyor ama daralabiliyor. minmax(0,1fr) iken "500 ₺" sutundan tasip "adet fiyati"nin uzerine biniyordu. Ok sutununun sifira inmemesi icin ortadaki sutun 1fr. */ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas: "no no rz" "ph ph ph" "ad ad ad" "ac ac ac" "fi bi ok"; /* Bos alan aciklama satirinda toplansin (bkz. mkkartlar.py'deki ayni kurgu): fiyat seridi hep dipte, baslik gorselin hemen altinda, tek satirlik baslikta aciklama yukari cikiyor. */ grid-template-rows:auto auto auto 1fr auto; align-items:center; gap:0!important; /* kartin kendi 17 px ic dolgusu duruyordu, ayirici cizgiler kenara varmiyordu; bolum stili mobil.css'ten sonra geldigi icin !important */ padding:0!important; overflow:hidden} .pcard:not(.blogkart)>.num{grid-area:no;order:0} .pcard:not(.blogkart)>.krz{grid-area:rz;position:static} .pcard:not(.blogkart)>.ph{grid-area:ph} .pcard:not(.blogkart)>h3{grid-area:ad} .pcard:not(.blogkart)>p{grid-area:ac} .pcard:not(.blogkart)>.pr{grid-area:fi} .pcard:not(.blogkart)>.birim{grid-area:bi} .pcard:not(.blogkart)>.arw2{grid-area:ok} /* Cizgiler tam olsun, yarida kesilmesin: ayiricilar iki ayri serit hucresine degil, kartin tam genisligini kaplayan ogelere veriliyor. Ust seridin cizgisi .ph'nin ust kenari, metin blogununki p'nin alt kenari; ikisi de tek parca. */ .pcard:not(.blogkart)>.num, .pcard:not(.blogkart)>.krz{ align-self:stretch;display:flex;align-items:center; border:0!important; padding:var(--r2)!important;margin:0; min-height:0!important;border-radius:0!important;background:none!important} .pcard:not(.blogkart)>.krz{justify-content:flex-end;gap:var(--r1)} /* Durum isigi. Gulbin: "stoktan cikanlar yesil yanip sonsun ozel olculer mavi." Ozel olcu sabit mavi, stok yesil ve nefes alir gibi yanip soner. Sert bir yanip sonme degil: 2,4 sn'lik yumusak bir opaklik gidis gelisi, sayfa boyunca surekli goruldugu icin dikkat dagitmasin. Gonderdigi mockupta isik yuvarlak degil kare, sitenin kose dili de kare. */ .pcard:not(.blogkart)>.krz::before{content:"";flex:0 0 7px;width:7px;height:7px; border-radius:0;background:var(--mavi-acik)} /* Gulbin: "ozel olcu mavi karesi yanip sonmuyor." Ikisi de nefes aliyor, fark renkte: stok yesil, ozel olcu mavi. */ .pcard:not(.blogkart)>.krz-ozel::before{background:var(--mavi-acik); animation:krzyan 2.4s ease-in-out infinite} .pcard:not(.blogkart)>.krz-stok::before{background:var(--green); animation:krzyan 2.4s ease-in-out infinite} @keyframes krzyan{0%,100%{opacity:1}50%{opacity:.22}} @media(prefers-reduced-motion:reduce){ .pcard:not(.blogkart)>.krz-stok::before, .pcard:not(.blogkart)>.krz-ozel::before{animation:none}} .pcard:not(.blogkart)>.ph{border-top:var(--cizgi) solid; border-bottom:var(--cizgi) solid;border-color:inherit} /* Her alan kendi icinde ortali: baslik ile aciklama tek blok, ust ve alt boslugu esit; fiyat seridinde fiyat, birim ve ok ayni eksende. */ /* Baslik 1 ya da 2 satir olabildigi icin alttaki ayirici cizgiler kartlar arasinda kayiyordu; baslik alani iki satira sabitlendi, her kartta ayni yerde bitiyor. */ /* Gulbin: "baslik ilk satir aciklama iki satir oldugunda tam oluyor ama birisi bozuldugunda hizasizliklar ve gereksiz bosluklar oluyor." Iki blok da sabit yukseklige alindi: baslik tam iki satir, aciklama tam iki satir. Boylece her kartta gorsel, cizgiler ve fiyat seridi ayni yerde; satir sayisi degisse de hiza bozulmuyor. */ /* Baslik ve aciklama kutulari sabit yukseklikte; icerik kutunun icinde dikeyde ortalaniyor. Boylece baslik bir satir da olsa iki satir da olsa altinda bosluk kalmiyor, kartlar arasi cizgiler ayni hizada duruyor. ("baslik ilk satir aciklama iki satir oldugunda tam oluyor ama birisi bozuldugunda hizasizliklar ve gereksiz bosluklar oluyor") */ /* Gulbin, 22 Eylul: "baslik baslangic yeri ve fiyat alani" sabit, degisken olan tek sey baslik tek satirsa aciklamanin yukari cikmasi. Sabit yukseklik yerine ustten hizalanmis, iki satirla sinirli blok. */ .pcard:not(.blogkart)>h3{padding:var(--r2) var(--r2) var(--r1);margin:0; align-self:start;display:block;box-sizing:content-box; line-height:1.2;max-height:calc(2 * 1.2em);overflow:hidden} /* Aciklama kartta duruyor, en fazla iki satir. Gulbin once kaldirtmisti, sonra "urun aciklamasi olsun kartlarda simdi de cok bos kaldi, 2 satir olsun max" dedi. Metin derleme sirasinda kelime sonunda kesilip uc nokta aliyor (mkkartlar.py), buradaki max-height emniyet kemeri. Kart izgaraya donunce -webkit-box bloklaniyor ve -webkit-line-clamp calismiyor; satir yuksekligiyle sinirlamak izgarada da calisiyor: 1,45 satir araligi x 2 satir = 2,9em. */ .pcard:not(.blogkart)>p{padding:0 var(--r2) var(--r2);margin:0; border-bottom:0;align-self:start;box-sizing:content-box; /* box-sizing:border-box oldugu icin max-height alt dolguyu da sayiyordu, iki satirlik yer birinden azina duyuyordu. Dolgu ayrica ekleniyor. */ display:block!important;overflow:hidden; /* Gulbin: "cizginin ustune cizgi cekiyor, alttaki cizgiyi kaldir." Olculdu: kutunun yuksekligi 46,4 px, icerigi 46 px, ama alt cizgi de box-sizing:border-box yuzunden bu yuksekligin icinde. Yani ic alan 45,4 px kaliyor, ikinci satirin alt kismi kirpiliyor ve cizgi yazinin uzerine biniyordu. Cizgi kalinligi yuksege ayrica ekleniyor. */ line-height:1.45;max-height:calc(2 * 1.45em)} /* Fiyat seridi de sabit: "Olcuye gore aninda hesaplanir" iki satira kiriliyor, "8 TL" tek satir; bandi serbest biraksak o iki bolumun kartlari 13 px farkli yukseklikte oluyordu. Taban yukseklik ikisini de karsiliyor, butun kartlar ayni boyda. */ .pcard:not(.blogkart)>.pr, .pcard:not(.blogkart)>.birim{align-self:stretch;display:flex;align-items:center; padding:var(--r2) 0;margin:0; min-height:calc(var(--r4) + var(--r2) + var(--r1))} /* Ayirici cizgi aciklamanin alti degil, fiyat seridinin ustu. Tek oge: kartin ::after'i satirin tamamini kat ediyor. Uc ayri hucreye verilince cizgi kesik kesik cikiyordu (Gulbin, 22 Eylul). */ .pcard:not(.blogkart)::after{content:"";grid-row:5;grid-column:1/-1; align-self:start;height:0;border-top:var(--cizgi) solid; border-color:inherit;pointer-events:none} .pcard:not(.blogkart)>.pr{padding-left:var(--r2)} .pcard:not(.blogkart)>.birim{padding-left:var(--r1)} /* Gonderdigi mockuptaki olcek: sol ustteki numara en buyuk oge, fiyat onunla ayni basamakta, baslik bir altinda, rozet ve birim en kucuk. Fiyat ile birim tek satirda kalsin: "8" ve "TL" alt alta dusuyordu. */ .pcard:not(.blogkart)>.num{font-size:var(--f2)!important;opacity:1} .pcard:not(.blogkart)>.pr{font-size:var(--f2)!important;white-space:nowrap} /* "Olcuye gore aninda hesaplanir" fiyat degil, cumle: sarmasi gerekiyor, yoksa nowrap yuzunden sutunu sisirip oku disari itiyor. */ .pcard:not(.blogkart)>.pr.calc{white-space:normal} .pcard:not(.blogkart)>.birim{white-space:nowrap} .pcard:not(.blogkart)>.krz{white-space:nowrap} .pcard:not(.blogkart)>.pr.calc{font-size:var(--f4)!important} .pcard:not(.blogkart)>.birim{font-size:var(--f5)!important} /* ok kendi sutununun sag ucunda: rozet sutunu genis oldugu icin justify-self olmadan sutunun solunda kaliyordu */ .pcard:not(.blogkart)>.arw2{align-self:center;justify-self:end; margin:0 var(--r2) 0 var(--r1)} .sstand .ssbas,.sstand .ssgiris,.sstand .ssoz,.sstand .ssoz.sag{text-align:center} /* ---- RENKLI BOLUMLERDE PARANTEZLI BASLIKLAR ---- Gulbin: "sadece renkli alanlarda parantez icindeki basliklari ne yapalim onu bilemedim, onu da sen konumlandir. istedigim okunakli karisik olmayan guzel bir akis." Olculdu: sorun parantez degil, satir kirilimi. Renkli bolumlerin basliklari tuvaldan gelen sabit satir sonuyla geliyordu (.ssbas white-space:pre-line), cunku masaustunde dar bir sutunda duruyorlar. Ortalaninca "[ Speedy" / "stand ]" diye bolunup parantez tek basina kaliyordu, beyaz bolumlerdeki basliklar ise tek satirdi. Ayni sayfada iki ayri davranis. Karar: renkli de beyaz da tek kural. Sabit satir sonu kalkiyor, basliklar genislige gore kiriliyor ve text-wrap:balance ile satirlar esitleniyor; boylece parantez hep bir kelimeye yapisik kaliyor. Parantezler duruyor, markanin isareti onlar. */ .sstand .ssbas{white-space:normal!important} .S2 h2,.sstand .ssbas,.krcsahne .krcbas{text-wrap:balance;text-align:center} /* ---- ROZET CERCEVELERI TAM RENK ---- Gulbin: "rozetlerin cercevelerinin opakligi dusuk, yesilse yesil koyu maviyse koyu mavi olsun." Yariseffaf kenarlar tam jetona cekildi: koyu zeminde --green, acik zeminde --mavi. */ .rband span,.rband a{border-color:var(--green)!important} .S2.lite .rband span,.S2.lite .rband a{border-color:var(--mavi)!important} .pcard .rzt i{border-color:var(--green)!important} .S2.lite .pcard .rzt i{border-color:var(--mavi)!important} /* ---- ROZET DUZENI ORTALI ---- "rozet ve metin duzeni de sayfaya ortalanmis olsun." */ .rband{justify-content:center!important} /* Klip hucrelerinin etiketleri ortalanmisti, Gulbin: "giflerin metinleri yine sola yasli sekilde olsun eski duzen." Geri alindi, sayfa hizasinda. */ .ssh>*:not(.ssgif){left:var(--yan);right:auto;text-align:left;padding:0} /* .ssgif bu kuraldan muaf: left/right ezilince hucreyi kaplamiyordu, video 0-375 yerine 20-286 px arasinda kaliyordu. "tam alani kaplasin". */ .ssh>.ssgif{left:0;right:0;top:0;bottom:0;width:auto;height:auto} .krcsahne .krcbas,.krcsahne .krcgiris{text-align:center} /* ---- ROZET SERIDI KARTLARA YAKIN ---- Gulbin: "rozetlerle kartin arasi bu kadar acik olmasin." Olculdu: .sfoot ust kenari 33 px + .rband ust kenari 24 px = 57 px. .sfoot'un kendi boslugu mobilde sifirlaniyor, geriye rozetin kendi --r3 adimi kaliyor. */ .sfoot{margin-top:0!important} /* ---- KAYAN SERITLERDE KENAR SILME YOK ---- Gulbin: "mobilde ne dediler ve neler yaptik kartlarinin sagi solu blurlu olmasin, sayfa alaninin tamamindan akabilir." .ysr ve .wsr kenarlarda linear-gradient maskesiyle soluyordu; mobilde maske kalkiyor, serit ekranin iki ucundan akiyor. */ /* Gulbin: "neler yaptik ve ne dediler kartlari tam ekrandan baslayacak kaymaya, sagda solda bosluk olmasin." Maske kalkti, serit de bolumun yan dolgusunu negatif kenarla asip ekranin iki ucundan akiyor. */ .ysr,.wsr{-webkit-mask-image:none!important;mask-image:none!important; margin-left:calc(-1*var(--yan))!important; margin-right:calc(-1*var(--yan))!important; width:calc(100% + 2*var(--yan))!important;max-width:none!important} } /* ---- CEKMECE BLOKLARI MASAUSTUNE SIZMASIN ---- Gulbin, 15 Eylul: "masaustu bozulmus." Sebep: cekmece kurulum betigi (v5-src.html, "mobil cekmece menu") ekran genisligine BAKMADAN calisiyor; arama satirini nav'in basina, olcu bulucuyu (.cmolc) menu maddelerinin altina, alt blogu (.cmalt) en sona tasiyor. Bu bloklari gizleyen kurallar ise 820 px'lik medya sorgusunun icinde kalmisti, masaustunde hicbiri gizlenmiyordu: arama kutusu, "urun olcusu / kutu olcusu" dugmeleri, BUL ve devasa sosyal ikonlar masaustu basliginin uzerine dokuluyordu (.cmsos a svg olcusu de o sorgunun icinde oldugu icin ikonlar 1440 px'e cikiyordu). DOM tarafina dokunulmadi: ayni betigi iki yere ayirmak yerine uc blok masaustunde kapatiliyor, telefonda aynen calismaya devam ediyor. Ayni sizinti menu maddesinin alt satirinda da vardi: .nalt ("Koliler E-Ticaret Kutulari Ambalaj Malzemeleri" gibi) yalniz cekmece icin yazilmisti, kodun yorumu "masaustu menusunde CSS ile kapali" diyordu ama o kural hic yazilmamisti; bes alt satir masaustu menu cubugunu dolduruyordu. O da buraya eklendi. */ @media(min-width:821px){ .hd .nav .cmara,.hd .nav .cmolc,.hd .nav .cmalt, .hd .nav .nb .nalt{display:none!important} } /* ---- MASAUSTU MEGA MENU: OLCU BULUCU VE KART OKU ---- Gulbin, 21 Eylul: "menude olcu gir bulalim bozuldu, oklar at gibi oldu." Iki ayri eksik vardi. Birincisi "Urun olcusu / Kutu olcusu" ikilisi: dugmeler 15 Eylul'de eklendi ama yalniz cekmece icin (.cmolc) biciminlendirildi, masaustunde tarayicinin gri sistem dugmesi olarak cikiyordu. Ikincisi kart fiyat seridi: ok masaustunde hicbir olcu kurali almadigi icin 16 px'e cikip 10 px'lik fiyatin yanindan tasiyor, dar kartlarda alt satira dusuyordu. Olcu bulucunun dili cekmecedekiyle ayni: cerceve koyu mavi, kose yok, secili olan dolu koyu mavi ve yazisi beyaz. */ @media(min-width:821px){ .hd .nav .mega .mfind .fmod{display:flex;gap:.4em;margin:0 0 .55em} .hd .nav .mega .mfind .fmod button{font:inherit;font-size:.7em; text-transform:uppercase;font-weight:var(--ag-baslik); height:2.48em;padding:0 1.2em;line-height:1; border-radius:0;cursor:pointer;background:none; border:var(--cizgi) solid var(--mavi-koyu);color:var(--mavi-koyu); transition:background .22s,color .22s} .hd .nav .mega .mfind .fmod button[aria-pressed="true"]{ background:var(--mavi-koyu);color:var(--beyaz)} .hd .nav .mega .mfind .ffm input, .hd .nav .mega .mfind .ffm button{border-radius:0} .hd .nav .mega .mfind .ffm button{background:var(--mavi-koyu); color:var(--beyaz);font-weight:var(--ag-baslik)} .hd .nav .mega .mcard .mfi{display:inline-flex;align-items:center; gap:.3em;white-space:nowrap} .hd .nav .mega .mcard .mfi .arw2{width:1.1em;height:auto; flex:0 0 auto} } /* ---- MEGA MENU: OLCU BULUCU EN USTE, ROZETLER KALKTI ---- Gulbin, 21 Eylul: "olcunu gir bulalim kismi cok dip dibe, alttaki rozetler falan cok karisik, baska bir yere koyamaz miyiz" -> "menude baska bir yere koyalim daha temiz bir yer" ve rozetler icin "menuden kalksin". Bulucu artik panelin en ustunde ve ustteki kategori satirlariyla AYNI izgaraya oturuyor: solda baslik ve aciklama, sagda mod dugmeleri, olcu alanlari ve sonuc. Boylece satir altina sikismis bir blok degil, listenin ilk satiri gibi duruyor. Rozet seridi (.mfoot) kaldirildi; ayni bilgi urun ve sepet sayfalarinda zaten var. */ @media(min-width:821px){ .hd .nav .mega.on{display:flex;flex-direction:column} .hd .nav .mega .mfoot{display:none} .hd .nav .mega .mfind{order:-1;margin:0; padding:0 0 calc(16*100cqw/var(--AW)); border-top:0; border-bottom:var(--cizgi) solid var(--mavi-koyu); display:grid;grid-template-columns:clamp(148px,21%,250px) 1fr; gap:calc(24*100cqw/var(--AW));align-items:start} .hd .nav .mega .mfind .fbas{grid-column:1;grid-row:1/span 3; display:block;margin:0} .hd .nav .mega .mfind h4{text-transform:uppercase} .hd .nav .mega .mfind .fmod{grid-column:2;grid-row:1;margin:0} .hd .nav .mega .mfind .ffm{grid-column:2;grid-row:2; margin-top:calc(8*100cqw/var(--AW))} .hd .nav .mega .mfind .fres{grid-column:2;grid-row:3;margin-top:.6em} } /* ---- MINI SEPET (YAN CEKMECE) ---- Gulbin, 21 Eylul: "sepet icin tasarim yap." Cekmece eski koyu/yesil paletle yazilmisti: yesil ilerleme cubugu, yesil zeminli kargo bandi, yesil dolgulu "Odemeye gec", yesil cerceveli rozetler, soluk gri yazilar ve satir aralarinda yarim kalan ayirici cizgiler. Sepet ve odeme sayfalariyla ayni dile getirildi: butun yazilar koyu mavi, tek kalinlikta hairline cerceve, kose yok, denetimler parmak olcusunde, kutu icinde ayirici cizgi yok (bolumleri bosluk ayiriyor). Birincil buton urun sayfasindaki "Sepete ekle" ile ayni: koyu mavi gradyan uzerinde yesil yazi. */ .cartp{background:var(--beyaz);color:var(--mavi-koyu);border-radius:0} .cartp,.cartp *{color:var(--mavi-koyu)} .cartp a{text-decoration:none} /* Baslik seridi */ .cartp .carth{display:flex;align-items:center;gap:var(--r2); padding:var(--r3);border-bottom:var(--cizgi) solid var(--mavi-koyu)} .cartp .carth b{font-size:var(--f3);font-weight:var(--ag-baslik); text-transform:uppercase} .cartp .carth b::before{content:"[ "} .cartp .carth b::after{content:" ]"} .cartp .cadet{margin-right:auto;font-size:var(--f5); text-transform:uppercase} .cartp #cartx{background:none;border:0;font:inherit;font-size:var(--f5); text-transform:uppercase;cursor:pointer;min-height:44px; padding:0 var(--r1)} .cartp #cartx:hover{text-decoration:underline} /* Kargo bandi: urun sayfasindaki rayin aynisi, yesil zemin kalkti */ .cartp .freeb{background:none;padding:var(--r2) var(--r3); border-bottom:var(--cizgi) solid var(--mavi-koyu)} .cartp .freeb p{margin:0 0 var(--r1);font-size:var(--f5); line-height:1.45} .cartp .trk{height:14px;border:var(--cizgi) solid var(--mavi-koyu); background:none;border-radius:0;overflow:hidden} .cartp .fil{height:100%;background:var(--mavi-koyu);border-radius:0} /* Satirlar: ayirici cizgi yok, araliginda bosluk var */ .cartp .cartb{padding:var(--r3);display:grid;gap:var(--r3)} .cartp .cartrow{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; gap:var(--r2);align-items:start;border:0;padding:0;margin:0} .cartp .cartrow+.cartrow{border-top:0} .cartp .cartrow .th{width:64px;aspect-ratio:1;flex:0 0 auto; border:var(--cizgi) solid var(--mavi-koyu);display:grid; place-items:center;overflow:hidden;background:var(--beyaz)} /* Gorsel yoksa cerceve cizilmiyor ama yeri korunuyor: yoksa o satirin metni yana kayip digerleriyle hizasini kaybediyor. */ .cartp .cartrow .th:empty{border:0;background:none} /* Gulbin, 21 Eylul: gorsel kareyi tam doldursun. */ .cartp .cartrow .th img{width:100%;height:100%;object-fit:contain} .cartp .cartrow .nm{min-width:0;display:block} .cartp .cartrow .nm b{display:block;font-size:var(--f4); font-weight:var(--ag-baslik);line-height:1.25} .cartp .cartrow .rz{display:flex;flex-wrap:wrap;gap:var(--r1); margin-top:var(--r1)} .cartp .cartrow .rz i{font-style:normal;font-size:var(--f5); text-transform:uppercase;background:none; border:var(--cizgi) solid var(--mavi-koyu);padding:.3em .65em} .cartp .cartrow .qty{display:inline-flex;align-items:center; margin-top:var(--r12);border:var(--cizgi) solid var(--mavi-koyu); min-height:44px} .cartp .cartrow .qty button{min-width:40px;min-height:44px; background:none;border:0;font:inherit;font-size:var(--f3); cursor:pointer;line-height:1} .cartp .cartrow .qty>span{min-width:48px;text-align:center; font-size:var(--f4)} .cartp .cartrow .pz{font-size:var(--f3);font-weight:var(--ag-baslik); white-space:nowrap} .cartp .cartrow .rm{background:none;border:0;font:inherit; font-size:var(--f2);line-height:1;cursor:pointer;padding:0} /* Alt blok */ .cartp .cartf{border-top:var(--cizgi) solid var(--mavi-koyu); padding:var(--r3);display:grid;gap:var(--r12);background:var(--beyaz)} .cartp .cartbadge{display:flex;flex-wrap:wrap;gap:var(--r1); margin-bottom:var(--r1)} .cartp .cartbadge i{font-style:normal;font-size:var(--f5); text-transform:uppercase;background:none; border:var(--cizgi) solid var(--mavi-koyu);padding:.3em .65em} .cartp .cartf .satir{display:flex;justify-content:space-between; gap:var(--r2);font-size:var(--f4)} .cartp .cartf .tot{display:flex;justify-content:space-between; align-items:baseline;gap:var(--r2);margin-top:var(--r1); font-size:var(--f4);text-transform:uppercase; font-weight:var(--ag-baslik);border:0;padding:0} .cartp .cartf .tot b{font-size:var(--f1);font-weight:var(--ag-baslik); white-space:nowrap} .cartp .cartf a{display:flex;align-items:center;justify-content:center; min-height:48px;padding:0 var(--r2);text-transform:uppercase; border-radius:0} /* Gulbin, 21 Eylul: "mini sepet beyaz ve koyu mavi kullanilacak, beyaza yesil yapma demistim." Cekmecede yesil yok: birincil buton duz koyu mavi, yazisi beyaz. */ .cartp .cartf .go{border:0;font-size:var(--f3); background:var(--mavi-koyu);background-image:none} .cartp .cartf .go:hover{background:var(--mavi-acik)} .cartp .cartf .alt{background:none;font-size:var(--f4); border:var(--cizgi) solid var(--mavi-koyu); transition:background .22s,color .22s} .cartp .cartf .alt:hover{background:var(--mavi-koyu)} .cartp .cartf .alt:hover,.cartp .cartf .alt:hover *{ color:var(--beyaz)!important} .cartp .cartf .devam{justify-self:center;background:none;border:0; font:inherit;font-size:var(--f5);cursor:pointer;min-height:44px; text-decoration:underline} .cartp .cartnote{margin:0;font-size:var(--f5);line-height:1.5; opacity:1} .cartp .cartnote a{text-decoration:underline} /* Bos sepet */ /* Bos sepet: dugme izgara satirini doldurup uzuyordu, ustte duracak sekilde sabitlendi. */ .cartp .cartempty{padding:var(--r4) var(--r3);display:grid; gap:var(--r3);justify-items:center;align-content:start; text-align:center} .cartp .cartempty a{align-self:start;height:48px;box-sizing:border-box} .cartp .cartempty p{margin:0;font-size:var(--f3);opacity:1; font-weight:var(--ag-baslik)} .cartp .cartempty a{display:flex;align-items:center; justify-content:center;min-height:48px;padding:0 var(--r3); font-size:var(--f4);text-transform:uppercase; border:var(--cizgi) solid var(--mavi-koyu); transition:background .22s,color .22s} .cartp .cartempty a:hover{background:var(--mavi-koyu)} .cartp .cartempty a:hover,.cartp .cartempty a:hover *{ color:var(--beyaz)!important} /* ---- MINI SEPET: KACAN RENKLER VE BAGLANTILAR ---- Eski paletin birkac kurali daha dar secicilerle duruyordu: kargo bandinin yazisi yesil, "Alisverise devam et" %60 opaklikta gri, dipnottaki baglanti yesildi. Hepsi koyu maviye cekildi. Ayrica .cartf icindeki DIPNOT baglantilari da buton gibi bicimleniyordu (48 px blok); buton kurali yalnizca dogrudan cocuklara verildi. */ .cartp .freeb p,.cartp .freeb p b,.cartp .devam,.cartp .cartnote, .cartp .cartnote a,.cartp .cartf .satir span,.cartp .cartf .tot, .cartp .cartf .tot b,.cartp .cadet,.cartp .carth b, .cartp .cartrow .pz,.cartp .cartrow .nm b,.cartp .cartrow .rz i, .cartp .cartbadge i,.cartp .cartrow .rm,.cartp #cartx, .cartp .cartempty p,.cartp .cartempty a{ color:var(--mavi-koyu)!important;opacity:1!important} .cartp .cartf .go,.cartp .cartf .go *{color:var(--beyaz)!important} .cartp .cartf .alt:hover,.cartp .cartf .alt:hover *, .cartp .cartempty a:hover,.cartp .cartempty a:hover *{ color:var(--beyaz)!important} .cartp .cartf a{display:inline;min-height:0;padding:0; text-transform:none;border-radius:0} .cartp .cartf>a{display:flex;align-items:center;justify-content:center; min-height:48px;padding:0 var(--r2);text-transform:uppercase} .cartp .cartnote a{text-decoration:underline} /* ---- MINI SEPET: SATIRLARA YAPI ---- Ayirici cizgileri kaldirinca satirlar bosluga dagildi: ad, rozet, sayac ve fiyat birbirinden kopuk duruyordu. Satirlar artik sepet sayfasindaki gibi kendi hairline kutusunda: solda gorsel, ortada ad ve altinda rozet ile sayac, sagda fiyat, kutunun sag ust kosesinde kaldir isareti. Kutu ici cizgi yok. */ .cartp .cartb{padding:var(--r3);display:grid;gap:var(--r12); align-content:start} .cartp .cartrow{position:relative;display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--r2);align-items:center; border:var(--cizgi) solid var(--mavi-koyu); padding:var(--r2) var(--r3) var(--r2) var(--r2);margin:0} .cartp .cartrow .th{grid-column:1;width:64px;height:64px; aspect-ratio:auto} .cartp .cartrow .nm{grid-column:2} .cartp .cartrow .pz{grid-column:3;align-self:center} .cartp .cartrow .rm{position:absolute;top:calc(var(--r1) / 2); right:calc(var(--r1) / 2);width:32px;height:32px; display:flex;align-items:center;justify-content:center; font-size:var(--f2)} /* Sayac satira sigsin: dugmeler ve deger daraltildi. */ .cartp .cartrow .qty{min-height:40px;margin-top:var(--r12)} .cartp .cartrow .qty button{min-width:34px;min-height:40px; font-size:var(--f4)} .cartp .cartrow .qty>span{min-width:40px;font-size:var(--f5)} .cartp .cartrow .rz{margin-top:var(--r1)} .cartp .cartrow .pz{font-size:var(--f4)} /* ---- MINI SEPET: SON RATUS ---- Sepet sayfasi yenilendikten sonra cekmece onunla ayni hiyerarsiye getirildi: satir tutari 17, kargo rayi inceltildi, alt blokta toplam satirlari ferahladi. */ .cartp .freeb{padding:var(--r12) var(--r3)} .cartp .trk{height:10px} .cartp .cartrow{padding:var(--r2) var(--r3) var(--r2) var(--r2); gap:var(--r2)} .cartp .cartrow .pz{font-size:var(--f3)} .cartp .cartf{gap:var(--r2)} .cartp .cartf .satir{font-size:var(--f4)} .cartp .cartf .tot{margin-top:0} .cartp .cartbadge{margin-bottom:0} /* ---- MENUDEKI OLCU BULUCU: SIMDILIK KAPALI ---- Gulbin, 21 Eylul: "menulerden olcunu gir bulalim kaldiralim simdilik." Hem masaustu mega menudeki blok hem de mobil cekmecedeki kopyasi gizlendi. Bulucunun kendisi ve calisan kodu duruyor; geri acmak icin bu blogu silmek yeterli. Ayni bulucu kategori sayfasinda bolum olarak calismaya devam ediyor. */ .hd .nav .mega .mfind{display:none!important} .hd .nav .cmolc{display:none!important} /* Tuvaldeki eski baslik ikonlari gizlendi; yerlerine kendi setimiz geliyor (bkz. ikonyeni.js yamasi). Gulbin, 21 Eylul: "mobil ayri masaustu ayri calisiyoruz, mobile icon seti yagdirmissin bu ne?" Haklıydı: bu ikonlar tuvalin masaustu basligina ait, telefonda ayri bir baslik var ve dordu ust uste yigiliyordu. Kural artik yalniz masaustunde. */ @media(max-width:820px){ .hd .hit.ic{display:none!important} .hd .hit.ic svg{display:none!important} } .hd svg.artbas g.sic{display:none} .hd .hit.ic{display:grid;place-items:center;line-height:0; color:currentColor} /* Gulbin, 21 Eylul: "header iconlar esit degiller, oransizlar." Dugmelerin genisligi eski cizimdeki ikonlara gore farkliydi (36/26/26/32 birim), ikon %100 genislik alinca dordu de farkli boyda cikiyordu. Dort dugmenin YUKSEKLIGI ayni (34 birim); ikon artik yuksekligi esas aliyor ve kare oraniyla ortalaniyor, yani dordu de ayni olcude. */ .hd .hit.ic{overflow:visible} .hd .hit.ic svg{height:100%;width:auto;aspect-ratio:1; fill:currentColor;stroke:none;display:block} /* ---- MEGA MENU: CERCEVE CIZGILERI KALKTI ---- Gulbin, 21 Eylul: "menude altta ustte cizgiler var, olmasin alttakini kaldir, ustte de cizgi yerine header'in alt golgesi ayirsin birbirinden." Panelin ust ve alt hairline cerceveleri kalkti. Ayrimi basligin kendi alt golgesi yapiyor: golge yalnizca menu acikken beliriyor, kapaliyken baslik duz kaliyor. Panelin asagi dusen golgesi duruyor, o sayfayi menuden ayiriyor. */ @media(min-width:821px){ /* Golge basliga verilince gorunmuyordu: mega panel basligin KENDI cocugu, yani basligin golgesi panelin altinda kaliyor. Golge bu yuzden panelin ust kenarina ic golge olarak veriliyor; ekranda basligin panele dusen golgesi gibi duruyor. */ /* Gulbin: "ustteki boslugu artir biraz, golgeyle cok ic ice oldu. header golgesini dusur, cok keskin, daha soft bir sey olsun." */ /* Tuval hesabiyla 17 px'e dusuyordu, golgenin bittigi yerde icerik basliyordu; gercek olcu veriliyor. */ /* Gulbin, 21 Eylul: "masaustu menulerde ustteki bosluk kadar alta da ver." Alt dolgu 8,6 px'di (tuval hesabi), ustteki 40 ile hic ilgisi yoktu; panel altta sikisik bitiyordu. */ .hd .nav .mega{border-top:0;border-bottom:0; padding-top:40px;padding-bottom:40px} /* bekci-muaf: tekil yerlesim payi */ .hd .nav .mega.on{ box-shadow:inset 0 18px 22px -18px rgba(2,31,54,.26), 0 30px 70px -46px rgba(3,28,39,.55)} } /* ---- SSS AKORDEONU, IMZA VE KURUCU ETIKETI ---- Gulbin, 21 Eylul: "sikca sorulan sorulari berbat yapmissin duzenler misin?" Ilk halde akordeon bolumun ortasinda 611 px'lik dar bir sutunda duruyordu ve yazisi 13 px'e dusuyordu: anasayfanin punto merdiveni tuval hesabiyla kuculuyor. Simdi akordeon bolum genisligini kullaniyor, punto tabani sabit (en az 16 px), satirlar 56 px ve "tum sorulari gor" sagda duruyor. Ayrica imza cizimi ve kurucu etiketi kalkti. */ /* Gulbin: "liste de biraz asagiya kaysin, basligin dibinde." Tuval hesabiyla 18 px'e dusuyordu; gercek olcu veriliyor. */ .sssb .sssakor{max-width:none;margin:46px 0 0} /* bekci-muaf: tekil yerlesim payi */ .sssb .uakor{border:var(--cizgi) solid var(--mavi-koyu)} .sssb .uakor details+details{ border-top:var(--cizgi) solid var(--mavi-koyu)} /* Kabukta "@media(min-width:821px) .uakor summary{font-size: max(13px,var(--m3))!important}" var; bu bolumde punto daha buyuk olsun diye !important ile eziliyor. */ .sssb .uakor summary{list-style:none;cursor:pointer; text-transform:uppercase;font-size:max(17px,var(--m3))!important; color:var(--mavi-koyu);min-height:56px;box-sizing:border-box; padding:calc(14*100cqw/var(--AW)) calc(26*100cqw/var(--AW)); display:flex;align-items:center;justify-content:space-between; gap:var(--r2);text-align:left} .sssb .uakor summary::-webkit-details-marker{display:none} .sssb .uakor summary::after{content:"+";line-height:1;flex:0 0 auto; font-size:max(18px,var(--m2))} .sssb .uakor details[open] summary::after{content:"–"} .sssb .uicerik{padding:0 calc(26*100cqw/var(--AW)) calc(22*100cqw/var(--AW))} .sssb .uicerik p{margin:0;line-height:1.65; font-size:max(14px,var(--m4));color:var(--mavi-koyu);text-align:left} .sssb .ssstum{margin:calc(22*100cqw/var(--AW)) 0 0;text-align:right} .sssb .ssstum a{font-size:max(12px,var(--m5));text-transform:uppercase; color:var(--mavi-koyu);text-decoration:none; border-bottom:var(--cizgi) solid var(--mavi-koyu);padding-bottom:3px} /* bekci-muaf: tekil yerlesim payi */ /* Fotograf uzerindeki imza cizimi kalkti. */ .krcfoto .yimza{display:none} /* Kurucu etiketi masaustunde de gizli. */ .krcetiket{display:none} @media(max-width:820px){ .sssb .sssakor{margin-top:var(--r3)} .sssb .uakor summary{font-size:var(--f4);padding:var(--r12) var(--r2); min-height:48px} .sssb .uicerik{padding:0 var(--r2) var(--r2)} .sssb .uicerik p{font-size:var(--f4)} .sssb .ssstum{margin-top:var(--r3);text-align:center} .sssb .ssstum a{font-size:var(--f5)} } /* ---- BASLIK IKONLARI VE ACILIR PANELLER ---- Gulbin, 21 Eylul: "iconlar yine orantisiz. acilan sekmeleri de dipdibe ve yesiller var, cerceve olmasin acilanlarda." Ikonlar esit boydaydi ama TIKLAMA KUTULARI farkliydi (36/26/26/32 birim), aralar esit gorunmuyordu. Dordu de ayni genislige alindi ve eski merkezlerinde birakildi, boylece aralar da esitlendi. Panellerde cerceve kalkti, yerini golge aldi; ic bosluk acildi ve icerideki yesil yazilar koyu maviye cekildi. */ /* Genislik tuval biriminde verilmeli: px ile zorlayinca kutular birbirinin uzerine biniyordu. Dordu de 30 birim, merkezleri eski yerinde (x = merkez - 15). */ #tool-tel{--x:1473;--w:30} #tool-ara{--x:1522;--w:30} #tool-kul{--x:1569;--w:30} #tool-sep{--x:1616;--w:30} /* Gulbin, 21 Eylul: "header iconlar ortalanmis degil yataydan." Dugmelerin tuvaldeki ust kenari 51,7 idi; yuksekligi 34 olunca merkezleri 68,7'ye dusuyor, basligin kendi merkezi ise 64,8 (--H:129,6). Dordunun de merkezi basligin orta cizgisine cekildi. Satir ici style'i ezmek icin !important: olculer cizimden gelen inline degiskenlerde yaziyor. */ #tool-tel,#tool-ara,#tool-kul,#tool-sep{--y:47.8!important;--h:34!important} .hd .hit.ic svg{height:74%;width:auto;aspect-ratio:1} .tool{border:0!important;border-radius:0; box-shadow:0 26px 60px -30px rgba(2,31,54,.45)!important; padding:var(--r3)!important} .tool,.tool *{color:var(--mavi-koyu)!important} .tool h4{font-size:var(--f5);text-transform:uppercase; font-weight:var(--ag-baslik);margin:0 0 var(--r12)} /* Ic ayirici cizgiler de kalkti (yesil hairline'lar): bolumleri bosluk ayiriyor. .tool.tel icin ayri bir kural vardi, !important ile eziliyor. */ .tool h4.ikinci,.tool.tel h4.ikinci{margin-top:var(--r3); padding-top:var(--r2);border-top:0!important} .tool *{border-color:var(--mavi-koyu)} .tool .kust{display:block;font-size:var(--f5);opacity:.7; margin-bottom:2px} .tool .knum{display:block;font-size:var(--f3); font-weight:var(--ag-baslik);margin-bottom:var(--r1); text-decoration:none} .tool .kara,.tool .kwa{display:inline-flex;align-items:center; justify-content:center;min-height:40px;padding:0 var(--r2); font-size:var(--f5);text-transform:uppercase;text-decoration:none; border:var(--cizgi) solid var(--mavi-koyu); transition:background .22s,color .22s} .tool .kara:hover,.tool .kwa:hover{background:var(--mavi-koyu)} .tool .kara:hover,.tool .kwa:hover, .tool .kara:hover *,.tool .kwa:hover *{color:var(--beyaz)!important} .tool li{margin-bottom:var(--r2)} .tool li:last-child{margin-bottom:0} /* ---- ACILIR PANELLERDE YAZI OLCUSU ---- Gulbin, 21 Eylul: "burada yazi boyutlarini duzenleyelim. basliklar kucuk metinlerden... beyaz ustune yesil geliyor falan, koyu mavi olcak. ferah olsun, dipdibe olmasin." Paneller anasayfanin tuval merdivenini kullaniyordu: hesabim ve arama panelinde yazilar 9-11 px'e dusuyor, bolum basligi alt etiketle ayni boyda kaliyordu. Punto tabani sabitlendi: bolum basligi 13 · ust etiket 11 · deger 18 · liste satiri 15 Aralar acildi, butun renkler koyu mavi. */ .tool h4,.tool.tel h4,.tool .icol h4{font-size:13px!important; /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ text-transform:uppercase;font-weight:var(--ag-baslik); letter-spacing:0;margin:0 0 var(--r12)!important;opacity:1} /* Gulbin, 21 Eylul: "iletisim menusu uzuyor, gereksiz bosluklar var." Bolumler arasi bosluk 48'den 24'e indi, ustteki dolgu kalkti. */ .tool h4.ikinci,.tool.tel h4.ikinci{margin-top:var(--r3)!important; padding-top:0!important} /* Adres ve calisma saatleri panelin altinda yan yana tek satir. */ .tool .kalt{display:grid;grid-template-columns:1.7fr 1fr; gap:var(--r3);margin-top:var(--r3)} .tool .kalt h4.ikinci{margin-top:0!important} .tool .kalt p{margin:0} /* Tek dugmeli satir (mail gonder) tam genislige yayiliyordu, telefon satirindaki ikili dugmelerle ayni sutun hizasini tutturmuyordu. Artik o da yarim sutun. */ .tool.tel .kbtn a:only-child{flex:0 1 calc(50% - 4px)} .tool .kust{font-size:11px!important;opacity:.7; /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ margin-bottom:3px!important} /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ .tool .knum{font-size:18px!important;font-weight:var(--ag-baslik); /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ margin-bottom:var(--r12)!important;line-height:1.2} .tool .kara,.tool .kwa{font-size:12px!important;min-height:42px} /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ .tool li{margin-bottom:var(--r3)!important} .tool li:last-child{margin-bottom:0!important} /* Hesabim paneli: satirlar okunur olcuye cikti. Markup burada
Metinnot
; metin ayri bir span icinde degil, o yuzden olcu baglantinin kendisine veriliyor. */ .tool ul{margin:0;padding:0;list-style:none} .tool li{margin-bottom:0!important} .tool li a,.tool li .pl{display:flex;align-items:center; justify-content:space-between;gap:var(--r2);min-height:46px; text-decoration:none;font-size:15px!important} /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ .tool li .rt{font-size:11px!important;opacity:.6;flex:0 0 auto} /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ /* Gulbin: "altina cizgi gelmesin." Uzerine gelince alti cizilmiyor; vurgu yazinin kendisiyle veriliyor. */ .tool li a,.tool li a:hover,.tool a,.tool a:hover{ text-decoration:none!important} .tool li a:hover{opacity:.7} /* Iletisim panelindeki dugmeler bu kuraldan etkilenmesin. */ .tool .kara,.tool .kwa{text-decoration:none!important} /* Adres ve calisma saatleri degerleri tuval merdiveninde kalmisti, 9,5 px'e dusuyordu (Gulbin: "adres ve calisma saatleri kucucuk kaldi"). Deger satirlari 14 px. */ .tool .sub,.tool p,.tool address{font-size:14px!important; /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ line-height:1.5;margin:0} .tool .sub{opacity:1} /* Arama paneli */ .tool.ara input{font-size:14px!important;min-height:46px} /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ .tool.ara button{font-size:12px!important;min-height:46px; /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ padding:0 var(--r3)} .tool .sinfo{font-size:12px!important;margin-top:var(--r12)} /* bekci-muaf: acilir panel puntosu Gulbin tarafindan sabit verildi */ /* Mini sepette bos durum dugmesi yesil cerceveliydi. */ .cartp .cartempty a,.cartp .cartempty a *{ color:var(--mavi-koyu)!important} .cartp .cartempty a{border-color:var(--mavi-koyu)!important; background:none!important} .cartp .cartempty a:hover{background:var(--mavi-koyu)!important} .cartp .cartempty a:hover,.cartp .cartempty a:hover *{ color:var(--beyaz)!important} /* ---- GIRIS SERIDI: BUTON KALKTI, ETIKET SAGA ---- Gulbin, 21 Eylul: "giris slider buton kalksin, [ URUNUNUZE OZEL OLCU VE BASKIDA KUTU VE STAND MODELLERI ] gelsin saga yasli hizali sekilde, soldan kalksin." Etiket tuvalin sag sutununa tasindi (butonun durdugu yer) ve saga yaslandi; [ MARKAYA OZEL TASARIM HIZMETI ] solda kaldi. */ /* Sinifi markupa eklemek yerine konumundan yakaliyoruz: etiket tuvalde 1256.7'ye tasindi, saga yaslanan tek oge o. */ .hero .lbl.sagsabit,.hero .lbl.sabit[style*="--x:1256.7"]{ text-align:right} .hero .lbl.sagsabit i,.hero .lbl.sagsabit span{display:block} /* ---- ZEMIN GRADYANI: TOPBARIN MAVISI VE HAREKET ---- Gulbin, 21 Eylul: "zemin gradientlerimiz var ya, onlari da animasyonlu yapalim, ve mavi tonunu yukaridaki topbardan alalim." Koyu uc topbarin rengine cekildi (rgb(3,28,39)), boylece serit ile altindaki zemin ayni tonda. Acik uc yerinde kaldi, isik o. Hareket: katman tuvalden buyuk boyanip yavasca kayiyor; renk degismiyor, yalnizca isigin yeri geziniyor. Hareketi azalt diyen cihazlarda animasyon kapali. */ :root{ --bgrad: /* Gulbin: "slider renginde yesil yerine acik mavimizi koy." Zemindeki isik acik mavi kaldi; yesillenen sey kolinin altindaki isikti, o asagida. */ /* Gulbin, 21 Eylul: "o mavi daha az gozuksun, koyu mavi daha on planda olsun gradient zeminlerimizde." Acik mavi katman ayni yerde duruyor ama daha kucuk ve daha saydam: kosede bir isik olarak kaliyor, zemini boyamiyor. Koyu uc buyudu, artik tuvalin cogunu o tutuyor. */ radial-gradient(48% 54% at 113.8% 6%, rgba(13,89,124,.62) 0%, rgba(13,89,124,.4) 35%, rgba(13,89,124,.12) 70%, rgba(13,89,124,0) 100%), radial-gradient(96% 185% at 10% 112%, rgb(3,28,39) 0%, rgba(3,28,39,1) 45%, rgba(3,28,39,.72) 75%, rgba(3,28,39,.3) 100%), /* Gulbin, 21 Eylul: "gradientli arkaplanlara siyahta ekle birazcik, o animasyon belli olsun." Iki katman da ayni tonun tonlariydi, kayarken fark edilmiyordu. Ust kosede siyah bir katman daha var: zemin kayarken koyudan acigina gecis goruluyor. Renk sistemin kendi --siyah'i. */ radial-gradient(78% 120% at 88% 96%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.5) 40%, rgba(0,0,0,.2) 72%, rgba(0,0,0,0) 100%); } .hero,.mrk,.sstand,.S2.dark,.S2.krc,.ft{ background-size:150% 150%; background-position:100% 0%; animation:zeminakis 34s ease-in-out infinite alternate} .ft{animation-duration:46s} .S2.dark{animation-duration:40s} @keyframes zeminakis{ from{background-position:100% 0%} to{background-position:58% 44%} } @media(prefers-reduced-motion:reduce){ .hero,.mrk,.sstand,.S2.dark,.S2.krc,.ft{animation:none} } /* ---- KOLININ ALTINDAKI ISIK ---- Gulbin, 21 Eylul: "kolinin altindaki isiktan bahsettim." Giris seridinde her urunun altinda uc katmanli bir isik var (.pus / .hale / .zemin); uculu de beyaz-mavimsiydi. Marka yesiline cekildi, saydamlik merdiveni ayni birakildi ki isik olarak kalsin, yesil leke olmasin. */ .hero .pus{background-image:radial-gradient(closest-side, rgba(97,206,112,.22) 0%, rgba(97,206,112,.11) 42%, rgba(97,206,112,0) 78%)} .hero .hale{background-image:radial-gradient(closest-side, rgba(151,230,166,.5) 0%, rgba(97,206,112,.28) 24%, rgba(97,206,112,.09) 48%, rgba(97,206,112,0) 74%)} .hero .zemin{background-image:radial-gradient(closest-side, rgba(151,230,166,.36) 0%, rgba(97,206,112,.15) 46%, rgba(97,206,112,0) 100%)} /* ---- MENU KARTI OKU VE FOOTER MARKASI ---- Gulbin, 21 Eylul: "menudeki oklar uzerine gelince animasyonu olsun. cok buyuk oklar, biraz kuculsun. ve resim karesinin sagina hizalansin." Ardindan: "menu oklari cok dagimik duruyor." Dagimikligin iki sebebi vardi: 1) .mfi inline-flex idi, serit fiyatin bittigi yerde bitiyordu; ok her kartta baska bir x'te duruyordu 2) urun adi bir ya da iki satir olunca serit asagi kayiyor, oklar ayni satirda hizalanmiyordu Serit artik kartin tam genisligi ve kartin dibine yapisik: fiyat solda, ok gorsel karesinin sag kenariyla ayni hizada, butun oklar tek cizgide. Ok olcusu .arw2'deki !important'i ezmek icin kendisi de !important. */ @media(min-width:821px){ .hd .nav .mega .mcard .mfi{display:flex;align-items:center; justify-content:space-between;gap:var(--r1);white-space:nowrap; margin-top:auto;width:100%} .hd .nav .mega .mcard .mfi .arw2{width:9px!important;height:9px!important; flex:0 0 auto;margin-left:auto;fill:currentColor; transition:transform .32s cubic-bezier(.2,.8,.25,1)} .hd .nav .mega .mcard:hover .mfi .arw2{transform:translate(20%,-20%)} /* Gulbin, 21 Eylul: "menude urun uzerine gelince biraz buyuyebilir mi." Sitedeki urun kartinin kendi hareketi (mkkartlar.py): kart -6 px kalkip 1,02 buyuyor, gorsel 1,06. Menu kartlari kucuk ve sik dizili, o yuzden ayni egri daha olculu: kart 1,03, gorsel 1,06. Uzerine gelen kart komsusunun ustunde kalsin diye z-index. */ /* Gulbin: "kesiliyor buyuyunce" + "yanindakileri de saga sola cek, biraz alan ac buyuyen urune." Once kartin KUTUSU buyuyup yukari kalkiyordu; mega panel bir kaydirma kutusu (max-height + overflow-y:auto), panel kaydirilmis haldeyken ustteki siranin karti o kutunun kenarindan tasip kesiliyordu. Dikey buyume tamamen kalkti. Yerine: urunun kendisi kendi karesinin icinde buyuyor (.ph overflow:hidden, hicbir kosulda tasmaz) ve komsu kartlar sagli sollu aciliyor, buyuyen urune yer birakiyorlar. Hareket yalniz yatay, o yuzden kirpilma ihtimali yok. */ .hd .nav .mega .mcard{position:relative; transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .25s ease} .hd .nav .mega .mcard .ph{overflow:hidden} .hd .nav .mega .mcard .ph img{ transition:transform .5s cubic-bezier(.2,.8,.25,1)} /* Komsu kartlari yana kaydirma denemesi KALDIRILDI. Iki kez bozdu: once en soldaki kart seridin disina tasip kirpildi ("soldakini disari atiyor"), dolgu ile duzeltince bu sefer kartlar birbirine yapisti ("diger karelere yapisiyor"). Seritteki kartlar dar ve sik dizili, yatay kaydirma da var; yana itmek bu duzende her zaman bir kenari bozuyor. Uzerine gelince buyuyen sey yalniz urunun kendisi: gorsel kendi karesinin icinde buyuyor, kart yerinde duruyor. */ .hd .nav .mega .mcard:hover, .hd .nav .mega .mcard:focus-visible{ border-color:var(--mavi-koyu);z-index:2} .hd .nav .mega .mcard:hover .ph img, .hd .nav .mega .mcard:focus-visible .ph img{transform:scale(1.12)} } @media(prefers-reduced-motion:reduce){ .hd .nav .mega .mcard, .hd .nav .mega .mcard .ph img, .hd .nav .mega .mcard .mfi .arw2{transition:none} .hd .nav .mega .mcard:hover .ph img{transform:none} } /* Gulbin: "footer koli lazim cok asagiya kaymis." -> ust boslugu kapatilmisti. Ardindan 21 Eylul: "koli lazim ustune biraz bosluk koy, cok dip dibe." Sifir degil, olculu bir pay: markanin ustunde nefes var ama yine asagida durmuyor. */ .ft .ftdev{margin-top:calc(46*100cqw/var(--AW))} /* ---- MASAUSTU GIRISTE CIZILEN CERCEVELER ---- Gulbin, 21 Eylul: "giriste masaustu cizim cizgisi yok hala." Haklıydı: mobil giriste urun cerceveleri "ciziliyor gibi" beliriyor (.mhurun .ucerk path -> mhciz), masaustunde ayni katman duruyor ama hic animasyonu yoktu, cizgiler bir anda oradaydi. Ayni kural, ayni egri, ayni sure. Yollar zaten pathLength="1" ile normallestirilmis; kesik deseni bir birim, kaydirma birden sifira iniyor. Uc urun arka arkaya ciziliyor, ust uste degil. */ /* mhciz mobil blogunun (max-width:820) icinde tanimli, masaustunde yok; ayni kareler burada kendi adiyla duruyor. */ @keyframes ghciz{to{stroke-dashoffset:0}} @media(min-width:821px){ .S.hero .prod svg.ucerk path{ stroke-dasharray:1;stroke-dashoffset:1; animation:ghciz 2.8s cubic-bezier(.65,0,.35,1) .3s forwards} .S.hero .prod:nth-of-type(2) svg.ucerk path{animation-delay:.9s} .S.hero .prod:nth-of-type(3) svg.ucerk path{animation-delay:1.5s} /* Gulbin, 21 Eylul: "urun cercevesi arkasindaki, footerda da el cizimi olan cizgi mobilde var, sliderda giriste masaustunde yok. Ve o cizilme animasyonunu masaustunde de istiyorum." Cizgi Artboard 2'deki dordüncü kontur (mkakan.py); footerdaki .ftsus ve mobildeki .mh-baglanti ile ayni egri. Cerceveler cizildikten sonra, mobildeki sira gibi. */ .S.hero svg.artsus.akan1{z-index:1} .S.hero svg.artsus.akan1 .akan{ stroke-dasharray:1;stroke-dashoffset:1; animation:ghciz 3.6s cubic-bezier(.65,0,.35,1) 2s forwards} } /* Mobilde bu katman yok: orada ayni cizgi mhero.svg'nin icinde (.mh-baglanti) zaten duruyor, iki kez cizilmesin. */ @media(max-width:820px){ .S.hero svg.artsus.akan1{display:none} } @media(prefers-reduced-motion:reduce){ .S.hero svg.artsus.akan1 .akan{ stroke-dasharray:none;stroke-dashoffset:0;animation:none} } @media(prefers-reduced-motion:reduce){ .S.hero .prod svg.ucerk path{ stroke-dasharray:none;stroke-dashoffset:0;animation:none} } /* ---- GIRIS: BASLIK + METIN VE ROZETLER ---- Gulbin, 21 Eylul: mobil giristeki baslik ve metin masaustu giriste de kullanilacak; etiketlerin yerini aliyorlar. Olculer mobildeki iliskinin aynisi: baslik bolum basligi olcusunde (--m1), metin govde olcusunde (--m4) ve 1,45 satir araligi. Hicbiri yeni bir deger degil, ikisi de sistemin kendi merdiveninden. */ @media(min-width:821px){ /* Gulbin: "slider eklediğin metin sola yaslanmis olacak." Ardindan: "yazi altta kalmis, basligi biraz kucultup iso ikonlarina alttan hizala." Blok artik ustten degil ALTTAN konumlaniyor: alt kenari ISO seridinin alt kenariyla ayni cizgide (786,1 + 74,7 = 860,8; tuval 918). Boylece metin ne kadar satir olursa olsun iki blok alttan hizali kaliyor. */ .S.hero .lbl.hsoz{white-space:normal;text-transform:none; text-align:left;top:auto;bottom:calc(57.2*100%/var(--H))} .S.hero .hsozbas{margin:0;color:var(--green); font-weight:var(--ag-baslik);line-height:1.1; font-size:calc(32*100cqw/var(--AW)); /* bekci-muaf: --m2 (40) ile --m3 (22) arasi ara olcu, Gulbin "basligi biraz kucult" dedi */ text-transform:uppercase} .S.hero .hsozmetin{margin:calc(14*100cqw/var(--AW)) 0 0; color:var(--green);font-weight:var(--ag-ince); font-size:var(--m4);line-height:1.45} .S.hero .lbl.hiso{white-space:normal;line-height:0;text-align:right; color:var(--green)} /* Gulbin, 21 Eylul: "kutular, cerceveleri, el cizimi ve kutularin aciklamasi oldugu gibi bir grup oldugunu dusun ve konumunu biraz yukariya kaydir." Ilk denemede .prod'a margin vermistim, kontur ile gorsel ayrilmisti ("cizimler kaydi cerceveden"). Simdi urun kutusu transform ile tasiniyor: transform butun alt agaci birlikte goturuyor, kontur ile gorsel arasindaki iliski bozulamaz. Etiketler ve akan cizgi ayni miktarda margin ile geliyor (.lbl.in kurali transform'u sifirliyor, margin'e dokunmuyor). */ .S.hero .prod{transform:translateY(calc(-40*100cqw/var(--AW)))} .S.hero .lbl:not(.hsoz):not(.hiso), .S.hero svg.artsus.akan1{margin-top:calc(-40*100cqw/var(--AW))} .S.hero .lbl.hiso .misosvg{display:inline-block;width:100%; max-width:calc(280*100cqw/var(--AW));height:auto;fill:currentColor} } /* Marka bandi masaustunden kaldirildi (Gulbin, 21 Eylul: "bu kismi istemiyorum burada kaldir"). Mobil serit yerinde. */ .mrkbant{display:none} /* Stand bolumlerinin sag ust aciklamasi bir sure sag alttaki etiketlerle ayni olcu ve stile alinmisti; Gulbin 21 Eylul: "renkli alanlarda sag ust metinde yaptigin degisikligi geri al." Geri alindi, kural mkstand.py'deki kendi olcusunde. */ /* Gulbin, 21 Eylul: "masaustunde bu buton kalksin" (yorumlarin altindaki "Yorumlarin tamamini Google'da gor"). Mobilde zaten kapaliydi; yalniz yorum bolumundeki dugme kalkiyor, urun seritlerindeki "Daha fazlasini gor" duruyor. */ @media(min-width:821px){ .S2.yorum .pmore{display:none} } /* ---- KAYAN SERITLER MASAUSTUNDE DE TAM EKRANDAN ---- Gulbin, 21 Eylul: "neler yaptik ve ne dediler tam ekrandan aksin, yanlari blurlu olmasin." Ayni kural mobilde zaten vardi (max-width:820 blogu). Masaustunde serit hala kenarlarda linear-gradient maskesiyle soluyor ve bolumun yan dolgusunun icinde kaliyordu. Maske kalkti, serit dolguyu negatif kenarla asip ekranin iki ucundan akiyor. */ @media(min-width:821px){ /* Yan dolguyu asmanin dogru yolu: cqw bolumun IC kutusuna gore cozuluyor, dolgunun kendisiyle ayni degeri vermiyordu. Bunun yerine ic kutunun yarisindan ekranin yarisi cikariliyor; sonuc tam olarak dolgu kadar negatif kenar. */ .ysr,.wsr{-webkit-mask-image:none;mask-image:none; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); width:auto;max-width:none} } /* ---- STICKY BASLIK: AYRI ANIMASYON YOK ---- Gulbin, 21 Eylul: "sticky headerin geldigi animasyonu sevmiyorum, daha iyi hale getirebilir miyiz?" Once baslik ust seridin altinda (top:81) duruyordu ve 70 px'i gecince top:0'a KENDI animasyonuyla kayiyordu. Ust serit zaten sayfayla yukari gidiyor; iki ayri hareket ust uste binince takiliyor gibi duruyordu. Artik baslik kendi basina hic hareket etmiyor: konumu kaydirmaya birebir bagli (--hdust), yani ust seritle ayni hizda yukari gidiyor ve tepede durup kaliyor. Gecis yalniz renkte ve golgede. top artik animasyonlu degil, o yuzden takilma da yok. */ @media(min-width:821px){ .hd{top:var(--hdust,81px); transition:background .28s ease,color .28s ease,box-shadow .34s ease} .hd.on{top:var(--hdust,0px)} } /* Mega menude liste satiri baglanti olabiliyor (tasarim hizmeti): goruntusu satirin aynisi, yalniz uzerine gelince vurgulaniyor. */ @media(min-width:821px){ .hd .nav .mega .mlist li a{display:flex;align-items:baseline; gap:.7em;width:100%;color:inherit;text-decoration:none; transition:color .2s} .hd .nav .mega .mlist li:has(a){padding:0} .hd .nav .mega .mlist li a{padding:.3em .5em} .hd .nav .mega .mlist li a:hover{color:var(--mavi-acik)} } /* Tasarim hizmeti menusunde alt blokta tek sutun var (iletisim); "Secenekler" etiketi orada anlamsiz kaliyordu, tek sutunluysa etiket ve onun sutunu kalkiyor. */ @media(min-width:821px){ .hd .nav .mega .minfo:has(> .icol:only-child){grid-template-columns:1fr} .hd .nav .mega .minfo:has(> .icol:only-child)::before{display:none} } /* ---- TASARIM HIZMETI MENUSU: SON RATUS ---- Gulbin, 21 Eylul: "fotograflar cerceveye tam sigacak, bosluk olmasin. alttaki cizgi olmasin. iletisim kismi tasarim hizmeti ve metini gibi olsun." Kart gorseli kendi karesinde ortalaniyordu, cevresinde 6 px bos kaliyordu; artik kareyi tam dolduruyor (fotograflar zaten kare). Alt bloktaki ayirici cizgi kalkti ve iletisim basligi ile satirlari soldaki baslik-metin olcusune getirildi. */ @media(min-width:821px){ .hd .nav .mega .mcard .ph img{width:100%;height:100%;object-fit:cover} .hd .nav .mega .minfo:has(> .icol:only-child){border-top:0} .hd .nav .mega .minfo:has(> .icol:only-child) .icol h4{ font-size:calc(17*100cqw/var(--AW));font-weight:var(--ag-baslik); /* bekci-muaf: soldaki bolum basligiyla ayni olcu */ text-transform:uppercase;color:var(--mavi-koyu);opacity:1; margin:0 0 .5em} .hd .nav .mega .minfo:has(> .icol:only-child) .icol li .pl, .hd .nav .mega .minfo:has(> .icol:only-child) .icol li a{ font-size:calc(11.8*100cqw/var(--AW));font-weight:var(--ag-ince); /* bekci-muaf: soldaki metinle ayni olcu */ line-height:1.45;padding:0;margin:0} .hd .nav .mega .minfo:has(> .icol:only-child) .icol ul{gap:.45em} .hd .nav .mega .minfo:has(> .icol:only-child) .icol .rt{ font-size:calc(10*100cqw/var(--AW));opacity:.7} /* bekci-muaf: yan not */ } /* ==ILERLEME-BASLA== ---- ILERLEME CUBUGU (sitenin her yerinde ayni) ---- Kaynak: Gulbin'in artboardi, Desktop/WEBSITE/SVG/Artboard 9.svg. Olculer oradan birebir alindi, tahmin edilmedi: sayi [ 01 ] 26,8 px, Clash Light etiket genis kutuda 12, dar kutuda 9 px durum isigi 4,76 x 4,76 kare, etikete 10,88 px mesafe sayi -> etiket taban cizgileri arasi 26,33 etiket -> cubuk 23,31 cubuk 11,69 yuksek, ic dolum 3,31 ve her yandan 4,19 iceri (solda 4,39) cubuk -> alt yazi 31,64 Artboardda iki boy var (979 ve 484 px kutu); ikisinde de adimlar YAN YANA, sayi ve cubuk ayni olcude, yalnizca etiket puntosu degisiyor. Genislik sayfaya degil kutuya bagli oldugu icin kap sorgusu kullaniliyor; bunun sarti blogun tuval birimi (100cqw) tasimamasi, o yuzden butun olculer sabit. Renkler artboardda #16222a ve #87be7d; sitenin kendi tokenlari kullanildi (--mavi-koyu, --green), yeni renk uretilmedi. Dolum orani --dolu ile geliyor (0 ile 1 arasi), JS yaziyor. HTML degismedi: .ukno display:contents ile cozuluyor. */ .ukargo{container-type:inline-size} /* Alt dolgu = cubuk yuksekligi (11,7) + etiketin altindan cubugun ustune kalan bosluk (19,6). Olculdu: 17 px iken etiket tabani ile iz ustu arasi 9 px cikiyordu, artboardda 23,31 ("hala kayik"). */ /* Gulbin, 28 Eylul: "kargo cubuklari buradaki tasarim gibi olsun. her yerde farkli bir tasarim var." + "beyaz alanda da koyu mavi olacak." Hedef, acilis bandindaki adim seridi (.syadim): CERCEVELI iz, ortasinda ince dolum. Onceki hali dolu bir bloktu. Olculer .syadimlar ile ayni. Renk: beyaz zeminde cubugun tamami koyu mavi; yesil yalnizca koyu zeminde (hero seridiyle ayni). */ .ukadim{position:relative;display:grid;grid-auto-flow:column; grid-auto-columns:1fr;column-gap:var(--r3); margin:0;padding:0 0 calc(18px + 8.2px);list-style:none} /* bekci-muaf: .syadimlar olcusu */ /* cubuk: iz + dolum, listenin altinda tek parca */ .ukadim::before,.ukadim::after{content:'';position:absolute; pointer-events:none} .ukadim::before{left:0;right:0;bottom:0;background:none; height:18px;box-sizing:border-box; /* bekci-muaf: .syadimlar olcusu */ border:var(--cizgi) solid var(--mavi-koyu)} .ukadim::after{--ukg:calc((18px - 3.3px) / 2); /* bekci-muaf: .syadimlar olcusu */ left:var(--ukg);bottom:var(--ukg);height:3.3px; width:calc((100% - var(--ukg) * 2) * var(--dolu,0)); background:var(--mavi-koyu); transition:width .45s cubic-bezier(.2,.8,.25,1)} /* Koyu zeminde hero seridiyle ayni: cerceve, dolum ve tik yesil. */ .sykoyu .ukadim::before,.spozet .ukadim::before{border-color:var(--green)} .sykoyu .ukadim::after,.spozet .ukadim::after{background:var(--green)} .sykoyu .ukad.tamam .uktik,.spozet .ukad.tamam .uktik{background:var(--green)} @media(prefers-reduced-motion:reduce){.ukadim::after{transition:none}} .ukad{position:relative;min-width:0;display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"no no" "ik et"; align-items:center; /* Adimlar ayni satirda esitlenirken uzun olan kisa olani geriyordu; artan bosluk satirlara dagilip numarayi yukari itiyor, sayfadan sayfaya 3 px oynuyordu. Icerik yukaridan baslar, artan bosluk altta kalir. */ align-content:start; column-gap:7.7px;row-gap:8.7px} /* bekci-muaf: artboard olcusu */ .ukad .ukno{display:contents} /* Gulbin, 22 Eylul: "01 02'yi sepet kalinliginda ve boyutunda yapar misin mini sepette? diger kullanilan yerlere de aynisini uygula." Artboardda 26,8 ve ince idi; mini sepetteki [ SEPET ] basligiyla ayni olcuye alindi: 17 px ve baslik agirligi. Cubuk uc yerde de ayni dosyadan beslendigi icin degisiklik ucune birden gidiyor. */ .ukad .ukno b{grid-area:no;justify-self:start; font-size:var(--f3);font-weight:var(--ag-baslik);line-height:1; color:var(--mavi-koyu);font-variant-numeric:tabular-nums} .ukad .ukno b::before{content:"[ "} .ukad .ukno b::after{content:" ]"} /* Gulbin, 22 Eylul: "ilk siparis ve ucretsiz kargo metnini de 'Kutunun icini dolduran ve kapatan malzemeler. Ayni kargoda gelir.' gibi yapar misin?" O cumle mini sepetteki .xs .hint: 11 px, ince, buyuk harf degil, satir araligi 1,4. Etiketler de ayni oldu; koseli parantezler kalkti, o cumlede de yok. Opaklik tam kaliyor. */ .ukad .ukno span{grid-area:et;justify-self:start;min-width:0; font-size:var(--f5);line-height:1.4;text-transform:none; font-weight:var(--ag-ince); color:var(--mavi-koyu);overflow-wrap:anywhere} /* Durum isigi: artboarddaki 4,76'lik kare. */ /* Artboardda isigin merkezi etiketin taban cizgisinden 3,86 yukarida; satirin tam ortasi 2,06 kaliyordu, 1,8 px yukari aliniyor. */ .ukad .uktik{grid-area:ik;justify-self:start;align-self:center; width:4.8px;height:4.8px;margin-bottom:3.6px; /* bekci-muaf: artboard olcusu */ border:0;border-radius:0;background:var(--mavi-koyu); transition:background .3s} .ukad.tamam .uktik{background:var(--mavi-koyu); animation:ilryan 2.4s ease-in-out infinite} @keyframes ilryan{0%,100%{opacity:1}50%{opacity:.22}} @media(prefers-reduced-motion:reduce){ .ukad.tamam .uktik{animation:none}} /* Son adim sagdan hizali: isik etiketin sagina geciyor. */ .ukad:last-child{text-align:right; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"no no" "et ik"} .ukad:last-child .ukno b,.ukad:last-child .ukno span, .ukad:last-child .uktik{justify-self:end} /* Gulbin, 22 Eylul: "yazinin opakligi tam olabilir sag tarafta." Tamamlanmamis adimin yazisi artik solmuyor; durumu isigin rengi ve cubugun dolumu anlatiyor. */ .ukad .ukno b,.ukad .ukno span{opacity:1} /* Alt yazi. Artboardda cubugun alti ile taban cizgisi arasi 31,64; sagda, buyuk harf, koseli parantez icinde. Secici "p.ukyazi": mini sepette bu oge .freeb'in icindeki bir
ve ".cartp .freeb p{margin:0 0 8px;font-size:var(--f5)}" kurali daha guclu geliyordu; ust bosluk 31 yerine 10, punto 12 yerine 11 kaliyordu (Gulbin, 22 Eylul: "sepette kayik hala"). */ .ukargo p.ukyazi{margin:5.2px 0 0; /* bekci-muaf: cizgiye yakinlik */ font-size:12px; /* bekci-muaf: artboard olcusu */ line-height:1.4;color:var(--mavi-koyu);text-align:right; text-transform:uppercase} .ukargo p.ukyazi::before{content:"[ "} .ukargo p.ukyazi::after{content:" ]"} /* DAR KUTU: artboarddaki ikinci boy. Tek degisen etiket puntosu. */ @container (min-width:560.01px){ .ukad{column-gap:10.9px} /* bekci-muaf: artboard olcusu */ } @container (max-width:560px){ /* Etiket puntosu artik her boyda ayni (.xs .hint ile ayni); dar kutuda yalnizca sutun araligi kisiliyor. */ .ukargo p.ukyazi{font-size:9px} /* bekci-muaf: artboard olcusu */ .ukadim{column-gap:var(--r12)} } /* ==ILERLEME-BITTI== */ /* ============================================================ MOBIL UYGULAMA KABUGU — 10 Eylul 2026 Mobil, masaustunun kucultulmusu degil. Uygulama mantigi: altta basparmak bolgesinde sabit sekme cubugu, onun hemen ustunde sayfanin ana aksiyonu, ustte sabit ince baslik. Dil ayni kaliyor: koseli parantez, sac teli cizgi (--cizgi), marka yesili (--green), Clash, buyuk harf etiket. ============================================================ */ .mtab,.mact{display:none} @media(max-width:820px){ /* ---- ust cubuk: Artboard 2 (Gulbin, 10 Eylul) ---- Hamburger solda, logo ortada, sepet sagda. Gezinme bu cubugun isi; alt sekme cubugu kaldirildi, yoksa sepet ve menu ikonu ekranda iki ayri cizimle iki kez goruluyordu. */ .mhd{display:grid!important;grid-template-columns:44px 1fr 44px; align-items:center;gap:var(--r2)} .mhd .mars{display:contents} .mham{order:1;justify-self:start} .mlogo{order:2;justify-self:center} #msep{order:3;justify-self:end} /* alt sekme cubugu Artboard 2'de yok */ .mtab{display:none!important} /* Artboard 2'de mobilde kampanya seridi de yok: sayfa dogrudan baslikla basliyor, baslik da en uste oturuyor. */ .bar{display:none} .hd{top:0!important} .hd .nav{inset:56px 0 0 0} /* ---- ust cubuk rengi: Artboard 2 ---- Sablonda logo, hamburger ve sepet TEK renk: var(--ab-yazi). Kodda uc ayri renk cikiyordu: logo tarayicinin varsayilan baglanti mavisi (rgb(0,0,238) olculdu, cunku SVG'de fill yok ve rengini miras aliyor), sepet yesil, hamburger siyah. Alt sayfalar acik zeminli: cubuk bastan beyaz ve koyu isaretli. */ .hd{background:var(--beyaz);color:var(--ab-yazi)} /* ve