/* ================================================================= Demirbey Atlı Spor Kulübü — dijital menü ================================================================= */ :root { --page: #F9F9F9; /* sayfa zemini — düz, dokusuz */ --shell: #E7E6E1; --ink: #14180F; --ink-2: #8E948C; --hair: rgba(20,24,15,.10); --panel: #F9F9F9; /* açılan kartın gövdesi — sayfayla aynı ton */ --card: #F1F0EA; /* kategori kartı — sıcak kâğıt */ --sans: "Outfit", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; --serif: "Bodoni Moda", "Times New Roman", Georgia, serif; --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; --money: "IBM Plex Mono", "Noto Sans", Arial, sans-serif; /* kategori başlıkları için geometrik yüz — büyük harfte enli ve temiz; daha dar bir grotesk bu iş için endüstriyel kalıyordu */ --display: "Outfit", ui-sans-serif, system-ui, sans-serif; --pad: 14px; /* TEMA — panelden seçiliyor. Kategori kartları tek ton: kapalıyken hepsi aynı kâğıt, fark yalnızca açık kartta beliriyor. Ortadaki giriş düğmesi de aynı aileden. İki tema var; varsayılan pembe, olduğunda aşağıdaki blok devreye giriyor. */ /* --- pembe --- */ --off-bg: #F5ECEA; /* kapalı kart */ --off-ink: #4A2A26; /* kapalı kartta başlık */ --off-sub: rgba(74,42,38,.74); /* kapalı kartta çevron ve saat */ --off-cizgi: rgba(74,42,38,.5); /* başlığın altındaki çizgi */ --on-bg: #DFC1BD; /* açık kart */ --on-ink: #4A2A26; /* açık kartta başlık */ --on-sub: rgba(74,42,38,.86); /* açık kartta ikincil */ /* açılış ekranı (menü kapağı) */ --field: #F9F9F9; /* zemin — düz, dokusuz */ --disc-1: #2E6B45; /* daire gradyanı, açık uç */ --disc: #225235; /* daire ana ton */ --disc-2: #17381F; /* daire gradyanı, koyu uç */ --cream: #F9F9F9; --forest: #1C4029; /* açık zemindeki yazı rengi */ /* KAPAK PALETİ — buketin kendi renklerinden alındı. Suluboya yaprakların koyu tonları H120 civarında ve sıcak; eski disk yeşili (#225235) ise soğuk zümrütteydi ve resmin yanında başka bir dünyadan görünüyordu. Altın, çiçeklerdeki okr sarısının (#C89628 / #BE8214) sakinleştirilmiş hâli. */ --field-warm: #F9F9F9; /* kapak zemini — sayfayla aynı ton */ --gold: #BE8A2E; /* antika altın — ince teller ve parıltı */ /* Kapak mürekkebi. Kapakta her şeyi yeşil yapmak buketle yarışıyor; botanik gravürlerde yazı zaten yeşil değil, sıcak siyaha yakın bir mürekkeptir. Yeşil menünün içinde, kategori renklerinde yaşıyor — burada susuyor. */ --cover-ink: #262A1F; /* Madalyon (ortadaki disk). Rengi doğrudan buketteki şakayıktan alındı (#A84050 / #B85860 ailesi) — kapağın tek renk vurgusu artık yeşil değil, resmin kendi çiçeği. Zevk değişirse yalnızca bu dört satır değişir. */ /* ORTA DÜĞME — buketten alınmış toz ton. Disk açık olduğu için ok koyu; ışık ucu, ana ton ve gölge ucu aynı aileden. Gölge ve nabız renkleri de değişkene bağlı: ton değişince kenardaki halka ve altındaki gölge kendiliğinden uyuyor. */ --medal-1: #EFC9C4; /* ışık alan uç */ --medal: #E2ABA8; /* ana ton */ --medal-2: #C58C89; /* gölge ucu */ --medal-ink: #63332F; /* oktaki koyu mürekkep */ --medal-sh: 78, 46, 44; /* gölge (rgb) */ --medal-ping: 130, 78, 74; /* nabız halkası (rgb) */ } /* YEŞİL TEMA Kartlar fildişi kâğıt, açık kart kulübün orman yeşiline geçiyor. Düğme de yaprakların toz yeşiline. */ html[data-tema="yesil"] { --off-bg: #F0EEE7; --off-ink: #1C4029; --off-sub: rgba(28,64,41,.74); --off-cizgi: rgba(28,64,41,.55); --on-bg: #1C4029; --on-ink: #F7F5EE; --on-sub: rgba(247,245,238,.74); --medal-1: #CBD1AC; --medal: #AEB58A; --medal-2: #93996F; --medal-ink: #3A3F22; --medal-sh: 58, 63, 38; --medal-ping: 99, 106, 66; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--shell); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Klavyeyle gezinen için: sekmeye ilk basışta beliren atlama bağlantısı. Fareyle gezen hiç görmez. */ .skip { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -160%); z-index: 200; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); background: var(--disc); padding: 12px 18px; border-radius: 999px; text-decoration: none; transition: transform .2s ease; } .skip:focus { transform: translate(-50%, 0); outline: 2px solid var(--forest); outline-offset: 3px; } /* Hareket azaltma açıkken geçişler kapanıyor; işlev aynı kalıyor. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ================================================================= MASAÜSTÜ ZEMİNİ Telefonda görülmez. Masaüstünde 430px'lik sütunun iki yanında kalan alan boş beyaz kalıyordu; oraya kâğıt yüzeyi ve imleci takip eden yumuşak bir ışık koyuldu — kâğıdın üstünde gezinen bir lamba gibi. Işık gecikmeli takip ediyor (lerp), imlece yapışmıyor. ================================================================= */ .stage { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-color: var(--shell); background-image: url("paper.png"); background-size: 256px 256px; background-blend-mode: multiply; } .stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 560px at var(--mx, 50%) var(--my, 40%), rgba(255,255,255,.85) 0%, rgba(255,255,255,.34) 34%, rgba(255,255,255,0) 68%), radial-gradient(1100px 900px at var(--mx, 50%) var(--my, 40%), rgba(34,82,53,.055) 0%, rgba(34,82,53,0) 62%); } @media (max-width: 560px) { .stage { display: none; } } .app { position: relative; z-index: 1; max-width: 430px; margin: 0 auto; background: var(--page); min-height: 100vh; min-height: 100dvh; box-shadow: 0 0 70px rgba(20,20,15,.07); } /* Telefon genişliklerinde 430px sütun sınırı kalkar, içerik ekranı tam doldurur. Neden 560px: ekran 430px'i birkaç piksel geçtiğinde sütun 430'da sabit kalıp ortalanıyor, at o sınırda kırpılıyor ve kenarda 1-3px arka zemin görünüyordu — sağdaki ince beyaz şeridin sebebi buydu. Sınır ancak boşluk bariz genişliğe ulaştığında (masaüstünde sayfa gibi durduğunda) anlamlı; o yüzden eşik 430'un epey üstünde. */ @media (max-width: 560px) { body { background: var(--page); } .app { box-shadow: none; max-width: none; } } /* ================================================================= AÇILIŞ EKRANI — MENÜ KAPAĞI Düzen üç kattan oluşuyor: üstte kimlik, sayfanın tam ortasında dairesel giriş, altta attan yükselen yeşil kütle. Kompozisyon müşterinin gönderdiği kapak referansından — bilgi yukarıda, görsel aşağıda, aradaki boşluk çağrıyı taşıyor. ALT GÖRSEL — suluboya buket, şeffaf zeminli. En/boy 1.0352 (880 × 911). Kompozisyon aşağıda saplarla inceldiği için tam gösterilmiyor: yüksekliğin %90'ı görünüyor, kalanı alt kenardan taşıyor. Bitip duran bir görsel yerine sayfanın dışına devam eden bir görsel — referanstaki kapak da böyle. görünen yükseklik = .90 × 1.0352 × genişlik = .9317 × genişlik ekran altında kalan = .10 × 1.0352 × genişlik = .1035 × genişlik ================================================================= */ /* Kâğıt yüzeyinin TAMAMI burada boyanır — zemin rengi, elyaf dokusu ve ışık tek bir elemanda. Doku daha önce .intro-stage üzerindeydi; ekran 430px'den genişse ortalanan stage'in kenarında yarım piksellik dokusuz zemin kalıyor ve 249 ile 244 yan yana gelince ince açık bir şerit olarak görünüyordu. Tek yüzey = ek yeri yok. */ .intro { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: center; overflow: hidden; transition: opacity .5s ease, transform .5s ease; /* Düz zemin: kâğıt dokusu ve köşe gradyanı kaldırıldı, kapak da menü sayfasıyla aynı tonda duruyor. --mark-bg: at işaretinin altındaki dolgu katmanı bu zeminden okunuyor; yoksa çıtanın çizgisi gövdenin içinden görünüyor. */ background-color: var(--field-warm); --mark-bg: var(--field-warm); } .intro.leaving { opacity: 0; transform: translateY(-14px); pointer-events: none; } .intro.hidden { display: none; } .intro-stage { position: relative; width: 100%; max-width: 430px; height: 100%; overflow: hidden; --w: min(100vw, 430px); --h: 100vh; --h: 100dvh; --pad-x: 30px; /* Buketin genişliği. Görsel sütundan taşıyor: iki yandan ve alt kenardan kırpılıyor — biten bir görsel yerine sayfanın dışına devam eden bir görsel. Görünen yükseklik = .979 (görselin oranı) − .31 (alttan taşan pay) = .669 × genişlik; alt pay bundan hesaplanıyor, böylece düğme her ekran boyunda görselin üstünde kalan boşlukta ortalanıyor. Üç sayı birlikte değişir: buradaki ölçek, aşağıdaki .669 katsayısı ve .art kuralındaki -.31 taşma payı. */ --aw: min(calc(var(--w) * 1.35), calc(var(--h) * .65)); /* Akış düzeni: üstte kimlik, altta at için ayrılmış pay, ortada kalan boşlukta düğme. Düğmeyi mutlak konumla %50'ye çakmak yerine kalan boşlukta ortalamak, farklı ekran boylarında da doğru duruyor — sabit yüzde uzun ekranda atın kulaklarına biniyordu. */ display: flex; flex-direction: column; align-items: center; padding: max(50px, calc(env(safe-area-inset-top, 0px) + 30px)) var(--pad-x) calc(var(--aw) * .669 + 18px); /* Zemin boyamaz — kâğıt yüzeyi .intro üzerinde, tek parça. Bu eleman yalnızca kompozisyonu 430px sütununa hizalar ve taşan daireyi kırpar. */ background: transparent; } /* Telefon genişliklerinde 430px sütun sınırı kalkar, kompozisyon ekranı tam doldurur. Kural .intro-stage tanımından SONRA gelmeli, yoksa aynı özgüllükteki max-width onu ezer. */ @media (max-width: 560px) { .intro-stage { max-width: none; } } /* ---------------- üst: kimlik ---------------- */ /* Kapağın üst alanı: tek sütun, tek ritim. Ölçü adın kendi genişliğinden geliyor. */ .intro-head { position: relative; z-index: 5; flex: 0 0 auto; /* ad kendi kutusuna sığsın; bant kendi max-width'iyle dar kalıyor */ width: min(288px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--cover-ink); } /* ---- kulüp işareti: engeli aşan at ---- Nal yerine kulübün kendi armasındaki motif. Arma çizgileri küçükte dağılıyordu; siluet hem daha okunur hem daha pahalı duruyor. Nal ikincil işaret olarak menünün altında ve duyuru şeridinde kalıyor — hiyerarşi böylece netleşiyor: kapakta at, içeride nal. */ /* --------------------------------------------------------------- ÜST BLOK — tek kompozisyon. Önce parça parça kuruldu ve dağıldı: işaretin kendi çerçevesi, bandın kendi çizgileri, adın altında kapanış çıtası… her öğe kendi kutusundaydı. Sayfada zaten güçlü bir dairesel öğe var — ortadaki düğme. İkincisi onunla yarışıyordu. Şimdi kural şu: üstte çerçeve yok, kutu yok, tek dairesel öğe aşağıdaki düğme. Üst tamamen tipografi; işaret küçük ve çerçevesiz, altındaki tek altın tel hem atın aştığı çıta hem başlığın cetveli. Ölçek basamakları: işaret 78 · ad 62 · alt satır 13 · künye 8.5. Aralıklar optik: tel→ad 32, ad→alt 17, alt→künye 13. --------------------------------------------------------------- */ .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* İşaret. Genişlik 78 → doğal yükseklik 78 × 228/379 = 46.9; çıta 206/228'de, yani 42.4'te. Ölçüler elle yazıldı: aspect-ratio eski iOS Safari'de yok ve bu blok ilk karede boyanıyor. */ .crest-wrap { position: relative; z-index: 3; display: block; width: 78px; height: 42.4px; margin-bottom: -1px; /* tel son piksel satırının üstüne binsin */ color: var(--cover-ink); } .rider-clip { position: absolute; inset: 0; overflow: hidden; } /* yalnızca ön bacakların olduğu sağ şerit; dikey kırpma yok ki bacaklar telin önüne düşsün */ .rider-front { position: absolute; top: 0; left: 0; width: 100%; clip-path: inset(0 0 0 55%); } .rider-clip .rider, .rider-front .rider { width: 100%; height: auto; display: block; } /* Tek tel. Uçlarda sönüyor, iki ucunda dikme var — engel olduğu oradan okunuyor. Bant, kutu, ikinci çizgi yok. */ .rail { position: relative; width: 122px; height: 1px; background: linear-gradient(90deg, rgba(190,138,46,0) 0%, rgba(190,138,46,.85) 12%, rgba(190,138,46,.85) 88%, rgba(190,138,46,0) 100%); transform-origin: center; } .rail i { position: absolute; top: -3px; width: 1px; height: 8px; background: rgba(190,138,46,.5); } .rail i:first-child { left: 14px; } .rail i:last-child { right: 14px; } .intro-name { font-family: var(--serif); font-weight: 400; /* bandın dış ölçüsüyle hizalansın: 268 */ font-size: clamp(48px, 15.2vw, 62px); line-height: .95; letter-spacing: .012em; margin: 32px 0 0; } /* Alt satır serifte: bant zaten mono konuşuyor, aynı sesi ikinci kez duymak lokmayı düzleştiriyordu. Bodoni'nin seyrek aralıklı versali adla aynı aileden geldiği için kilit tek parça okunuyor. */ .intro-sub { font-family: var(--serif); font-size: 13px; font-weight: 400; letter-spacing: .5em; text-indent: .5em; color: rgba(38,42,31,.74); margin: 17px 0 0; } /* Yer bilgisi kilidin en sessiz satırı: adın ve kulübün altında, bir tık daha küçük ve seyrek. Künye gibi. */ .intro-where { font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .38em; text-indent: .38em; /* 9 piksellik yazıda AA için en az .647 alfa gerekiyordu (ölçüldü); .67 ile 4.8:1 — künye gibi sessiz ama okunur kalıyor */ color: rgba(38,42,31,.67); margin: 13px 0 0; } /* ---------------- orta: dairesel giriş ---------------- Dönen yazı halkası + orta disk. Halka yavaş dönüyor (sürekli ama sessiz), disk bastırılınca içeri gömülüyor. Hareket azaltma açıkken halka duruyor, işlev aynı kalıyor. */ .enter { position: relative; z-index: 6; flex: 0 0 auto; margin: auto 0; /* kalan boşlukta dikey ortalanır */ --cta: min(206px, 50vw, 25vh); width: var(--cta); height: var(--cta); display: grid; place-items: center; padding: 0; border: 0; background: none; border-radius: 50%; overflow: hidden; cursor: pointer; color: var(--forest); -webkit-tap-highlight-color: transparent; } .enter:focus-visible { outline: 2px solid var(--cover-ink); outline-offset: 6px; } .enter-ring { position: absolute; inset: 0; display: block; } .enter-ring svg { width: 100%; height: 100%; display: block; } /* Dönen yalnızca yazı: altın tel yerinde durmalı, yoksa dönen bir çember zaten görünmez ama parıltısı savruluyor. */ .ctaSpin { animation: ringSpin 30s linear infinite; transform-origin: 50% 50%; } @keyframes ringSpin { to { transform: rotate(360deg); } } .enter-ring text { font-family: var(--mono); font-size: 12.6px; font-weight: 500; letter-spacing: .04em; /* soğuk yeşil yerine yaprak mürekkebi */ fill: rgba(38,42,31,.80); } /* Yazı halkası ile disk arasındaki ince altın tel. Botanik gravürlerdeki cetvel çizgisi gibi — kapağı buketle aynı dile bağlayan tek detay. Çember SVG'nin içinde: daha önce ızgara kabında mutlak konumlanan sözde elemanla denenmiş ve düğmenin kenarında yay bırakmıştı. */ .ctaRule { fill: none; stroke: var(--gold); stroke-width: .7; opacity: .42; /* Nabız artık burada: disk çevresindeki soluk halka yerine telin kendisi ısınıp sönüyor. Daha sessiz, daha pahalı. */ animation: ruleGlow 5.4s ease-in-out 1.4s infinite; } @keyframes ruleGlow { 0%, 100% { opacity: .30; } 46% { opacity: .60; } } /* Disk: buketin gölgeli yapraklarından alınmış derin yeşil. Kenarında çok soluk bir altın tel var — mühür yüzüğü gibi, resimdeki okrla aynı aile. Gölge yumuşadı ve ısındı; eskisi diski kâğıdın üstüne yapıştırılmış bir uygulama düğmesi gibi kaldırıyordu. */ .enter-core { position: relative; z-index: 2; width: 47%; height: 47%; border-radius: 50%; display: grid; place-items: center; color: var(--medal-ink); background: radial-gradient(118% 118% at 34% 18%, var(--medal-1) 0%, var(--medal) 46%, var(--medal-2) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.30), 0 16px 30px -20px rgba(var(--medal-sh), .62), 0 4px 12px -8px rgba(var(--medal-sh), .26); transition: transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease; } .enter-core svg { width: 33%; height: 33%; display: block; } .enter:hover .enter-core { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.38), 0 20px 34px -20px rgba(var(--medal-sh), .70), 0 4px 12px -8px rgba(var(--medal-sh), .26); } .enter:active .enter-core { transform: scale(.97); } /* NABIZ — diskin kenarından doğup altın telde sönen iki ince halka. Sonar gibi: iki atış, sonra iki saniyelik es. "Basılabilir" demenin en sakin yolu; büyüyen gölge ya da yanıp sönen renk ucuza kaçar. Genişleme 1.20'de duruyor, çünkü altın tel tam orada: nabız kendi sınırına varıp dağılıyor, yazı halkasına taşmıyor. Duruş hâli açıkça yazılmalı. Gecikmeli animasyonda fill-mode devrede olmadığı için ortalama dönüşümünü yalnızca kare dizisine bırakmak halkayı sağ alta kaydırıp düğmenin kenarında yay gibi gösteriyor — bu hata bir kez yapıldı, tekrarlanmasın. */ @keyframes corePing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.01); } 9% { opacity: .85; } 50% { opacity: 0; transform: translate(-50%, -50%) scale(1.21); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.21); } } .enter-core::before, .enter-core::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid rgba(var(--medal-ping), .85); pointer-events: none; transform: translate(-50%, -50%); opacity: 0; animation: corePing 4.4s cubic-bezier(.22,.62,.3,1) 1.5s infinite; } /* ikinci atış — birinciyi kovalıyor */ .enter-core::after { animation-delay: 2.65s; border-width: 1px; border-color: rgba(var(--medal-ping), .5); } /* Parmak değince nabız susar: dokunuldu, artık davet etmesine gerek yok. */ .enter:hover .enter-core::before, .enter:hover .enter-core::after { animation-play-state: paused; opacity: 0; } /* dokunma dalgası — parmağın değdiği noktadan açılır */ @keyframes ripple { to { transform: scale(1); opacity: 0; } } .ripple { position: absolute; border-radius: 50%; background: rgba(190,138,46,.20); transform: scale(0); opacity: .8; pointer-events: none; animation: ripple .65s cubic-bezier(.3,.7,.4,1) forwards; } /* Alçak ekranlar (eski telefonlar, tarayıcı çubuğu açıkken). Kimlik bloğu ve at küçülüyor, düğme onlarla birlikte — üçü de aynı dikey bütçeyi paylaşıyor, biri küçülmezse diğerinin üstüne biniyor. Üç koşul: klasik alçak ekranlar; geniş ama kısa pencereler; ve telefonda ekran kendi genişliğine göre kısaldığında (tarayıcı çubukları açıkken 390x844 cihaz 390x745'e iniyor) — bu aralıkta tam boy kimlik bloğu düğmeyi buketin üstüne bindiriyordu. */ @media (max-height: 740px), (min-width: 400px) and (max-height: 820px), (max-width: 460px) and (min-aspect-ratio: 100/210) { .intro-stage { --aw: min(calc(var(--w) * 1.26), calc(var(--h) * .605)); padding-top: max(34px, calc(env(safe-area-inset-top, 0px) + 20px)); } .crest-wrap { width: 70px; height: 38px; } .rail { width: 110px; } .intro-name { font-size: clamp(41px, 12.8vw, 50px); } .intro-name { margin-top: 24px; } .intro-sub { margin-top: 12px; } .intro-where { margin-top: 10px; } .enter { --cta: min(170px, 44vw, 23vh); } } /* Çok kısa ekranlar (SE gibi): üst blok ve düğme birlikte küçülmezse halka yazısı buketin yapraklarına giriyor. Buket de bir tık daralıyor ki ortada nefes kalsın. */ @media (max-height: 620px) { .intro-stage { --aw: min(calc(var(--w) * 1.238), calc(var(--h) * .544)); } .crest-wrap { width: 62px; height: 33.7px; } .rail { width: 98px; } .intro-name { margin-top: 18px; } .intro-name { font-size: clamp(36px, 11.4vw, 44px); } .intro-sub { font-size: 11px; margin-top: 10px; letter-spacing: .42em; text-indent: .42em; } .intro-where { font-size: 8.5px; margin-top: 8px; } .enter { --cta: min(150px, 40vw, 21vh); } } /* ---------------- alt: buket ---------------- Referanstaki gibi: görsel kâğıdın üstünde duruyor, alt kenardan taşıyor, arkasında renkli bir kütle yok. Kapaktaki tek renk odağı ortadaki yeşil disk; buket onun altında kompozisyonu kapatıyor. */ .art { position: absolute; left: 50%; width: var(--aw); margin-left: calc(var(--aw) / -2); bottom: calc(var(--aw) * -.31); z-index: 1; } .bouquet { display: block; width: 100%; } .bouquet img { width: 100%; height: auto; display: block; } /* ---------------- açılış animasyonu ---------------- */ @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes ruleIn { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes artIn { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } } @keyframes ctaIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } } .rider { animation: riseIn .6s ease-out .18s both; } .crest-wrap { animation: riseIn .6s ease-out .18s both; } .rail { animation: ruleIn .7s cubic-bezier(.2,.7,.3,1) .30s both; } .intro-name { animation: riseIn .6s ease-out .42s both; } .intro-sub { animation: riseIn .6s ease-out .52s both; } .intro-where{ animation: riseIn .6s ease-out .60s both; } .art { animation: artIn .95s cubic-bezier(.2,.7,.3,1) .30s both; } .enter { animation: ctaIn .7s cubic-bezier(.2,.7,.3,1) .70s both; } /* kapak açıkken sayfa kaymasın; zemin de kapağın rengini alsın ki sağ kenarda bir piksellik açık şerit görünmesin */ /* Kapak açıkken sayfa kaymasın. Kilit hem hem üzerinde: yalnızca body'de overflow:hidden verildiğinde bazı tarayıcılarda kök eleman kaymaya devam ediyor ve kapak boşuna aşağı sürükleniyordu. body'nin position:fixed olması iOS'te de kaymayı kesin durduruyor. */ /* clip, hidden değil: overflow-x:hidden html/body üzerinde örtük bir kaydırma kabı oluşturuyor ve position:sticky'yi kırıyor — üst bar sayfayla birlikte yukarı kayıyordu. clip kırpar ama kap oluşturmaz. */ html, body { overflow-x: clip; } html.locked { overflow: hidden; height: 100%; } body.locked { overflow: hidden; position: fixed; inset: 0; width: 100%; background: var(--field-warm); } /* ---------------- Üst bar ---------------- */ .topbar { position: relative; z-index: 40; display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; padding: 16px var(--pad) 15px; padding-top: max(16px, env(safe-area-inset-top)); color: var(--forest); background: var(--field); transition: box-shadow .22s ease; } .back { display: grid; place-items: center; width: 32px; height: 32px; margin-left: -7px; padding: 0; color: var(--forest); text-decoration: none; background: none; border: 0; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .back svg { width: 21px; height: 21px; } .back:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; } .brand { display: flex; align-items: center; justify-content: center; gap: 13px; font-family: var(--serif); color: var(--forest); } .brand .word { font-size: 21px; font-weight: 400; letter-spacing: .008em; line-height: 1; } /* ---------------- Bölüm başlıkları ---------------- */ /* Kapaktaki etiket sistemiyle aynı: harf aralıklı küçük mono ve sağ kenara kadar uzanan saç teli çizgi. Büyük punto başlık yerine bu, bölümü sessizce işaretliyor ve gözü içeriğe bırakıyor. */ h2.head { display: flex; align-items: center; gap: 15px; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; line-height: 1; color: rgba(28,64,41,.7); margin: 0; padding: 0 var(--pad); } h2.head::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(28,64,41,.16); } .sec-menu { padding-top: 26px; } .thumb { flex: 0 0 auto; position: relative; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(20,24,15,.09); } .thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ================================================================= GÜNÜN DUYURUSU Listenin üstünde duran tek şerit. Sayfadaki tek renkli yüzey burası — kapaktaki yeşil daireden ödünç alınmış gradyan, arkasında aynı nal filigranı. Etiket + sağa uzanan saç teli çizgi, menünün her yerinde kullanılan bölüm işareti; şerit böylece bir bildirim kutusu gibi değil, menünün bir bölümü gibi duruyor. Üst kenardaki krem hattı ışığın kâğıda değdiği yer: yüzeye kalınlık veriyor, düz bir renk bloğu olmaktan çıkarıyor. ================================================================= */ .notice { position: relative; isolation: isolate; margin: 0 var(--pad) 24px; padding: 22px 24px 24px; /* Tek satırlık duyuruda da şerit aynı ferahlıkta kalsın; nal da rahat otursun diye taban yükseklik. */ min-height: 116px; border-radius: 24px; overflow: hidden; background: radial-gradient(128% 132% at 22% 8%, var(--disc-1) 0%, var(--disc) 52%, var(--disc-2) 100%); box-shadow: inset 0 1px 0 rgba(249,249,249,.16), 0 18px 34px -26px rgba(23,56,31,1), 0 2px 4px -2px rgba(23,56,31,.4); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); } .notice[hidden] { display: none; } .notice.enter { opacity: 0; transform: translateY(10px) scale(.985); } /* Nal tam görünüyor ve hafifçe yatıyor: kırpılınca iç içe halkalar gibi okunuyordu, oysa buradaki iş kimliği hatırlatmak. */ .notice-mark { position: absolute; right: 20px; bottom: 16px; z-index: -1; width: 66px; height: 66px; transform: rotate(-13deg); color: rgba(249,249,249,.115); pointer-events: none; } .notice-mark svg { width: 100%; height: 100%; display: block; } /* etiket + sağa uzanan çizgi — menünün bölüm işareti */ .notice-label { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .28em; line-height: 1; text-transform: uppercase; color: rgba(249,249,249,.62); } .notice-label::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(249,249,249,.2); } .notice-text { /* ₺ işareti Outfit'te yok; tek glif mono'ya düşsün diye zincirde */ font-family: var(--display), "IBM Plex Mono", ui-sans-serif, sans-serif; font-size: 17px; font-weight: 400; line-height: 1.48; letter-spacing: -.006em; color: var(--cream); margin: 16px 0 0; max-width: 34ch; text-wrap: pretty; } /* ---------------- Akordeon ---------------- */ /* Listenin altında bilerek geniş boşluk — deste kâğıdın içinde nefes alıyor, ekranın dibine yapışmıyor. */ .accs { padding: 0 var(--pad) 0; } .sec-menu { padding-bottom: 84px; } .acc { --tone: #DDD; display: block; } .acc-head { position: relative; width: 100%; border: 0; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; /* Kapalı karttaki mürekkep de temadan geliyor: pembe zeminde orman yeşili bir başlık iki ayrı aileden iki renk demek, kötü duruyordu. */ color: var(--off-ink, var(--forest)); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0 18px; /* başlığın altında bilerek geniş boşluk — kart nefes alsın */ padding: 34px 20px 46px; /* Kartın kendi rengi, kâğıtla yumuşatılmış hâli. Açılınca tam rengine geçiyor (aşağıda). */ background: var(--off-bg, var(--card)); transition: background-color var(--ac-sure) var(--ac-egri), color var(--ac-sure) var(--ac-egri); } .acc-head:active { filter: brightness(.975); } .acc-head:focus-visible { outline: 2px solid var(--off-ink, var(--forest)); outline-offset: -4px; } /* AÇIK DURUM — kart sıradaki rengini alıyor, mürekkep o renge göre hesaplanmış koyu tonuna geçiyor (bkz. app.js ACTIVE). */ .acc[data-open="true"] .acc-head { background: var(--on-bg); color: var(--on-ink); } .acc[data-open="true"] .acc-head .chev { color: var(--on-sub); } /* Bağlaç: küçük ve biraz geride. Başlıktaki asıl kelimeler öne çıksın diye. Kapalı kartta da geçerli — başlık her iki durumda aynı okunuyor. */ .acc-head .t .conj { font-style: normal; font-size: .62em; font-weight: 400; letter-spacing: .01em; opacity: .68; padding: 0 .06em; } /* Açık kartta alt çizgi siliniyor: renkli zeminde çizgi başlıkla yarışıyor, üstelik durum zaten renkten belli. Kapanınca geri geliyor — geçiş yumuşak. */ .acc[data-open="true"] .acc-head .t { text-decoration-color: transparent; } .acc[data-open="true"] .acc-head:focus-visible { outline-color: var(--on-ink); } /* sağ alt: ürün adedi ve hemen yanında ok */ .meta { justify-self: end; align-self: end; display: flex; align-items: center; gap: 11px; padding-bottom: 3px; } /* Başlığın altındaki servis satırı. Yalnızca kategoriye saat tanımlanmışsa basılır; tanımsız kategorilerde kart eskisi gibi. */ .head-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .when { display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .2em; line-height: 1; text-transform: uppercase; color: var(--off-sub, rgba(28,64,41,.72)); white-space: nowrap; transition: color .25s ease; } .when.on { color: var(--disc); } .when i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .when:not(.on) i { display: none; } .acc[data-open="true"] .when { color: var(--on-sub); } /* başlık — büyük harf bağırmıyor, cümle düzeninde ve sakin */ .acc-head .t { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -.012em; line-height: 1.02; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1.5px; text-decoration-color: var(--off-cizgi, rgba(28,64,41,.55)); transition: text-decoration-color .3s ease; } .acc-head .chev { display: grid; place-items: center; color: var(--off-sub, rgba(28,64,41,.74)); transition: transform var(--ac-sure) var(--ac-egri), color var(--ac-sure) var(--ac-egri); } .acc-head .chev svg { width: 24px; height: 24px; } .acc[data-open="true"] .chev { transform: rotate(180deg); color: var(--on-sub); } /* kart: köşeler yuvarlak, panel de içinde kalsın */ /* Kartlar üst üste biniyor: her kart bir öncekinin üstüne oturuyor, deste gibi. Sonraki eleman DOM'da sonra geldiği için doğal olarak üstte boyanıyor; üst kenardaki gölge bindirmeyi görünür kılıyor. */ .acc { display: block; position: relative; /* Açılıp kapanırken satır yüksekliği canlandığı için tarayıcı her karede düzeni yeniden hesaplıyor. contain, hesabı kartın içinde tutuyor: 14 kartın tamamı değil, yalnızca açılan kart ölçülüyor. */ contain: layout style; /* yalnızca üst köşeler kırık — kartlar üst üste bindiği için alt kenar zaten bir sonrakinin altında kalıyor, yuvarlatmak anlamsız */ border-radius: 26px 26px 0 0; overflow: hidden; box-shadow: 0 -12px 26px -16px rgba(28,64,41,.38), 0 1px 1px rgba(28,64,41,.04); } .acc + .acc { margin-top: -20px; } /* Açık kartın ardından bindirme kalkar — yoksa sonraki kart panelin son satırlarının üstünü örtüyordu. */ .acc[data-open="true"] { z-index: 2; } .acc[data-open="true"] + .acc { margin-top: 12px; } /* İlk kartın üstünde bindiği bir şey yok — tepe gölgesi kalksın. */ .acc:first-child { box-shadow: 0 1px 2px rgba(28,64,41,.05); } /* Yalnızca destenin en altındaki kartın alt köşeleri kırılıyor — diğerlerinin altı bir sonrakinin altında kaldığı için dik. */ .acc:last-child { border-radius: 26px; } /* ---------------- Açılış hareketi ---------------- İki kart aynı anda yükseklik canlandırdığında kare süresi iki katına çıkıyor ve takılma hissi veriyordu. Çözüm animasyonu kısmak değil, sıraya koymak: önce açık olan kapanıyor, hemen ardından yeni kart açılıyor. Aynı anda tek düzen animasyonu çalışıyor — hem daha akıcı hem de "biri kapandı, öteki açıldı" diye okunan bir düzen. Açılış kapanıştan uzun ve daha yumuşak: açmak gösterme eylemi, kapatmak yoldan çekilme. Eşit süre vermek ikisini de sıradanlaştırıyor. */ :root { --ac-sure: .38s; --ac-egri: cubic-bezier(.16, .84, .44, 1); /* uzun kuyruklu yumuşama */ --kapat-sure: .19s; --kapat-egri: cubic-bezier(.4, 0, 1, 1); /* hızlanarak çekilir */ } .acc-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--ac-sure) var(--ac-egri) var(--ac-gecikme, 0ms); } .acc[data-open="true"] .acc-wrap { grid-template-rows: 1fr; } /* Kapanan kart: daha kısa, hızlanan eğriyle. */ .acc.kapaniyor .acc-wrap { transition-duration: var(--kapat-sure); transition-timing-function: var(--kapat-egri); transition-delay: 0ms; } .acc-inner { overflow: hidden; } /* İçerik maskeyle dilimlenerek değil, yerine oturarak geliyor. opacity ve transform ekran kartında çalışıyor; yükseklik animasyonuna tek karelik bile ek yük binmiyor. */ .panel { opacity: 0; transition: opacity .3s ease; } .acc[data-open="true"] .panel { opacity: 1; transition-delay: calc(var(--ac-gecikme, 0ms) + 90ms); } /* ================================================================= AÇILAN ÜRÜN LİSTESİ Eskiden her şey monospace'ti. Mono etiket ve rakam için doğru, okuma metni için değil — 60 ürünlük listede gözü yoruyordu. Şimdi ürün adı kart başlığıyla aynı yüzde (Outfit), rakamlar mono'da kalıyor çünkü tabular rakam fiyat sütununu hizalıyor. Nokta çizgi ve satır ayraçları kaldırıldı: fiyatlar zaten sağda hizalı bir sütun oluşturuyor, üstüne çizgi eklemek gürültü. Satır arası buna karşılık açıldı. ================================================================= */ .panel { background: var(--panel); margin: 0; padding: 14px 20px 38px; } /* grup başlığı — kapaktaki ve bölüm başlıklarındaki etiket sistemi: harf aralıklı küçük mono ve sağ kenara uzanan saç teli çizgi */ .grp { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .18em; line-height: 1; text-transform: uppercase; color: rgba(28,64,41,.7); margin: 34px 0 20px; } .grp::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(28,64,41,.13); } .grp:first-child { margin-top: 12px; } .rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 23px; } .panel > .rows:first-child { margin-top: 16px; } .row { display: flex; align-items: baseline; gap: 13px; } .row .thumb { flex: 0 0 auto; align-self: center; width: 50px; height: 50px; border-radius: 11px; overflow: hidden; margin-right: 2px; } .row .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .row .txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .row .n { font-family: var(--display); font-size: 20.5px; font-weight: 400; line-height: 1.22; letter-spacing: -.004em; color: var(--ink); /* uzun adlar iki satıra düşerken dengeli kırılsın */ text-wrap: pretty; font-kerning: normal; } /* YILDIZLI ÜRÜN Panelde yıldızlanan ürün listede iki işaretle ayrılıyor: adı siyah mürekkep yerine orman yeşiline geçiyor ve adın hemen ardında küçük dolu bir yıldız duruyor. Satırın yüksekliği ve ritmi değişmiyor — ayrım sessiz ama net. */ .row.star .n { color: var(--disc); font-weight: 500; } .row .n .mark { display: inline-block; width: 11px; height: 11px; margin-left: 8px; position: relative; top: 1px; color: rgba(34,82,53,.8); } .row .n .mark svg { width: 100%; height: 100%; display: block; } .row .d { font-family: var(--display); font-size: 15.5px; font-weight: 400; line-height: 1.35; color: rgba(28,64,41,.7); text-wrap: pretty; } /* Ürün notu — açıklamanın altında, bir kademe geride duran küçük satır. Mono'ya geçmesi bilerek: aynı yüzde küçültmek "unutulmuş açıklama" gibi duruyordu, yüz değişince dipnot gibi okunuyor. */ .row .nt { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .05em; line-height: 1.5; color: rgba(28,64,41,.72); margin-top: 3px; } .row .p { flex: 0 0 auto; font-family: var(--money); font-size: 18px; font-weight: 500; color: var(--disc); white-space: nowrap; /* tabular: rakamlar eşit genişlikte, sütun kendiliğinden hizalanıyor */ font-variant-numeric: tabular-nums; letter-spacing: -.005em; } /* Para birimi rakamdan bir tık küçük ve soluk — asıl bilgi sayı, TL onun etiketi. Sütun da daha temiz okunuyor. */ .row .p .cur { font-size: .72em; font-weight: 500; letter-spacing: .06em; opacity: .55; margin-left: 4px; } /* İNDİRİMLİ FİYAT Üç parça tek hizada: küçük oran rozeti, üstü çizili eski fiyat, sonra yeni fiyat. Eski fiyat soluk ve bir punto küçük — göz önce yeni fiyatı okuyor, eski fiyat referans olarak yanında duruyor. */ .row .p.sale { display: inline-flex; align-items: baseline; gap: 9px; } .p .was { font-size: .82em; font-weight: 400; color: rgba(28,64,41,.62); text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(28,64,41,.4); } .p .now { color: var(--disc); } .p .off { align-self: center; font-family: var(--mono); font-size: 8px; font-weight: 500; letter-spacing: .08em; line-height: 1; color: rgba(34,82,53,1); border: 1px solid rgba(34,82,53,.28); border-radius: 999px; padding: 4px 6px 3px; font-variant-numeric: tabular-nums; } /* TÜKENDİ Fiyatın yerine geçen etiket. "Yakında" ile aynı kalıp, farklı ton: kil kırmızısı — menüdeki tek uyarı rengi, o yüzden kaçmıyor. */ .row .p.gone { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8A4038; border: 1px solid rgba(138,64,56,.32); border-radius: 999px; padding: 4px 10px 3px; position: relative; top: -2px; white-space: nowrap; } /* Tükenen ürünün adı bir tık geri çekiliyor ama okunaklı kalıyor. */ .row.out .n { color: rgba(28,64,41,.78); } .row .p.tbd { /* fiyatı belli olmayan ürün: rakam yerine ince çerçeveli etiket */ font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(28,64,41,.7); border: 1px solid rgba(28,64,41,.28); border-radius: 999px; padding: 4px 10px 3px; position: relative; top: -2px; } .soon { font-family: var(--display); font-size: 13.5px; font-weight: 400; color: rgba(28,64,41,.7); line-height: 1.65; margin: 20px 0 2px; } /* ================================================================= İMZA Menünün en altı. Üç kademe: nal işareti, hak bildirimi, imza. Aralarındaki boşluk kademeli olarak azalıyor ki göz aşağı indikçe sıkışsın ve BAST'ta dursun. Süs yok; işçilik boşlukta ve harf aralığında. ================================================================= */ .sign { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--pad) 54px; padding-bottom: max(54px, calc(env(safe-area-inset-bottom) + 38px)); } /* ---- ROZET ---- Kapakta ikinci bir daire ortadaki düğmeyle yarışıyordu; burada, sayfanın sonunda mühür gibi duruyor. Üst yayda ad, alt yayda unvan, ortada armanın atı, aştığı tel ve sezon. Kâğıt rengindeki alt katman menüde sayfa rengini alıyor — yoksa telin çizgisi atın gövdesinin içinden görünüyor. */ .badge { --mark-bg: var(--page); position: relative; width: 152px; height: 152px; display: grid; place-items: center; color: var(--forest); margin-bottom: 30px; } .badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; } .br1, .br2 { fill: none; } .br1 { stroke: rgba(190,138,46,.72); stroke-width: 1.1; } .br2 { stroke: rgba(190,138,46,.26); stroke-width: 1; } .bPip { fill: rgba(190,138,46,.55); } .bTx { fill: rgba(28,64,41,.92); } /* Bodoni bir didone: ince uçları 14 piksel civarında kaybolup yazıyı okunaksız bırakıyordu. Kesimi değiştirmek yerine harfe çok ince bir kontur ekleniyor (paint-order: stroke) — gövde kalınlaşırken didone karakteri ve adla aynı aileden gelmesi korunuyor. */ .bTx-top { font-family: var(--serif); font-size: 18px; letter-spacing: .17em; paint-order: stroke; stroke: rgba(28,64,41,.92); stroke-width: .35; stroke-linejoin: round; } .bTx-bot { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .2em; } .badge-core { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-3px, 5px); } .badge .crest-wrap { width: 72px; height: 39.1px; } .badge .rail { width: 92px; } .badge .rail i:first-child { left: 8px; } .badge .rail i:last-child { right: 8px; } .badge-yr { font-family: var(--mono); font-size: 7.5px; font-weight: 500; letter-spacing: .24em; text-indent: .24em; line-height: 1; font-variant-numeric: tabular-nums; color: rgba(28,64,41,.72); margin-top: 9px; } /* iki satır, ikisi de tek satırda kalacak şekilde — sarma yok */ .sign-rights { display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .12em; line-height: 1.4; color: rgba(28,64,41,.7); margin: 0 0 22px; white-space: nowrap; } .sign-by { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; } .sign-label { font-family: var(--mono); font-size: 8.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(28,64,41,.7); } /* İmzanın kendisi: harf aralığı bilerek geniş, boyut küçük. Küçük ve ferah yazı, büyük ve kalın yazıdan daha pahalı durur. Harf sayısı arttığı için aralık BAST'taki .44em'den .3em'e çekildi — daha genişi satırı kartın dışına taşırıyordu. */ .sign-name { font-family: var(--display); font-size: 11.5px; font-weight: 500; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--forest); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }