/* ============================================================================
Ramble — site stili
• Yazı tipi: ui-rounded = uygulamanın kendi SF Rounded'ı. Web fontu YOK.
(Site "sıfır üçüncü taraf isteği" sözü veriyor; Google Fonts bunu bozardı.)
• Renk: her şey aktif temadan gelir. Sabit hex yok — 24 tema canlı değişir.
• Kaynak: Ramble/Core/Theme/ThemeCatalog.swift → assets/themes.js
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
/* ---------------------------------------------------------------- tokens */
:root {
/* Varsayılan = Peach Cream (uygulamanın açılış teması). JS ile değişir. */
--bg: #FBF6EF; --elev: #FFFDFA; --surf: #FFFFFF; --sep: #EFE6DB;
--t1: #4A4039; --t2: #9B8F85; --t3: #C3B9AF;
--ac: #E89B85; --acs: #F7DDD2; --acd: #D9826B; --rec: #E27D6B;
/* ⛔ OKUMA RENGİ. --t2 uygulamanın İKİNCİL etiket rengi; web'de gövde metni
olarak kullanılınca Peach Cream'de 2.93:1 çıkıyor — WCAG AA 4.50 ister.
Ölçüldü ve düzeltildi 0826. Gövde metni için --text, silik için --muted
KULLAN; çıplak --t2/--t3'ü metne verme. */
--text: color-mix(in oklab, var(--t1) 65%, var(--t2)); /* 6.06:1 açıkta, 12:1 koyuda */
--muted: color-mix(in oklab, var(--t1) 48%, var(--t2)); /* ~4.9:1 */
/* Türetilmişler — tema değişince kendiliğinden takip eder */
--ring: color-mix(in oklab, var(--ac) 55%, transparent);
--hair: color-mix(in oklab, var(--sep) 82%, transparent);
--glass: color-mix(in oklab, var(--elev) 78%, transparent);
--shade: color-mix(in oklab, var(--t1) 9%, transparent);
--maxw: 1180px;
--readw: 68ch;
--gut: clamp(1.15rem, 4vw, 2.75rem);
/* akışkan tip ölçeği */
--s-2: clamp(.72rem, .70rem + .10vw, .78rem);
--s-1: clamp(.83rem, .80rem + .16vw, .93rem);
--s0: clamp(1rem, .96rem + .22vw, 1.12rem);
--s1: clamp(1.19rem, 1.10rem + .42vw, 1.42rem);
--s2: clamp(1.44rem, 1.26rem + .84vw, 2.05rem);
--s3: clamp(1.86rem, 1.48rem + 1.78vw, 3.05rem);
--s4: clamp(2.42rem, 1.66rem + 3.5vw, 4.6rem);
--s5: clamp(2.85rem, 1.5rem + 5.6vw, 5.5rem);
--navh: 4.4rem;
/* ⛔ TABLO PALETİ — Van Gogh, Yıldızlı Gece'den ImageMagick histogramıyla
ÖRNEKLENDİ (2026-08-27). Göze göre uydurulmadı. Tabloyu değiştirirsen
yeniden örnekle. Hero metni, nav mürekkebi ve buton bunlara bağlı;
silersen hero yazısı karararak okunmaz olur (bir kez oldu). */
--vg-night: #1A2340; /* gece ultramarin */
--vg-deep: #27335A; /* derin lacivert */
--vg-blue: #4D6E99; /* orta mavi */
--vg-moon: #D8C464; /* ay / yıldız */
--vg-haze: #BDC58C; /* pus */
--vg-ink: #F6F2E6; /* yıldız parıltısı — hero metni */
--vg-cream: #F3EEDF; /* buton zemini */
--frame: 0px; /* çerçeve kaldırıldı — 0 bırakıldı ki ona bağlı dolgular bozulmasın */
--r-s: 12px; --r-m: 18px; --r-l: 26px; --r-x: 34px;
--sh-1: 0 1px 2px var(--shade);
--sh-2: 0 2px 5px var(--shade), 0 12px 26px -14px var(--shade);
--sh-3: 0 4px 10px var(--shade), 0 30px 60px -26px var(--shade);
--ease: cubic-bezier(.22,.68,.32,1);
color-scheme: light;
}
:root[data-dark="1"] { color-scheme: dark; }
body {
margin: 0;
background: var(--bg);
color: var(--t1);
font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
"Segoe UI Variable Display", "Segoe UI", Nunito, Quicksand,
system-ui, sans-serif;
font-size: var(--s0);
line-height: 1.62;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
transition: background-color .5s var(--ease), color .5s var(--ease);
}
/* dil görünürlüğü */
[data-lang] { display: none; }
:root[data-l="en"] [data-lang="en"],
:root[data-l="tr"] [data-lang="tr"] { display: revert; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.skip {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--acd); color: var(--surf); padding: .7rem 1.1rem; border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }
:where(a, button, [tabindex]):focus-visible {
outline: 2.5px solid var(--ring); outline-offset: 3px; border-radius: 6px;
}
h1, h2, h3 { line-height: 1.1; letter-spacing: -.018em; text-wrap: balance; font-weight: 700; }
h1 { font-size: var(--s4); }
h2 { font-size: var(--s3); }
h3 { font-size: var(--s1); letter-spacing: -.014em; }
p { text-wrap: pretty; }
.lede { font-size: var(--s1); color: var(--text); max-width: var(--readw); line-height: 1.5; }
.eyebrow {
font-family: ui-serif, "New York", Georgia, "Times New Roman", serif;
font-size: var(--s-1); font-weight: 600; font-style: italic;
letter-spacing: .02em; text-transform: none;
color: color-mix(in oklab, var(--acd) 78%, var(--t3));
}
section { padding-block: clamp(4rem, 10vw, 8.5rem); }
.sec-head { display: grid; gap: .85rem; margin-bottom: clamp(2.2rem, 5vw, 3.6rem); }
/* ------------------------------------------------------------------- nav */
/* ⛔ Yarı saydam bej cam koyu hero'nun üstünde ÇAMUR gibi görünüyordu.
Ya tamamen şeffaf ya tamamen opak — arada bulanık bir ton yok. */
/* Koyu hero'nun üstündeyken nav şeffaf durur ve açık mürekkebe geçer —
Untold ve Pillowtalk'ta da böyle: tepede kroma yok, sadece marka ve birkaç link.
Kaydırınca camlaşıp normal renklerine döner. */
.brand img { width: 34px; height: 34px; aspect-ratio: 1; flex: none; border-radius: 8.5px; box-shadow: var(--sh-1); }
.nav__spacer { flex: 1; }
.nav__links { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.5rem); }
.navlink { text-decoration: none; color: var(--text); font-size: var(--s-1); font-weight: 600; padding: .45rem .2rem; transition: color .2s; }
.navlink:hover { color: var(--t1); }
.navlink[aria-current="page"] { color: var(--t1); }
.navlink[aria-current="page"]::after {
content: ""; display: block; height: 2px; border-radius: 2px; margin-top: 2px;
background: linear-gradient(90deg, var(--ac), var(--acd));
}
/* marka ikonu: küçük 3B eğim */
.brand img { transition: transform .3s var(--ease); }
.brand:hover img { transform: perspective(300px) rotateY(-16deg) rotateX(6deg) scale(1.06); }
@media (max-width: 800px) { .navlink { display: none; } }
.pillgroup { display: inline-flex; background: color-mix(in oklab, var(--t1) 7%, transparent); border-radius: 999px; padding: 3px; gap: 2px; }
.pillgroup button {
border: 0; background: transparent; color: var(--text); cursor: pointer;
font-size: var(--s-2); font-weight: 700; letter-spacing: .04em;
padding: .34rem .68rem; border-radius: 999px; transition: all .22s var(--ease);
}
.pillgroup button[aria-pressed="true"] { background: var(--surf); color: var(--t1); box-shadow: var(--sh-1); }
.themebtn {
display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
border: 1px solid var(--hair); background: var(--surf); color: var(--t1);
border-radius: 999px; padding: .34rem .78rem .34rem .4rem;
font-size: var(--s-2); font-weight: 700; box-shadow: var(--sh-1);
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.themebtn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.themebtn__dot {
width: 22px; height: 22px; border-radius: 999px; flex: none;
background: linear-gradient(140deg, var(--ac), var(--acd));
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--surf) 80%, transparent);
}
/* ---------------------------------------------------------------- doku */
/* ⛔ Bu grenin AMACI var, süs değil. Untold tuval dokusu, Pillowtalk ten greni,
Stoic film greni kullanıyor; pürüzsüz düz vektör yüzeyler "üretilmiş" hissi
veriyor. Prosedürel SVG gürültüsü — sıfır ağ isteği, sıfır dosya. Kaldırma. */
:root { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.grain { position: relative; }
.grain::after {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
background-image: var(--grain); background-size: 240px 240px;
opacity: .26;
}
/* ⛔ BURADA position:fixed + mix-blend-mode OLAN BİR KATMAN VARDI. Tarayıcıyı
her kaydırma karesinde tüm ekranı yeniden harmanlamaya zorluyordu; sayfa
gözle görülür şekilde kasıyordu. Gren artık sadece bölüm bazında, sabit
değil. Tam ekran sabit karışım katmanı EKLEME. */
/* ------------------------------------------------------------------ hero */
/* Kategori dili: Untold/Pillowtalk/Stoic üçü de hero'yu ATMOSFER olarak kurar —
tam genişlik, donuk, tek mesaj. Onlarda bu bir fotoğraf; bizde 3B ses heykeli.
Zemin her temada o temanın vurgu rengiyle tonlanan koyu bir alan. */
.hero {
position: relative; overflow: clip;
padding-block: clamp(4rem, 11vw, 8.5rem) clamp(4rem, 10vw, 7.5rem);
transition: background-color .6s var(--ease);
}
/* ⛔ Hero nav'ın ALTINA girer, yoksa şeffaf nav açık zeminin üstünde kalır ve
açık mürekkep görünmez olur (0826'da tam bu oldu). Negatif marj + eşit dolgu. */
/* ⛔ BURADA `.hero > * { position: relative }` VARDI. Tablonun
`position:absolute`unu eziyor, tablo ızgaraya giriyor ve perde üstünü
kapatıyordu — hero simsiyah kalıyordu (0827). Katmanları TEK TEK ver. */
/* ⛔ Sert kesme yerine yumuşak sönümlenme. Owner: "tuvallerdeki gibi bir renk
geçişi yap". Hero'nun dibi sayfa zeminine erir; çizgi görünmez. */
.hero__fade {
position: absolute; inset-inline: 0; bottom: 0; height: clamp(90px, 14vh, 190px);
z-index: 1; pointer-events: none;
background: linear-gradient(to bottom,
color-mix(in oklab, var(--heroBg) 0%, transparent) 0%,
color-mix(in oklab, var(--bg) 46%, transparent) 62%,
var(--bg) 100%);
}
.hero__grid {
display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__copy { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); justify-items: start; }
.hero__sub { font-size: var(--s1); color: var(--text); max-width: 34ch; line-height: 1.45; }
.badges { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }
/* Hero'da tek eylem kaldı — rozet buna göre büyüdü */
.badge-appstore { height: 56px; width: auto; transition: transform .22s var(--ease); }
.hero .badge-appstore { height: clamp(62px, 6.4vw, 82px); }
.badge-appstore:hover { transform: translateY(-2px) scale(1.02); }
.soon {
font-size: var(--s-2); font-weight: 700;
color: color-mix(in oklab, var(--heroInk, var(--acd)) 80%, transparent);
background: color-mix(in oklab, #fff 12%, transparent);
border: 1px solid color-mix(in oklab, #fff 18%, transparent);
border-radius: 999px; padding: .42rem .85rem; letter-spacing: .02em;
}
.facts { display: flex; flex-wrap: wrap; gap: .55rem 1.5rem; color: var(--text); font-size: var(--s-1); font-weight: 600; }
.facts li { display: flex; align-items: center; gap: .45rem; }
.facts svg { width: 15px; height: 15px; flex: none; color: var(--acd); }
/* 3B sahne */
.stage { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 640px; margin-inline: auto; }
.stage::after {
content: ""; position: absolute; inset: 8% 2% 2%;
background: radial-gradient(58% 52% at 50% 46%, color-mix(in oklab, var(--ac) 42%, transparent), transparent 70%);
z-index: -1; pointer-events: none;
}
.stage canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; border-radius: var(--r-x); }
.stage canvas.is-dragging { cursor: grabbing; }
/* WebGL yoksa gerçek ikon devreye girer */
.stage canvas[data-fallback] { display: none; }
.stage__fb { display: none; position: absolute; inset: 0; place-items: center; }
.stage canvas[data-fallback] ~ .stage__fb { display: grid; }
.stage__fb img { width: 56%; height: auto; aspect-ratio: 1; border-radius: 22%; box-shadow: var(--sh-3); }
.stage__hint {
position: absolute; inset-inline: 0; bottom: -.2rem; text-align: center;
font-size: var(--s-2); font-weight: 600; pointer-events: none;
color: color-mix(in oklab, var(--heroInk) 46%, transparent);
}
/* alt sayfa başlıklarındaki küçük 3B dalga */
.ministage { width: clamp(120px, 17vw, 190px); aspect-ratio: 1.35; margin-left: -.6rem; }
.ministage canvas { width: 100%; height: 100%; cursor: grab; touch-action: pan-y; }
.ministage canvas.is-dragging { cursor: grabbing; }
.ministage canvas[data-fallback] { display: none; }
/* ------------------------------------------------------------------ band */
.band { border-block: 1px solid var(--hair); background: var(--elev); padding-block: clamp(2rem, 4vw, 3rem); }
.band__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(1.3rem, 3vw, 2.6rem); }
.stat { display: grid; gap: .28rem; }
.stat b { font-size: var(--s2); font-weight: 700; letter-spacing: -.03em; color: var(--acd); font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--s-1); color: var(--text); font-weight: 600; line-height: 1.35; }
/* -------------------------------------------------------------- features */
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(1.8rem, 4vw, 3.2rem) clamp(2rem, 5vw, 4rem); }
/* ⛔ Bunlar KUTU DEĞİL. İkon+başlık+açıklama düzeninde tek tip, kenarlıklı,
gölgeli kart ızgarası kategorinin hiçbir ciddi sitesinde yok — AI iniş
sayfasının en tanınan kalıbı o. Kutuyu geri koyma; ayırıcı ince çizgi yeter. */
.card {
background: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0;
padding: 1.5rem 0 0; display: grid; gap: .45rem; align-content: start; box-shadow: none;
transition: none;
}
.card:hover .card__ico { color: var(--acd); transform: translateY(-2px); }
.card__ico {
width: auto; height: auto; border-radius: 0; display: block; background: none; box-shadow: none;
color: color-mix(in oklab, var(--acd) 70%, var(--t3)); margin-bottom: .5rem;
transition: color .25s var(--ease), transform .25s var(--ease);
}
.card__ico svg { width: 22px; height: 22px; }
.card p { color: var(--text); font-size: var(--s-1); line-height: 1.58; }
/* --------------------------------------------------------------- screens */
.rail {
display: grid; grid-auto-flow: column; grid-auto-columns: min(272px, 62vw);
gap: clamp(1rem, 2.4vw, 1.9rem); overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; padding-block: .5rem 1.6rem;
padding-inline: max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut)));
scrollbar-width: thin;
}
.rail { perspective: 1500px; }
.rail > figure { scroll-snap-align: center; display: grid; gap: .9rem; transform-style: preserve-3d; }
/* Kaydırma ile sürülen 3B giriş. Kademeli: kartlar sırayla doğrulur.
Desteklemeyen tarayıcıda hiçbir şey olmaz — içerik zaten görünür. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.rail > figure {
animation: shotIn linear both;
animation-timeline: view(block);
animation-range: entry 4% cover 26%;
}
.rail > figure:nth-child(2) { animation-range: entry 8% cover 30%; }
.rail > figure:nth-child(3) { animation-range: entry 12% cover 34%; }
.rail > figure:nth-child(4) { animation-range: entry 16% cover 38%; }
.rail > figure:nth-child(5) { animation-range: entry 20% cover 42%; }
}
}
@keyframes shotIn {
from { opacity: .18; transform: rotateY(-26deg) rotateX(9deg) translateZ(-140px) translateY(38px); }
to { opacity: 1; transform: none; }
}
.shot {
border-radius: clamp(20px, 3.4vw, 30px); overflow: hidden;
border: 1px solid var(--hair); background: var(--elev);
box-shadow: var(--sh-3);
transition: transform .35s var(--ease);
}
.rail > figure:hover .shot { transform: perspective(1200px) translateY(-7px) rotateY(-5deg) rotateX(2deg); }
.shot img { width: 100%; height: auto; display: block; }
.rail figcaption { font-size: var(--s-1); color: var(--text); font-weight: 600; text-align: center; }
/* ---------------------------------------------------------------- themes */
.themewall { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .55rem; perspective: 1200px; }
/* ⛔ Kutular her temanın KENDİ rengini gösterir; koyu temada açık kutular
sırıtmasın diye hepsi aynı ince çerçeveye oturur ve parlaklığı biraz kısılır. */
.sw {
position: relative; cursor: pointer; background: transparent;
border: 1px solid color-mix(in oklab, var(--t1) 16%, transparent);
border-radius: var(--r-m); padding: 0; overflow: hidden; text-align: left;
transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.sw { filter: saturate(.94) brightness(.98); }
.sw:hover, .sw[aria-pressed="true"] { filter: none; }
.sw:hover { transform: perspective(700px) translateY(-4px) rotateX(4deg) scale(1.05); box-shadow: var(--sh-2); z-index: 2; }
.sw[aria-pressed="true"] { border-color: var(--acd); box-shadow: 0 0 0 2px var(--ring), var(--sh-2); }
.sw__prev { height: 56px; display: grid; place-items: center; position: relative; }
.sw__bars { display: flex; align-items: center; gap: 2.5px; height: 28px; }
.sw__bars i { display: block; width: 3.5px; border-radius: 2px; }
.sw__meta { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .4rem .5rem; background: var(--surf); border-top: 1px solid var(--hair); }
.sw__name { font-size: var(--s-2); font-weight: 700; letter-spacing: -.005em; }
/* ⛔ Buraya FREE/PLUS rozeti KOYMA. Owner ölçtü: rozet görünce insanlar
siteyi üyelik gerektiren bir şey sanıyor. Temalar burada sadece denenir. */
/* --------------------------------------------------------------- privacy */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(1.4rem, 3.4vw, 3.2rem); align-items: center; }
.vow { display: grid; gap: 1rem; }
.vow li { display: grid; grid-template-columns: 24px 1fr; gap: .85rem; align-items: start; color: var(--text); font-size: var(--s-1); }
.vow svg { width: 20px; height: 20px; color: var(--acd); margin-top: .18rem; }
.vow b { color: var(--t1); font-weight: 700; }
.plaque {
background: linear-gradient(155deg, var(--acs), color-mix(in oklab, var(--acs) 40%, var(--surf)));
border: 1px solid color-mix(in oklab, var(--ac) 34%, var(--hair));
border-radius: var(--r-l); padding: clamp(1.6rem, 3.2vw, 2.4rem); display: grid; gap: .8rem;
box-shadow: var(--sh-2);
}
.plaque__q { font-size: var(--s2); font-weight: 700; letter-spacing: -.028em; color: var(--acd); }
/* App Store gizlilik etiketi — Apple'ın kendi yerleşimi */
.nutrition {
background: var(--surf); border: 1px solid var(--hair); border-radius: var(--r-l);
padding: clamp(1.3rem, 2.6vw, 1.8rem); display: grid; gap: 1rem; box-shadow: var(--sh-2);
}
.nutrition__h {
font-size: var(--s-2); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--muted); padding-bottom: .9rem; border-bottom: 1px solid var(--hair);
}
.nutrition__row { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; align-items: start; }
.nutrition__ico {
width: 46px; height: 46px; aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center;
background: linear-gradient(150deg, var(--acs), color-mix(in oklab, var(--acs) 45%, var(--surf)));
color: var(--acd);
}
.nutrition__ico svg { width: 25px; height: 25px; }
.nutrition__t { display: block; font-size: var(--s1); font-weight: 700; letter-spacing: -.02em; margin-bottom: .2rem; }
.nutrition__d { color: var(--text); font-size: var(--s-1); line-height: 1.5; }
.nutrition__link { font-weight: 700; color: var(--acd); text-decoration: none; font-size: var(--s-1); }
.nutrition__link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* --------------------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); align-items: start; }
.plan { background: var(--surf); border: 1px solid var(--hair); border-radius: var(--r-l); padding: clamp(1.5rem, 2.8vw, 2.1rem); display: grid; gap: .9rem; box-shadow: var(--sh-1); }
.plan[data-hi] { border-color: var(--acd); box-shadow: 0 0 0 1px var(--acd), var(--sh-3); position: relative; }
.plan[data-hi]::before {
content: attr(data-hi); position: absolute; top: -.72rem; inset-inline-start: clamp(1.5rem, 2.8vw, 2.1rem);
background: var(--acd); color: var(--surf); font-size: 10px; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; padding: .26rem .62rem; border-radius: 999px;
}
.plan__alt { font-size: var(--s-2); color: var(--text); line-height: 1.5; }
.plan ul { display: grid; gap: .5rem; margin-top: .2rem; }
.plan li { display: grid; grid-template-columns: 17px 1fr; gap: .6rem; font-size: var(--s-1); color: var(--text); align-items: start; }
.plan li svg { width: 15px; height: 15px; color: var(--acd); margin-top: .3rem; }
/* ============================================================================
SSS — gruplu akordiyon
----------------------------------------------------------------------------
⛔ Tek sütun. İki sütun denenmemeli: bir soru açılınca öteki sütun kayıyor
ve kullanıcı okuduğu satırı kaybediyor.
⛔ Gösterge OK değil ARTI. Ok "aşağı bir şey var" der; artı "aç/kapa" der ve
açıkken çarpıya dönerek durumu SÖYLER. Eski çift kenarlı ok, açıkken
yukarı bakan bir oka dönüyordu ve bu "yukarı git" gibi okunuyordu.
========================================================================== */
.faq__group + .faq__group { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.faq__head {
font-size: var(--s-2); font-weight: 800;
letter-spacing: .1em; text-transform: uppercase;
color: var(--acd); margin-bottom: .5rem;
}
details.acc { border-bottom: 1px solid var(--hair); }
details.acc:first-of-type { border-top: 1px solid var(--hair); }
details.acc > summary {
cursor: pointer; list-style: none; padding: 1.25rem 3rem 1.25rem 0; position: relative;
font-weight: 700; font-size: var(--s0); letter-spacing: -.012em; color: var(--t1);
transition: color .2s var(--ease);
}
details.acc > summary:hover { color: var(--acd); }
details.acc > summary::-webkit-details-marker { display: none; }
/* Yuvarlak gösterge */
details.acc > summary::before {
content: ""; position: absolute; inset-inline-end: 0; top: 50%;
width: 26px; height: 26px; margin-top: -13px; border-radius: 999px;
border: 1px solid var(--hair); background: var(--elev);
transition: background .24s var(--ease), border-color .24s var(--ease);
}
/* Artı → çarpı: iki çizgi, biri döner. */
details.acc > summary::after {
content: ""; position: absolute; inset-inline-end: 6px; top: 50%;
width: 14px; height: 14px; margin-top: -7px;
background:
linear-gradient(var(--t2), var(--t2)) center / 11px 1.6px no-repeat,
linear-gradient(var(--t2), var(--t2)) center / 1.6px 11px no-repeat;
transition: transform .3s var(--ease), background .24s var(--ease);
}
details.acc[open] > summary::before { background: var(--acs); border-color: transparent; }
details.acc[open] > summary::after {
transform: rotate(45deg);
background:
linear-gradient(var(--acd), var(--acd)) center / 11px 1.6px no-repeat,
linear-gradient(var(--acd), var(--acd)) center / 1.6px 11px no-repeat;
}
@media (prefers-reduced-motion: reduce) {
details.acc > summary::after { transition: none; }
}
details.acc > div {
padding-bottom: 1.45rem; color: var(--text);
font-size: var(--s-1); line-height: 1.7; max-width: var(--readw);
}
details.acc > div a { color: var(--acd); text-decoration: underline; text-underline-offset: 3px; }
.fine { font-size: var(--s-2); color: var(--muted); line-height: 1.6; max-width: var(--readw); }
/* ------------------------------------------------------------------- cta */
/* ============================================================================
KAPANIŞ — Turner'ın şafağı
----------------------------------------------------------------------------
⛔ İNDİR bölümünün TERSİ: orada koyu tablo + açık yazı, burada açık tablo +
koyu yazı. Sayfanın sonu iki koyu bölümle bitmesin diye böyle; ikisini
aynı yaparsan kapanış, indirme bölümünün tekrarı gibi okunuyor.
⛔ Perde tabloyu YIKAMAZ, yalnız metnin arkasını açar. Akış bölümünde
ölçülmüş ders: krem üstüne krem koyunca tablo gri bir duvara dönüyor.
========================================================================== */
.cta {
position: relative; isolation: isolate; overflow: clip;
padding-block: clamp(6rem, 14vw, 10rem);
background: var(--bg);
}
.cta__art { position: absolute; inset: 0; z-index: 0; }
/* Güneş tuvalin üst ortasında; kadraj daralınca onu kaybetmeyelim. */
.cta__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.cta__veil {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
/* metnin arkası — dar ve yumuşak */
radial-gradient(46% 44% at 50% 50%, rgba(253,249,241,.72), rgba(253,249,241,.28) 58%, transparent 82%),
/* üstte SSS'in kremine, altta altbilgiye erisin: sert kenar kalmasın */
linear-gradient(to bottom, var(--bg) 0%, rgba(253,249,241,.10) 16%, rgba(253,249,241,.10) 82%, var(--bg) 100%);
}
.cta__in {
position: relative; z-index: 2;
text-align: center; display: grid; gap: 1.3rem; justify-items: center; align-items: center;
}
/* ⛔ align-self + aspect-ratio ŞART. Kap bir grid; bunlar olmadan img dikeyde
stretch alır ve kare ikon uzun bir hapa dönüşür (0826'da tam bu oldu). */
.cta__mark {
width: clamp(90px, 14vw, 128px); height: auto; aspect-ratio: 1; align-self: center;
border-radius: 23%; box-shadow: 0 22px 50px -18px rgba(60,44,28,.55);
}
.cta__in h2 { text-shadow: 0 1px 18px rgba(253,249,241,.9); }
.cta__sub {
font-size: var(--s0); color: var(--text); max-width: 40ch; line-height: 1.6;
text-shadow: 0 1px 14px rgba(253,249,241,.9);
}
.cta__btn { display: inline-flex; margin-top: .3rem; }
.cta__btn img {
height: clamp(52px, 5.2vw, 66px); width: auto; border-radius: 11px;
box-shadow: 0 16px 36px -14px rgba(60,44,28,.6);
transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cta__btn:hover img { transform: translateY(-2px); box-shadow: 0 22px 46px -14px rgba(60,44,28,.7); }
@media (prefers-reduced-motion: reduce) { .cta__btn:hover img { transform: none; } }
/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--hair); background: var(--elev); padding-block: clamp(2.4rem, 5vw, 3.6rem); }
.foot__in { display: grid; gap: 1.6rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.foot__links a { color: var(--text); text-decoration: none; font-size: var(--s-1); font-weight: 600; }
.foot__links a:hover { color: var(--acd); text-decoration: underline; text-underline-offset: 3px; }
.foot__note { color: var(--muted); font-size: var(--s-2); }
/* ------------------------------------------------------------ theme sheet */
.sheet[hidden] { display: none; }
.sheet {
position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center;
background: color-mix(in oklab, var(--t1) 34%, transparent);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
animation: fade .28s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.sheet__panel {
width: min(880px, 100%); max-height: 86vh; overflow-y: auto;
background: var(--bg); border-radius: var(--r-x) var(--r-x) 0 0;
padding: clamp(1.3rem, 3vw, 2.1rem); box-shadow: var(--sh-3);
animation: rise .34s var(--ease);
}
@keyframes rise { from { transform: translateY(26px); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.sheet__x { border: 0; background: color-mix(in oklab, var(--t1) 8%, transparent); color: var(--t1); width: 34px; height: 34px; border-radius: 999px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.sheet h2 { font-size: var(--s1); }
.sheet__grp { font-size: var(--s-2); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 1.4rem 0 .7rem; }
.sheet__grp:first-of-type { margin-top: 0; }
/* ------------------------------------------------------------- animation */
/* ⛔ Gizleme SADECE .js altında. JS çökerse/kapalıysa içerik görünür kalmalı —
opacity:0'ı JS'e bağlamak sayfayı boş bırakır. */
.js .rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rise { opacity: 1; transform: none; } }
/* ============================================================================
BELGE SAYFALARI — /privacy/ /terms/ /support/ /accessibility/ /delete-data/
Bu sayfalar ana sayfadan FARKLI sınıf adları kullanıyor (.doc, .lead, .note,
.footer …). 0826'da styles.css baştan yazılınca bu blok düşmüş ve beş sayfa
çıplak kalmıştı — devasa başlıklar, sıfır hizalama.
⛔ Ana sayfa sınıflarını yeniden adlandırırsan buraya da bak.
========================================================================== */
.doc { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(4rem, 9vw, 7rem); }
.doc .wrap { max-width: 900px; }
.doc__head { display: grid; gap: .5rem; margin-bottom: clamp(1.6rem, 3.5vw, 2.4rem); }
.doc__head h1 { font-size: var(--s3); letter-spacing: -.03em; }
.doc__head .sub { color: var(--text); font-size: var(--s1); line-height: 1.45; }
.doc__card {
background: var(--surf); border: 1px solid var(--hair); border-radius: var(--r-l);
padding: clamp(1.5rem, 4vw, 2.6rem); box-shadow: var(--sh-1);
}
.doc__pill {
display: inline-block; margin-bottom: 1.1rem;
background: var(--acs); color: var(--acd);
font-size: var(--s-2); font-weight: 700; letter-spacing: .02em;
padding: .38rem .8rem; border-radius: 999px;
}
/* Belge tipografisi — başlıklar gövdeden AYRILSIN ama bağırmasın */
.doc__card h2 {
font-size: var(--s1); font-weight: 700; letter-spacing: -.015em;
margin: 2rem 0 .55rem; padding-top: 1.4rem; border-top: 1px solid var(--hair);
}
.doc__card h2:first-of-type { margin-top: 1.2rem; }
.doc__card h3 { font-size: var(--s0); font-weight: 700; margin: 1.3rem 0 .4rem; }
.doc__card p { color: var(--text); margin-bottom: .85rem; line-height: 1.68; }
.doc__card p.lead { color: var(--t1); font-size: var(--s0); line-height: 1.6; margin-bottom: 1.4rem; }
.doc__card strong, .doc__card b { color: var(--t1); font-weight: 700; }
.doc__card a { color: var(--acd); font-weight: 600; text-underline-offset: 3px; }
.doc__card ul, .doc__card ol { margin: 0 0 1rem; padding-left: 1.3rem; color: var(--text); }
.doc__card li { margin-bottom: .42rem; line-height: 1.62; }
.doc__card li::marker { color: var(--t3); }
.doc__card code, .doc code {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
background: color-mix(in oklab, var(--t1) 7%, transparent);
padding: .12em .4em; border-radius: 5px; color: var(--t1);
}
.doc .note {
background: var(--elev); border: 1px solid var(--hair); border-left: 3px solid var(--ac);
border-radius: var(--r-s); padding: .95rem 1.15rem; margin: 1.2rem 0;
color: var(--text); font-size: var(--s-1); line-height: 1.6;
}
.doc__table {
width: auto; overflow-x: auto; margin: 1.1rem 0 1.5rem;
/* karttan taşarak nefes alsın — sütunlar kelime kelime kırılmasın */
margin-inline: calc(clamp(1.5rem, 4vw, 2.6rem) * -1);
padding-inline: clamp(1.5rem, 4vw, 2.6rem);
}
.doc__table table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: var(--s-1); }
.doc__table th, .doc__table td {
text-align: left; padding: .72rem .85rem; border-bottom: 1px solid var(--hair);
vertical-align: top; line-height: 1.5;
}
.doc__table th { font-weight: 700; color: var(--t1); white-space: nowrap; }
.doc__table td { color: var(--text); }
.doc__table td:first-child, .doc__table th:first-child { width: 20%; }
.doc__table td:nth-child(2), .doc__table th:nth-child(2) { width: 27%; }
.doc__table code { white-space: nowrap; }
.btn {
display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
border: 1px solid var(--hair); background: var(--surf); color: var(--t1);
padding: .62rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: var(--s-1);
box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn--primary { background: var(--acd); border-color: var(--acd); color: var(--surf); }
/* Eski gezinme/altbilgi adları */
.brand__mark { width: 30px; height: 30px; aspect-ratio: 1; flex: none; border-radius: 8px; box-shadow: var(--sh-1); }
.lang { display: inline-flex; background: color-mix(in oklab, var(--t1) 7%, transparent); border-radius: 999px; padding: 3px; gap: 2px; }
.lang button {
border: 0; background: transparent; color: var(--text); cursor: pointer;
font-size: var(--s-2); font-weight: 700; letter-spacing: .04em;
padding: .34rem .68rem; border-radius: 999px; transition: all .22s var(--ease);
}
.lang button[aria-pressed="true"] { background: var(--surf); color: var(--t1); box-shadow: var(--sh-1); }
.footer { border-top: 1px solid var(--hair); background: var(--elev); padding-block: clamp(2.2rem, 4.5vw, 3.2rem); }
.footer .wrap { display: grid; gap: 1.2rem; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; color: var(--muted); font-size: var(--s-2); }
.footer a { color: var(--text); text-decoration: none; font-weight: 600; font-size: var(--s-1); }
.footer a:hover { color: var(--acd); text-decoration: underline; text-underline-offset: 3px; }
.made { color: var(--muted); font-size: var(--s-2); }
.nf { text-align: center; display: grid; gap: 1.2rem; justify-items: center; padding-block: clamp(4rem, 12vw, 8rem); }
/* ============================================================================
CİHAZ ÇERÇEVESİ — ham ekran görüntüsü "kesilmiş resim" gibi duruyordu
Oranlar iPhone'un kendi geometrisinden: köşe yarıçapı ≈ genişliğin %13'ü,
kenarlık ≈ %2.6'sı, Dynamic Island ≈ genişliğin %31'i.
========================================================================== */
.device {
position: relative; height: 100%; width: auto; aspect-ratio: 660 / 1434;
padding: 2.6%;
border-radius: 13.5% / 6.2%;
background:
linear-gradient(158deg, #6d6864 0%, #2b2724 26%, #4a4441 52%, #211d1b 76%, #5c5652 100%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.18),
inset 0 0 0 3px rgba(0,0,0,.55),
0 2px 6px var(--shade),
0 44px 88px -36px var(--shade);
}
.device img {
height: 100%; width: 100%; display: block; object-fit: cover;
border-radius: 11.4% / 5.3%;
background: var(--elev);
}
/* Dynamic Island */
.device::after {
content: ""; position: absolute; z-index: 2;
top: 4.1%; left: 50%; transform: translateX(-50%);
width: 31%; height: 3.1%;
background: #080706; border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* yan tuşlar — çerçeveyi gerçek kılan detay */
.device::before {
content: ""; position: absolute; z-index: 1; inset-inline-start: -0.9%;
top: 19%; width: 1%; height: 15%;
background: linear-gradient(90deg, #24201e, #6b6561);
border-radius: 2px 0 0 2px;
}
.flow[data-fallback] .device { height: auto; width: 100%; }
.always { margin-top: clamp(2.5rem, 6vw, 4rem); }
.always h3 { margin-bottom: 1rem; }
.always ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .55rem 2rem; }
.always li {
display: grid; grid-template-columns: 18px 1fr; gap: .6rem;
color: var(--text); font-size: var(--s-1); align-items: start;
}
.always li::before {
content: ""; width: 16px; height: 16px; margin-top: .28rem;
background: var(--acd); border-radius: 999px;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* ------------------------------------------- özellikler: görselli bloklar */
.feat {
display: grid; align-items: center;
grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 5.5rem);
padding-block: clamp(3rem, 8vw, 6.5rem);
border-top: 1px solid var(--hair);
}
.feat--b { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); }
.feat--b .feat__shot { order: 2; }
.feat--b .feat__text { order: 1; }
.feat__shot { display: grid; place-items: center; }
.feat__shot .device { height: auto; width: min(330px, 62vw); }
.feat__shot .device img { height: auto; }
.feat__text { display: grid; gap: .8rem; }
.feat__text h3 { font-size: var(--s2); letter-spacing: -.028em; }
.feat__text p { color: var(--text); font-size: var(--s0); line-height: 1.62; max-width: 46ch; }
@media (max-width: 820px) {
.feat, .feat--b { grid-template-columns: 1fr; gap: 2rem; }
.feat--b .feat__shot { order: 0; }
.feat--b .feat__text { order: 1; }
}
.feat__rest {
border-top: 1px solid var(--hair); padding-top: clamp(2.4rem, 5vw, 3.4rem);
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(1.6rem, 4vw, 3rem);
}
.feat__rest h4 { font-size: var(--s0); font-weight: 700; letter-spacing: -.012em; margin-bottom: .35rem; }
.feat__rest p { color: var(--text); font-size: var(--s-1); line-height: 1.58; }
.waveband__in { display: grid; gap: 1.1rem; padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.waveband canvas { width: 100%; height: clamp(76px, 11vw, 132px); display: block; }
.waveband__cap { text-align: center; color: var(--text); font-size: var(--s-1); font-weight: 600; }
/* --------------------------------------------- 13 maddelik özellik listesi */
.fxgrid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
gap: clamp(1.7rem, 4vw, 2.8rem) clamp(2rem, 5vw, 3.6rem);
}
.fx { border-top: 1px solid var(--hair); padding-top: 1.1rem; }
.fx h3 { font-size: var(--s0); font-weight: 700; letter-spacing: -.014em; margin-bottom: .35rem; }
.fx p { color: var(--text); font-size: var(--s-1); line-height: 1.6; }
/* dil düğmesindeki bayrak */
.pillgroup button { display: inline-flex; align-items: center; gap: .34rem; }
.flag { font-size: .95em; line-height: 1; }
/* --------------------------------------------------------- teknik künye */
/* Soldaki rakam BİLGİ taşır (gerçek kota), süs değil. Tipografi onu öne alır. */
.specs { display: grid; gap: 0; }
.spec {
display: grid; grid-template-columns: minmax(120px, 8.5rem) minmax(0, 1fr);
gap: clamp(1.2rem, 4vw, 3rem); align-items: baseline;
padding-block: clamp(1.15rem, 2.4vw, 1.6rem);
border-top: 1px solid var(--hair);
}
.spec:last-child { border-bottom: 1px solid var(--hair); }
.spec__n {
font-size: clamp(1.7rem, 1.1rem + 2.2vw, 2.9rem); font-weight: 700;
letter-spacing: -.045em; line-height: 1; color: var(--acd);
font-variant-numeric: tabular-nums; text-align: right;
}
.spec__n em {
font-style: normal; font-size: .38em; font-weight: 700; letter-spacing: -.01em;
color: var(--muted); margin-inline-start: .12em;
}
.spec__b h3 { font-size: var(--s0); font-weight: 700; letter-spacing: -.014em; margin-bottom: .3rem; }
.spec__b p { color: var(--text); font-size: var(--s-1); line-height: 1.62; max-width: 62ch; }
@media (max-width: 640px) {
.spec { grid-template-columns: 1fr; gap: .5rem; }
.spec__n { text-align: left; }
}
/* ============================================================================
HERO — TABLO BANNER
Van Gogh, Yıldızlı Gece (1889). Kamu malı; kaynak assets/tablolar/KAYNAKLAR.md
⛔ Bu bölüm TEMADAN BAĞIMSIZDIR. Renkler tabloya göre sabittir; tema
değişkenleri buraya girmez, yoksa tablonun üstündeki metin okunmaz olur.
========================================================================== */
.hero {
position: relative; isolation: isolate; overflow: clip;
/* ⛔ min-height DEĞİL, height. Telefonlar büyüyünce hero içeriğiyle
birlikte uzuyordu ve dipteki "Let's start" ekranın ALTINA kaçıyordu.
Yükseklik ekrana kilitli; telefon taşarsa `overflow: clip` kırpar —
rakipler de tam bunu yapıyor. */
height: min(100svh, 1040px);
display: grid; place-items: center;
margin-top: calc(var(--navh) * -1);
padding: calc(var(--navh) + 3rem) var(--gut) 4rem;
background: #0b1020;
}
.hero__art { position: absolute; inset: 0; z-index: 0; }
.hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
/* Okunabilirlik perdesi: ortada koyu, kenarlarda tabloyu serbest bırakır */
.hero__veil {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
radial-gradient(52% 44% at 50% 47%, rgba(3,6,16,.90) 0%, rgba(3,6,16,.66) 46%, rgba(3,6,16,.18) 74%, transparent 88%),
linear-gradient(to bottom, rgba(3,6,16,.52) 0%, transparent 24%, transparent 58%, rgba(3,6,16,.62) 100%);
}
.hero__mid { position: relative; z-index: 2; display: grid; justify-items: center; gap: clamp(2rem, 5vw, 3.2rem); text-align: center; }
.hero__line {
color: #fff; margin: 0;
font-size: clamp(2.7rem, 1.1rem + 6.0vw, 5.9rem);
line-height: 1.03; letter-spacing: -.035em; font-weight: 700;
text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);
}
/* "Just talk." — serif, kalın, italik. ui-serif Apple'da New York'a düşer. */
.hero__line em {
display: inline-block;
font-family: ui-serif, "New York", Georgia, "Times New Roman", serif;
font-style: italic; font-weight: 700;
letter-spacing: -.02em;
background: linear-gradient(180deg, #FFF6E2 0%, #F2C97A 62%, #D9A64E 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
padding-inline: .06em;
}
.startbtn {
display: inline-flex; align-items: center; gap: .7rem;
padding: clamp(.95rem, 1.4vw, 1.25rem) clamp(1.9rem, 3vw, 2.9rem);
border-radius: 999px; text-decoration: none;
font-size: clamp(1rem, .9rem + .5vw, 1.28rem); font-weight: 700; letter-spacing: -.01em;
color: #2A1E0C;
background: linear-gradient(180deg, #FDEFCB 0%, #F3CE85 52%, #E0AE55 100%);
box-shadow:
0 1px 0 rgba(255,255,255,.7) inset,
0 -1px 0 rgba(120,80,20,.35) inset,
0 10px 30px -10px rgba(0,0,0,.7),
0 0 44px -12px rgba(243,206,133,.55);
transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.startbtn:hover {
transform: translateY(-2px);
box-shadow:
0 1px 0 rgba(255,255,255,.8) inset,
0 -1px 0 rgba(120,80,20,.35) inset,
0 16px 40px -12px rgba(0,0,0,.75),
0 0 64px -10px rgba(243,206,133,.75);
}
.startbtn svg { width: 1.05em; height: 1.05em; }
@media (prefers-reduced-motion: reduce) { .startbtn:hover { transform: none; } }
/* ------------------------------------------------------------------- nav */
.brand { display: inline-flex; align-items: center; gap: .78rem; text-decoration: none; }
.brand img { width: 42px; height: 42px; aspect-ratio: 1; flex: none; border-radius: 10.5px; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.brand span { font-size: 1.32rem; font-weight: 700; letter-spacing: -.018em; }
.navlink {
text-decoration: none; font-size: .95rem; font-weight: 600; letter-spacing: -.005em;
padding: .4rem .1rem; transition: opacity .2s var(--ease);
}
.navlink--dl { font-weight: 800; letter-spacing: .06em; font-size: .84rem; }
.navlink:hover { opacity: .72; }
/* ------------------------------------------------------- hero tipografisi */
/* Degrade ve parıltı KALDIRILDI: "CSS efekti" gibi duruyordu. Düz renk,
tablonun kendi tonları, sadece okunabilirlik için yumuşak gölge. */
.hero__line { color: var(--vg-ink); text-shadow: 0 2px 26px rgba(6,10,24,.72); }
.hero__line em {
background: none; -webkit-background-clip: initial; background-clip: initial;
-webkit-text-fill-color: currentColor; color: var(--vg-moon);
}
/* Buton: tablonun kreminde, gece mavisi mürekkeple. Plastik degrade yok. */
.startbtn {
color: var(--vg-deep);
background: var(--vg-cream);
box-shadow: 0 10px 34px -14px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.28) inset;
}
.startbtn:hover {
background: #FBF7EC;
box-shadow: 0 16px 44px -16px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.4) inset;
}
/* Hero vurgusu — tablonun ay sarısı. Bu kural EN SONDA durmalı ki
daha önceki tema-renkli kurallar tarafından ezilmesin. */
.hero .hero__line em {
color: var(--vg-moon) !important;
-webkit-text-fill-color: var(--vg-moon);
font-style: italic; font-weight: 700;
}
/* ⛔ Hero başlığı TAMAMEN serif. Bu kural en sonda ve yüksek özgüllükte
duruyor çünkü body'nin ui-rounded'ı ve eski tema kuralları onu eziyordu. */
.hero .hero__line,
.hero .hero__line span,
.hero .hero__line em {
font-family: ui-serif, "New York", Georgia, "Iowan Old Style", "Times New Roman", serif;
}
.hero .hero__line { font-weight: 700; letter-spacing: -.022em; }
/* ⛔ `text-wrap: balance` DEĞİL. Genel h1 kuralı balance veriyor ve satırları
eşitlemek için "Konuş, yeter."i (615px, kap 672px — SIĞIYOR) zorla ikiye
bölüyordu. Kırılma yeri zaten ile elle veriliyor. Ölçüldü 0827. */
.hero .hero__line { text-wrap: pretty; }
/* ⛔ İkinci satır BÖLÜNMEZ. Metin sütunu her daraldığında "Konuş, yeter."
ikiye ayrılıp başlık üç satıra çıkıyordu. Dar ekranda serbest bırakılır. */
.hero .hero__line em { white-space: nowrap; }
@media (max-width: 620px) { .hero .hero__line em { white-space: normal; } }
:root { --frame: clamp(20px, 3.2vw, 52px); }
/* çerçevenin iç kenarına ince gölge — tuval içeri gömülü dursun */
/* alt bölümler kendi zeminini taşısın ki gece mavisi sızmasın */
/* Hero: metin SOLDA, sağ taraf ürün görselleri için ayrıldı */
.hero { place-items: center stretch; }
.hero__grid {
position: relative; z-index: 2;
width: 100%; max-width: 1440px; margin-inline: auto;
/* ⛔ Sütunlar geldikten sonra metin sütunu daraldı ve "Konuş, yeter."
ikiye bölündü. Payı metne kaydırıldı; geri eşitleme. */
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.hero__mid { justify-items: start; text-align: left; }
.hero__phones { min-height: 1px; }
@media (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr; }
.hero__mid { justify-items: center; text-align: center; }
}
/* Hero katman sırası — net ve tek yerde */
.hero { background: #0B1020; }
.hero__art { position: absolute; inset: 0; z-index: 0; }
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__grid { position: relative; z-index: 2; }
/* ============================================================================
ÇERÇEVE + GEZİNME SİSTEMİ — TEK KAYNAK, TEK DURUM
----------------------------------------------------------------------------
Bu blok 0827'de SIFIRDAN yazıldı. Öncesinde nav/çerçeve kuralları beş ayrı
yere dağılmıştı ve birbirini eziyordu; tablo iki kez kayboldu, nav yazısı
tablonun üstünde okunmaz oldu, içerik çerçeveden taştı.
⛔ KURAL: Çerçeve ve gezinme ile ilgili HER ŞEY burada durur.
TEK DURUM DEĞİŞKENİ: ya da
SADECE NAV MÜREKKEBİNİ yönetir. Çerçeveye dokunmaz.
hero → nav tablonun üstünde: AÇIK mürekkep
content → nav krem içeriğin üstünde: KOYU mürekkep
Durumu site.js ayarlar (hero'nun yüksekliğine göre), CSS sadece uygular.
⛔ .viewport'un inset'i DEĞİŞMEZ. Değiştirirsen kaydırma sırasında içerik
zıplar. Çerçeve gerçek bir çerçeve gibi tuvalin kenarına BİNER.
========================================================================== */
html, body { height: 100%; overflow: hidden; background: #0B1020; }
/* Kaydırılabilir alan — tek kaydırma kabı, konumu hiç değişmez */
.viewport {
position: fixed; inset: 0;
/* ⛔ `scroll-behavior: smooth` BURADAN KALDIRILDI. site.js zaten kendi
easeInOutCubic eğrisiyle her karede scrollTop yazıyor; tarayıcı üstüne
bir de KENDİ yumuşatmasını uygulayınca iki animasyon çakışıyor ve
hareket "hızlan-yavaşla-hızlan-yavaşla" diye titriyordu (owner gördü:
"keyframeler atanarak amatör biri yapmış gibi"). Geri ekleme. */
scroll-behavior: auto;
overflow-y: auto; overflow-x: hidden;
/* ⛔ `contain` LASTİK ZİPLAMAYI KAPATMAZ, sadece zinciri keser.
macOS'ta touchpad ile sayfayı yukarı iterken kap kendi zeminini
(krem) gösteriyordu: tablonun üstünde beyaz bir şerit. `none`
lastik esnemesini tamamen kaldırır. Geri `contain` yapma. */
overscroll-behavior-y: none;
background: var(--bg);
scrollbar-width: thin;
}
/* Emniyet kemeri: overscroll-behavior'ı desteklemeyen eski Safari'de bile
üstte beyaz değil gece mavisi görünsün. Kaydırma alanının ÜSTÜNDE durur;
üst taşma kaydırılabilir alan ÜRETMEZ, ama lastik esnemesinde içerikle
birlikte kayıp boşluğu kapatır. ⛔ Altına ikizini EKLEME: alt taşma
kaydırılabilir alan üretir ve sayfaya 100vh boşluk ekler. */
.viewport::before {
content: ""; position: absolute; inset-inline: 0; bottom: 100%;
height: 100vh; background: var(--bg); pointer-events: none;
}
/* ⛔ Gece mavisi SADECE tablo hero'su olan sayfada. Alt sayfaların tepesi
krem; oraya lacivert koymak beyaz şeritten daha kötü görünürdü. */
:root:has(.hero) .viewport::before { background: #0B1020; }
/* ---------------------------------------------------------------------- nav */
/* Zemin YOK — hiçbir durumda. Okunabilirlik mürekkep renginden gelir. */
/* ⛔⛔ YAPIŞKAN DEĞİL — ve bu, denenmiş üç yolun ARDINDAN kalan tek temiz
seçenek. Sırayla reddedilenler:
1) krem zemin → owner: "üst banner full şeffaf olsun"
2) kaydırınca gizlenme → her adım geçişinde git-gel yapıyordu
3) öğelere cam hap → owner: "bu butonlar kötü"
Yapışkanlığı kaldırınca çakışacak bir şey kalmıyor: nav hero'nun üstünde
şeffaf duruyor, kaydırınca yukarı çıkıp gidiyor. Zemin yok, hap yok,
titreme yok. ⛔ `position: sticky`yi geri koyma; üçü de geri gelir. */
.nav {
position: absolute; inset-inline: 0; top: 0; z-index: 60;
background: transparent;
padding-top: var(--frame);
transition: color .35s var(--ease);
}
/* ⛔ OTOMATİK GİZLEME KALDIRILDI. Aşağı kaydırınca çekilip yukarı kaydırınca
dönen bir nav yazılmıştı; el bölümünde her adım geçişi bir kaydırma
ürettiği için nav sürekli GİT-GEL yapıyordu ve gecikmeli görünüyordu
(owner: "her fotoğraf kaydırdığımda üstteki bar git gel yapıyor").
Nav artık hep yerinde ve hep şeffaf; çakışma öğelerin kendi camıyla
çözülüyor (aşağıda .nav__right / .brand). */
.nav__in {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
min-height: var(--navh);
padding-inline: calc(var(--frame) + clamp(.6rem, 2vw, 1.6rem));
}
.nav__right { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 2.1rem); }
/* Tablonun üstünde: açık mürekkep, gölgeyle okunur */
:root[data-view="hero"] .nav { color: var(--vg-ink); }
:root[data-view="hero"] .navlink,
:root[data-view="hero"] .brand span { color: var(--vg-ink); text-shadow: 0 1px 16px rgba(0,0,0,.65); }
:root[data-view="hero"] .pillgroup { background: rgba(255,255,255,.16); }
:root[data-view="hero"] .pillgroup button { color: rgba(255,255,255,.78); }
:root[data-view="hero"] .pillgroup button[aria-pressed="true"] { background: rgba(246,242,230,.95); color: #27335A; }
/* İçerik alanında: koyu mürekkep */
/* ⛔ ZEMİN YOK — owner: "üst banner full şeffaf olsun". Krem bant denendi
(tablo satırlarıyla çakışmayı çözüyordu) ve reddedildi.
Çakışma artık ZEMİNLE değil DAVRANIŞLA çözülüyor: aşağı kaydırırken nav
gizlenir, yukarı kaydırırken geri gelir (site.js → data-nav="hidden").
Böylece hem şeffaf kalır hem hiçbir şeyin üstüne binmez. */
/* ⛔ BANNER ŞEFFAF (owner). Okunurluk banner zemininden değil, ÖĞELERİN
kendi küçük camından geliyor: tablo satırları altından geçse bile FAQ,
İNDİR ve marka okunur kalıyor. Bar'a zemin verme. */
:root[data-view="content"] .nav { color: var(--t1); }
/* ⛔ Cam hap YOK (owner reddetti). Nav artık yapışkan olmadığı için
altından bir şey geçmiyor; okunurluk için zemine gerek kalmadı. */
/* ⛔ "Zemin YOK" kuralı TABLONUN ÜSTÜ için yazılmıştı ve orada hâlâ geçerli
(hero şeffaf kalır). İÇERİK alanında ise zeminsizlik kusur üretti: nav
tablonun satırlarının üstünden geçiyor, FAQ/DOWNLOAD ile "Unlimited"
iç içe giriyordu (owner ekran görüntüsü, iki kez).
İçerik durumunda nav artık opak krem bir bant; hero'da hâlâ şeffaf. */
:root[data-view="content"] .navlink,
:root[data-view="content"] .brand span { color: var(--t1); text-shadow: none; }
:root[data-view="content"] .pillgroup { background: color-mix(in oklab, var(--t1) 8%, transparent); }
:root[data-view="content"] .pillgroup button { color: var(--text); }
:root[data-view="content"] .pillgroup button[aria-pressed="true"] { background: var(--surf); color: var(--t1); }
/* --------------------------------------------------------------------- hero */
/* Nav hero'nun üstünde yüzer; hero navın altına kadar uzanır. */
/* Nav mutlak konumlu ve akışın dışında; hero doğrudan tepeden başlar. */
.hero { margin-top: 0; }
/* ============================================================================
TİTANYUM İPHONE — Apple'ın RESMÎ ürün çerçevesi
----------------------------------------------------------------------------
⛔ BURASI ELDE ÇİZİLMEZ. Kutuyu CSS ile (iki yüz + dört yan ray) kurmayı
denedik: kenarları düz, köşeleri sahte, kasası kartondan çıktı. Owner
rakiple yan yana koyup gördü. Doğru cevap Apple'ın kendi görselidir.
Kaynak : developer.apple.com/design/resources → Product Bezels
Bezel-iPhone-16.dmg → PNG/iPhone 16 Pro/… Natural Titanium Portrait
Lisans : App Store Marketing Artwork License Agreement. Ücretli Apple
Developer üyeliği + kendi uygulamanın pazarlaması şartıyla serbest.
Model : iPhone 16 Pro. ⛔ 17 Pro DEĞİL — 2025'te alüminyum unibody'ye
geçti, titanyum kasa 16 Pro'da kaldı.
ÖLÇÜ — çerçeve 1350×2760, içindeki ŞEFFAF ekran penceresi piksel piksel
ölçüldü (ImageMagick alfa taraması, 0827):
x 72 → 1277 = 1206 px → sol %5.3333, en %89.3333
y 69 → 2690 = 2622 px → üst %2.5, boy %95
1206×2622 = iPhone 16 Pro ekranının tam çözünürlüğü; yüzdeler tam sayı
çıkıyor, bu da ölçünün doğrulaması. ⛔ Bu dört sayıyı elle oynatma.
3B hissi PERSPEKTİFTEN gelir: düzlem eğilir, gölge alfa siluetinden düşer.
Kalınlık çizmeye çalışma — çerçeve görselinin kendi kenarı zaten yeterli.
========================================================================== */
.pshots {
/* ⛔ Ölçek BÜYÜK olmak zorunda. Küçükken ekran görüntüleri "kalitesiz"
görünüyordu; kaynak dosyalar suçsuz (1320x2868 ham PNG ile webp 1:1
karşılaştırıldı, fark yok) — sorun telefonun ekranda 266px kalmasıydı.
Rakipler telefonu hero yüksekliğinin ~%75'inde tutuyor. */
--ph: clamp(360px, 62svh, 740px); /* tek değişken: çerçeve yüksekliği */
--pw: calc(var(--ph) * 1350 / 2760);
position: relative;
min-height: calc(var(--ph) * 1.1);
}
/* Tablodan ayrılsınlar diye arkada sıcak bir hâle.
⛔ blur() KALDIRILDI: radyal degrade zaten yumuşak, filtre sadece her
kaydırma karesinde maliyet ekliyordu. */
.pshots::before {
content: ""; position: absolute; inset: 4% -10% 2%; pointer-events: none;
background: radial-gradient(54% 50% at 52% 48%, rgba(216,196,100,.18), transparent 76%);
}
.pshot {
position: absolute; left: 50%; top: 50%; isolation: isolate;
width: var(--pw); aspect-ratio: 1350 / 2760;
margin: 0;
transform: translate(-50%, -50%) translate(var(--x, 0%), var(--y, 0%)) scale(var(--s, 1));
}
/* ⛔ Gölge DEGRADE, drop-shadow DEĞİL. Siluet gölgesi daha doğruydu ama her
kaydırma karesinde yeniden hesaplanıyordu; iki telefon × iki gölge sayfayı
kasıyordu (owner: "site ÇOK KASIYOR"). Degrade bir kez çizilir. */
.pshot::after {
content: ""; position: absolute; z-index: -1;
left: 4%; right: 4%; top: 12%; bottom: -8%;
background: radial-gradient(44% 44% at 50% 74%, rgba(3,6,16,.62), transparent 72%);
}
.pshot__tilt {
position: absolute; inset: 0;
transform: perspective(1750px) rotateZ(var(--rz, 0deg)) rotateY(var(--ry, -18deg)) rotateX(var(--rx, 4deg));
}
.pshot__bezel { position: absolute; inset: 0; width: 100%; height: 100%; }
/* ⛔ Ekran çerçevenin ALTINDA durur; köşeleri çerçevenin opak kenarı örter.
Yine de küçük bir yarıçap veriyoruz: çerçevenin iç kenarı yumuşatılmış,
kare köşe bir piksel sızdırıyor. */
/* ⛔ İKİ KATMAN. Hero'daki telefonlar 24 temanın hepsini 2 saniyede bir
gezer (owner: "yıldızlı gece tablosunda istedim ... 2 saniyede bir
değişecek"). Katmanlar arasında çapraz sönümleme; sönümleme süresi
aralıktan (site.js HERO_TEMA_MS = 2000ms) KISA olmalı, yoksa iki tema
üst üste binip bulanır. */
.pshot__screen {
position: absolute;
left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%;
object-fit: cover; border-radius: 13.4% / 6.2%;
background: #12100e;
/* ⛔ will-change: opacity YOK. Katmanı KALICI olarak GPU'ya sabitliyor;
iki büyük görsel × iki bölüm = sayfa dururken bile meşgul GPU belleği.
Tarayıcı geçiş sırasında zaten kendisi terfi ettiriyor. */
opacity: 0; transition: opacity 1.2s var(--ease);
}
.pshot__screen[data-on] { opacity: 1; }
/* Cam. ⛔ Ayna yansıması DEĞİL: iPhone camı mat kaplamalı ve ekranımız zaten
krem; keskin bir yansıma hem sahte duruyor hem metni yutuyor. Tek geniş,
çok sönük ışık düşmesi — gece gökyüzünün rengiyle, beyazla değil. */
.pshot__glare {
position: absolute;
left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%;
border-radius: 13.4% / 6.2%; pointer-events: none;
background: linear-gradient(199deg,
rgba(226, 236, 255, .17) 0%,
rgba(226, 236, 255, .05) 15%,
rgba(226, 236, 255, 0) 32%,
rgba(226, 236, 255, 0) 74%,
rgba(10, 14, 26, .07) 100%);
}
/* Yerleşim. --x/--y kendi ölçüsünün yüzdesi. Öndeki büyük ve metne yakın,
arkadaki küçük, daha dönük ve yukarıda — tek fotoğraf karesi gibi. */
/* Owner: "görselleri biraz sağ üste al" */
.pshot--front { --x: -22%; --y: 1%; --ry: -15deg; --rx: 3deg; --rz: -2.5deg; z-index: 2; }
.pshot--back { --x: 48%; --y:-14%; --ry: -21deg; --rx: 4deg; --rz: -2.5deg; --s: .87; z-index: 1; }
/* ---------------------------------------------------------------- daralınca */
/* 900px'te ızgara tek sütuna düşer: arka telefon gider, öndeki küçülüp
ortalanır. 560px altında hiç yok — hemen altındaki akış bölümü zaten beş
ekranı da gösteriyor, hero'yu tıkamanın anlamı yok. */
@media (max-width: 900px) {
.pshots { --ph: clamp(260px, 36svh, 420px); margin-top: .4rem; }
.pshot--back { display: none; }
.pshot--front { --x: 0%; --y: 0%; --ry: -12deg; --rz: -2deg; }
}
@media (max-width: 560px) { .pshots { display: none; } }
/* ============================================================================
HERO YERLEŞİMİ v2 — sütunlar + ortalanmış eylem
----------------------------------------------------------------------------
Owner: "just talk'ı biraz sağa çek, çok sola yaslamışsın · Let's start'ı tam
orta aşağıya al · sol ve sağda Kolezyum sütunları çıksın."
⛔ SÜTUNLAR KALDIRILDI. Roma sütunu denendi, owner gördü ve reddetti:
"boşver kaldır sütunları hiç, hâlimdeki gibi değil, çok kötü". Geri
ekleme. Yan dolgu artık kendi başına duruyor.
========================================================================== */
.hero {
padding-inline: clamp(1.6rem, 6.5vw, 7.5rem);
padding-bottom: clamp(5.5rem, 11vh, 8.5rem); /* dipteki düğmeye yer */
}
/* Başlık sola yapışmasın. */
.hero__mid { padding-inline-start: clamp(0px, 2.6vw, 58px); }
/* Eylem: hero'nun dibinde, tam ortada. Izgaradan bağımsız. */
.hero__cta {
position: absolute; z-index: 3;
left: 50%; bottom: clamp(2.2rem, 6vh, 5rem);
transform: translateX(-50%);
}
.hero__cta:hover { transform: translateX(-50%) translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .hero__cta:hover { transform: translateX(-50%); } }
@media (max-width: 900px) {
.hero { padding-inline: var(--gut); }
.hero__mid { padding-inline-start: 0; }
}
/* ============================================================================
HERO'DAKİ APP STORE ROZETİ
⛔ Apple'ın resmî SVG'si. Rengi DEĞİŞTİRİLEMEZ; Apple yalnızca siyah ve
beyaz iki varyant veriyor, tablonun üstünde beyaz olan doğru olan.
Bu yüzden data-fixed-badge: site.js'in tema-bazlı değiştirmesi bu
rozete DOKUNMAZ (hero temadan bağımsız, hep koyu).
⛔ BAĞLANTI TEK YERDEN: site.js → APPSTORE_URL. Uygulama henüz yayında
değil; ID gelince orayı doldur, sayfadaki tüm rozetler birden döner.
========================================================================== */
.hero__dl { display: inline-flex; margin-top: clamp(.4rem, 1.4vh, 1.1rem); }
.hero__dl img {
height: clamp(52px, 5.4vw, 68px); width: auto;
border-radius: 10px; box-shadow: 0 10px 26px rgba(3,6,16,.55);
transition: transform .22s var(--ease), filter .22s var(--ease);
}
.hero__dl:hover img { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(3,6,16,.7); }
@media (prefers-reduced-motion: reduce) { .hero__dl:hover img { transform: none; } }
/* ============================================================================
EL BÖLÜMÜ — el sabit, ekran kaydırmayla değişir
----------------------------------------------------------------------------
⛔ EL KIMILDAMAZ. Owner: "aşağı falan kaydırılmayacak, o orada kalacak."
Sabitleme `position: sticky` ile; .hold'un YÜKSEKLİĞİ kaydırma
mesafesidir. Kısaltırsan ekranlar hızlı geçer.
⛔⛔ FOTOĞRAFİK EL SÖKÜLDÜ (0827) — GERİ GETİRME. Stüdyoda çekilmiş bir el,
ne kadar iyi kesilirse kesilsin BOYANMIŞ bir gökyüzünde çıkartma gibi
duruyordu (owner: "el ve telefon olmamış"). Asıl kusur daha büyüktü:
el kadrajın yarısını yiyor, telefon ekranda ~190px kalıyor, yani
uygulamanın arayüzü OKUNMUYORDU.
Homografi (matrix3d), remove.bg alfa maskesi, bilek kesiği ve --k ölçek
zinciri o yolun BEDELİYDİ; el geri gelirse dördü de geri gelir.
⛔ Telefon artık hero'nun .pshot bileşeni: Apple'ın resmî çerçevesi +
piksel piksel ölçülmüş ekran penceresi ("TİTANYUM İPHONE" bloğu).
Burada yalnızca YERLEŞİM, IŞIK ve GÖLGE var. İkinci telefon çizici yazma.
========================================================================== */
.hold {
/* Altyazı puntosu TEK yerde: hem yazının kendisi hem metin bloğunun
asgari yüksekliği bundan türer. */
/* ⛔ 0827'de BÜYÜTÜLDÜ (3.6rem → 4.9rem). El sökülüp telefon gerçek
boyutuna çıkınca sol sütun cılız kaldı: koca bir tablonun ortasında
küçük bir başlık, sağda tam boy bir telefon. İki taraf AYNI ÖLÇEKTE
konuşmalı. */
--capfs: clamp(2rem, 1.1rem + 4.1vw, 4.9rem);
/* ⛔ SAHNENİN TEK ÖLÇÜSÜ: çerçevenin YÜKSEKLİĞİ. Genişlik ondan TÜRETİLİR
(.hold__stage); ikinci bir genişlik yazma, ayrışır.
⛔ KÜÇÜLTME. 78svh'de telefon ~390px geniş kalıyor; bu iPhone 16 Pro'nun
KENDİ 393pt genişliği, yani ekran neredeyse GERÇEK BOYUTTA. Bölümün
tek işi uygulamayı göstermek. Aynı hata hero'da bir kez yapıldı ve
owner gördü: "sorun telefonun ekranda 266px kalmasıydı." */
--dev-h: clamp(400px, 82svh, 880px);
/* ⛔⛔ YÜKSEKLİK EKRAN SAYISINDAN TÜRER, elle yazılmaz. 330vh sabitken beş
ekran vardı; ekran eklenince aynı mesafeye daha çok adım sıkışıyor ve
her adım kısalıyordu. --shots'u site.js SHOTS.length'ten yazar, yani
liste büyüyünce bölüm kendiliğinden uzar. ⛔ Sabit vh'ye dönme.
Adım başına ~46vh: bir tekerlek hareketi = bir ekran (adım kilidi),
mesafe yalnız kaydırma çubuğunun hissini belirler. */
--shots: 5;
position: relative; isolation: isolate; overflow: clip;
height: calc(100vh + (var(--shots) - 1) * 46vh); padding: 0;
}
.hold__sky { position: absolute; inset: 0; z-index: 0; }
.hold__sky img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* Tablo canlı; metnin okunabilmesi ve elin oturması için hafif bir perde. */
.hold__veil {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
/* ⛔ Perde HAFİF. İlk denemede %80'di ve tablo gri bir duvara dönüyordu;
"bulutlu güneşli" istenen şey tam da tablonun kendi rengi. Metnin
okunması için sadece sol üçte bir hafifçe açılır.
⛔ 0827'de %62 → %40'a İNDİRİLDİ. El sökülüp telefon büyüyünce görüldü:
perde tablonun mavilerini de yıkıyordu, bölüm baştan sona soluk bir
krem duvara dönmüştü ve arkadaki ışık hiç okunmuyordu. Metin zaten
koyu lacivert, açık bulutta kontrastı yeterli. Geri yükseltme. */
/* ⛔ ÜSTTE krem durağı YOK. Perde yapışkan kısmın içinde olduğu için
ekranın tepesine sabit bir krem şerit çiziyordu; hero'nun gecesiyle
arasında sert bir çizgi oluşuyordu. Üst geçiş .hold__frame'in işi. */
/* Üçüncü durak: sağ-altta hafif bir derinleşme. Telefonun oturacağı bir
zemin veriyor — onsuz cam bir nesne, açık bir zeminde yüzüyor gibi
duruyordu. ⛔ Gölgeyle AYNI köşede olmalı (ışık sol üstten). */
/* ⛔ KÖŞE KARARTMASI — ışığın okunması BUNA bağlı. Işık yarığı tek başına
görünmüyordu: tablonun kendi en parlak yeri zaten orası, kremin üstüne
krem koyunca hiçbir şey değişmiyor. Işık KONTRASTLA okunur. Köşeler
koyulaşınca hem Constable'ın mavileri geri geliyor hem sahne aydınlatılmış
bir sahne gibi duruyor. ⛔ Kaldırırsan ışık yine kaybolur, gradyanı
kuvvetlendirmek çare olmaz. */
background:
linear-gradient(100deg, rgba(252,249,243,.40) 0%, rgba(252,249,243,.14) 30%, rgba(252,249,243,0) 55%),
radial-gradient(70% 58% at 74% 104%, rgba(38,52,74,.26), transparent 72%),
radial-gradient(116% 96% at 52% 44%, transparent 38%, rgba(26,38,58,.34) 100%),
linear-gradient(to bottom, transparent 0%, transparent 86%, var(--bg) 100%);
}
.hold__pin {
position: sticky; top: 0; z-index: 2;
height: 100svh; display: grid; align-items: center;
padding-inline: clamp(1.2rem, 5vw, 5.5rem);
overflow: clip;
}
.hold__grid {
position: relative; z-index: 2;
width: 100%; max-width: 1380px; margin-inline: auto;
display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
gap: clamp(1rem, 2.4vw, 2rem); align-items: center;
}
/* ⛔ YÜKSEKLİK SABİTLENMELİ. Altyazılar üst üste durabilsin diye ilki
dışında hepsi `position: absolute`; ama `:first-of-type` eyebrow
'sine
denk geldiği için HEPSİ mutlak oluyor ve bu blok SIFIR yükseklik alıyor.
Masaüstünde fark etmiyordu (ayrı sütun), mobilde tek sütuna inince el
metnin üstüne biniyordu (owner: "çok amatörce görünüyor").
⛔ min-height'ı silme; altyazı punto ölçeğiyle birlikte hesaplanıyor. */
/* ⛔⛔ ALTYAZILAR IZGARAYLA ÜST ÜSTE BİNER, `position: absolute` İLE DEĞİL.
Mutlak konumlandırma iki kez kusur üretti:
1) `:first-of-type` eyebrow
'sine denk geldiği için HEPSİ mutlak
oluyordu ve blok SIFIR yükseklik alıyordu — mobilde el metnin
üstüne biniyordu.
2) min-height ile yamandı ama bu sefer metin kabın DIŞINA taşıyordu.
Izgarada hepsi aynı hücreye konur: kutu EN UZUN altyazı kadar yer kaplar,
hiçbir genişlikte taşmaz, sıfır yükseklik almaz. ⛔ absolute'a dönme. */
/* ⛔ Metin IŞIĞIN ÜSTÜNDE. .hold__beam sahnenin dışına taşıp bu sütuna
giriyor; z-index verilmezse krem ışık yazının üstünü yıkıyor. */
.hold__copy { display: grid; position: relative; z-index: 3; }
.hold__copy > .eyebrow { grid-column: 1; grid-row: 1; }
.hold__cap { grid-column: 1; grid-row: 2; }
/* Altyazılar ÜST ÜSTE durur ve çapraz sönümlenir; alt alta dizilse
metin bloğu her geçişte zıplardı. */
.hold__cap {
font-family: ui-serif, "New York", Georgia, "Times New Roman", serif;
font-size: var(--capfs);
line-height: 1.12; letter-spacing: -.022em; font-weight: 700;
color: #24313f; text-wrap: balance;
margin-top: .6rem;
opacity: 0; transform: translateY(14px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.hold__cap[data-on] { opacity: 1; transform: none; }
/* ============================================================================
BÖLÜM AYRACI — müze çerçevesinin üst pervazı
⛔ ÇİZİM DEĞİL, gerçek çerçeve fotoğrafı (Jacques-Louis David, 1824).
Kaynak ve aynalı karo gerekçesi: assets/cerceve/KAYNAK.md
⛔ Pervaz `.hold`in kendisine bağlı, YAPIŞKAN kısma değil: kaydırınca
yukarı çıkıp gider, perde açılır gibi. Pin'e koyarsan ekranda asılı
kalır ve çerçeve değil şerit gibi görünür.
========================================================================== */
.hold__frame {
position: absolute; z-index: 3; inset-inline: 0; top: 0;
height: clamp(40px, 4.4vw, 68px);
background: url("/assets/cerceve/pervaz.webp") repeat-x center / auto 100%;
pointer-events: none;
}
.hold__frame::before {
content: ""; position: absolute; inset-inline: 0; top: 100%;
height: 26px;
background: linear-gradient(to bottom, rgba(3,6,16,.55), transparent);
}
/* Pervazın altında gece → gündüz erimesi. Owner: "geçiş çok keskin". */
.hold__frame::after {
content: ""; position: absolute; inset-inline: 0; top: 100%;
height: clamp(130px, 22vh, 280px);
background: linear-gradient(to bottom,
rgba(11,16,32,.94) 0%, rgba(11,16,32,.58) 26%,
rgba(11,16,32,.20) 58%, transparent 100%);
}
/* Bölümün dibinde, tam ortada — hero'daki "Let's start"ın eşi. */
.hold__cta {
position: absolute; z-index: 5;
left: 50%; bottom: clamp(2.4rem, 6vh, 4.6rem);
transform: translateX(-50%);
color: var(--vg-deep); background: var(--vg-cream);
box-shadow: 0 10px 34px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.4) inset;
}
.hold__cta:hover { transform: translateX(-50%) translateY(-2px); }
/* Dar ekranda düğme elin üstünde kalmalı; el dipten taşıyor. */
@media (max-width: 900px) { .hold__cta { z-index: 6; bottom: clamp(1.4rem, 4vh, 2.6rem); } }
@media (prefers-reduced-motion: reduce) { .hold__cta:hover { transform: translateX(-50%); } }
/* ------------------------------------------------------------ adım noktaları */
/* Sağ kenarda dikey dizi: kaç ekran var, hangisindeyiz. Sayısı ekran
sayısından TÜRETİLİR (site.js) — elle liste yazma, ayrışır. */
.hold__dots {
position: absolute; z-index: 4;
/* ⛔ SOLDA: sağ orta artık tabelanın yeri, ikisi üst üste biniyordu. */
left: clamp(.7rem, 2vw, 2.2rem); top: 50%; transform: translateY(-50%);
display: grid; gap: clamp(.55rem, 1.1vw, .9rem);
}
.hold__dot {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
background: color-mix(in oklab, #24313f 26%, transparent);
cursor: pointer; transition: all .35s var(--ease);
}
.hold__dot:hover { background: color-mix(in oklab, #24313f 48%, transparent); }
.hold__dot[data-on] {
background: #24313f; height: 26px; border-radius: 999px;
}
@media (max-width: 900px) {
.hold__dots { left: .5rem; }
.hold__dot { width: 7px; height: 7px; }
.hold__dot[data-on] { height: 20px; }
}
/* ============================================================================
⛔⛔ PERFORMANS — KAYDIRIRKEN HAREKET EDEN ŞEYE `filter` KOYMA
----------------------------------------------------------------------------
Owner: "site ÇOK KASIYORRRRRR". Sebebi buydu: o zamanki el görseli (2173px
alfalı), iki hero telefonu ve pervaz `filter: drop-shadow()` taşıyordu.
Filtre sonucu önbelleklenmiyor — eleman her kaydırma karesinde yeniden
rasterleniyordu; elde 60px bulanıklık × ~1300×1450 gerçek piksel.
⛔ El söküldü ama KURAL DURUYOR: akış bölümündeki ışık ve gölge de bu
yüzden radyal degrade, blur değil.
Gölgeler artık radyal degrade: zaten yumuşak, bir kez çizilir.
⛔ `filter: blur()` / `drop-shadow()` yalnız DURAN öğede kullanılabilir.
========================================================================== */
/* ------------------------------------------------------------------ sahne */
/* Telefonun durduğu kutu. Yalnızca ÖLÇÜ ve YER verir; çerçeve, ekran
penceresi ve cam ortak .pshot bileşenine ait.
⛔ Genişlik --dev-h'den TÜRETİLİR. Ayrı bir genişlik yazarsan ikisi
ayrışır ve çerçeve ezilir (1350/2760 Apple görselinin oranı). */
.hold__stage {
position: relative;
justify-self: center; align-self: center;
width: calc(var(--dev-h) * 1350 / 2760);
height: var(--dev-h);
/* Sütunun tam ortasında durunca metne fazla yaklaşıyordu; bir tık sağa. */
margin-inline-start: clamp(0rem, 2.4vw, 3rem);
}
/* -------------------------------------------------------------------- ışık */
/* Bulutlarda açılan yarık — telefonun ARKASINDA durur ve onu tablodan
ayırır. Elin yapamadığı şey buydu: fotoğrafik el tablonun ÜSTÜNDE
duruyordu, bu ışık telefonu tablonun İÇİNE yerleştiriyor.
⛔ `filter: blur()` YOK. Bölüm kaydırılırken canlı; filtre her karede
yeniden rasterlenir (aşağıdaki PERFORMANS bloğu — owner: "site ÇOK
KASIYORRRRRR"). Radyal degrade zaten yumuşak, bir kez çizilir.
⛔ IŞIK SOL ÜSTTEN. Constable'ın parlak bulut sırtları orada. Gölge de bu
yüzden sağ alta düşüyor — ikisi AYNI kaynaktan. Birini çevirirsen
ötekini de çevir, yoksa sahne yalan söyler. */
.hold__beam {
position: absolute; z-index: 0; pointer-events: none;
/* ⛔ TELEFONDAN ÇOK DAHA GENİŞ. İlk denemede 250%'ti ve neredeyse tamamı
telefonun ARKASINDA kalıyordu: ekranda sadece iki yanda ince birer
kırmızımsı hilal görünüyordu, ışık diye bir şey okunmuyordu. Işığın
kaynağı telefondan BÜYÜK olmalı, yoksa "ürün parıltısı" olur, gökyüzü
değil. */
/* ⛔ 520% DÜZ BİR YIKAMAYA dönüşüyordu: her yer eşit derecede aydınlık
olunca ışık diye bir şey OKUNMUYOR. Yarık, telefondan büyük ama
kadrajdan küçük olmalı — kenarı görünsün ki "açılan bir yer" olsun. */
left: 30%; top: 32%; translate: -50% -50%;
width: 300%; aspect-ratio: 1;
/* ⛔ RENK KREM DEĞİL, SICAK. Saf krem tabloya konunca hiçbir şey
değişmiyordu (ölçüldü: ışıklı/ışıksız RMSE %1.85, gözle ayırt edilmiyor)
çünkü tablonun kendi en açık yeri zaten krem. Işık, aydınlattığı yerin
RENGİNİ ısıtarak okunur. */
background:
radial-gradient(closest-side, rgba(255,238,198,.60), rgba(255,236,196,.24) 34%, rgba(255,236,196,0) 64%),
radial-gradient(closest-side at 48% 42%, rgba(236,196,104,.34), rgba(236,196,104,0) 46%);
}
/* --------------------------------------------------------- tek telefon */
/* ⛔ Bu, hero'nun .pshot bileşeninin ta kendisi. Buradaki kurallar SADECE
hero yerleşimini iptal edip sahneye oturtur. Çerçeve, ekran penceresi
yüzdeleri ve cam ORTAK ve ÖLÇÜLMÜŞ — "TİTANYUM İPHONE" bloğuna bak. */
.pshot--solo {
position: absolute; left: 0; top: 0; z-index: 1;
width: 100%; height: 100%;
transform: none; /* ⛔ .pshot'un hero konumlamasını iptal et */
/* Tam ortada dururken gölgenin düşecek yeri kalmıyordu; bir tık yukarı. */
translate: 0 -2.5%;
}
/* ⛔ NEREDEYSE DİK. Hero'daki ikisi eğik çünkü orada telefon bir SÜS;
burada telefon KONUNUN KENDİSİ ve büyük eğim hem okunurluğu düşürüyor
hem hazır şablon gibi görünüyor. Sadece bir nefes derinlik kalsın. */
.pshot--solo .pshot__tilt {
transform: perspective(2600px) rotateY(-4deg) rotateX(1.2deg);
}
/* Gölge: bulut sisine düşen yumuşak, sağ-alta uzanan leke. Telefonun
ağırlığı bundan geliyor; olmazsa yapıştırılmış duruyor.
⛔ Degrade, `drop-shadow()` DEĞİL (PERFORMANS bloğu). */
.pshot--solo::after {
/* ⛔ İlk denemede fazla sönüktü ve telefon havada YÜZÜYORDU. Gölge
nesnenin AĞIRLIĞIDIR; kısarsan cam bir dikdörtgen duvara yapıştırılmış
gibi durur — sökülen elin kusuru da tam olarak buydu. */
left: -26%; right: -40%; top: 10%; bottom: -22%;
background:
radial-gradient(38% 42% at 61% 64%, rgba(30,44,66,.58), transparent 70%),
radial-gradient(34% 20% at 66% 92%, rgba(30,44,66,.34), transparent 76%),
radial-gradient(52% 54% at 58% 60%, rgba(30,44,66,.18), transparent 78%);
}
/* Cam. ⛔ Hero'nun ışık düşmesi GECE gökyüzü için ayarlı (199deg, mavimsi);
burası gündüz ve ışık sol üstten geliyor. Yön ve renk buna göre. */
.pshot--solo .pshot__glare {
background: linear-gradient(152deg,
rgba(255,252,242,.22) 0%,
rgba(255,252,242,.07) 14%,
rgba(255,252,242,0) 30%,
rgba(255,252,242,0) 76%,
rgba(24,32,48,.06) 100%);
}
/* ⛔ Sönümleme hero'dan (1.2s) KISA olmalı: burada kare KAYDIRMAYLA
değişiyor ve uzun geçişte iki ekran üst üste binip bulanıyor. */
.hold__shot { transition: opacity .55s var(--ease); }
/* JS yoksa / hareket azaltılmışsa: ilk ekran açık, altyazılar alt alta */
.hold[data-fallback] { height: auto; }
.hold[data-fallback] .hold__pin { position: static; height: auto; padding-block: clamp(4rem, 9vw, 7rem); }
/* Hareket azaltılmışsa hepsi alt alta, hepsi görünür. */
.hold[data-fallback] .hold__copy { display: block; }
.hold[data-fallback] .hold__cap { opacity: 1; transform: none; margin-top: .9rem; }
/* ⛔ Hareket azaltılmışsa: A katmanı (varsayılan tema, ilk ekran) sabit
kalır, B hiç kullanılmaz, tema döngüsü kapalıdır (site.js). */
.hold[data-fallback] .hold__shot[data-layer="b"] { display: none; }
.hold[data-fallback] .hold__shot { opacity: 1; }
.hold[data-fallback] .hold__dots { display: none; }
/* ⛔ MOBİL YERLEŞİM AYRI KURULUR. Masaüstü düzeni (metin solda, el sağda)
tek sütuna sıkışınca telefon ekranı yutuyor, başlık altta eziliyordu
(owner: "çok amatörce görünüyor"). Dar ekranda: başlık ÖNCE, el ARKADA
ve KÜÇÜK, eğim yumuşak, dip taşması yok. */
@media (max-width: 900px) {
.hold__pin { padding-inline: var(--gut); }
.hold__grid { grid-template-columns: 1fr; gap: .6rem; }
.hold__copy { text-align: center; order: 1; }
/* ⛔ Dar ekranda BAŞLIK + TELEFON + DÜĞME aynı 100svh'ye sığmak zorunda.
--dev-h'i büyütürsen düğme telefonun üstüne biner. */
.hold { --capfs: clamp(1.45rem, 1rem + 2.4vw, 2rem);
--dev-h: clamp(290px, 55svh, 470px); }
.hold__stage { order: 2; margin-inline-start: 0; }
/* Dar kadrajda ışık taşmasın; yoksa krem yıkama bütün ekranı kaplıyor. */
.hold__beam { width: 190%; }
/* Dikleş: dar ekranda perspektif telefonun sağ kenarını eziyor. */
.pshot--solo .pshot__tilt { transform: perspective(2600px) rotateY(-2deg); }
.hold__veil {
background:
linear-gradient(to bottom, rgba(250,247,240,.80) 0%, rgba(250,247,240,.30) 40%, rgba(250,247,240,.66) 100%),
linear-gradient(to bottom, var(--bg) 0%, transparent 10%, transparent 88%, var(--bg) 100%);
}
}
@media (prefers-reduced-motion: reduce) { .hold { height: auto; } }
/* ⛔ "SAĞDAN SOLA KAYMA" BLOĞU SÖKÜLDÜ (0827). Animasyonu `[data-slid]`
niteliği tetikliyordu; onu ekleyen tek şey Voice+ tabelasıydı ve tabela
daha önce kaldırılmıştı. Yani animasyon HİÇ çalışmıyordu — CSS, iki HTML
niteliği ve bir @keyframes ölü duruyordu. Taşıyıcı olan tek kural
`overflow-x: clip`ti; o .vs'e taşındı (geniş tablo yatay kaydırma
üretmesin). ⛔ Geri eklemeden önce onu TETİKLEYEN şeyi yaz. */
/* ============================================================================
ÜCRETSİZ ↔ VOICE+ — KLASİK TABLO
----------------------------------------------------------------------------
Owner: "klasik bir tablo yapalım" + "TÜM HER ŞEYİ YAZ".
⛔ Süslü konsept YOK. Gerçek bir