/* Klon ayarlari — referansta olmayan tek fark: marka adi "kardesler kafe" (14 harf) referansin "amrit palace" (12 harf) yazisindan uzun. Ayni punto ile iki satira sariyordu; referansta TEK satir ve kutuyu dolduruyor. Bu yuzden yalniz bu ogenin puntosu olcuye gore kuculttuldu. */ .txt_lg { white-space: nowrap; } /* OLCUM DUZELTILDI (2026-09-16): onceki 0.845 carpani yetmiyordu, yazi kutuya SIGMIYORDU -- sayfa 1920 bakisinda 515px yana kayiyordu (referansta 0). Murekkep genisligi kutuya bolunerek olculdu: 1920'de 1864/2379, 1280'de 1224/1576, 390'da 358/445 -> ~0.78. Punto bu orana cekildi; satir kutusu referanstaki 212px'te kalsin diye satir yuksekligi 0.947 -> 1.2135 yapildi (sayfa boyu degismez). */ .txt_lg { font-size: 9.10em; } @media screen and (max-width: 991px) { .txt_lg { font-size: 8.68em; } } @media screen and (max-width: 479px) { .txt_lg { font-size: 8.80em; } } /* punto 0.845 kucuklurken satir kutusu referanstaki 211.97px'te kalsin: 0.8 / 0.845 = 0.947 -> blok yuksekligi ve sayfa boyu referansla ayni. */ .txt_lg { line-height: 1.2135; } /* ============================================================ HEDIYE KART YELPAZESI Referansta 3.46 MB'lik Lottie (200 kare x 1080px AVIF dizisi, uc boyutlu bir sahnenin kaydi). Biz ayni sahneyi CANLI kuruyoruz. KAPSAYICI BIRIMI (cqw) KULLANILMIYOR. Ilk surumde kart yuzu cqw ile olculuyordu; bu birimi desteklemeyen tarayicida BUTUN olculer dusuyor, ic SVG kendi varsayilan boyuna buyuyup karti kapliyordu (Arda'nin ekraninda tam olarak bu goruldu, simulasyonla birebir uretildi). Simdi kart yuzu tek bir SVG viewBox'i: her tarayicida ayni oranla olceklenir, birim destegi sorusu kalmaz. REFERANSTAN OLCULDU (200 karenin hepsi): · dongu 200 kare / 30 fps = 6.67 sn, kume saat yonunde tam tur · kart olcusu kutunun %43.6 x %31.7'si (yatay, oran 1.375) · yorunge en acik %23.7 -> en sikisik %16.6 -> yeniden acilir. Kartlar KUCULMUYOR, merkeze yaklasiyor: ayni kare uc ayri kart olcegiyle arandi, sikisik karede de en yuksek skor tam olcekte cikti. · kartin acisi yorunge acisi + ~97 derece · ustluk sirasi sabit · yuzey kartlar DUZ DEGIL: kose olcumunde karsi kenarlar 24.6 derece yakinsiyor, uzunluk orani 1.455 -- yani her kart kameraya gore egik bir duzlem. Bu yuzden gercek 3B: perspektif + kart basina egim + derinlik. Kumede TOPLU bir ezilme yok (dikey/yatay yayilim orani referansta 0.97), egim kart basina veriliyor. · isik dunyaya sabit: kart donerken yuzeydeki parlaklik gecisi donmuyor (SVG'de ters donen katman) ============================================================ */ .kk-yelpaze { position: absolute; inset: 0; display: block; pointer-events: none; perspective: 1750px; /* gercek 3B: kacis noktasi kutunun merkezi */ perspective-origin: 50% 50%; animation: kk-tur 6.67s linear infinite; will-change: transform; } .kk-kart { position: absolute; left: 50%; top: 50%; width: 43.6%; aspect-ratio: 1.375; /* duran hal = en acik hal; animasyon kapaliysa (hareket azaltma) bu gecerli */ transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(var(--kk-uzak)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); animation: kk-mesafe 6.67s linear infinite; will-change: transform; /* golge: filter yerine box-shadow. Olculdu (hediye-kart sayfasi, 390px, islemci 1/4): drop-shadow ile en kotu kare 161 ms ve 3 takilma; box-shadow ile asagidaki olcum. Fark, filtrenin her karede yeniden bulaniklastirmasi -- golge kartin dikdortgeni oldugu icin agiz kesigi golgede gorunmez, gozle fark edilmiyor. */ box-shadow: 0 clamp(2px, .5vw, 9px) clamp(4px, 1.2vw, 22px) rgba(54, 44, 33, .26); border-radius: clamp(1px, .12vw, 3px); } .kk-kart__yuz { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .kk-kart__zemin { fill: var(--kk-zemin); } /* DUNYAYA SABIT ISIK: kume saat yonunde donerken bu katman ayni hizla ters doner */ .kk-kart__isik { transform-box: view-box; transform-origin: 50% 50%; animation: kk-ters 6.67s linear infinite; } .kk-kart__dal { fill: none; stroke: var(--kk-altin); stroke-width: 5.5; stroke-linecap: round; opacity: .95; } /* SVG icinde olculer viewBox birimi: 1375 birim = kartin eni */ .kk-kart__yazi { fill: var(--kk-murekkep); font-family: Satoshi, Arial, sans-serif; } .kk-kart__baslik { font-family: "TT Ramillas Variable", Georgia, serif; font-weight: 300; font-size: 126px; letter-spacing: -.005em; } .kk-kart__marka { font-size: 30px; letter-spacing: .04em; opacity: .6; } .kk-kart__kosul { font-size: 21px; letter-spacing: .17em; opacity: .5; } .kk-kart__tutar { font-size: 36px; letter-spacing: .14em; opacity: .55; } /* Yigin duzgun bes kollu DEGIL: kalip esleme referansta kart basina yaricap %23.2 / %26.4 / %26.6 / %23.9, kart acisi 93 / 95 / 100 / 102 derece verdi. Egim ve derinlik de kart basina farkli (atilmis deste). --kk-uzak = EN ACIK haldeki uzaklik (kart yuksekliginin yuzdesi) --kk-geri = -(yorunge + ic) => isik dunyaya sabit kalir */ .kk-kart--1 { --kk-yorunge: 0deg; --kk-ic: 3.5deg; --kk-uzak: -66.5%; --kk-geri: -3.5deg; --kk-derinlik: 30px; --kk-egimX: -7deg; --kk-egimY: 5deg; --kk-zemin: #ede5d8; --kk-murekkep: #2c2824; --kk-altin: #ab8551; } .kk-kart--2 { --kk-yorunge: 72deg; --kk-ic: 5.5deg; --kk-uzak: -75.6%; --kk-geri: -77.5deg; --kk-derinlik: 10px; --kk-egimX: 8deg; --kk-egimY: -5deg; --kk-zemin: #a8815b; --kk-murekkep: #f5efe4; --kk-altin: #f0dcbd; } .kk-kart--3 { --kk-yorunge: 144deg; --kk-ic: 10.5deg; --kk-uzak: -76.2%; --kk-geri: -154.5deg; --kk-derinlik: -12px; --kk-egimX: -6deg; --kk-egimY: -8deg; --kk-zemin: #79806b; --kk-murekkep: #ece5d7; --kk-altin: #e3d3ae; } .kk-kart--4 { --kk-yorunge: 216deg; --kk-ic: 12.5deg; --kk-uzak: -68.5%; --kk-geri: -228.5deg; --kk-derinlik: -30px; --kk-egimX: 9deg; --kk-egimY: 7deg; --kk-zemin: #2e2c28; --kk-murekkep: #ded5c4; --kk-altin: #c9a46f; } .kk-kart--5 { --kk-yorunge: 288deg; --kk-ic: 7deg; --kk-uzak: -71.6%; --kk-geri: -295deg; --kk-derinlik: -46px; --kk-egimX: -4deg; --kk-egimY: 9deg; --kk-zemin: #c4bfb3; --kk-murekkep: #2c2824; --kk-altin: #9d7c4c; } @keyframes kk-tur { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes kk-ters { from { transform: rotate(var(--kk-geri)); } to { transform: rotate(calc(var(--kk-geri) - 360deg)); } } /* Kartlar yigilip aciliyor: yorunge uzakligi dongu boyunca carpanla degisiyor. Carpanlar A/B ile duzeltildi (referans karesi ve bizim kare ayni olcutle). */ @keyframes kk-mesafe { 0% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(var(--kk-uzak)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 12.5% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .945)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 25% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .905)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 37.5% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .806)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 50% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .795)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 62.5% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .820)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 75% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .872)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 87.5% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(calc(var(--kk-uzak) * .990)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } 100% { transform: translate(-50%, -50%) rotate(var(--kk-yorunge)) translateY(var(--kk-uzak)) rotate(var(--kk-ic)) translateZ(var(--kk-derinlik)) rotateX(var(--kk-egimX)) rotateY(var(--kk-egimY)); } } @media (prefers-reduced-motion: reduce) { .kk-yelpaze, .kk-kart, .kk-kart__isik { animation: none; } } /* Ust cubuk gizlenmesi: satir ici stil yerine SINIF — her kaydirmada style dizgesi yazmak yerine tek sinif degisimi (yerlesim okumasi yok). */ .header { transition: transform .7s cubic-bezier(.731,.001,.287,.995); will-change: transform; } .header.kk-gizli { transform: translateY(-100%); transition-duration: .6s; } /* Hediye kart sayfasi: referansta burada 2.7 MB'lik "All E-Gift Cards" videosu vardi (yine onlarin sunucusundan). Yerine ayni CANLI yelpaze: sifir bayt, her ekranda net. */ .kk-sahne-tam { position: absolute; inset: 0; background: #d8cbb8; display: flex; align-items: center; justify-content: center; } .kk-sahne-tam .kk-yelpaze { position: relative; inset: auto; width: min(86vh, 92vw); height: min(86vh, 92vw); } /* Hediye kart sayfasindaki tam ekran yelpaze TELEFONDA HIC CIZILMIYOR. Olculdu (390px, islemci 1/4, ayni sayfa): bes kartlik canli yelpaze, donerek -> en kotu kare 161 ms, 3 takilma golge box-shadow olunca -> 88.8 ms, 3 takilma animasyon durdurulunca -> 83.7 ms, 1 takilma (yani maliyet donmek degil, BES KARTI CIZMEK) yelpaze hic yokken -> 11.1 ms, 0 takilma Sebep: bu sayfada yelpazenin uzerinde tam ekran SABIT bir katman (.gift_box) duruyor; altindaki her degisiklik genis bir alani yeniden cizdiriyor. Telefonda yelpaze yerine TEK kart gosteriliyor; masaustunde yelpaze donmeye devam ediyor. Referansta da burada video vardi. */ /* TELEFONDA DA YELPAZE DONER (2026-09-20, Arda: "kartlari kaldir demedim, fps olarak optimize et"). Daha once telefonda yelpaze gizlenip tek kart gosteriliyordu; o kol kaldirildi. Hiz, asagidaki "TELEFONDA UCUZ YELPAZE" blogundan kazaniliyor. Tek kart yalnizca HAREKET AZALTMA tercihi olan ziyaretcide gorunuyor: orada donen yelpaze zaten gosterilmemeli. */ .kk-tek-kart { display: none; width: min(78vw, 420px); height: auto; } @media (prefers-reduced-motion: reduce) { .kk-sahne-tam .kk-yelpaze { display: none; } .kk-sahne-tam .kk-tek-kart { display: block; } } /* EKRANDA YOKKEN DONMESIN. Yelpaze 6.67 sn sonsuz dongu; bolum gorunmese bile bes kart ve bes ters donen isik katmani her karede islenmeye devam ediyordu. IntersectionObserver gorunurlugu isaretliyor (etkilesim.js -> yelpazeDurdur), animasyon burada duruyor. Durdurmak transform/opacity disina cikmiyor. */ .kk-yelpaze.kk-dinlen, .kk-yelpaze.kk-dinlen .kk-kart, .kk-yelpaze.kk-dinlen .kk-kart__isik { animation-play-state: paused; } /* Ekran disindayken yalniz animasyonu durdurmak yetmiyordu: bes kart golgesiyle birlikte katman olarak kalip her kaydirmada besteciyi mesgul ediyordu. Gorunur degilken gorunurluk de kapaniyor -- zaten ekranda olmadigi icin gozle bir sey degismiyor. */ .kk-yelpaze.kk-dinlen { visibility: hidden; } /* ============================================================ IMZA TABAKLAR — MENU PANOSU (tasarim C) 2026-09-20 Arda dort taslak arasindan C'yi secti (arac/menu-tezgah.html) ve sunu ekledi: "menulere basinca onun icerdigi fotolar yanda ciksin, mesela gunun corbasina bastiginda yanda corba fotosu ciksin." DUZEN: iki sutun. Solda secili tabagin fotografi (alt kosede adi, aciklamasi ve fiyati), sagda sekiz tabagin tamami tiklanabilir liste. Satira basilinca soldaki fotograf degisiyor. NEDEN SATIRDA ACIKLAMA YOK: aciklama fotografin altindaki serifte duruyor. Sekiz satirin her birine aciklama konsaydi liste 480px'e cikip taranamaz hale gelirdi; sectigi tabagin aciklamasini zaten fotografla birlikte okuyor. TURUNCU TON AILESI (ayni turuncunun basamaklari, yeni renk yok): --kk-tr-1 #d49653 taban (liste) --kk-tr-1k #cd8e4a cift satirlar --kk-tr-2 #c5853f pano zemini / secili satir --kk-tr-3 #b4712c baslik blogu, kartin ayagi, fotograf zemini Murekkep her basamakta #2c2c2c. En koyu basamakta yalniz buyuk yazi var (kontrast 3.5:1, buyuk yazi esigi 3:1); kucuk punto yazinin oldugu yerde orta basamak kullanildi (4.5-4.9:1). HAREKET: yalniz opacity (fotograf gecisi) ve transform. Zemin renkleri sabit -- SITE-KURALLARI Kural 2. ============================================================ */ :root { --kk-tr-1: #d49653; --kk-tr-1k: #cd8e4a; --kk-tr-2: #c5853f; --kk-tr-3: #b4712c; } .box_featured { overflow: hidden; /* bantlar 4px yuvarlak koseyi tasmasin */ padding-bottom: 0; } /* Kart ustten ve alttan koyu turuncuyla kapaniyor, ortasi acik kaliyor. */ .heading_featured { background-color: var(--kk-tr-3); border-bottom: 1px solid rgba(44, 44, 44, .22); } .heading_featured .icon_plates { background-color: var(--kk-tr-1); border-radius: 50%; padding: 9px; box-sizing: content-box; } .box_featured .bottom_button { background-color: var(--kk-tr-3); margin-top: 0; padding: 18px 20px; border-top: 1px solid rgba(44, 44, 44, .22); } /* --- pano --- */ .kk-pano { display: grid; grid-template-columns: 42% 1fr; background-color: var(--kk-tr-2); border-bottom: 1px solid rgba(44, 44, 44, .22); } .kk-pano__foto { position: relative; margin: 0; overflow: hidden; background-color: var(--kk-tr-3); border-right: 1px solid rgba(44, 44, 44, .25); min-height: 300px; } .kk-pano__resim { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .26s ease; } /* Yeni fotograf inerken eskisi soluyor; inince geri aciliyor. Sadece opacity degisiyor, yerlesim hesabi yok. */ .kk-pano__resim.kk-degisiyor { opacity: 0; } .kk-pano__kap { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(44, 44, 44, .88); color: #f3eadc; padding: 13px 15px 14px; } .kk-pano__ad { display: block; font-family: "TT Ramillas Variable", Georgia, serif; font-weight: 300; font-size: 1.5em; line-height: 1.12; margin-bottom: 4px; } .kk-pano__not { display: block; font-size: .78em; line-height: 1.45; opacity: .88; } /* --- liste --- */ /* PANO KARTIN BOSLUGUNU DOLDURUYOR. Olculdu (1920): kart 1410px, pano 420px kalinca altinda 280pxlik bos turuncu olusuyordu. .top_menu esneyip panoyu buyutuyor, satirlar da yuksekligi esit paylasiyor -- menu tabelasi gibi. */ /* KART ARTIK BOLUM BOYUNA UZAMIYOR. Olculdu: .left_side bolumun sag tarafi kadar uzun (1920x1080 bakisinda kart 1410px, 1440ta 1896px) cunku .box_featured height:100%. Icerik ~600px oldugu icin altta 800pxe varan bos turuncu kaliyordu. Once pano esnetildi -- fotograf devlesti, satirlar 179px oldu. Dogrusu: kart kendi boyunda kalsin, altinda bolumun kendi koyu zemini gorunsun. */ .box_featured { height: auto; } /* Kart kendi boyunda kalinca uzun ekranlarda ALTINDA koyu bosluk birikiyordu; dikeyde ortalaninca bosluk alta yigilmiyor, kart koyu panelin ustunde duran bir levha gibi duruyor. */ .featured_menu .left_side { display: flex; align-items: center; } /* Sag sutun: satirlar ustte dogal yuksekliginde, "Kendi menunu kur" paneli dibe yapisik. Satirlari esnetmek denendi ve 179px oldu. */ .kk-pano__sag { display: flex; flex-direction: column; background-color: var(--kk-tr-1); min-width: 0; } .kk-pano__liste { background-color: transparent; flex: 0 0 auto; } .kk-pano__sag .kk-kur { margin: auto 18px 18px; } /* Fotograf altyazisi sola dayali: sitenin ortalayan kurali buraya sizmasin. */ .kk-pano__kap { text-align: left; } .kk-satir { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid rgba(44, 44, 44, .2); color: inherit; font: inherit; cursor: pointer; padding: 13px 18px; transition: background-color .001s; /* gecis yok: boyama tetiklemesin */ } .kk-satir:last-child { border-bottom: 0; } .kk-satir:nth-child(even) { background-color: var(--kk-tr-1k); } /* Secili satir: orta basamak + solda koyu seritcik. En koyu basamak kullanilmadi, cunku satirda kucuk punto (numara, fiyat) var. */ .kk-satir[aria-pressed="true"] { background-color: var(--kk-tr-2); box-shadow: inset 3px 0 0 var(--kk-tr-3); } .kk-satir:focus-visible { outline: 2px solid #2c2c2c; outline-offset: -3px; } .kk-satir__ust { display: flex; align-items: baseline; gap: 9px; } /* Sira numarasi 12px altina dusmesin: .58em masaustunde 11.1px ediyordu (saglik.cjs "12px alti yazi" sekiz satirin sekizini de yakaladi). */ .kk-satir__no { font-size: .66em; letter-spacing: .1em; opacity: .55; width: 2.4em; flex: none; } .kk-satir__ad { font-family: "TT Ramillas Variable", Georgia, serif; font-weight: 300; font-size: 1.25em; letter-spacing: -.02em; } .kk-satir__cizgi { flex: 1 1 auto; border-bottom: 1px dotted rgba(44, 44, 44, .45); transform: translateY(-.15em); } .kk-satir__fiyat { font-size: .92em; font-weight: 500; white-space: nowrap; } /* --- "Kendi menunu kur" paneli ------------------------------- Kartin altinda bos turuncu alan kaliyordu (1920 olcumu: liste ile dugme bandi arasi 350px). Orasi hem koyu turuncu bir alan hem de ise yarar bir icerik oldu: menu.html zaten bu paketi satiyor. ZEMIN: en koyu basamak DEGIL orta basamak -- burada kucuk punto govde yazisi var (#c98944 uzerinde 4.8:1). */ .kk-kur { display: block; margin: 18px 20px 0; padding: 16px 18px 15px; background-color: #c98944; border-radius: 3px; border: 1px solid rgba(44, 44, 44, .28); color: inherit; text-decoration: none; } .kk-kur__ust { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .kk-kur__baslik { font-family: "TT Ramillas Variable", Georgia, serif; font-weight: 300; font-size: 1.5em; line-height: 1.1; letter-spacing: -.02em; } .kk-kur__fiyat { font-family: "TT Ramillas Variable", Georgia, serif; font-size: 1.25em; white-space: nowrap; } .kk-kur__yazi { display: block; margin-top: 7px; font-size: .82em; line-height: 1.45; max-width: 46ch; } .kk-kur__adimlar { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; } .kk-kur__adim { font-size: .72em; letter-spacing: .1em; text-transform: uppercase; border-top: 1px solid rgba(44, 44, 44, .35); padding-top: 6px; flex: 1 1 auto; } .kk-kur__adim i { font-style: normal; opacity: .6; margin-right: 6px; } /* --- PUNTO MERDIVENI ------------------------------------------ Bu sitede olculer vw'ye bagli: .box_featured'in yazi boyu 1920'de 19.2px, 390'da 3.9px. Sabit "1.25em" masaustunde 24px, telefonda 5px eder (olculdu: ilk surumde saglik.cjs "12px alti yazi" verdi). Sitenin kendi merdiveni (.name_txt: .9 / 1.5 / 2.15 / 4em) her kirilimda izleniyor. */ @media screen and (max-width: 991px) { .kk-satir__ad { font-size: 1.75em; } .kk-satir__fiyat { font-size: 1.35em; } .kk-satir__no { font-size: 1.3em; } .kk-pano__ad { font-size: 2.1em; } .kk-pano__not { font-size: 1.1em; } .kk-kur { margin-left: 16px; margin-right: 16px; } .kk-kur__baslik { font-size: 2.1em; } .kk-kur__fiyat { font-size: 1.8em; } .kk-kur__yazi { font-size: 1.15em; } .kk-kur__adim { font-size: 1.05em; } .box_featured .bottom_button { padding-left: 16px; padding-right: 16px; } } @media screen and (max-width: 767px) { /* Tek sutun: fotograf ustte, liste altta. Fotograf 16:10 -- dikey kare tam ekran genisliginde ekranin yarisini yerdi. */ .kk-pano { grid-template-columns: 1fr; } .kk-pano__foto { min-height: 0; aspect-ratio: 16 / 10; border-right: 0; border-bottom: 1px solid rgba(44, 44, 44, .25); } .kk-satir__ad { font-size: 2.45em; } .kk-satir__fiyat { font-size: 1.9em; } .kk-satir__no { font-size: 1.65em; } .kk-pano__ad { font-size: 3em; } .kk-pano__not { font-size: 1.55em; } .kk-kur__baslik { font-size: 3em; } .kk-kur__fiyat { font-size: 2.5em; } .kk-kur__yazi { font-size: 1.7em; } .kk-kur__adim { font-size: 1.5em; } } @media screen and (max-width: 479px) { .kk-satir__ad { font-size: 4.5em; } .kk-satir__fiyat { font-size: 3.4em; } .kk-satir__no { font-size: 3.2em; } .kk-pano__ad { font-size: 5.2em; } .kk-pano__not { font-size: 3.2em; } .kk-kur__baslik { font-size: 4.4em; } .kk-kur__fiyat { font-size: 3.6em; } .kk-kur__yazi { font-size: 3.4em; } .kk-kur__adim { font-size: 3.2em; } } @media (prefers-reduced-motion: reduce) { .kk-pano__resim { transition: none; } } /* ============================================================ MENU SAYFASI — ayni dil (2026-09-20) Ana sayfadaki bolum degisince menu sayfasi geride kalirdi; ayni sikayet orada da gecerliydi (duz liste, bastan sona bej). Burada yalniz BICIM degisiyor: tabak, fiyat ve aciklama aynen duruyor. Sayfanin tamami boyanmadi -- bej, menunun okunma zemini. ============================================================ */ .wrapper_menu_restaurant .name_price { align-items: baseline; gap: 10px; } .wrapper_menu_restaurant .name_price > div:first-child { order: 0; font-family: "TT Ramillas Variable", Georgia, serif; font-weight: 300; font-size: 1.22em; letter-spacing: -.02em; } .wrapper_menu_restaurant .name_price > div:last-child { order: 2; font-weight: 500; } .wrapper_menu_restaurant .name_price:before { content: ""; order: 1; flex: 1 1 auto; align-self: center; border-bottom: 1px dotted rgba(44, 44, 44, .4); transform: translateY(-.15em); } /* Uzerine gelince aciklama koyulasir: yalniz opaklik degisiyor. */ .menu_box .description_menu { transition: opacity .3s ease; } .menu_box:hover .description_menu { opacity: .92; } /* "Kendi menunu kur" kutusu ve rozetler ana sayfayla ayni ton ailesinde */ .box_middle { background-color: var(--kk-tr-1); border: 1px solid rgba(44, 44, 44, .28); border-radius: 3px; overflow: hidden; } .box_middle .headline_own_course { background-color: var(--kk-tr-1k); padding: 18px 20px 20px; border-bottom: 1px solid rgba(44, 44, 44, .25); } .box_middle .middle_line_box { padding: 14px 20px; } .box_middle .middle_line_box:nth-of-type(even) { background-color: var(--kk-tr-1k); } .kk-rozet { display: inline-block; margin-left: 10px; transform: translateY(-.15em); font-family: Satoshi, Arial, sans-serif; font-size: .42em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; background-color: var(--kk-tr-1); border: 1px solid rgba(44, 44, 44, .45); border-radius: 2px; padding: 3px 7px 2px; } /* --- yelpaze olcum kollari (bkz. etkilesim.js olcumAnahtarlari) --- */ html[data-kk-isik="0"] .kk-kart__isik { animation: none; } html[data-kk-golge="0"] .kk-kart { box-shadow: none; } html[data-kk-yelpaze="0"] .kk-yelpaze { display: none; } /* ============================================================ TELEFONDA UCUZ YELPAZE — olcum (2026-09-20) Arda: "kartlari kaldir demedim, fps olarak orayi optimize et, kasmasin telefonlarda." Onceki turda telefonda yelpaze gizlenip tek kart gosteriliyordu -- yanlis anlama, geri alindi. HANGI PARCA PAHALI: tahmin edilmedi, kapatilip acildi. hediye-kart.html, 375x812, islemci 1/4, arac/akicilik.cjs: yelpaze tam p95 50.0 ms en kotu 111 ms >50ms takilma 11 ?isik=0 p95 16.7 ms en kotu 94 ms >50ms takilma 1 ?golge=0 p95 44.3 ms en kotu 100 ms >50ms takilma 8 ?yelpaze=0 p95 11.1 ms en kotu 17 ms >50ms takilma 0 Maliyetin neredeyse tamami IC ISIK KATMANINDA: o katman SVG nin icinde, clip-path altinda donuyor; her karede bes kartin SVG si bastan rasterlaniyor. Golgenin payi kucuk. COZUM: dokunmatik/dar ekranda isik katmani DONMUYOR (gradyan yerinde duruyor). Kartlar donmeye devam ediyor -- istenen buydu. Masaustu degismiyor, orada olcum zaten temiz. ============================================================ */ @media (max-width: 767px), (pointer: coarse) { .kk-kart__isik { animation: none; } } /* HEDIYE KARTI YELPAZESI TELEFONDA TASMASIN (2026-09-28). Donen kartlar (.gc_curs.kk-yelpaze) bolumun sagindan cikip sayfayi 375 -> 422 px genisletiyordu: tarayici gorunumu uzaklastirip yana kaydirilabilir yapiyor (portfolyo denetimi, y~5880). Yalniz YATAY kirpma; clip kaydirma kabi kurmaz, dikey tasma ve sticky etkilenmez. */ section.gift_card { overflow-x: clip; }