/* ========================================================================== ÇAMUR — camurapp.com Tasarım sistemi -------------------------------------------------------------------------- Palet notu: Zemin hâlâ ham kil — sıcak, pişmemiş bir krem. Üstüne SIR renkleri geliyor: kobalt, bakır yeşili, fırın turuncusu, sarı. Seramikte sır pişince canlanır; sayfadaki canlı renkler de o yüzden lekeler hâlinde duruyor, zemine yayılmıyor. KONTRAST KURALI — bozmadan renk değiştirme: Metin taşıyabilen renkler ....... --kil-koyu, --kil-govde, --mavi, --mor, --yesil-metin, --firin-metin Sadece dolgu (metin taşımaz) .... --firin, --yesil, --sari Sadece çizgi/çerçeve ............ --kil-sis Krem metin taşıyan dolgular: --firin-metin, --yesil-metin, --mavi, --mor, --gece. Hepsi AA (4.5:1) üstünde ölçüldü. ========================================================================== */ :root { /* Kil */ --kil-ham: #B98F6E; --kil-govde: #6E5341; --kil-koyu: #2E2420; --kil-sis: #D9BFA3; /* Zemin — öncekinden daha sıcak */ --kagit: #FDF4E3; --kagit-alt: #FAE7CB; --kagit-ust: #FFFBF2; /* Sırlar — canlı aksanlar */ --firin: #E8552A; /* dolgu / büyük metin */ --firin-metin: #CE411B; /* metin, ya da krem metin taşıyan dolgu */ --firin-koyu: #B83A16; /* hover */ --mavi: #2660CE; --mavi-koyu: #1B49A0; --yesil: #0E8F80; /* dolgu */ --yesil-metin: #0A6E62; --sari: #F2A81E; /* dolgu — üstüne koyu metin */ --mor: #9A4488; --gece: #232C63; /* koyu sahne zemini */ /* Pastel kart zeminleri */ --p-sari: #FDEBC8; --p-yesil: #D3EBE7; --p-mavi: #D8E3F8; --p-turuncu: #FBDDD1; /* Tipografi — Noteworthy macOS/iOS'ta yerel olarak var. Diğer platformlarda Shantell Sans en yakın karşılık: aynı elle yazılmış tavır, tam Türkçe glif desteği (latin + latin-ext). */ --f-display: "Noteworthy", "Shantell Sans", "Bradley Hand", ui-rounded, "Segoe UI", sans-serif; --f-body: "Noteworthy", "Shantell Sans", "Bradley Hand", ui-rounded, "Segoe UI", sans-serif; /* Ölçek */ --s-1: 0.5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 6rem; --s-7: 9rem; --kenar: clamp(1.25rem, 5vw, 5rem); --olcu: 62ch; --gecis: 480ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- Sıfırlama ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Menü sabit: çapa hedefleri menünün altına gizlenmesin. */ scroll-padding-top: 5rem; } body { margin: 0; background: var(--kagit); color: var(--kil-koyu); font-family: var(--f-body); /* El yazısı gövde metni biraz daha fazla nefes istiyor. */ font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Çok hafif grain — kil yüzeyi hissi. Tema parkı değil, doku. */ body::before { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Galeri donerken grain kapali. Tam ekran, sabit, en ustteki katman oldugu icin her karede butun sayfayla yeniden karistiriliyor; mobilde donusun takilmasinin baslica sebebi buydu. 0.035 opaklikta yarim saniye yoklugu goze carpmiyor. main.js uzerine .galeri-donuyor ekliyor. */ html.galeri-donuyor body::before { display: none; } img, svg, canvas { display: block; max-width: 100%; } /* El yazısı harfler zaten birbirine yaslanıyor: negatif tracking ve 1.02 satır aralığı çakışma yapıyordu. Ikisi de gevşetildi. */ h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.15; letter-spacing: 0; margin: 0; text-wrap: balance; } p { margin: 0 0 var(--s-2); max-width: var(--olcu); text-wrap: pretty; } a { color: inherit; } /* Odak halkası iki katmanlı: koyu çizgi + sarı hale. Palette'teki her zeminde (krem, pastel, turuncu, kobalt) görünür kalıyor. */ :focus-visible { outline: 3px solid var(--kil-koyu); outline-offset: 2px; box-shadow: 0 0 0 6px var(--sari); border-radius: 6px; } .gizli-ama-okunur { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .atla { position: absolute; top: -100px; left: var(--kenar); z-index: 200; background: var(--kil-koyu); color: var(--kagit); padding: 0.75rem 1.25rem; text-decoration: none; font-weight: 600; } .atla:focus { top: 1rem; } /* --- Yerleşim ----------------------------------------------------------- */ .kap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--kenar); } .bolum { padding-block: clamp(var(--s-5), 12vh, var(--s-7)); } /* Etiket artık renkli bir sır lekesi: küçük, yamuk, elle yapıştırılmış gibi. */ .etiket { display: inline-block; font-family: var(--f-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kil-koyu); background: var(--sari); padding: 0.15em 0.6em 0.2em; border-radius: 14px 8px 16px 7px; transform: rotate(-1.4deg); margin: 0 0 var(--s-3); } /* --- Navigasyon --------------------------------------------------------- */ .ust { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--kenar); color: var(--kil-koyu); transition: color var(--gecis); } /* Sayfanın tepesinde menü zeminsiz. Kaydırılınca altından geçen metinle çakışmasın diye yarı saydam bir zemin kazanıyor (main.js → menuKur). */ .ust[data-kaydirildi="evet"] { background: color-mix(in srgb, var(--kagit) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ust[data-kaydirildi="evet"] { background: var(--kagit); } } /* Mobilde buzlu cam yok. backdrop-filter altindaki her seyi her karede yeniden ornekliyor; sabit menu oldugu icin sayfadaki her animasyonun ve her kaydirmanin maliyetine biniyor. %82 yerine duz zemin veriyoruz, fark neredeyse gorunmuyor, akicilik farki buyuk. */ @media (max-width: 768px) { .ust[data-kaydirildi="evet"] { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--kagit); } .ust[data-koyu="evet"][data-kaydirildi="evet"] { background: var(--gece); } } /* Koyu bölümün üstündeyken metin açık renge döner (main.js → menuKur). */ .ust[data-koyu="evet"] { color: var(--kagit-ust); } .ust[data-koyu="evet"][data-kaydirildi="evet"] { background: color-mix(in srgb, var(--gece) 82%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ust[data-koyu="evet"][data-kaydirildi="evet"] { background: var(--gece); } } .ust[data-koyu="evet"] nav a:hover, .ust[data-koyu="evet"] nav a[aria-current="page"] { border-bottom-color: var(--kagit-ust); } /* JS yoksa renk değişimi de yok: menüye zemin verip okunurluğu garanti et. */ html:not(.js-var) .ust { background: var(--kagit); border-bottom: 1px solid var(--kil-sis); } .marka { font-family: var(--f-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: 0.06em; text-decoration: none; transition: transform var(--gecis); } .marka:hover { transform: rotate(-2.5deg) scale(1.04); } .ust nav { display: flex; gap: clamp(1rem, 3vw, 2.25rem); font-size: 0.875rem; font-weight: 500; } .ust nav a { text-decoration: none; padding-block: 0.25rem; border-bottom: 2.5px solid transparent; transition: border-color var(--gecis), color var(--gecis); } /* Altı çizili değil, elle çizilmiş gibi kalın ve renkli. */ .ust nav a:hover { border-bottom-color: var(--firin); color: var(--firin-metin); } .ust nav a[aria-current="page"] { border-bottom-color: var(--firin); } .ust[data-koyu="evet"] nav a:hover { color: var(--sari); border-bottom-color: var(--sari); } /* Dar ekranda dört link tek satıra sığmalı: "Ana sayfa" bölünmesin. */ .ust nav a { white-space: nowrap; } /* --- Dil değiştirme ----------------------------------------------------- Menünün sonunda küçük bir hap. Diğer bağlantılardan ayrı dursun diye alt çizgi yerine tam çerçeve alıyor; rengi menüden miras (koyu bölümün üstüne gelince o da açık renge dönüyor). */ .ust nav a.dil { border: 2px solid currentColor; border-radius: 999px; padding: 0.1rem 0.55rem; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.06em; opacity: 0.72; transition: opacity var(--gecis), color var(--gecis), border-color var(--gecis); } .ust nav a.dil:hover { opacity: 1; color: var(--firin-metin); border-color: var(--firin); } .ust[data-koyu="evet"] nav a.dil:hover { color: var(--sari); border-color: var(--sari); } /* --- Mobil: parmakla kullanım ------------------------------------------ Trafiğin büyük kısmı telefondan geliyor. Dokunma hedefleri 44px'e çıkarıldı; menü çubuğu büyümesin diye kendi dolgusu kısıldı. */ @media (max-width: 30rem) { .ust { padding-block: 0.35rem; padding-inline: 0.9rem; gap: 0.75rem; } /* Menüde altı öğe var ve Türkçe etiketler uzun: "Ana sayfa" burada düşüyor. Logo zaten ana sayfaya gidiyor, kopyası kayıp değil. */ .ust nav a[href="/"]:not(.dil), .ust nav a[href="/en"]:not(.dil) { display: none; } .marka { font-size: 1rem; letter-spacing: 0.1em; /* 26px'lik hedef parmakla ıskalanıyordu. */ display: inline-flex; align-items: center; min-height: 44px; } .ust nav { gap: 0.65rem; font-size: 0.8125rem; } .ust nav a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0; } /* Metin içi bağlantılar: satır yüksekliğini bozmadan hedefi büyüt. inline-block olduğu için dikey dolgu yerleşimi kaydırmıyor. */ .ok-link, .buyuk-link { padding-block: 0.5rem; } /* Footer bağlantıları birbirine çok yakındı. */ .dip-izgara ul { gap: 0.15rem; } .dip-izgara ul a { display: inline-flex; align-items: center; min-height: 40px; } } /* Menüde altı öğe var (Baran sekmesi eklendikten sonra): 416px altında marka ile menü tek satıra sığmıyor. Menü ikinci satıra iniyor — link düşürmek yerine sarmak tercih edildi; dil düğmesi hiçbir genişlikte kaybolmuyor. Eşik 22rem'den 26rem'e çıkarıldı; 390–412px'lik yaygın telefonlar da bu tarafta kalıyor. */ @media (max-width: 26rem) { .ust { flex-wrap: wrap; row-gap: 0.1rem; } .ust nav { flex: 1 1 100%; justify-content: space-between; gap: 0.4rem; } } /* --- HERO --------------------------------------------------------------- */ /* Tek ekran. Solda ÇAMUR karşılıyor, sağda başlık ve mağaza butonları. Aşağı kaydırınca yoldaş (aşağıdaki blok) devralıyor. */ .hero { position: relative; } .hero-sahne { min-height: 100svh; display: grid; align-items: center; gap: clamp(var(--s-3), 5vw, var(--s-5)); grid-template-columns: 1fr; padding: clamp(6rem, 14vh, 9rem) var(--kenar) var(--s-5); max-width: 1240px; margin-inline: auto; } @media (min-width: 60rem) { .hero-sahne { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); padding-block: 0; } } /* Tek sütunda marka adı önce gelsin, ÇAMUR altına düşsün. */ @media (max-width: 59.99rem) { .camur-sahne { order: 2; } .hero-metin { order: 1; } } /* Karşılayan ÇAMUR */ .camur-sahne { justify-self: center; width: 100%; max-width: 420px; display: grid; place-items: center; } .camur-selam { width: 100%; height: auto; max-width: min(420px, 46svh); transform: rotate(-2deg); animation: camur-nefes 5s ease-in-out infinite; } /* Duran değil, nefes alan bir kil parçası. */ @keyframes camur-nefes { 0%, 100% { transform: rotate(-2deg) translateY(0) scale(1); } 50% { transform: rotate(-1deg) translateY(-8px) scale(1.015); } } .hero-metin { max-width: 34rem; } .kelime-isareti { font-size: clamp(3.25rem, 2rem + 10vw, 8rem); font-weight: 800; letter-spacing: -0.005em; line-height: 0.98; margin: 0 0 var(--s-2); /* Marka adı hafif yamuk duruyor — elle yazılmış hissi. */ transform: rotate(-1.6deg); transform-origin: left center; /* Alt çizgi kaba değil harfin genişliğinde olsun diye. */ width: fit-content; } /* Harflerin altında pişmiş bir sır lekesi. */ .kelime-isareti::after { content: ""; display: block; width: 100%; height: 0.1em; margin-top: 0.04em; border-radius: 40% 60% 55% 45%; background: var(--firin); } .tagline { max-width: 32ch; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--kil-govde); margin-bottom: var(--s-3); } /* Kaydırma ipucu — ilk hareketle kayboluyor. */ .kaydir { position: absolute; bottom: clamp(1.25rem, 4vh, 2.5rem); left: 50%; transform: translateX(-50%); margin: 0; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--kil-govde); transition: opacity var(--gecis); } .kaydir[data-gorunur="hayir"] { opacity: 0; } .kaydir span { display: inline-block; animation: nefes 2.8s ease-in-out infinite; } @keyframes nefes { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(4px); opacity: 1; } } /* --- Yoldaş ------------------------------------------------------------- */ /* Hero'dan sonra ekranın kenarında bizimle inen ÇAMUR. Bölümler arası geçişte forma dönüşüyor (main.js → yoldasKur). */ .yoldas { position: fixed; right: clamp(0.75rem, 3vw, 3rem); bottom: clamp(1rem, 6vh, 4rem); z-index: 60; width: clamp(88px, 13vw, 190px); aspect-ratio: 1; pointer-events: none; opacity: 0; transform: translateY(24px) scale(0.9); transition: opacity var(--gecis), transform var(--gecis); } .yoldas[data-gorunur="evet"] { opacity: 1; transform: none; } /* Formlar üst üste duruyor, sadece etkin olan görünür. */ .yoldas-form { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(0.82) rotate(-8deg); transition: opacity 620ms ease, transform 620ms cubic-bezier(0.34, 1.4, 0.5, 1); } .yoldas[data-form="0"] .yoldas-form[data-form="0"], .yoldas[data-form="1"] .yoldas-form[data-form="1"], .yoldas[data-form="2"] .yoldas-form[data-form="2"] { opacity: 1; transform: none; } /* Dar ekranda köşede küçük dursun, metnin önüne geçmesin. */ @media (max-width: 44rem) { .yoldas { width: clamp(68px, 18vw, 104px); right: clamp(0.5rem, 2vw, 1rem); bottom: clamp(0.75rem, 3vh, 1.75rem); opacity: 0; } .yoldas[data-gorunur="evet"] { opacity: 0.92; } } /* --- Mağaza butonları --------------------------------------------------- */ .magazalar { display: flex; flex-wrap: wrap; gap: var(--s-2); } .cta .magazalar { justify-content: center; } .magaza { display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.6rem; background: var(--firin-metin); color: var(--kagit-ust); text-decoration: none; border: 0; border-radius: 22px 10px 20px 12px; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--gecis), transform var(--gecis); } .magaza:hover { background: var(--firin-koyu); transform: translateY(-3px) rotate(-1.5deg); } .magaza svg { width: 20px; height: 20px; flex: none; fill: currentColor; } .magaza[aria-disabled="true"] { background: var(--kagit-ust); color: var(--kil-govde); cursor: not-allowed; /* Kesikli çerçeve: "henüz pişmedi" hâli. */ border: 2px dashed var(--kil-sis); } .magaza[aria-disabled="true"]:hover { transform: rotate(-1.5deg); background: var(--kagit-ust); } /* Resmî mağaza rozetleri — yayına çıkınca butonların yerini alacak. Rozet dosyaları Apple ve Google'dan indirilir, çizilmez (assets/rozet/OKU.md). */ .magaza-rozet { display: inline-flex; align-items: center; /* Apple en az 1/10, Google en az 1/4 boşluk istiyor: 1/4'ü uyguluyoruz. */ padding: 0.35rem; border-radius: 10px; transition: transform var(--gecis); } .magaza-rozet:hover { transform: translateY(-3px); } .magaza-rozet img { height: 54px; width: auto; display: block; } /* Google'ın dosyasında gömülü pay var; aynı yükseklikte daha küçük duruyor. */ .magaza-rozet.play img { height: 78px; margin: -12px; } .magaza-not { margin: var(--s-3) 0 0; font-size: 0.8125rem; color: var(--kil-govde); max-width: 40ch; } /* --- İç sayfa hero + genel bloklar -------------------------------------- */ .ic-hero { padding-top: clamp(7rem, 16vh, 10rem); } .ic-hero h1 { font-size: clamp(2.25rem, 1.5rem + 4.5vw, 4.5rem); margin-bottom: var(--s-3); } .giris { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.375rem); color: var(--kil-govde); max-width: 44ch; } .tanitim { background: var(--kagit-alt); } .iki-sutun { display: grid; gap: clamp(var(--s-3), 5vw, var(--s-6)); grid-template-columns: 1fr; } @media (min-width: 56rem) { .iki-sutun { grid-template-columns: 1fr 1fr; } .iki-sutun.hizali { align-items: center; } } .iki-sutun h2 { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3rem); margin-bottom: var(--s-2); } .yazi { max-width: 46rem; } .yazi h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem); margin-top: var(--s-4); margin-bottom: var(--s-2); } .yazi h2:first-of-type { margin-top: 0; } .ok-link { display: inline-block; font-weight: 700; color: var(--mavi-koyu); text-decoration: none; border-bottom: 2.5px solid var(--mavi); padding-bottom: 2px; transition: border-color var(--gecis), transform var(--gecis); } .ok-link::after { content: " →"; display: inline-block; transition: transform var(--gecis); } .ok-link:hover { border-bottom-color: var(--firin); } .ok-link:hover::after { transform: translateX(5px) rotate(-8deg); } .orta-link { padding-top: var(--s-4); } .buyuk-link { font-family: var(--f-display); font-size: clamp(1.125rem, 1rem + 1vw, 1.625rem); font-weight: 700; letter-spacing: 0; color: var(--mavi-koyu); text-decoration: none; border-bottom: 3px solid var(--sari); transition: border-color var(--gecis), color var(--gecis); } .buyuk-link:hover { color: var(--firin-metin); border-bottom-color: var(--firin); } .iletisim-izgara { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 48rem) { .iletisim-izgara { grid-template-columns: repeat(3, 1fr); } } .iletisim-izgara h2 { font-size: 1.125rem; font-family: var(--f-body); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--yesil-metin); margin-bottom: var(--s-1); } .iletisim-izgara > div:nth-child(2) h2 { color: var(--mor); } .iletisim-izgara > div:nth-child(3) h2 { color: var(--mavi-koyu); } /* --- 3D Etkileşimli Telefon Vitrini (13 Telefonlu Silindir Çember) ------- */ .bolum-galeri { padding-block: clamp(4rem, 9vh, 7.5rem); overflow: hidden; position: relative; background: var(--kagit-alt); } .galeri-baslik-alani { text-align: center; max-width: 48rem; margin: 0 auto clamp(3.5rem, 7vh, 5.5rem); } .galeri-baslik-alani h2 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); margin-top: var(--s-1); margin-bottom: var(--s-2); color: var(--mavi-koyu); } .galeri-baslik-alani .giris { margin: 0 auto; } .galeri-3d-alani { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; user-select: none; touch-action: pan-y; } /* 3D Sahne & Perspektif */ .galeri-3d-sahne { position: relative; width: 100%; height: clamp(480px, 58vh, 580px); margin: 0 auto; perspective: 1200px; perspective-origin: 50% 50%; display: flex; align-items: center; justify-content: center; cursor: grab; outline: none; } .galeri-3d-sahne:active, .galeri-3d-alani.surukleniyor .galeri-3d-sahne { cursor: grabbing; } /* 3D Çember / Silindir Gövdesi */ .galeri-3d-cember { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateY(var(--rot-y, 0deg)); /* 1,25sn'den 0,55sn'ye indirildi: hızlı kaydırmada bir sonraki hamle yarım kalmış animasyonun üstüne biniyor ve dönüş "sapıtmış" gibi görünüyordu. Yarım saniye hem akıcı hem de üst üste binmiyor. */ transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.28, 1); will-change: transform; } .galeri-3d-alani.surukleniyor .galeri-3d-cember { transition: none; } /* Telefon Ölçüleri ve Yarıçap (Kristal netliğinde okunabilir 3D oranlar) */ :root { --r: 470px; --w-tel: 190px; --h-tel: 411px; --toplam: 13; } @media (max-width: 1024px) { :root { --r: 390px; --w-tel: 155px; --h-tel: 335px; } .galeri-3d-sahne { height: 500px; } } @media (max-width: 768px) { :root { --r: 300px; --w-tel: 125px; --h-tel: 270px; } .galeri-3d-sahne { height: 430px; } .galeri-baslik-alani { margin-bottom: clamp(2.5rem, 5vh, 4rem); } .galeri-bilgi-kutusu { margin-top: clamp(2.5rem, 5vh, 4rem); } } @media (max-width: 480px) { :root { --r: 230px; --w-tel: 105px; --h-tel: 227px; } .galeri-3d-sahne { height: 360px; perspective: 850px; } } /* Mobilde kasa kalınlığını oluşturan süs katmanları kapalı. 105px genişliğinde bir telefonda 32px'lik yan yüzeyler zaten birkaç piksel görünüyor, ama 13 telefon × 10 eleman = 130 fazladan 3B katman demek. Ön yüz ve arka yüz duruyor; kaybolan tek şey kenar kalınlığı. */ @media (max-width: 768px) { .telefon-katman, .telefon-yan { display: none; } } /* --- 3D Gerçek Hacimli Telefon Kasası (True 3D Extruded Phone Model - 32px Kütlesel Kasa) --- */ .galeri-telefon { position: absolute; width: var(--w-tel); height: var(--h-tel); left: calc(-0.5 * var(--w-tel)); top: calc(-0.5 * var(--h-tel)); transform-style: preserve-3d; transform: rotateY(calc(var(--i) * (360deg / var(--toplam)))) translateZ(var(--r)); cursor: pointer; backface-visibility: visible; transition: opacity 0.4s ease, transform 0.4s ease; /* will-change BİLEREK YOK. 13 telefonun her birine verildiğinde 13 ayrı kompozisyon katmanı doğuyor; her biri içinde 11 alt katman taşıdığı için mobilde GPU belleği tükeniyor ve kaydırma tutukluyordu. Yalnızca dönen çemberde duruyor, orada tek katman yetiyor. */ } /* Çemberin arkasında kalan, zaten görünmeyen telefonlar boyanmasın. main.js aktif telefondan 3 adımdan uzaktakilere data-uzak="evet" yazıyor. visibility gizlemesi düzeni bozmuyor, sadece boyamayı durduruyor. */ .galeri-telefon[data-uzak="evet"] { visibility: hidden; } /* 3D Kasa Konteynırı (Preserve-3D ile gerçek uzaysal derinlik) */ .telefon-kasa-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); } :root { --d-tel: 32px; /* 3D Kasa Kalınlığı (Görünür, tok ve kalın kütle) */ --hd-tel: 16px; /* Yarı Derinlik (Half-depth) */ --r-kose: 24px; /* Köşe Kavis Yarıçapı */ } @media (max-width: 1024px) { :root { --d-tel: 26px; --hd-tel: 13px; --r-kose: 20px; } } @media (max-width: 768px) { :root { --d-tel: 22px; --hd-tel: 11px; --r-kose: 18px; } } @media (max-width: 480px) { :root { --d-tel: 18px; --hd-tel: 9px; --r-kose: 14px; } } /* 3D Ön ve Arka Yüzler */ .telefon-yuz { position: absolute; inset: 0; border-radius: var(--r-kose); backface-visibility: hidden; transform-style: preserve-3d; } /* ÖN YÜZ (Yükseltilmiş Ekran & Çerçeve) */ .telefon-on { transform: translateZ(var(--hd-tel)); background: linear-gradient(135deg, #485892 0%, #26305a 30%, #171d3a 60%, #2c3868 88%, #4f619e 100%); padding: 5px; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.4); } /* ARKA YÜZ (Kamera Modülü & Gece Mavisi Seramik Kasa) */ .telefon-arka { transform: translateZ(calc(-1 * var(--hd-tel))) rotateY(180deg); background: linear-gradient(145deg, #182142 0%, #0d1226 60%, #1b2446 100%); border: 1.5px solid #45568f; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.8); } .telefon-kamera-modulu { width: clamp(34px, 7vw, 44px); height: clamp(34px, 7vw, 44px); border-radius: 12px; background: #090c1a; border: 1.5px solid #4a5c99; transform: translateZ(4px); box-shadow: 0 6px 14px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.3); display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 3px; align-items: center; } .telefon-kamera-modulu .lens { width: clamp(10px, 2.2vw, 14px); height: clamp(10px, 2.2vw, 14px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #3d5196 0%, #050711 75%); border: 1.5px solid #637abf; box-shadow: inset 0 0 4px #000; } .telefon-kamera-modulu .flas { width: 6px; height: 6px; border-radius: 50%; background: #fbf5db; box-shadow: 0 0 6px #fff8cc; justify-self: center; } .telefon-logo-damga { font-family: var(--f-display); font-weight: 800; font-size: 0.75rem; color: #4a5b94; text-align: center; margin-bottom: 0.75rem; letter-spacing: 0.08em; opacity: 0.9; transform: translateZ(2px); } /* 3D YAN DUVARLAR (Dönüşte parlayan, yüksek kontrastlı 32mm Titanyum Yan Duvarlar) */ .telefon-yan { position: absolute; background: linear-gradient(90deg, #d2dcf8 0%, #859ad3 20%, #3a4b7f 55%, #182240 85%, #5e73af 100%); border: 1px solid rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6); pointer-events: none; } /* Sol Yan Kasa (Ses Tuşları) */ .telefon-yan-sol { width: var(--d-tel); height: calc(100% - calc(var(--r-kose) * 2)); left: calc(-0.5 * var(--d-tel)); top: var(--r-kose); transform: rotateY(-90deg); display: flex; flex-direction: column; gap: 10px; align-items: center; padding-top: 25px; } /* Sağ Yan Kasa (Güç Tuşu) */ .telefon-yan-sag { width: var(--d-tel); height: calc(100% - calc(var(--r-kose) * 2)); right: calc(-0.5 * var(--d-tel)); top: var(--r-kose); transform: rotateY(90deg); display: flex; flex-direction: column; align-items: center; padding-top: 30px; } /* Üst Kasa */ .telefon-yan-ust { height: var(--d-tel); width: calc(100% - calc(var(--r-kose) * 2)); top: calc(-0.5 * var(--d-tel)); left: var(--r-kose); transform: rotateX(90deg); background: linear-gradient(180deg, #d2dcf8 0%, #50619c 50%, #1e284a 100%); } /* Alt Kasa (Port ve Hoparlör) */ .telefon-yan-alt { height: var(--d-tel); width: calc(100% - calc(var(--r-kose) * 2)); bottom: calc(-0.5 * var(--d-tel)); left: var(--r-kose); transform: rotateX(-90deg); background: linear-gradient(0deg, #d2dcf8 0%, #50619c 50%, #1e284a 100%); display: flex; align-items: center; justify-content: center; } .yan-buton { width: 6px; background: #a9bbee; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.4); } .yan-buton--ses1, .yan-buton--ses2 { height: 24px; } .yan-buton--guc { height: 36px; } .yan-port { width: 16px; height: 5px; background: #080a14; border-radius: 2px; border: 1px solid #4a5c96; } /* 6 Katmanlı 3D Köşe & Gövde Dolgusu (Kavisli kütlenin tam 3D katılığı) */ .telefon-katman { position: absolute; inset: 0; border-radius: var(--r-kose); background: #1c2447; border: 2px solid #55679c; pointer-events: none; } .katman-1 { transform: translateZ(calc(-0.75 * var(--hd-tel))); } .katman-2 { transform: translateZ(calc(-0.45 * var(--hd-tel))); } .katman-3 { transform: translateZ(calc(-0.15 * var(--hd-tel))); } .katman-4 { transform: translateZ(calc(0.15 * var(--hd-tel))); } .katman-5 { transform: translateZ(calc(0.45 * var(--hd-tel))); } .katman-6 { transform: translateZ(calc(0.75 * var(--hd-tel))); } /* Aktif / Merkezdeki Telefon */ .galeri-telefon[data-aktif="evet"] { z-index: 25; opacity: 1; } .galeri-telefon[data-aktif="evet"] .telefon-kasa-3d { transform: scale(1.08); } .galeri-telefon[data-aktif="evet"] .telefon-on { box-shadow: 0 0 0 2px var(--firin-metin), 0 0 40px rgba(232, 85, 42, 0.45), 0 35px 75px -10px rgba(10, 15, 35, 0.85); }/* Mobilde aktif telefonun 40px ve 75px bulanikliktaki golgeleri her karede yeniden hesaplaniyordu. 105px genisligindeki bir telefonda bu kadar genis bir hale zaten dagiliyor; daha dar golge hem ayni duruyor hem ucuz. */ @media (max-width: 768px) { .galeri-telefon[data-aktif="evet"] .telefon-on { box-shadow: 0 0 0 2px var(--firin-metin), 0 6px 18px -4px rgba(10, 15, 35, 0.7); } } /* Arka plandaki ve açılı duran telefonlar */ .galeri-telefon:not([data-aktif="evet"]) { opacity: 0.72; } .galeri-telefon:not([data-aktif="evet"]):hover { opacity: 0.95; } /* Telefon Ekranı */ .galeri-telefon .telefon-ekran { position: relative; width: 100%; height: 100%; border-radius: clamp(14px, 3vw, 20px); overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5); } /* Dinamik Ada / Çentik */ .galeri-telefon .telefon-ekran::before { content: ""; position: absolute; z-index: 10; top: 3%; left: 50%; transform: translateX(-50%); width: 28%; height: 3%; min-height: 5px; max-height: 8px; border-radius: 99px; background: #090c17; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); } /* Ekran Görseli: Doğal, Saf ve Kayıpsız Orijinal Kalite */ .galeri-telefon .telefon-ekran img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; background: #111; display: block; } .galeri-telefon .telefon-ekran img.yuklenemedi { display: none; } /* Ekran Yer Tutucu (Görsel yokken görünen şık tasarım) */ .ekran-yer-tutucu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(0.6rem, 1.8vw, 1.1rem); text-align: center; background: radial-gradient(circle at 50% 28%, #FFF9F0 0%, #F5E8D7 100%); border: 2px dashed #D6BBA4; border-radius: clamp(14px, 3vw, 24px); color: var(--kil-govde); gap: 0.35rem; z-index: 1; } .ekran-no { display: inline-flex; align-items: center; justify-content: center; width: clamp(26px, 5vw, 34px); height: clamp(26px, 5vw, 34px); border-radius: 50%; background: var(--firin-metin); color: #fff; font-weight: 800; font-size: clamp(0.7rem, 1.4vw, 0.85rem); font-family: var(--f-display); box-shadow: 0 3px 8px rgba(232, 85, 42, 0.3); } .ekran-yer-tutucu b { font-size: clamp(0.7rem, 1.4vw, 0.85rem); color: var(--mavi-koyu); line-height: 1.2; font-weight: 700; } .ekran-yer-tutucu small { font-size: clamp(0.6rem, 1.1vw, 0.7rem); color: var(--kil-govde); opacity: 0.85; } /* Ok Kontrolleri */ .galeri-ok { position: absolute; top: 50%; transform: translateY(-50%); z-index: 80; pointer-events: auto; width: 52px; height: 52px; border-radius: 50%; background: var(--kagit-ust); color: var(--mavi-koyu); border: 2px solid var(--kil-sis); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px -4px rgba(27, 42, 56, 0.25); transition: background var(--gecis), color var(--gecis), transform var(--gecis), border-color var(--gecis); } .galeri-ok svg { width: 28px; height: 28px; fill: currentColor; } .galeri-ok:hover { background: var(--firin-metin); color: #fff; border-color: var(--firin-metin); transform: translateY(-50%) scale(1.1); } .galeri-ok--sol { left: clamp(0.5rem, 3vw, 2rem); } .galeri-ok--sag { right: clamp(0.5rem, 3vw, 2rem); } @media (max-width: 480px) { .galeri-ok { width: 42px; height: 42px; } .galeri-ok svg { width: 22px; height: 22px; } } /* Aktif Ekran Detay Kartı (Telefonların altında ferah konum) */ .galeri-bilgi-kutusu { margin-top: clamp(3.5rem, 7vh, 5.5rem); display: flex; flex-direction: column; align-items: center; gap: var(--s-3); text-align: center; } .galeri-kart { background: var(--kagit-ust); border-radius: 24px; padding: 1.25rem 2rem; box-shadow: 0 12px 30px -8px rgba(46, 36, 32, 0.12); border: 1.5px solid var(--kil-sis); max-width: 38rem; width: 90%; transition: transform 0.3s ease, opacity 0.3s ease; } .galeri-kart-ust { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.4rem; } .galeri-rozet { background: var(--firin-metin); color: #fff; font-family: var(--f-display); font-weight: 800; font-size: 0.8125rem; padding: 0.2rem 0.65rem; border-radius: 99px; letter-spacing: 0.04em; } .galeri-baslik { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); font-weight: 800; color: var(--mavi-koyu); margin: 0; } .galeri-aciklama { font-size: 0.9375rem; color: var(--kil-govde); margin: 0; line-height: 1.45; } /* Noktalar (Pagination) */ .galeri-noktalar { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 32rem; } .galeri-nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--kil-sis); border: 0; padding: 0; cursor: pointer; transition: transform var(--gecis), background var(--gecis), width var(--gecis), border-radius var(--gecis); } .galeri-nokta:hover { background: var(--kil-govde); transform: scale(1.2); } .galeri-nokta[aria-selected="true"] { background: var(--firin-metin); width: 26px; border-radius: 99px; transform: none; } /* --- Temel alanlar ------------------------------------------------------ */ /* Kartlar artık bitişik gri bir ızgara değil, dört ayrı sır lekesi. */ .alanlar-izgara { display: grid; gap: var(--s-2); grid-template-columns: 1fr; padding-inline: var(--kenar); max-width: 1240px; margin-inline: auto; } @media (min-width: 44rem) { .alanlar-izgara { grid-template-columns: 1fr 1fr; } } @media (min-width: 72rem) { .alanlar-izgara { grid-template-columns: repeat(4, 1fr); } } .alan { background: var(--kagit-ust); padding: clamp(var(--s-3), 4vw, var(--s-4)); min-height: 15rem; display: flex; flex-direction: column; justify-content: flex-end; /* Köşeler kasten eşit değil: elle kesilmiş kâğıt gibi. */ border-radius: 26px 12px 24px 14px; transition: transform var(--gecis), box-shadow var(--gecis); } /* Her kart kendi sırını alıyor. */ .alan:nth-child(1) { background: var(--p-sari); } .alan:nth-child(2) { background: var(--p-yesil); } .alan:nth-child(3) { background: var(--p-mavi); } .alan:nth-child(4) { background: var(--p-turuncu); } .alan:nth-child(1) h3 { color: var(--firin-metin); } .alan:nth-child(2) h3 { color: var(--yesil-metin); } .alan:nth-child(3) h3 { color: var(--mavi-koyu); } .alan:nth-child(4) h3 { color: var(--mor); } /* Duruşları hafifçe farklı — dizilmiş değil, bırakılmış gibi. */ .alan:nth-child(odd) { transform: rotate(-0.7deg); } .alan:nth-child(even) { transform: rotate(0.6deg); } .alan:hover { transform: rotate(0deg) translateY(-6px); box-shadow: 0 18px 34px -20px rgba(46, 36, 32, 0.45); } .alan h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); margin-bottom: 0.6rem; } .alan p { font-size: 0.9375rem; color: var(--kil-govde); margin: 0; } .alan .alan-detay { margin-top: 0.75rem; } @media (min-width: 72rem) { .alanlar-izgara.genis { grid-template-columns: 1fr 1fr; } } .alanlar-izgara.genis .alan { min-height: 18rem; } /* --- Mini ÇAMUR sahnesi ------------------------------------------------- */ /* Koyu sahne artık siyaha yakın değil, kobalt sırı. */ .sahne { position: relative; background: var(--gece); color: var(--kagit-ust); overflow: hidden; } .sahne .kap { position: relative; z-index: 2; } .sahne-replik { font-family: var(--f-display); font-size: clamp(1.75rem, 1.2rem + 3vw, 3.5rem); font-weight: 600; letter-spacing: 0; line-height: 1.2; margin: 0; max-width: 18ch; transform: rotate(-1deg); } .sahne-replik.ikinci { margin-top: var(--s-3); margin-left: clamp(1rem, 6vw, 5rem); color: var(--sari); transform: rotate(1.2deg); } .sahne .kenardan { position: absolute; right: -4%; bottom: -6%; width: clamp(120px, 22vw, 260px); z-index: 1; pointer-events: none; opacity: 0.9; } /* --- Yaratıcı bölümü (/baran) ------------------------------------------- */ /* ÇAMUR, kendini yapan kişiyi tanıtıyor. Koyu zemin: sayfanın geri kalanından ayrılsın, bir "sahne" gibi dursun. data-koyu işareti menü rengini çeviriyor. Bu blok yalnızca /baran ve /en/baran sayfalarında kullanılıyor. Önce /hakkinda içinde de bir kopyası vardı; Baran sekmesi eklenince kaldırıldı, iki yerde duran aynı tanıtım tekrar oluyordu. */ .yaratici { background: var(--gece); color: var(--kagit-ust); } .yaratici-izgara { display: grid; gap: clamp(var(--s-3), 5vw, var(--s-5)); grid-template-columns: 1fr; align-items: center; } @media (min-width: 52rem) { .yaratici-izgara { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); } } .yaratici-gorsel { justify-self: center; width: 100%; max-width: 20rem; } .yaratici-gorsel img { width: 100%; height: auto; border-radius: 30px 16px 26px 18px; transform: rotate(-2deg); box-shadow: 0 28px 50px -26px rgba(0, 0, 0, 0.6); } .yaratici-imza { margin: var(--s-2) 0 0; text-align: center; font-size: 0.875rem; font-weight: 700; } .yaratici-imza a { color: var(--sari); text-decoration: none; border-bottom: 2px solid transparent; } .yaratici-imza a:hover { border-bottom-color: var(--sari); } .yaratici-metin h2 { font-size: clamp(1.75rem, 1.3rem + 2.4vw, 3rem); margin-bottom: var(--s-2); } .yaratici-metin p { color: var(--kagit-alt); } /* ÇAMUR'un araya sıkıştırdığı laf. */ .yaratici-replik { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem); font-weight: 600; color: var(--sari); transform: rotate(-1.5deg); margin-bottom: var(--s-3); } .yaratici .ok-link { color: var(--sari); border-bottom-color: var(--sari); } .yaratici .ok-link:hover { border-bottom-color: var(--kagit-ust); } /* Baran'ın iki adresi yan yana; dar ekranda alt alta düşüyor. */ .yaratici-baglanti { display: flex; flex-wrap: wrap; gap: 0.5rem clamp(1rem, 4vw, 2rem); } /* Yer tutucu koyu zeminde okunmuyordu: kendi renklerini alıyor. */ .yaratici .yer-tutucu { color: var(--kagit-alt); background: color-mix(in srgb, var(--sari) 12%, transparent); border-color: var(--sari); } .yaratici .yer-tutucu::before { color: var(--sari); } /* --- Görsel yeri -------------------------------------------------------- Henüz gelmemiş bir görselin yerini tutan kutu. Sitede hiçbir çizim üretilmiyor: her görsel yuvası bu kutuyla işaretli duruyor ve içindeki not oraya ne geleceğini söylüyor. Ölçü, oran ve dosya adlarının tam listesi GORSELLER.md içinde. Gerçek görsel gelince bu
silinip yerine konuyor. */ .gorsel-yeri { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; box-sizing: border-box; padding: 0.6rem; border: 2px dashed var(--firin); border-radius: 14px; background: color-mix(in srgb, var(--firin) 7%, transparent); text-align: center; line-height: 1.35; color: var(--kil-govde); } .gorsel-yeri::before { content: "GÖRSEL"; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.16em; color: var(--firin-koyu); } .gorsel-yeri b { font-size: 0.8125rem; font-weight: 700; color: var(--kil-koyu); } .gorsel-yeri small { font-size: 0.6875rem; opacity: 0.8; } /* Küçük yuvalar (yoldaş, telefonların çevresindeki pozlar): yalnızca ad sığıyor, ölçü notu düşüyor. Ayrıntı zaten GORSELLER.md'de. */ .gorsel-yeri--mini { padding: 0.3rem; border-radius: 10px; gap: 0.1rem; } .gorsel-yeri--mini::before { font-size: 0.5rem; letter-spacing: 0.1em; } .gorsel-yeri--mini b { font-size: 0.625rem; } .gorsel-yeri--mini small { display: none; } /* Telefon ekranı: kutu ekranın tamamını kaplasın. */ .telefon-ekran .gorsel-yeri { width: 100%; height: 100%; border-radius: 20px; } /* Koyu zeminde turuncu okunmuyor — metin yer tutucusuyla aynı çözüm. */ .yaratici .gorsel-yeri { aspect-ratio: 1; border-color: var(--sari); background: color-mix(in srgb, var(--sari) 12%, transparent); color: var(--kagit-alt); } .yaratici .gorsel-yeri::before { color: var(--sari); } .yaratici .gorsel-yeri b { color: var(--kagit-ust); } /* Bir bölüm, kendinden önceki hero'ya yapışsın istendiğinde: hero'nun alt dolgusu zaten var, ikincisini sıfırlıyoruz. Aradaki boşluk yarıya iniyor. */ .bolum-yakin { padding-top: 0; } /* --- Sahne görseli ------------------------------------------------------- Kendi zemini olan geniş illüstrasyon (/iletisim). Kesilmiş bir figür değil, çerçevelenmiş bir levha: yumuşak ve eşit olmayan köşeler, hafif eğim, yumuşak gölge — sitedeki kartlarla aynı tavır. Eğim statik; prefers-reduced-motion açıkken de duruyor, çünkü hareket değil duruş. (Aynı karar .yaratici-gorsel için de geçerli.) */ .sahne-gorsel { max-width: 52rem; margin-inline: auto; } .sahne-gorsel img { display: block; width: 100%; height: auto; border-radius: 26px 16px 24px 18px; transform: rotate(-1deg); box-shadow: 0 22px 44px -28px rgba(46, 36, 32, 0.45); } /* --- Görsel + metin ikilisi ---------------------------------------------- Açık zeminde yan yana duran görsel ve metin (/hakkinda → kusurlar). .yaratici-izgara'nın koyu sahneye bağlı olmayan hâli, ama .yazi'nin 46rem ölçüsünün içinde durduğu için görsel sütunu daha dar: metne yer kalsın. Görsellerin kendi zemini kâğıt rengiyle neredeyse aynı; bu yüzden çerçeve, gölge ya da köşe yuvarlaması yok. Kitap illüstrasyonu gibi sayfaya karışıyorlar — ana sayfadaki hero da böyle duruyor. */ .ikili { display: grid; gap: clamp(var(--s-2), 4vw, var(--s-4)); grid-template-columns: 1fr; align-items: center; } @media (min-width: 52rem) { .ikili { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); } } .ikili-gorsel { justify-self: center; width: 100%; max-width: 18rem; } .ikili-gorsel img { width: 100%; height: auto; display: block; } /* Görselin yanındaki ilk başlık, tek sütuna düştüğünde tepede gereksiz boşluk bırakmasın. */ .ikili h2:first-child { margin-top: 0; } /* Hareket azaltma açıkken galeri anında geçsin; dönüş animasyonu baş döndürücü olabiliyor. Formlar yine değişiyor, sadece arada animasyon yok. */ @media (prefers-reduced-motion: reduce) { .galeri-3d-cember, .galeri-telefon, .telefon-kasa-3d { transition: none !important; } } /* --- Vurgulu bölüm ------------------------------------------------------- Uzun bir metnin ortasında ayrı durması gereken blok (/baran → "Para meselesi"). Zemin ana sayfadaki .tanitim ile aynı: yeni renk üretilmiyor, yalnızca kâğıdın bir ton koyusu. İnce çizgiler bandın nerede başlayıp bittiğini söylüyor. */ .bolum-vurgu { background: var(--kagit-alt); border-block: 1px solid color-mix(in srgb, var(--kil-sis) 55%, transparent); } /* --- Öne çıkan cümle ----------------------------------------------------- Koyu sahnedeki .yaratici-replik'in açık zemindeki karşılığı: aynı el yazısı tavrı, aynı hafif eğrilik, farklı renk. Metnin ortasında nefes aldırıyor. */ .one-cikan { font-family: var(--f-display); font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem); font-weight: 600; line-height: 1.25; color: var(--firin-metin); transform: rotate(-1.5deg); margin-block: var(--s-4); max-width: 22ch; } /* --- İmza ---------------------------------------------------------------- Metnin sonundaki kapanış. Gövde yazısından bir tık büyük, biraz eğik — elle atılmış izlenimi. */ .imza { font-family: var(--f-display); font-size: 1.125rem; font-weight: 600; color: var(--kil-govde); transform: rotate(-1deg); margin-top: var(--s-3); } /* --- Yer tutucu --------------------------------------------------------- Gerçek metin/görsel gelmeden önce sayfada duran içerik. Kasıtlı olarak göze batıyor: yanlışlıkla yayına çıkmasın. Gerçek içerikle birlikte hem işaret hem bu blok silinir. */ .yer-tutucu { display: block; border: 1px dashed var(--firin); background: color-mix(in srgb, var(--firin) 6%, transparent); padding: var(--s-2); font-style: normal; font-size: 0.875rem; color: var(--kil-govde); } .yer-tutucu::before { content: "YER TUTUCU"; display: block; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; color: var(--firin-koyu); margin-bottom: 0.35rem; } /* --- E-posta onay sayfası ------------------------------------------------ Üç hâl aynı HTML'de duruyor, görünen tek biri. Seçimi assets/onay.js yapıyor: kapsayıcıya data-onay="basarili|suresi-dolmus|dogrudan" yazıyor. Gizleme .js-var'a BAĞLI DEĞİL, bilerek: JS kapalıysa data-onay hiç değişmez, "bekliyor" olarak kalır ve yalnızca nötr hâl görünür. Onay ve hata mesajları varsayılan olarak gizli — kimse JS kapalıyken yanlışlıkla "üyeliğin tamamlandı" görmüyor. */ .onay > [data-durum="basarili"], .onay > [data-durum="suresi-dolmus"] { display: none; } .onay[data-onay="basarili"] > [data-durum="basarili"], .onay[data-onay="suresi-dolmus"] > [data-durum="suresi-dolmus"] { display: block; } /* Karar verildiğinde nötr hâl çekiliyor. */ .onay[data-onay="basarili"] > [data-durum="dogrudan"], .onay[data-onay="suresi-dolmus"] > [data-durum="dogrudan"] { display: none; } /* Odak alan başlıkta kesik çerçeve çıkmasın — odak buraya klavyeyle değil, JS eliyle geldi; görsel bir odak halkası kafa karıştırırdı. */ .onay h1:focus { outline: none; } /* ÇAMUR'un araya sıkıştırdığı laf — /hakkinda'daki replikle aynı dil. */ .onay-replik { font-family: var(--f-display); font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem); font-weight: 600; color: var(--firin-metin); transform: rotate(-1.2deg); margin: var(--s-3) 0; } .onay-not { font-size: 0.875rem; color: var(--kil-govde); margin-top: var(--s-2); } /* --- CTA ---------------------------------------------------------------- */ .cta { text-align: center; } .cta-baslik { font-size: clamp(2.25rem, 1.5rem + 5vw, 5rem); line-height: 0.95; margin-bottom: var(--s-2); } .cta-ikinci { font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem); font-weight: 500; color: var(--kil-govde); margin: 0 auto var(--s-4); } /* CTA bölümü kendi sırını alıyor: sayfanın en canlı yeri burası. */ .cta { background: var(--p-sari); } .cta .cta-baslik { color: var(--firin-metin); } .cta .magaza:not([aria-disabled="true"]) { background: var(--mavi); } .cta .magaza:not([aria-disabled="true"]):hover { background: var(--mavi-koyu); } .cta .magaza[aria-disabled="true"] { background: var(--kagit-ust); } /* --- Footer + tersine dönüşüm ------------------------------------------- */ .dip { border-top: 3px solid var(--sari); padding-block: var(--s-4) var(--s-3); font-size: 0.875rem; } .dip-cokme { display: grid; place-items: center; padding-bottom: var(--s-3); } .dip-cokme img { width: clamp(64px, 12vw, 104px); height: auto; } .dip-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); align-items: flex-start; padding-top: var(--s-3); border-top: 1px solid var(--kil-sis); } .dip-izgara ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .dip-izgara a { text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--gecis), border-color var(--gecis); } .dip-izgara a:hover { color: var(--firin-metin); border-bottom-color: var(--firin); } .dip-telif { color: var(--kil-govde); font-size: 0.8125rem; margin: 0; } .dip-izgara .etiket { margin-bottom: 0.75rem; } @media (min-width: 48rem) { .dip-izgara { grid-template-columns: repeat(4, 1fr); } } /* --- Scroll reveal ------------------------------------------------------ Gizleme yalnızca .js-var varken uygulanır. main.js yüklenmezse içerik opacity:0'da kilitlenip sayfanın yarısı görünmez kalmasın. */ .js-var [data-beliren] { opacity: 0; transform: translateY(18px); transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1); } .js-var [data-beliren="acik"] { opacity: 1; transform: none; } /* --- 404 ---------------------------------------------------------------- */ .dortyuzdort { min-height: 70svh; display: grid; align-content: center; } .dortyuzdort .kod { font-family: var(--f-display); font-size: clamp(4rem, 2rem + 14vw, 10rem); font-weight: 800; line-height: 0.85; letter-spacing: -0.05em; color: var(--mavi); margin: 0 0 var(--s-2); transform: rotate(-2deg); } /* --- İç sayfalar (gizlilik / koşullar) ---------------------------------- */ /* Sade menü — İngilizce yasal sayfalarda. Marka + dil bağlantısı, o kadar; Türkçe pazarlama sayfalarına İngilizce etiketle link vermek yanıltıcı olurdu. */ /* Yasal sayfalardaki alt başlıklar */ .yazi h3 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); margin-top: var(--s-3); margin-bottom: var(--s-1); color: var(--kil-govde); } /* Veri tablosu — gizlilik metnindeki özet. Dar ekranda sayfayı yatay kaydırtmasın diye kendi kutusunda kayar. */ .tablo-kaydir { overflow-x: auto; max-width: var(--olcu); margin-bottom: var(--s-3); -webkit-overflow-scrolling: touch; } .veri-tablo { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: 0.9375rem; text-align: left; } .veri-tablo th, .veri-tablo td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--kil-sis); vertical-align: top; } .veri-tablo thead th { background: var(--p-sari); border-bottom: 2px solid var(--sari); font-weight: 700; } .veri-tablo tbody tr:last-child td { border-bottom: 0; } .veri-tablo tbody tr:nth-child(even) { background: var(--kagit-ust); } .metin-sayfa .guncelleme { color: var(--kil-govde); font-size: 0.875rem; margin-bottom: var(--s-4); } .metin-sayfa ul { max-width: var(--olcu); padding-left: 1.2em; } .metin-sayfa h1 { font-size: clamp(2rem, 1.5rem + 3vw, 3.5rem); } .metin-sayfa li { margin-bottom: 0.5rem; } .taslak-uyari { border-left: 3px solid var(--firin); background: var(--kagit-alt); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-4); max-width: var(--olcu); font-size: 0.9375rem; } .taslak-uyari p:last-child { margin-bottom: 0; } /* --- Hareket azaltma ---------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } /* Nefes alma ve yoldaşın giriş hareketi dursun; formlar yine değişsin. */ .camur-selam { animation: none; } .yoldas { transform: none; } .yoldas-form { transform: none; } /* .js-var [data-beliren] ile aynı özgüllükte olmalı, yoksa kaybeder. */ .js-var [data-beliren] { opacity: 1; transform: none; } /* Statik eğimler kalır — duruş, hareket değil. Ama hover'da kayma/dönme olmaz: imleç gezdirirken sayfa oynamasın. */ .alan:nth-child(odd):hover { transform: rotate(-0.7deg); } .alan:nth-child(even):hover { transform: rotate(0.6deg); } .magaza:hover, .magaza[aria-disabled="true"]:hover, .marka:hover { transform: none; } .ok-link:hover::after { transform: none; } }