/* komp.css — v3 · B · Bölünmüş ekran
Sol %40 sabit, nefes alan dokulu panel; sağda içerik akar.
Tek dosya, dört dal: .
Dışarıya bağımlılık yok (fontlar sayfanın kendi 'inden gelir). */
/* ---------------------------------------------------------------
1 · Kayıtlı özel nitelikler — ton ve ışık yumuşak geçsin diye
--------------------------------------------------------------- */
@property --ton-a { syntax: ""; inherits: true; initial-value: #1F3A8A; }
@property --ton-b { syntax: ""; inherits: true; initial-value: #5B78C9; }
@property --ton-c { syntax: ""; inherits: true; initial-value: #14162B; }
@property --isik-x { syntax: ""; inherits: true; initial-value: 30%; }
@property --isik-y { syntax: ""; inherits: true; initial-value: 28%; }
/* ---------------------------------------------------------------
2 · Ortak sözlük
--------------------------------------------------------------- */
:root {
--zemin: #F5F1E9; /* krem kâğıt */
--zemin-2: #EFEAE0; /* bir ton koyu kâğıt */
--murekkep: #17171A;
--murekkep-2: #4C4A47;
--murekkep-3: #7B7770;
--cizgi: #D8D2C6;
--panel-yazi: #F6F2EA;
--yuzey: #FFFFFF;
--yt-display: "Old Standard TT", Georgia, "Times New Roman", serif;
--yt-govde: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--display-ital: 0;
--panel-en: 40%;
--kolon: 41rem;
--ic-sol: clamp(28px, 5.4vw, 96px);
--serit-y: 0px; /* telefonda yapışkan şeridin yüksekliği */
/* gren — iki tane, iki iş:
(a) --gren: RENK ALANLARI için. Gri tonlu, ALFASI 1 gürültü; overlay ile
hem açar hem koyultur, yani gerçek film greni gibi davranır.
feTurbulence VARSAYILAN olarak linearRGB'de çalışır: gürültünün orta
grisi ekranda 0,73'e denk düşer, overlay/soft-light altında bütün
alan solar ve pembeye kayar. color-interpolation-filters="sRGB" şart.
(b) --gren-kagit: KREM KÂĞIT için. Siyah, alfası gürültülü; multiply ile
yalnız diş verir, kâğıdın rengini grileştirmez. */
--gren: url("data:image/svg+xml;utf8,");
--gren-kagit: url("data:image/svg+xml;utf8,");
color-scheme: light;
}
/* ---- dal paletleri: yalnız farkını yazar ---- */
[data-dal="o1"] { /* Muasır — ultramarin */
--v: #1F3A8A; --v-koyu: #101E4C; --v-orta: #3E5EB5; --v-acik: #6C87D2; --v-mur: #14172C;
--yt-display: "Old Standard TT", Georgia, serif;
--yt-alinti: "Old Standard TT", Georgia, serif;
}
[data-dal="o2"] { /* Onuncu Yıl — kobalt */
--v: #14489B; --v-koyu: #0B2455; --v-orta: #2D64BE; --v-acik: #6E93DE; --v-mur: #121627;
--yt-display: "Fraunces", Georgia, serif;
--yt-alinti: "Fraunces", Georgia, serif;
--display-ital: 1;
}
[data-dal="o3"] { /* Bir Satır — petrol yeşili, beyaza yakın kâğıt */
--v: #14594B; --v-koyu: #082A24; --v-orta: #2E7A67; --v-acik: #5FA090; --v-mur: #101A18;
--zemin: #FBFAF7; --zemin-2: #F2F0EA; --cizgi: #DDDAD2;
--yt-display: "Source Serif 4", Georgia, serif;
--yt-alinti: "Source Serif 4", Georgia, serif;
}
[data-dal="o4"] { /* Zabıt — belge mavisi */
--v: #1B4F7A; --v-koyu: #0A2740; --v-orta: #2E6E9F; --v-acik: #6FA3C8; --v-mur: #0E1620;
--yt-display: "Source Serif 4", Georgia, serif;
--yt-alinti: "Source Serif 4", Georgia, serif;
}
[data-dal="o5"] { /* Sayıyoruz — vermilyon */
--v: #C33A22; --v-koyu: #641508; --v-orta: #D25537; --v-acik: #E78566; --v-mur: #1E1310;
--yt-display: "Fraunces", Georgia, serif;
--yt-alinti: "Fraunces", Georgia, serif;
}
/* ---- bölüm tonları (sağdaki dokulu alanlar) ---- */
[data-ton="derin"] { --ton-a: var(--v-koyu); --ton-b: var(--v); --isik-x: 30%; --isik-y: 26%; }
[data-ton="acik"] { --ton-a: var(--v); --ton-b: var(--v-orta); --isik-x: 68%; --isik-y: 38%; }
[data-ton="murekkep"] { --ton-a: var(--v-mur); --ton-b: var(--v-koyu); --isik-x: 22%; --isik-y: 72%; }
[data-ton="alacak"] { --ton-a: var(--v-koyu); --ton-b: var(--v); --isik-x: 52%; --isik-y: 84%; }
/* O5 vermilyonu en açık dal: alanların açık ucu bir kademe koyu, yoksa
beyaz gövde metni 4,5:1 eşiğinin altına düşüyor (ölçüldü). */
[data-dal="o5"] [data-ton="derin"],
[data-dal="o5"] [data-ton="alacak"] { --ton-b: #B03318; }
/* ---- panelin tonu ----
Panel her zaman komşusundan bir adım derindir: kat yeri (sol %40 ile sağ
alan arasındaki sınır) hero'da bile görünsün. Değerler gerçek renk olarak
yazılır, çünkü @property geçişi ancak böyle yumuşak çalışır. */
[data-dal="o1"] .panel[data-ton="derin"] { --ton-a:#0A1233; --ton-b:#1C3373; --isik-x:32%; --isik-y:22%; }
[data-dal="o1"] .panel[data-ton="acik"] { --ton-a:#15275F; --ton-b:#35539F; --isik-x:72%; --isik-y:34%; }
[data-dal="o1"] .panel[data-ton="murekkep"] { --ton-a:#0B0D18; --ton-b:#101D47; --isik-x:18%; --isik-y:76%; }
[data-dal="o1"] .panel[data-ton="alacak"] { --ton-a:#0A1233; --ton-b:#2E4E9E; --isik-x:48%; --isik-y:88%; }
[data-dal="o2"] .panel[data-ton="derin"] { --ton-a:#071838; --ton-b:#123E85; --isik-x:32%; --isik-y:22%; }
[data-dal="o2"] .panel[data-ton="acik"] { --ton-a:#0D2E6B; --ton-b:#2F60B4; --isik-x:72%; --isik-y:34%; }
[data-dal="o2"] .panel[data-ton="murekkep"] { --ton-a:#090B16; --ton-b:#0E2450; --isik-x:18%; --isik-y:76%; }
[data-dal="o2"] .panel[data-ton="alacak"] { --ton-a:#071838; --ton-b:#29569E; --isik-x:48%; --isik-y:88%; }
[data-dal="o3"] .panel[data-ton="derin"] { --ton-a:#041A16; --ton-b:#0F4639; --isik-x:30%; --isik-y:24%; }
[data-dal="o3"] .panel[data-ton="acik"] { --ton-a:#0A342C; --ton-b:#2C6F5E; --isik-x:72%; --isik-y:36%; }
[data-dal="o3"] .panel[data-ton="murekkep"] { --ton-a:#080D0C; --ton-b:#0A2E27; --isik-x:18%; --isik-y:76%; }
[data-dal="o3"] .panel[data-ton="alacak"] { --ton-a:#041A16; --ton-b:#26665A; --isik-x:50%; --isik-y:88%; }
[data-dal="o4"] .panel[data-ton="derin"] { --ton-a:#061A2C; --ton-b:#14456E; --isik-x:30%; --isik-y:24%; }
[data-dal="o4"] .panel[data-ton="acik"] { --ton-a:#0E3555; --ton-b:#2A6392; --isik-x:72%; --isik-y:36%; }
[data-dal="o4"] .panel[data-ton="murekkep"] { --ton-a:#070C12; --ton-b:#0C2942; --isik-x:18%; --isik-y:76%; }
[data-dal="o4"] .panel[data-ton="alacak"] { --ton-a:#061A2C; --ton-b:#235C8C; --isik-x:50%; --isik-y:88%; }
[data-dal="o5"] .panel[data-ton="derin"] { --ton-a:#400C04; --ton-b:#9C2B15; --isik-x:32%; --isik-y:22%; }
[data-dal="o5"] .panel[data-ton="acik"] { --ton-a:#7A1C0C; --ton-b:#C24A2C; --isik-x:72%; --isik-y:34%; }
[data-dal="o5"] .panel[data-ton="murekkep"] { --ton-a:#140B09; --ton-b:#4C1005; --isik-x:18%; --isik-y:76%; }
[data-dal="o5"] .panel[data-ton="alacak"] { --ton-a:#400C04; --ton-b:#B04026; --isik-x:48%; --isik-y:88%; }
/* ---------------------------------------------------------------
3 · Temel
--------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--zemin);
color: var(--murekkep);
font-family: var(--yt-govde);
font-size: 18px;
line-height: 1.62;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
display: grid;
grid-template-columns: var(--panel-en) 1fr;
align-items: stretch;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* ---------------------------------------------------------------
4 · Sol panel — hiç kaybolmaz, yaşar
Sütunun tamamı renk alanıdır; içerik ve canlı doku 100svh'lik
yapışkan kutuda durur, sayfa boyunca ekranda kalır.
--------------------------------------------------------------- */
.panel {
position: relative;
min-height: 100vh; min-height: 100svh;
/* DİKKAT: burada overflow:hidden OLMAZ — .panel-ic'in sticky'sini öldürür. */
color: var(--panel-yazi);
box-shadow: inset -1px 0 0 color-mix(in oklab, #fff 14%, transparent);
isolation: isolate;
z-index: 20;
background: linear-gradient(158deg, var(--ton-a) 0%, var(--ton-b) 100%);
transition:
--ton-a 1500ms cubic-bezier(.4,0,.2,1),
--ton-b 1500ms cubic-bezier(.4,0,.2,1),
--isik-x 1900ms cubic-bezier(.4,0,.2,1),
--isik-y 1900ms cubic-bezier(.4,0,.2,1);
}
.panel::after { /* sütunun tamamına yayılan sabit gren */
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--gren); background-size: 200px 200px;
mix-blend-mode: overlay; opacity: .15;
}
.panel-doku {
position: absolute; inset: 0; z-index: -1; overflow: hidden;
background: linear-gradient(158deg, var(--ton-a) 0%, var(--ton-b) 100%);
}
/* ışık sızıntısı katmanları */
.isik { position: absolute; border-radius: 50%; mix-blend-mode: screen; pointer-events: none; }
.i1 {
width: 78%; aspect-ratio: 1 / 1; left: var(--isik-x); top: var(--isik-y);
translate: -50% -50%;
background: radial-gradient(circle at 50% 50%,
color-mix(in oklab, var(--ton-b) 82%, #fff) 0%,
color-mix(in oklab, var(--ton-b) 94%, #fff) 42%, transparent 70%);
opacity: .58;
animation: isik-gez-1 46s ease-in-out infinite, sizinti 31s ease-in-out infinite;
will-change: transform, opacity;
}
.i2 {
width: 56%; aspect-ratio: 1 / 1; right: -8%; bottom: -6%;
background: radial-gradient(circle at 50% 50%,
color-mix(in oklab, var(--ton-b) 66%, #fff) 0%, transparent 66%);
opacity: .34;
animation: isik-gez-2 62s ease-in-out infinite, sizinti 43s ease-in-out infinite;
will-change: transform, opacity;
}
.i3 {
width: 46%; aspect-ratio: 1 / 1; left: -12%; top: 44%;
background: radial-gradient(circle at 50% 50%,
color-mix(in oklab, var(--ton-a) 40%, #000) 0%, transparent 64%);
opacity: .45; mix-blend-mode: multiply;
animation: isik-gez-3 74s ease-in-out infinite;
will-change: transform;
}
/* nefes alan gren */
.gren-kat {
position: absolute; inset: -22%;
background-image: var(--gren); background-size: 200px 200px;
mix-blend-mode: overlay; opacity: .17;
animation: gren-suzul 68s ease-in-out infinite, gren-nefes 26s ease-in-out infinite;
will-change: transform, opacity;
}
/* panel içi yerleşim — yapışkan kutu: sayfa akarken ekranda kalır */
.panel-ic {
position: sticky; top: 0; z-index: 1;
height: 100vh; height: 100svh;
overflow: hidden; isolation: isolate;
display: flex; flex-direction: column;
padding: clamp(34px, 4.2vh, 52px) clamp(26px, 3vw, 46px) clamp(26px, 3.4vh, 40px);
}
.panel-ad {
margin: 0;
font-family: var(--yt-display);
font-weight: 400;
font-size: clamp(30px, 3.1vw, 46px);
line-height: 1.02;
letter-spacing: -.012em;
font-variation-settings: "opsz" 72, "SOFT" 30, "WONK" 1;
}
.panel-alt-ad {
margin: 10px 0 0;
font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
color: color-mix(in oklab, var(--panel-yazi) 62%, transparent);
}
.panel-govde { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.panel-cumle {
margin: clamp(22px, 3.4vh, 40px) 0 0;
max-width: 30ch;
font-family: var(--yt-alinti, var(--yt-display));
font-size: clamp(18px, 1.42vw, 22px);
line-height: 1.42;
font-style: italic;
color: color-mix(in oklab, var(--panel-yazi) 90%, transparent);
font-variation-settings: "opsz" 24, "SOFT" 60, "WONK" 1;
}
/* içindekiler */
.icindekiler { margin-top: clamp(24px, 4vh, 46px); }
.icindekiler ol { list-style: none; margin: 0; padding: 0; }
.icindekiler li { border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent); }
.icindekiler li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent); }
.icindekiler a {
display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; gap: 0 4px;
padding: clamp(7px, 1.05vh, 12px) 0;
text-decoration: none;
font-size: 15px; line-height: 1.3;
color: color-mix(in oklab, var(--panel-yazi) 60%, transparent);
transition: color 300ms ease, padding-left 420ms cubic-bezier(.4,0,.2,1);
}
.icindekiler .no { font-size: 11px; letter-spacing: .1em; font-variant-numeric: tabular-nums; opacity: .8; }
.icindekiler a:hover { color: var(--panel-yazi); }
.icindekiler a[aria-current="true"] { color: var(--panel-yazi); padding-left: 12px; }
.icindekiler a[aria-current="true"] .ad::after {
content: ""; display: block; height: 1px; margin-top: 6px;
background: color-mix(in oklab, var(--panel-yazi) 78%, transparent);
animation: cizgi-ac 520ms cubic-bezier(.4,0,.2,1);
}
/* panel dibi: aile şeridi + hukuk (klasik altbilgi yerine) */
.panel-dip { margin-top: auto; padding-top: clamp(18px, 3vh, 34px); }
.aile {
margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px;
font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
color: color-mix(in oklab, var(--panel-yazi) 58%, transparent);
}
.aile a { text-decoration: none; }
.aile a:hover { color: var(--panel-yazi); }
.aile .bu { color: var(--panel-yazi); }
.aile .bu::before { content: "· "; }
.panel-hukuk {
margin: 0; font-size: 10.5px; line-height: 1.5;
color: color-mix(in oklab, var(--panel-yazi) 46%, transparent);
}
.panel-hukuk a { text-decoration: none; border-bottom: 1px solid currentColor; }
/* okuma ilerlemesi: panelin sağ kenarında kılcal çizgi */
.ilerleme {
position: absolute; top: 0; right: 0; width: 2px; z-index: 5;
height: calc(var(--ilerleme, 0) * 100%);
background: color-mix(in oklab, var(--panel-yazi) 70%, transparent);
}
/* telefondaki şerit düğmesi — masaüstünde yok */
.serit-dugme, .serit-etiket { display: none; }
/* ---------------------------------------------------------------
5 · Sağ akış
--------------------------------------------------------------- */
main { min-width: 0; }
.bolum { position: relative; scroll-margin-top: var(--serit-y); }
.ic { max-width: var(--kolon); margin-left: var(--ic-sol); padding-right: clamp(20px, 4vw, 72px); }
.genis { max-width: 52rem; }
/* dokulu renk alanı */
.alan {
color: var(--panel-yazi);
isolation: isolate; overflow: hidden;
display: grid; align-content: center;
min-height: 82vh; min-height: 82svh;
padding: clamp(64px, 9vh, 120px) 0;
}
.alan-doku {
position: absolute; inset: 0; z-index: -1; overflow: hidden;
background: linear-gradient(150deg, var(--ton-a) 0%, var(--ton-b) 100%);
}
.alan .i1 { animation-duration: 54s, 37s; opacity: .36; } /* alanlarda ışık ölçülü: gövde metni de okunur kalsın */
/* en açık ton (alacak) gövde metni taşıyabilir; ışığı bir kademe daha kıs */
.alan[data-ton="alacak"] .i1 { opacity: .28; }
.alan[data-ton="alacak"] .i2 { opacity: .22; }
.alan .i2 { animation-duration: 71s, 46s; }
.alan .i3 { animation-duration: 83s; }
/* kâğıt bölüm — kâğıdın kendi dokusu: sabit, sessiz */
.kagit { padding: clamp(72px, 11vh, 150px) 0; }
.kagit.koyuca { background: var(--zemin-2); }
.kagit::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: var(--gren-kagit); background-size: 190px 190px;
mix-blend-mode: multiply; opacity: .075;
}
/* açılış: tam ekran; manşet kat yerine yaslanır, gövde bölümleri içeri çekilir */
.acilis { min-height: 100vh; min-height: 100svh; }
.acilis .ic { margin-left: clamp(24px, 3.4vw, 54px); max-width: 44rem; }
.alan .ic.yaslanik { margin-left: clamp(24px, 3.4vw, 54px); }
/* ---------------------------------------------------------------
6 · Tipografi
--------------------------------------------------------------- */
.afis {
margin: 0;
font-family: var(--yt-display); font-weight: 400;
font-size: clamp(40px, 6.1vw, 96px);
line-height: 1.015; letter-spacing: -.021em;
font-variation-settings: "opsz" 110, "SOFT" 20, "WONK" 1;
text-wrap: balance;
}
.afis em { font-style: italic; }
.baslik {
margin: 0;
font-family: var(--yt-display); font-weight: 400;
font-size: clamp(30px, 3.5vw, 54px);
line-height: 1.07; letter-spacing: -.017em;
font-variation-settings: "opsz" 60, "SOFT" 30, "WONK" 1;
text-wrap: balance;
}
.baslik.egik { font-style: italic; }
/* dala göre manşet karakteri — aynı iskelet, başka ses */
[data-dal="o2"] .afis { font-weight: 600; letter-spacing: -.03em; font-variation-settings: "opsz" 144, "SOFT" 45, "WONK" 1; }
[data-dal="o2"] .baslik { font-weight: 500; font-variation-settings: "opsz" 80, "SOFT" 55, "WONK" 1; }
[data-dal="o2"] .alinti { font-weight: 500; font-variation-settings: "opsz" 120, "SOFT" 70, "WONK" 1; }
[data-dal="o2"] .dizi h3, [data-dal="o2"] .madde-cumle { font-weight: 500; font-variation-settings: "opsz" 40, "SOFT" 50, "WONK" 1; }
[data-dal="o5"] .afis { font-weight: 800; letter-spacing: -.034em; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1; }
[data-dal="o5"] .baslik { font-weight: 700; letter-spacing: -.024em; font-variation-settings: "opsz" 90, "SOFT" 0, "WONK" 1; }
[data-dal="o5"] .alinti { font-weight: 700; font-variation-settings: "opsz" 120, "SOFT" 10, "WONK" 1; }
[data-dal="o5"] .sayilar b { font-weight: 700; font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 0; }
[data-dal="o5"] .panel-ad { font-weight: 700; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1; }
[data-dal="o5"] .dizi h3 { font-weight: 600; font-variation-settings: "opsz" 36, "SOFT" 0, "WONK" 0; }
[data-dal="o5"] .madde-cumle { font-size: clamp(23px, 2.4vw, 38px); font-weight: 600; letter-spacing: -.022em; font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1; }
[data-dal="o3"] .afis { letter-spacing: -.026em; font-variation-settings: "opsz" 60; }
[data-dal="o3"] .baslik { font-variation-settings: "opsz" 48; }
[data-dal="o4"] .afis { letter-spacing: -.024em; font-variation-settings: "opsz" 60; }
[data-dal="o4"] .baslik { font-variation-settings: "opsz" 48; }
.etiket {
margin: 0 0 clamp(18px, 2.6vh, 30px);
font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
color: color-mix(in oklab, currentColor 58%, transparent);
}
.alan .etiket { color: color-mix(in oklab, var(--panel-yazi) 74%, transparent); }
.giris {
margin: clamp(22px, 3vh, 34px) 0 0; max-width: 34em;
font-size: 19px; line-height: 1.58;
color: color-mix(in oklab, currentColor 82%, transparent);
}
.alan .giris { color: color-mix(in oklab, var(--panel-yazi) 84%, transparent); }
.govde { margin: 0 0 1.1em; max-width: 34em; font-size: 18px; }
.kucuk { font-size: 13px; line-height: 1.5; color: var(--murekkep-3); }
.alan .kucuk { color: color-mix(in oklab, var(--panel-yazi) 72%, transparent); }
.kunye-satir {
margin: clamp(26px, 4vh, 44px) 0 0;
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: color-mix(in oklab, var(--panel-yazi) 76%, transparent);
}
.ok {
display: inline-flex; align-items: center; gap: 10px;
margin-top: clamp(30px, 5vh, 56px);
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
text-decoration: none;
color: color-mix(in oklab, var(--panel-yazi) 70%, transparent);
}
.ok::after {
content: ""; width: 44px; height: 1px;
background: currentColor;
animation: ok-nefes 4.5s ease-in-out infinite;
}
.ok:hover { color: var(--panel-yazi); }
.baglanti {
display: inline-block; margin-top: 26px;
font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
text-decoration: none; padding-bottom: 5px;
border-bottom: 1px solid color-mix(in oklab, currentColor 45%, transparent);
transition: border-color 220ms ease;
}
.baglanti:hover { border-color: currentColor; }
/* ---------------------------------------------------------------
7 · Bileşenler — kart değil, dizgi
--------------------------------------------------------------- */
/* numaralı yazı dizisi (içindekiler / son yazılar) */
.dizi { list-style: none; margin: clamp(30px, 5vh, 56px) 0 0; padding: 0; }
.dizi > li { border-top: 1px solid var(--cizgi); }
.dizi > li:last-child { border-bottom: 1px solid var(--cizgi); }
.dizi-ic {
display: grid; grid-template-columns: 3.4em 1fr; gap: 0 12px;
padding: clamp(18px, 2.6vh, 28px) 0;
text-decoration: none; color: inherit;
}
.dizi .no {
font-size: 11px; letter-spacing: .12em; padding-top: .55em;
font-variant-numeric: tabular-nums; color: var(--murekkep-3);
}
.dizi .tur {
margin: 0 0 7px; font-size: 10.5px; letter-spacing: .18em;
text-transform: uppercase; color: var(--v);
}
.dizi h3 {
margin: 0; font-family: var(--yt-display); font-weight: 400;
font-size: clamp(21px, 1.7vw, 28px); line-height: 1.17; letter-spacing: -.012em;
font-variation-settings: "opsz" 36, "SOFT" 40, "WONK" 1;
}
.dizi .oz { margin: 9px 0 0; font-size: 15.5px; line-height: 1.52; color: var(--murekkep-2); max-width: 44ch; }
.dizi .kim { margin: 10px 0 0; font-size: 12px; letter-spacing: .05em; color: var(--murekkep-3); }
.dizi-ic:hover h3 { color: var(--v); }
.dizi-ic { transition: color 220ms ease; }
/* alan içindeki dizgi (koyu zeminde) */
.alan .dizi > li { border-color: color-mix(in oklab, var(--panel-yazi) 24%, transparent); }
.alan .dizi .no, .alan .dizi .kim { color: color-mix(in oklab, var(--panel-yazi) 60%, transparent); }
.alan .dizi .tur { color: color-mix(in oklab, var(--panel-yazi) 74%, transparent); }
.alan .dizi .oz { color: color-mix(in oklab, var(--panel-yazi) 78%, transparent); }
.alan .dizi-ic:hover h3 { color: color-mix(in oklab, var(--panel-yazi) 100%, transparent); }
/* tek cümlelik madde (O3) */
.maddeler { list-style: none; margin: clamp(30px, 5vh, 56px) 0 0; padding: 0; }
.maddeler > li { border-top: 1px solid var(--cizgi); padding: clamp(22px, 3vh, 34px) 0; }
.maddeler > li:last-child { border-bottom: 1px solid var(--cizgi); }
.madde-ust {
display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline;
margin-bottom: 14px;
font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
color: var(--v);
}
.madde-ust .say { color: var(--murekkep-3); font-variant-numeric: tabular-nums; }
.madde-cumle {
margin: 0; font-family: var(--yt-display); font-weight: 400;
font-size: clamp(20px, 1.85vw, 29px); line-height: 1.3; letter-spacing: -.01em;
font-variation-settings: "opsz" 40, "SOFT" 30, "WONK" 0;
}
.kaynak { margin: 14px 0 0; font-size: 12.5px; color: var(--murekkep-3); }
.kaynak span { white-space: nowrap; }
/* zaman çizgisi */
.zincir { list-style: none; margin: clamp(30px, 5vh, 56px) 0 0; padding: 0; }
.zincir > li {
display: grid; grid-template-columns: 8.6em 1fr; gap: 0 clamp(14px, 2vw, 30px);
padding: clamp(14px, 2vh, 22px) 0;
border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent);
}
.zincir > li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent); }
.zincir .tarih {
font-size: 12px; letter-spacing: .09em; text-transform: uppercase; padding-top: .35em;
color: color-mix(in oklab, var(--panel-yazi) 66%, transparent);
}
.zincir .bu-gun .tarih { color: var(--panel-yazi); }
.zincir p { margin: 0; font-size: 16.5px; line-height: 1.5; color: color-mix(in oklab, var(--panel-yazi) 88%, transparent); }
.zincir .bu-gun p { color: var(--panel-yazi); }
.zincir em { font-style: italic; }
.zincir .kynk { display: block; margin-top: 7px; font-size: 11.5px; color: color-mix(in oklab, var(--panel-yazi) 55%, transparent); }
/* alıntı posteri */
.alinti {
margin: 0; max-width: 20ch;
font-family: var(--yt-alinti, var(--yt-display)); font-weight: 400;
font-size: clamp(30px, 4.1vw, 62px); line-height: 1.1; letter-spacing: -.018em;
font-variation-settings: "opsz" 72, "SOFT" 55, "WONK" 1;
}
.alinti.uzun { max-width: 26ch; font-size: clamp(26px, 3.2vw, 48px); }
/* büyük rakam */
.sayilar { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: clamp(22px, 3vw, 44px) clamp(18px, 2.4vw, 36px); margin: clamp(34px, 5vh, 60px) 0 0; }
.sayilar div { border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 26%, transparent); padding-top: 14px; }
.sayilar b {
display: block; font-family: var(--yt-display); font-weight: 400;
font-size: clamp(38px, 4.2vw, 68px); line-height: .96; letter-spacing: -.03em;
font-variant-numeric: lining-nums tabular-nums;
font-variation-settings: "opsz" 90, "SOFT" 20, "WONK" 0;
}
.sayilar span { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: color-mix(in oklab, var(--panel-yazi) 78%, transparent); }
/* iki sütunlu tanım dizgisi */
.tanimlar { margin: clamp(30px, 5vh, 56px) 0 0; columns: 2; column-gap: clamp(28px, 3.4vw, 54px); }
.tanimlar > div { break-inside: avoid; padding: 14px 0; border-top: 1px solid var(--cizgi); }
.tanimlar dt { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.tanimlar dd { margin: 5px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--murekkep-2); }
/* etiketli satır listesi (halkalar, şehirler) */
.satirlar { list-style: none; margin: clamp(26px, 4vh, 48px) 0 0; padding: 0; columns: 2; column-gap: clamp(28px, 3.4vw, 54px); }
.satirlar li {
break-inside: avoid; display: flex; justify-content: space-between; gap: 12px;
padding: 9px 0; border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent);
font-size: 15px;
}
.satirlar .adet { font-size: 12px; letter-spacing: .06em; color: color-mix(in oklab, var(--panel-yazi) 60%, transparent); white-space: nowrap; }
.kagit .satirlar li { border-color: var(--cizgi); }
.kagit .satirlar .adet { color: var(--murekkep-3); }
/* takvim */
.takvim { list-style: none; margin: clamp(26px, 4vh, 48px) 0 0; padding: 0; }
.takvim li { display: grid; grid-template-columns: 4.4em 1fr; gap: 0 clamp(14px, 2vw, 26px); padding: clamp(16px, 2.2vh, 24px) 0; border-top: 1px solid var(--cizgi); }
.takvim li:last-child { border-bottom: 1px solid var(--cizgi); }
.takvim .gun { font-family: var(--yt-display); font-size: 30px; line-height: .92; letter-spacing: -.02em; }
.takvim .gun small { display: block; font-family: var(--yt-govde); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; margin-top: 6px; color: var(--murekkep-3); }
.takvim h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.takvim p { margin: 6px 0 0; font-size: 13px; color: var(--murekkep-3); }
/* künye sahnesi: üç kısa sütun */
.kunye-sut { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(22px, 3vw, 40px); margin: clamp(30px, 5vh, 54px) 0 0; }
.kunye-sut h4 { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in oklab, var(--panel-yazi) 62%, transparent); font-weight: 500; }
.kunye-sut ul { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.85; }
.kunye-sut a { text-decoration: none; color: color-mix(in oklab, var(--panel-yazi) 84%, transparent); }
.kunye-sut a:hover { color: var(--panel-yazi); }
.yasal {
margin: clamp(30px, 5vh, 52px) 0 0; padding-top: 18px; max-width: 46em;
border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent);
font-size: 11.5px; line-height: 1.6;
color: color-mix(in oklab, var(--panel-yazi) 58%, transparent);
}
/* kâğıt üstünde kullanıldığında: alan renklerinden kâğıt renklerine dön */
.kagit .etiket,
.kagit .kunye-satir,
.kagit .sayilar span,
.kagit .zincir .tarih,
.kagit .kunye-sut h4 { color: var(--murekkep-3); }
.kagit .zincir p { color: var(--murekkep-2); }
.kagit .zincir .bu-gun p { color: var(--murekkep); }
.kagit .zincir .kynk { color: var(--murekkep-3); }
.kagit .zincir > li,
.kagit .sayilar div,
.kagit .yasal { border-color: var(--cizgi); }
.kagit .yasal { color: var(--murekkep-3); }
.kagit .kunye-sut a { color: var(--murekkep-2); }
.kagit .kunye-sut a:hover { color: var(--v); }
.kagit .kucuk { color: var(--murekkep-3); }
/* alan üstünde: kâğıt bileşenlerini aydınlat */
.alan .tanimlar > div { border-color: color-mix(in oklab, var(--panel-yazi) 24%, transparent); }
.alan .tanimlar dd { color: color-mix(in oklab, var(--panel-yazi) 78%, transparent); }
.alan .maddeler > li { border-color: color-mix(in oklab, var(--panel-yazi) 24%, transparent); }
.alan .madde-ust { color: color-mix(in oklab, var(--panel-yazi) 74%, transparent); }
.alan .madde-ust .say, .alan .kaynak { color: color-mix(in oklab, var(--panel-yazi) 56%, transparent); }
.alan .takvim li { border-color: color-mix(in oklab, var(--panel-yazi) 24%, transparent); }
.alan .takvim .gun small, .alan .takvim p { color: color-mix(in oklab, var(--panel-yazi) 60%, transparent); }
/* küçük form */
.kutu-form { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(26px, 4vh, 40px) 0 0; max-width: 30em; }
.kutu-form input {
flex: 1 1 200px; min-width: 0; padding: 12px 14px;
border: 1px solid color-mix(in oklab, var(--panel-yazi) 34%, transparent);
background: transparent; color: inherit; font: inherit; font-size: 15px; border-radius: 2px;
}
.kutu-form input::placeholder { color: color-mix(in oklab, var(--panel-yazi) 46%, transparent); }
.kutu-form button {
padding: 12px 22px; border: 0; border-radius: 2px; cursor: pointer;
background: var(--panel-yazi); color: var(--ton-a);
font: inherit; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.kagit .kutu-form input { border-color: var(--cizgi); }
.kagit .kutu-form input::placeholder { color: var(--murekkep-3); }
.kagit .kutu-form button { background: var(--v); color: #fff; }
/* ===============================================================
7b · EK SAYFALAR — o4 arşiv, yazı, kayıt, katıl
Yalnız yeni sınıf ve yeni dal; yukarıdaki hiçbir kural değişmedi.
=============================================================== */
/* kanıt düzeyi çipi */
.cip {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 8px; border-radius: 2px;
font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
border: 1px solid color-mix(in oklab, currentColor 40%, transparent);
}
.cip.k1 { color: var(--v); }
.alan .cip { border-color: color-mix(in oklab, var(--panel-yazi) 42%, transparent); color: var(--panel-yazi); }
/* dürüstlük şeridi — panelde duran K1–K4 dağılımı */
.durustluk { margin-top: clamp(18px, 2.6vh, 30px); }
.durustluk h2 {
margin: 0 0 10px; font-family: var(--yt-govde); font-weight: 500;
font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
color: color-mix(in oklab, var(--panel-yazi) 58%, transparent);
}
.bar { display: flex; height: 6px; border-radius: 1px; overflow: hidden; }
.bar span { display: block; }
.bar .s1 { background: color-mix(in oklab, var(--panel-yazi) 92%, transparent); }
.bar .s2 { background: color-mix(in oklab, var(--panel-yazi) 62%, transparent); }
.bar .s3 { background: color-mix(in oklab, var(--panel-yazi) 36%, transparent); }
.bar .s4 { background: color-mix(in oklab, var(--panel-yazi) 18%, transparent); }
.durustluk ul { list-style: none; margin: 12px 0 0; padding: 0; }
.durustluk li {
display: grid; grid-template-columns: 2.4em 1fr auto; gap: 0 10px; align-items: baseline;
padding: 5px 0; font-size: 12px;
border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 16%, transparent);
color: color-mix(in oklab, var(--panel-yazi) 74%, transparent);
}
.durustluk b { font-weight: 500; letter-spacing: .1em; color: var(--panel-yazi); }
.durustluk .pay { font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--panel-yazi) 56%, transparent); }
.durustluk .itiraf {
margin: 10px 0 0; font-size: 11.5px; line-height: 1.5;
color: color-mix(in oklab, var(--panel-yazi) 62%, transparent);
}
/* panelde duran kayıt künyesi (o3-kayit) */
.kunye-kart { margin-top: clamp(16px, 2.4vh, 26px); }
.kunye-kart .ust { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.kunye-kart dl {
margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
font-size: 12.5px;
color: color-mix(in oklab, var(--panel-yazi) 74%, transparent);
}
.kunye-kart dt { letter-spacing: .1em; text-transform: uppercase; font-size: 10px; padding-top: .28em; color: color-mix(in oklab, var(--panel-yazi) 52%, transparent); }
.kunye-kart dd { margin: 0; }
.paylas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.paylas a {
padding: 6px 10px; border-radius: 2px; text-decoration: none;
font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
border: 1px solid color-mix(in oklab, var(--panel-yazi) 26%, transparent);
color: color-mix(in oklab, var(--panel-yazi) 78%, transparent);
transition: border-color 200ms ease, color 200ms ease;
}
.paylas a:first-child { border-color: color-mix(in oklab, var(--panel-yazi) 58%, transparent); color: var(--panel-yazi); }
.paylas a:hover { border-color: var(--panel-yazi); color: var(--panel-yazi); }
/* panelde duran üç madde (o5-katil, menüsüz sayfa) */
.ilkeler { list-style: none; margin: clamp(18px, 2.8vh, 32px) 0 0; padding: 0; counter-reset: i; }
.ilkeler li {
counter-increment: i;
display: grid; grid-template-columns: 1.9em 1fr; gap: 0 8px;
padding: 10px 0; font-size: 15.5px; line-height: 1.35;
border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 20%, transparent);
}
.ilkeler li::before {
content: counter(i); font-size: 11px; letter-spacing: .1em; padding-top: .45em;
color: color-mix(in oklab, var(--panel-yazi) 55%, transparent);
}
.panel-sayi {
display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 16px 0 0;
font-size: 11.5px; letter-spacing: .05em;
color: color-mix(in oklab, var(--panel-yazi) 62%, transparent);
}
.panel-sayi b { font-weight: 500; color: var(--panel-yazi); font-variant-numeric: tabular-nums; }
/* ---- okuma kolonu (o2-yazi, o3-kayit) ---- */
.afis.orta { font-size: clamp(31px, 3.9vw, 62px); line-height: 1.06; letter-spacing: -.018em; }
.afis.kucuk { font-size: clamp(25px, 2.7vw, 41px); line-height: 1.18; letter-spacing: -.012em; }
.ic.okuma { max-width: 44rem; padding-right: clamp(20px, 3vw, 40px); } /* ölçülen satır genişliği ~664 px */
.yazi > p { margin: 0 0 1.15em; font-size: 18.5px; line-height: 1.66; }
.yazi > p:first-child { margin-top: 0; }
.yazi h2 {
margin: clamp(38px, 5vh, 62px) 0 18px;
font-family: var(--yt-display); font-weight: 400;
font-size: clamp(23px, 2.1vw, 32px); line-height: 1.16; letter-spacing: -.014em;
}
.yazi strong, .yazi b { font-weight: 600; }
.yazi em { font-style: italic; }
.yazi a.ref {
font-size: .7em; vertical-align: super; text-decoration: none; padding: 0 1px;
color: var(--v); font-variant-numeric: lining-nums;
}
.alan .yazi a.ref { color: color-mix(in oklab, var(--panel-yazi) 80%, transparent); }
/* kenar notu — okuma kolonunun içinde duran, kâğıttan bir ton koyu blok */
.not {
margin: clamp(30px, 4vh, 44px) 0; padding: 22px 24px;
border-left: 2px solid var(--v); background: var(--zemin-2);
}
.not h3 { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; color: var(--murekkep-3); }
.not p { margin: 0; font-size: 16px; line-height: 1.58; color: var(--murekkep-2); }
.kagit.koyuca .not { background: var(--zemin); }
/* örnek düzeltme kutusu — "gösterim amaçlı" olduğu görünsün */
.duzeltme {
margin: clamp(30px, 4vh, 44px) 0; padding: 22px 24px;
border: 1px dashed color-mix(in oklab, var(--v) 45%, var(--cizgi));
background: color-mix(in oklab, var(--v) 4%, var(--zemin));
}
.duzeltme h3 {
margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--v);
}
.duzeltme h3 .ornek {
padding: 2px 7px; border-radius: 2px; letter-spacing: .12em;
background: color-mix(in oklab, var(--v) 14%, transparent);
}
.duzeltme p { margin: 0 0 .8em; font-size: 15.5px; line-height: 1.56; color: var(--murekkep-2); }
.duzeltme p:last-child { margin-bottom: 0; }
.duzeltme q { font-style: italic; }
/* kaynakça */
.kaynakca { list-style: none; counter-reset: k; margin: clamp(26px, 4vh, 42px) 0 0; padding: 0; }
/* DİKKAT: li ızgara yapılmaz. Izgara kabında her ve her metin parçası
ayrı (anonim) ızgara öğesi olur; künye numaraları numara sütununa düşüp
metnin üstüne biner. Asılı girinti + mutlak numara doğru çözüm. */
.kaynakca li {
counter-increment: k; position: relative;
padding: 13px 0 13px 2.4em; border-top: 1px solid var(--cizgi);
font-size: 14.5px; line-height: 1.52; color: var(--murekkep-2);
}
.kaynakca li:last-child { border-bottom: 1px solid var(--cizgi); }
.kaynakca li::before {
content: counter(k); position: absolute; left: 0; top: 13px;
font-size: 11px; letter-spacing: .08em; line-height: 2; color: var(--murekkep-3);
}
.kaynakca i { font-style: italic; }
.kaynakca b { font-weight: 600; color: var(--murekkep); }
.kaynakca .git { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 9px; }
.kaynakca .git a {
font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
padding-bottom: 3px; border-bottom: 1px solid color-mix(in oklab, var(--v) 45%, transparent); color: var(--v);
}
.alan .kaynakca li { border-color: color-mix(in oklab, var(--panel-yazi) 22%, transparent); color: color-mix(in oklab, var(--panel-yazi) 80%, transparent); }
.alan .kaynakca li::before { color: color-mix(in oklab, var(--panel-yazi) 55%, transparent); }
.alan .kaynakca b { color: var(--panel-yazi); }
.alan .kaynakca .git a { color: var(--panel-yazi); border-color: color-mix(in oklab, var(--panel-yazi) 45%, transparent); }
/* yazar kutusu */
.yazar-kutu {
display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: start;
margin: clamp(30px, 4vh, 48px) 0 0; padding-top: 22px; border-top: 1px solid var(--cizgi);
}
.yazar-kutu .bas {
width: 46px; height: 46px; display: grid; place-items: center;
border: 1px solid var(--cizgi); border-radius: 50%;
font-family: var(--yt-display); font-size: 16px; letter-spacing: .02em;
}
.yazar-kutu h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.yazar-kutu p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--murekkep-2); }
/* sürüm listesi */
.surumler { list-style: none; margin: clamp(24px, 3.4vh, 38px) 0 0; padding: 0; }
.surumler li {
display: grid; grid-template-columns: 6.2em 1fr auto; gap: 0 14px; align-items: baseline;
padding: 12px 0; border-top: 1px solid var(--cizgi); font-size: 14.5px;
}
.surumler li:last-child { border-bottom: 1px solid var(--cizgi); }
.surumler .sur { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--v); }
.surumler .ne { color: var(--murekkep-2); }
.surumler a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--cizgi); }
/* numaralı adımlar (o5-katil: gönderdikten sonra ne oluyor) */
.adimlar { list-style: none; counter-reset: a; margin: clamp(30px, 5vh, 52px) 0 0; padding: 0; }
.adimlar li {
counter-increment: a;
display: grid; grid-template-columns: 2.6em 1fr; gap: 0 14px;
padding: clamp(16px, 2.2vh, 24px) 0;
border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent);
font-size: 17px; line-height: 1.55;
}
.adimlar li:last-child { border-bottom: 1px solid color-mix(in oklab, var(--panel-yazi) 22%, transparent); }
.adimlar li::before {
content: counter(a); font-family: var(--yt-display);
font-size: 26px; line-height: 1; letter-spacing: -.02em;
color: color-mix(in oklab, var(--panel-yazi) 62%, transparent);
}
.kagit .adimlar li { border-color: var(--cizgi); }
.kagit .adimlar li::before { color: var(--murekkep-3); }
/* isim bandı — kişi sayfası yok, yalnız ad ve resmî sıfat */
.isim-bandi { margin: clamp(26px, 4vh, 46px) 0 0; }
.isim-bandi ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(26px, 3.2vw, 50px); }
.isim-bandi li {
break-inside: avoid; padding: 10px 0;
border-top: 1px solid color-mix(in oklab, var(--panel-yazi) 20%, transparent);
}
.isim-bandi b { display: block; font-weight: 500; font-size: 15px; }
.isim-bandi span { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: color-mix(in oklab, var(--panel-yazi) 64%, transparent); }
.kagit .isim-bandi li { border-color: var(--cizgi); }
.kagit .isim-bandi span { color: var(--murekkep-3); }
/* tarihli kayıt dizisi (o4) */
.dizi.tarihli .dizi-ic { grid-template-columns: 7.4em 1fr; }
.dizi.tarihli .no { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.dizi .cipler { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 10px 0 0; }
.dizi .eksen { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--murekkep-3); }
.alan .dizi .eksen { color: color-mix(in oklab, var(--panel-yazi) 58%, transparent); }
/* form (o5-katil) — 44 px kontrol, id'li, etiketli */
.form { margin: clamp(30px, 5vh, 52px) 0 0; max-width: 34rem; }
.form-alan { margin-bottom: 18px; }
.form-alan label { display: block; margin-bottom: 7px; font-size: 13px; letter-spacing: .04em; font-weight: 500; }
.form-alan label .z { color: var(--v); }
.form-alan input, .form-alan select {
width: 100%; min-height: 44px; padding: 11px 14px;
border: 1px solid var(--cizgi); border-radius: 2px;
background: var(--yuzey, #fff); color: var(--murekkep);
font: inherit; font-size: 16px;
}
.form-alan input:focus-visible, .form-alan select:focus-visible,
.onay input:focus-visible, .form button:focus-visible {
outline: 2px solid var(--v); outline-offset: 2px;
}
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.onay {
display: grid; grid-template-columns: 22px 1fr; gap: 0 12px; align-items: start;
padding: 12px 0; border-top: 1px solid var(--cizgi);
font-size: 14.5px; line-height: 1.5;
}
.onay input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--v); }
.onay:last-of-type { border-bottom: 1px solid var(--cizgi); }
.form .kvkk { margin: 20px 0 0; font-size: 13.5px; line-height: 1.58; color: var(--murekkep-2); }
.form .kvkk a { color: var(--v); }
.form button[type="submit"] {
margin-top: 24px; min-height: 48px; padding: 13px 30px;
border: 0; border-radius: 2px; cursor: pointer;
background: var(--v); color: #fff;
font: inherit; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
/* önceki / sonraki geçiş */
.gecis {
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
margin: clamp(30px, 4vh, 48px) 0 0; padding-top: 20px; border-top: 1px solid var(--cizgi);
font-size: 13px;
}
.gecis a { text-decoration: none; color: var(--murekkep-2); }
.gecis a:hover { color: var(--v); }
/* kısa ekranda panel sıkışsın — yalnız masaüstü paneli etkiler */
@media (min-width: 881px) and (max-height: 820px) {
.panel-ic { padding-top: 28px; padding-bottom: 24px; }
.panel-ad { font-size: clamp(26px, 2.4vw, 34px); }
.panel-cumle { margin-top: 18px; font-size: 17px; }
.icindekiler { margin-top: 18px; }
.icindekiler a { padding: 6px 0; font-size: 14px; }
.durustluk, .kunye-kart, .ilkeler { margin-top: 16px; }
.ilkeler li { padding: 7px 0; font-size: 14.5px; }
.panel-dip { padding-top: 14px; }
}
/* ---------------------------------------------------------------
8 · Hareket — 26–83 s, yalnız transform/opacity
--------------------------------------------------------------- */
@keyframes gren-suzul {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(-2.6%, 1.8%, 0); }
50% { transform: translate3d(2.1%, -2.4%, 0); }
75% { transform: translate3d(-1.4%, -1.1%, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes gren-nefes { 0%, 100% { opacity: .13; } 50% { opacity: .24; } }
@keyframes isik-gez-1 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(10%, -8%, 0) scale(1.2); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes isik-gez-2 {
0% { transform: translate3d(0, 0, 0) scale(1.06); }
50% { transform: translate3d(-13%, 10%, 0) scale(.88); }
100% { transform: translate3d(0, 0, 0) scale(1.06); }
}
@keyframes isik-gez-3 {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(9%, -13%, 0) scale(1.14); }
100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes sizinti { 0%, 100% { opacity: .38; } 50% { opacity: .74; } }
@keyframes ok-nefes { 0%, 100% { transform: scaleX(.55); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } }
@keyframes cizgi-ac { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
/* ---------------------------------------------------------------
9 · Telefon — sol panel üstte yapışkan ince dokulu şeride döner
--------------------------------------------------------------- */
@media (max-width: 880px) {
:root { --serit-y: 58px; --ic-sol: 18px; }
body { grid-template-columns: 1fr; font-size: 17px; }
.panel {
position: sticky; top: 0; height: auto; min-height: 0; z-index: 40;
box-shadow: inset 0 -1px 0 color-mix(in oklab, #fff 20%, transparent),
0 10px 22px -18px rgba(0, 0, 0, .8);
}
.panel::after { opacity: .13; }
.panel-ic { position: relative; height: auto; overflow: visible; padding: 0 18px; }
.panel-bas {
display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
min-height: 58px;
}
.panel-ad { font-size: 19px; letter-spacing: -.005em; }
.panel-alt-ad { display: none; }
.serit-etiket {
display: block; margin: 2px 0 0; font-size: 10.5px; letter-spacing: .16em;
text-transform: uppercase;
color: color-mix(in oklab, var(--panel-yazi) 62%, transparent);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.serit-dugme {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 12px; border-radius: 2px; cursor: pointer;
border: 1px solid color-mix(in oklab, var(--panel-yazi) 34%, transparent);
background: transparent; color: inherit;
font: inherit; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.serit-dugme::after { content: "+"; font-size: 13px; line-height: 1; }
.panel[data-acik="1"] .serit-dugme::after { content: "×"; }
.panel-govde { padding-bottom: 26px; }
.panel-cumle { margin-top: 18px; font-size: 18px; }
.icindekiler { margin-top: 20px; }
.panel-dip { padding-top: 22px; }
/* JS açıkken: şerit kapalı başlar, düğmeyle tam ekran açılır */
.panel[data-mod="serit"] .panel-govde { display: none; }
.panel[data-mod="serit"][data-acik="1"] {
height: 100vh; height: 100svh;
overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.panel[data-mod="serit"][data-acik="1"] .panel-govde { display: flex; }
.panel[data-mod="serit"][data-acik="1"] .panel-ic {
min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 30px;
}
.ilerleme { top: auto; bottom: 0; right: auto; left: 0; width: calc(var(--ilerleme, 0) * 100%); height: 2px; }
.alan { min-height: 76svh; padding: clamp(54px, 8vh, 84px) 0; }
.acilis { min-height: calc(100svh - 58px); }
.kagit { padding: clamp(54px, 8vh, 96px) 0; }
.ic { padding-right: 18px; }
.afis { font-size: clamp(38px, 11.8vw, 52px); letter-spacing: -.018em; }
.baslik { font-size: clamp(27px, 7.6vw, 36px); }
.alinti { font-size: clamp(27px, 8.4vw, 38px); max-width: 100%; }
.alinti.uzun { font-size: clamp(24px, 7vw, 32px); max-width: 100%; }
.madde-cumle { font-size: clamp(19px, 5.2vw, 23px); }
.dizi h3 { font-size: clamp(20px, 5.4vw, 24px); }
.tanimlar, .satirlar { columns: 1; }
.isim-bandi ul { columns: 1; }
.form-ikili { grid-template-columns: 1fr; }
.surumler li { grid-template-columns: 1fr; gap: 4px; }
.kunye-kart dl { grid-template-columns: 1fr; gap: 2px; }
.kunye-kart dt { padding-top: 6px; }
.ic.okuma { padding-right: 18px; }
.yazi > p { font-size: 17.5px; }
.not, .duzeltme { padding: 18px 18px; }
.adimlar li { grid-template-columns: 1.9em 1fr; font-size: 16px; }
.dizi-ic { grid-template-columns: 2.6em 1fr; }
.zincir > li { grid-template-columns: 1fr; gap: 6px; }
.zincir .tarih { padding-top: 0; }
.sayilar { grid-template-columns: repeat(2, 1fr); }
.sayilar b { font-size: clamp(34px, 11vw, 46px); }
}
@media (max-width: 400px) {
.icindekiler a { font-size: 14px; }
.kutu-form { flex-direction: column; }
}
/* ---------------------------------------------------------------
10 · Hareket kısıtı — gren sabit kalır, görünür
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation: none !important;
transition-duration: 1ms !important;
}
.gren-kat { opacity: .19; }
.i1 { opacity: .6; } .i2 { opacity: .34; } .i3 { opacity: .45; }
.ok::after { transform: scaleX(1); }
}
/* yazdırma: panel akışa girer */
@media print {
body { display: block; }
.panel { position: static; height: auto; }
.kagit-gren, .panel-doku, .alan-doku { display: none; }
.alan, .panel { color: #000; }
}