/* temel.css — "Tarçın'ın bir günü" ortak tabaka. Tokenlar, tipografi, kart/düğme dili, gök, dil anahtarı, az-hareket ve dar ekran kuralları burada; bölüm CSS'leri (NN-ad.css) yalnızca o bölüme özgü yerleşimi taşır. Palet uygulamadan: terakota #C4703E, mürekkep #1E1A16, krem/beyaz zemin — prototipteki gun.css ile aynı his. */ :root { --zemin: #ffffff; --metin: #1e1a16; --metin-ikincil: #6b6157; --kor: #c4703e; --altin: #d4a24e; --kart-zemin: #fffaf3; --cizgi: rgba(30, 26, 22, 0.14); --gece-orani: 0; --baslik-font: "Fraunces", Georgia, "Times New Roman", serif; --govde-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --yay: cubic-bezier(0.2, 0.9, 0.25, 1.15); } * { box-sizing: border-box; } /* `clip` (hidden değil): mobil tarayıcı taşan içerik yüzünden görünür alanı genişletip sabit üst çubuğu ekrandan taşırmasın (24 Eyl, 375px'te 20px). */ html, body { margin: 0; overflow-x: clip; } body { font-family: var(--govde-font); color: var(--metin); background: var(--zemin); /* overflow-x burada YOK: html+body `clip` yeterli. `hidden` body'yi kendi kaydırma kabı yapıyor ve sayfadaki tüm `position: sticky`'yi bozuyordu. */ -webkit-font-smoothing: antialiased; } img { max-width: 100%; } /* ── DİL ANAHTARI ───────────────────────────────────────────────── Desen normo.css → "DİL ANAHTARI"den taşındı: iki dilin metni de belgede duruyor, görünürlüğü `` belirliyor. `dil.js` çalışmazsa sayfa `data-dil="tr"` işaretli geldiği için tek dilde ve eksiksiz kalır. `!important`: bazı bloklar kendi `display` değerini taşıyor (grid, flex), o yüzden gizleme onsuz tutmuyor. */ html[data-dil="tr"] [data-dil="en"], html[data-dil="en"] [data-dil="tr"] { display: none !important; } /* ── Gök ───────────────────────────────────────────────────────── */ .gok { position: fixed; inset: 0; z-index: -1; background: radial-gradient(120% 80% at 80% 0%, rgba(212, 162, 78, calc(0.24 * (1 - var(--gece-orani)))), transparent 60%), var(--zemin); } .yildizlar { position: absolute; inset: 0; opacity: var(--gece-orani); background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff8e7, transparent), radial-gradient(1px 1px at 28% 62%, #fff8e7, transparent), radial-gradient(1.5px 1.5px at 44% 30%, #fff8e7, transparent), radial-gradient(1px 1px at 63% 12%, #fff8e7, transparent), radial-gradient(2px 2px at 78% 44%, #e8c468, transparent), radial-gradient(1px 1px at 88% 76%, #fff8e7, transparent), radial-gradient(1.5px 1.5px at 7% 84%, #fff8e7, transparent), radial-gradient(1px 1px at 52% 88%, #fff8e7, transparent); } /* ── Üst çubuk ─────────────────────────────────────────────────── */ .ust { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 4vw, 40px); pointer-events: none; } .marka, .ust-sag { pointer-events: auto; } .marka { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.01em; } .marka img { border-radius: 8px; } .ust-sag { display: inline-flex; align-items: center; gap: 10px; } .saat { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--metin-ikincil); padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--zemin) 70%, transparent); backdrop-filter: blur(10px); } .saat-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--altin); box-shadow: 0 0 12px var(--altin); } /* Dil düğmesi: normo.css'teki pil biçimi korunuyor ama dokunma hedefi bu site için 44px kuralına yükseltildi (eski 26px, WCAG asgarisiydi). */ .dil-anahtari { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--cizgi); background: color-mix(in srgb, var(--zemin) 70%, transparent); backdrop-filter: blur(10px); } .dil-anahtari button { appearance: none; border: 0; cursor: pointer; background: transparent; color: inherit; opacity: 0.55; font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.06em; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } .dil-anahtari button[aria-pressed="true"] { opacity: 1; background: rgba(212, 162, 78, 0.18); color: var(--altin); } .dil-anahtari button:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; } /* Normo Web bağlantısı: dil düğmesiyle aynı pil, 44px dokunma hedefi. */ .ust-web { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cizgi); background: color-mix(in srgb, var(--zemin) 70%, transparent); backdrop-filter: blur(10px); color: var(--altin); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; } .ust-web:hover { background: rgba(212, 162, 78, 0.14); } .ust-web:focus-visible { outline: 2px solid var(--altin); outline-offset: 2px; } /* ── Tipografi ─────────────────────────────────────────────────── */ .baslik { font-family: var(--baslik-font); font-weight: 700; font-size: clamp(32px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.02em; margin: 0; } .baslik em { font-style: italic; font-weight: 500; color: var(--kor); } .ust-baslik { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kor); font-weight: 700; margin: 0 0 14px; } .aciklama { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--metin-ikincil); max-width: 40ch; margin: 20px 0 26px; } .dugme { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--metin) 22%, transparent); background: transparent; color: var(--metin); font: 600 15px var(--govde-font); cursor: pointer; text-decoration: none; transition: transform 0.2s var(--yay), background 0.2s; } .dugme:hover { transform: translateY(-2px); } .dugme:focus-visible { outline: 3px solid var(--altin); outline-offset: 3px; } .dugme-dolu { background: var(--altin); color: #1e1a16; border-color: var(--altin); } /* ── Kart dili ─────────────────────────────────────────────────── */ .kart { margin: 0; background: var(--kart-zemin); border-radius: 28px; padding: 9px 9px 0; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 34px 60px -26px rgba(196, 112, 62, 0.4), 0 10px 24px -8px rgba(30, 26, 22, 0.2); } .kart img { display: block; width: 100%; height: auto; border-radius: 20px; } .kart figcaption { font: 600 14px var(--govde-font); color: #1e1a16; text-align: center; padding: 11px 6px 13px; letter-spacing: 0.01em; } /* ── Köşe Tarçın (tek Rive örneği, açılış ↔ köşe) ───────────────── Aynı canvas taşınmıyor, YENİDEN KONUMLANIYOR: sabit konteyner açılış bölümü görünürken ortada büyük, geçince sağ altta küçük sabit (JS `.maskot-genis` sınıfını ana.js'in IntersectionObserver'ı yönetir). */ /* Konum HER iki durumda da top/left + translate çapasıyla tanımlı: tarayıcı `auto`'ya animasyon yapamadığı için eski right/bottom ↔ top/left geçişi tek karede sıçrıyordu. Şimdi köşeye süzülerek gider, genişlik birlikte küçülür. */ .maskot-kabi { position: fixed; z-index: 70; cursor: pointer; width: 64px; aspect-ratio: 1; top: calc(100% - 16px); left: calc(100% - 16px); translate: -100% -100%; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1), top 0.8s cubic-bezier(0.22, 1, 0.36, 1), left 0.8s cubic-bezier(0.22, 1, 0.36, 1), translate 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .maskot-kabi.maskot-genis { width: clamp(170px, min(24vw, 34vh), 300px); top: 50%; left: 50%; translate: -50% -50%; } .maskot-kabi canvas { width: 100%; height: 100%; display: block; } .maskot-yedek { position: absolute; inset: 14%; width: 72%; height: 72%; opacity: 0; transition: opacity 0.3s; pointer-events: none; } .maskot-yok .maskot-yedek { opacity: 1; } .maskot-yok canvas { visibility: hidden; } /* Rive hazır olana kadar yerinde logo resmi dursun (ilk anda boş kutu yok). */ .maskot-kabi:not(.maskot-hazir) .maskot-yedek { opacity: 1; } .maskot-kabi canvas { transition: opacity 0.4s ease; } .maskot-kabi:not(.maskot-hazir) canvas { opacity: 0; } /* ── Kendiliğinden ilerleme çubuğu (js/otomatikIlerleme.js) ──────── Aktif öğenin altında dolar: "bu değişiyor, dokunabilirsin" der. Kapsayıcı `.oto` alır; öğe `position: relative` olmalı. */ .adim-ilerleme { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--kor) 55%, transparent); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; } .oto .aktif > .adim-ilerleme { opacity: 1; animation: adimIlerle var(--adim-sure, 5s) linear forwards; } @keyframes adimIlerle { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ── Mobil: yapışkan görsel ───────────────────────────────────────── Dar ekranda görsel tam genişlikte en üste konunca yazıya gelindiğinde ekrandan çıkmış oluyordu ("ekranı görüyon sonra yazı, bağlamdan kopuyon" — 24 Eyl). Görsel küçülür ve bölüm boyunca üstte kalır, yazı altından akar; alt kenarı zemine yumuşakça karışan bir bant. */ @media (max-width: 760px) { /* Çift sınıf: bölüm CSS'leri (sonra yüklenir) kendi `position`'ını tanımlıyor; bu kural onları ezmeli. */ .mobil-yapiskan.mobil-yapiskan { position: sticky; top: 58px; z-index: 6; align-self: start; /* Tam genişlik bant: bölüm kenar boşluğundan bağımsız ekranın iki ucuna. */ margin: 0 calc(50% - 50vw) 10px; padding: 8px 16px 22px; display: flex; justify-content: center; background: linear-gradient(var(--zemin) 78%, transparent); } .mobil-yapiskan.mobil-yapiskan .kart { width: min(172px, 44vw); } } /* ── Az hareket ────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .maskot-kabi { transition: none; } .oto .aktif > .adim-ilerleme { animation: none; opacity: 0; } .dugme:hover { transform: none; } } /* ── Dar ekran ─────────────────────────────────────────────────── */ @media (max-width: 480px) { .ust { padding: 10px 14px; } .saat { display: none; } /* marka + dil düğmesi sığar; saat rozeti dar ekranda gereksiz yer kaplıyor */ .maskot-kabi:not(.maskot-genis) { width: 52px; top: calc(100% - 10px); left: calc(100% - 10px); } } /* Kapı açılınca odak programla ana içeriğe geçer; çerçeve çizilmesin. */ #ana-icerik:focus { outline: none; }