/* ==========================================================================
komp.css — M · MOZAİK (v3 · 19.09.2026)
Tek dosya, dört dal. Dal ile seçilir.
Görsel dosya YOK: bütün doku (gren) ve ışık (radial-gradient) kodla üretilir.
İmza hareketi: sayfa bir mozaiktir ve ışık mozaiğin içinde gezer —
bir kutunun üstüne gelince o kutunun ışığı yer değiştirir, komşuların ışığı çekilir.
========================================================================== */
/* ---- 1. Sözlük ---------------------------------------------------------- */
:root {
/* kâğıt ve mürekkep */
--kagit: #F7F4EE;
--kagit-2: #FFFDF8;
--murekkep: #171512;
--murekkep-2: #4C473F;
--murekkep-3: #7B756A;
--cizgi: #E3DDD2;
/* dal vurgusu (aşağıda dala göre değişir) */
--vurgu: #1F3A8A;
/* vurgunun tonları — gradyan yalnız bu aile içinde kullanılır */
--v-derin: color-mix(in oklab, var(--vurgu) 58%, var(--murekkep));
--v-koyu: color-mix(in oklab, var(--vurgu) 74%, var(--murekkep));
--v-orta: var(--vurgu);
--v-parlak: color-mix(in oklab, var(--vurgu) 74%, #FFFFFF);
--v-sis: color-mix(in oklab, var(--vurgu) 17%, var(--kagit));
--v-duman: color-mix(in oklab, var(--vurgu) 7%, var(--kagit));
/* yazı tipleri */
--yt-hero: "Old Standard TT", Georgia, serif;
--yt-baslik: "Source Serif 4", Georgia, serif;
--yt-govde: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
--hero-ital: normal;
--hero-agirlik: 400;
--hero-varyasyon: normal;
--baslik-varyasyon: normal;
--yaricap: 2px;
--aralik: 10px;
--egri: cubic-bezier(.22, .61, .36, 1);
/* gren: tek kaynak, her yerde aynı taş. feTurbulence çıktısı gri tonuna indirilip
alfa 1'e sabitlendi; böylece katman "overlay" ile hem aydınlatıp hem karartıyor.
color-interpolation-filters='sRGB' şart: varsayılan linearRGB'de gürültünün orta
değeri ekranda 0,73'e denk düşüyor ve overlay bütün renk alanlarını bir kat
aydınlatıp soldurtuyordu (ölçüldü). */
--gren: url("data:image/svg+xml;utf8,");
color-scheme: light;
}
/* ---- dal farkları: yalnız renk ve yazı tipi ---- */
[data-dal="o1"] { --vurgu: #1F3A8A; } /* Muasır — ultramarin */
[data-dal="o2"] { --vurgu: #14489B; /* Onuncu Yıl — kobalt */
--yt-hero: "Fraunces", Georgia, serif;
--yt-baslik: "Fraunces", Georgia, serif;
--hero-ital: italic;
--hero-agirlik: 700;
--hero-varyasyon: "opsz" 144, "SOFT" 100, "WONK" 1;
--baslik-varyasyon: "opsz" 48, "SOFT" 60, "WONK" 1;
}
[data-dal="o3"] { --vurgu: #14594B; /* Bir Satır — petrol yeşili */
--kagit: #FBFAF7; --kagit-2: #FFFFFF; --cizgi: #E7E4DD;
--yt-hero: "Source Serif 4", Georgia, serif;
--yt-baslik: "Source Serif 4", Georgia, serif;
--hero-agirlik: 600;
}
[data-dal="o5"] { --vurgu: #C33A22; /* Sayıyoruz — vermilyon */
--yt-hero: "Fraunces", Georgia, serif;
--yt-baslik: "Fraunces", Georgia, serif;
--hero-agirlik: 900;
--hero-varyasyon: "opsz" 144, "SOFT" 0, "WONK" 0;
--baslik-varyasyon: "opsz" 48, "SOFT" 0, "WONK" 0;
}
/* ---- 2. Temel ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* mozaiğin derzi: kutulardan bir ton koyu krem kâğıt */
body {
margin: 0;
background: color-mix(in oklab, var(--kagit) 94%, var(--murekkep));
color: var(--murekkep);
font: 400 18px/1.62 var(--yt-govde);
font-synthesis-weight: none;
overflow-x: hidden;
}
@media (max-width: 560px) { body { font-size: 17px; } }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: color-mix(in srgb, var(--vurgu) 22%, transparent); }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 3px; }
/* ---- 3. Doku katmanı (her renk alanında aynı iskelet) -------------------- */
.doku {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
transition: opacity 760ms var(--egri);
}
/* ışık lekeleri: iki ayrı yer, hover'da yer değiştiriyorlar */
.doku i {
position: absolute;
inset: -20%;
display: block;
transition: opacity 980ms var(--egri);
}
.doku .l1 {
background: radial-gradient(46% 46% at 24% 20%, var(--isik, transparent) 0%, transparent 68%);
opacity: var(--l1-op, .9);
animation: gez-1 var(--gez, 54s) ease-in-out infinite alternate;
will-change: transform;
}
.doku .l2 {
background: radial-gradient(44% 44% at 78% 80%, var(--isik-2, var(--isik, transparent)) 0%, transparent 66%);
opacity: var(--l2-op, .12);
animation: gez-2 calc(var(--gez, 54s) * 1.34) ease-in-out infinite alternate;
will-change: transform;
}
/* gren: kâğıdın kendisi */
.doku .g {
position: absolute;
inset: 0;
background-image: var(--gren);
background-size: 220px 220px;
opacity: var(--gren-op, .26);
mix-blend-mode: overlay;
}
.doku .g--suzul { animation: gren-suzul var(--suzul, 58s) linear infinite; }
.doku .g--nefes { animation: gren-nefes .82s steps(1, end) infinite; }
/* Ölçüldü: koyu zeminde "soft-light" greni bir kat aydınlatıyor (vermilyon alan
120,56,41 → 145,99,89 oluyor, renk pembeye kaçıyor). "overlay" orta gri değerde
nötr olduğu için hem koyu alanda hem açık kâğıtta tonu bozmadan yalnız diş
veriyor: tek harman kipi odur, yalnız opaklık alana göre değişir. */
@keyframes gez-1 {
from { transform: translate3d(-5%, -4%, 0) scale(1); }
to { transform: translate3d(8%, 6%, 0) scale(1.14); }
}
@keyframes gez-2 {
from { transform: translate3d(6%, 5%, 0) scale(1.1); }
to { transform: translate3d(-7%, -6%, 0) scale(1); }
}
@keyframes gren-suzul {
from { background-position: 0 0; }
to { background-position: 220px 660px; }
}
/* 8–9 kare/saniye: gren "titrer" ama kaymaz — feTurbulence seed değişiminin
boya maliyeti olmayan karşılığı (aynı taş, her karede başka noktadan). */
@keyframes gren-nefes {
0% { background-position: 0px 0px; }
12% { background-position: 71px 33px; }
24% { background-position: 133px 101px; }
36% { background-position: 19px 77px; }
48% { background-position: 107px 15px; }
60% { background-position: 47px 139px; }
72% { background-position: 151px 61px; }
84% { background-position: 85px 119px; }
100% { background-position: 13px 45px; }
}
/* ---- 4. Hero: dokulu alan üstünde tek serif cümle ------------------------ */
.hero {
position: relative;
isolation: isolate;
min-height: 100vh;
min-height: 100svh;
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--b, 20px);
padding: clamp(18px, 2.6vw, 34px);
overflow: hidden;
background:
linear-gradient(152deg,
color-mix(in oklab, var(--vurgu) 34%, var(--murekkep)) 0%,
var(--v-koyu) 46%,
var(--v-derin) 100%);
color: color-mix(in oklab, #FFFFFF 93%, var(--vurgu));
--isik: color-mix(in srgb, var(--v-parlak) 50%, transparent);
--isik-2: color-mix(in srgb, #FFFFFF 15%, transparent);
--l1-op: .62;
--l2-op: .46;
--gez: 44s;
--gren-op: .17;
}
.hero .doku .l3 {
position: absolute;
inset: -26%;
display: block;
background: radial-gradient(40% 40% at 66% 10%, color-mix(in srgb, #FFFFFF 17%, transparent) 0%, transparent 62%);
opacity: .55;
animation: gez-3 68s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes gez-3 {
from { transform: translate3d(4%, -6%, 0) scale(1.05); }
to { transform: translate3d(-9%, 9%, 0) scale(1.22); }
}
/* :not(.doku) şart — aksi hâlde doku katmanı `position: relative` olup ızgara
hücresine düşüyor, ışık ve gren tamamen kayboluyor. */
.hero > *:not(.doku) { position: relative; z-index: 1; }
.hero__kunye {
font: 500 13px/1.5 var(--yt-govde);
letter-spacing: .1em;
text-transform: uppercase;
color: color-mix(in oklab, #FFFFFF 64%, var(--vurgu));
}
.hero__kunye b { font-weight: 700; color: color-mix(in oklab, #FFFFFF 88%, var(--vurgu)); }
.hero__cumle {
align-self: center;
justify-self: start;
max-width: 17ch;
margin: clamp(24px, 4vw, 56px) 0;
font-family: var(--yt-hero);
font-style: var(--hero-ital);
font-weight: var(--hero-agirlik);
font-variation-settings: var(--hero-varyasyon);
font-size: clamp(2.6rem, 7.1vw, 6.5rem);
line-height: .99;
letter-spacing: -.018em;
text-wrap: balance;
}
[data-dal="o1"] .hero__cumle { letter-spacing: -.005em; line-height: 1.02; }
.hero__ok {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 2px;
font: 500 12px/1 var(--yt-govde);
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
color: color-mix(in oklab, #FFFFFF 72%, var(--vurgu));
}
.hero__ok svg { width: 13px; height: 22px; animation: ok-in 4.6s ease-in-out infinite; }
@keyframes ok-in {
0%, 68%, 100% { transform: translateY(0); opacity: .75; }
84% { transform: translateY(5px); opacity: 1; }
}
.hero__ok:hover { color: #FFFFFF; }
/* ---- 5. Mozaik ---------------------------------------------------------- */
.mozaik {
display: grid;
gap: var(--aralik);
padding: var(--aralik);
max-width: 1460px;
margin: 0 auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* satırlar bilerek eşit değil: mozaik ızgara gibi okunmasın */
grid-template-rows:
minmax(13rem, auto)
minmax(16.5rem, auto)
minmax(16rem, auto)
minmax(11.5rem, auto);
grid-template-areas:
"son son rakam alinti"
"son son dosya alinti"
"katil kayit kayit bulten"
"katil kunye aile bulten";
}
.a-son { grid-area: son; --gez: 62s; }
.a-rakam { grid-area: rakam; --gez: 40s; }
.a-alinti { grid-area: alinti; --gez: 50s; }
.a-dosya { grid-area: dosya; --gez: 46s; }
.a-katil { grid-area: katil; --gez: 58s; }
.a-kayit { grid-area: kayit; --gez: 66s; }
.a-bulten { grid-area: bulten; --gez: 52s; }
.a-aile { grid-area: aile; --gez: 44s; }
.a-kunye { grid-area: kunye; --gez: 70s; }
/* kutu: kendi dokusu, kendi ışığı */
.kutu {
position: relative;
isolation: isolate;
overflow: hidden;
border-radius: var(--yaricap);
padding: clamp(17px, 1.6vw, 28px);
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
background: var(--kagit-2);
border: 1px solid var(--cizgi);
--isik: color-mix(in srgb, var(--vurgu) 22%, transparent);
--isik-2: color-mix(in srgb, var(--vurgu) 15%, transparent);
--gren-op: .24;
}
/* kum: krem kâğıdın bir ton sıcak kardeşi — mozaikte iki beyazın yan yana
düşmemesi için (kutular birbirinin aynısı olmasın diye) */
.kutu--kum {
background: linear-gradient(170deg, var(--kagit), color-mix(in oklab, var(--kagit) 90%, var(--murekkep)));
--gren-op: .3;
}
.kutu > *:not(.doku) { position: relative; z-index: 1; min-width: 0; }
/* dolu renk alanları */
.kutu--dolu {
border-color: transparent;
background: linear-gradient(156deg, var(--v-koyu), var(--v-orta));
color: color-mix(in oklab, #FFFFFF 94%, var(--vurgu));
--isik: color-mix(in srgb, var(--v-parlak) 62%, transparent);
--isik-2: color-mix(in srgb, #FFFFFF 26%, transparent);
--l1-op: .58;
--l2-op: .2;
--gren-op: .18;
}
.kutu--derin {
border-color: transparent;
background: linear-gradient(200deg, var(--v-derin), color-mix(in oklab, var(--vurgu) 24%, var(--murekkep)));
color: color-mix(in oklab, #FFFFFF 90%, var(--vurgu));
--isik: color-mix(in srgb, var(--v-orta) 78%, transparent);
--isik-2: color-mix(in srgb, var(--v-parlak) 34%, transparent);
--l1-op: .62;
--l2-op: .22;
--gren-op: .18;
}
.kutu--sis {
background: linear-gradient(168deg, var(--v-sis), var(--v-duman));
border-color: color-mix(in oklab, var(--vurgu) 16%, var(--cizgi));
--isik: color-mix(in srgb, var(--vurgu) 28%, transparent);
--gren-op: .28;
}
/* ---- imza hareketi: ışık mozaiğin içinde gezer ---- */
.kutu:hover .doku .l1,
.kutu:focus-within .doku .l1 { opacity: .14; }
.kutu:hover .doku .l2,
.kutu:focus-within .doku .l2 { opacity: .95; }
.mozaik:has(.kutu:hover) .kutu:not(:hover) .doku,
.mozaik:has(.kutu:focus-within) .kutu:not(:focus-within) .doku { opacity: .38; }
/* ---- 6. Kutu içi tipografi ---------------------------------------------- */
.etiket {
font: 600 11px/1.3 var(--yt-govde);
letter-spacing: .15em;
text-transform: uppercase;
color: var(--murekkep-3);
}
.kutu--dolu .etiket,
.kutu--derin .etiket { color: color-mix(in oklab, #FFFFFF 58%, var(--vurgu)); }
.kutu--sis .etiket { color: color-mix(in oklab, var(--vurgu) 78%, var(--murekkep)); }
.baslik {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 600;
font-size: clamp(1.32rem, 1.55vw, 1.75rem);
line-height: 1.14;
letter-spacing: -.012em;
text-wrap: balance;
}
.baslik--dev {
font-size: clamp(1.9rem, 2.85vw, 2.9rem);
line-height: 1.06;
}
.a-son .baslik--dev { font-size: clamp(2rem, 3.25vw, 3.35rem); letter-spacing: -.02em; }
.baslik--ital { font-style: italic; }
.metin { font-size: 16px; line-height: 1.58; color: var(--murekkep-2); }
.kutu--dolu .metin,
.kutu--derin .metin { color: color-mix(in oklab, #FFFFFF 80%, var(--vurgu)); }
.meta {
font: 400 13px/1.45 var(--yt-govde);
color: var(--murekkep-3);
}
.kutu--dolu .meta,
.kutu--derin .meta { color: color-mix(in oklab, #FFFFFF 62%, var(--vurgu)); }
.kaynak {
font: 400 12.5px/1.45 var(--yt-govde);
color: var(--murekkep-3);
}
.kutu--dolu .kaynak,
.kutu--derin .kaynak { color: color-mix(in oklab, #FFFFFF 56%, var(--vurgu)); }
.dolgu { margin-top: auto; }
/* tüm kutuyu tıklanır yapan görünmez bağ */
.bag { text-decoration: none; color: inherit; }
.bag::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ok-sat {
display: inline-flex;
align-items: center;
gap: 8px;
font: 600 13px/1 var(--yt-govde);
letter-spacing: .02em;
color: var(--vurgu);
}
.kutu--dolu .ok-sat,
.kutu--derin .ok-sat { color: color-mix(in oklab, #FFFFFF 92%, var(--vurgu)); }
.kutu--sis .ok-sat { color: color-mix(in oklab, var(--vurgu) 88%, var(--murekkep)); }
/* dev rakam */
.rakam {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 700;
font-size: clamp(3.4rem, 5.6vw, 5.4rem);
line-height: .88;
letter-spacing: -.035em;
font-variant-numeric: lining-nums;
}
[data-dal="o3"] .rakam { font-size: clamp(2.8rem, 4.5vw, 4.4rem); }
/* alıntı — dar ve uzun kutuda dikeyde ortalanır */
.a-alinti .alinti { margin: auto 0; }
.alinti {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-style: italic;
font-weight: 500;
font-size: clamp(1.3rem, 1.75vw, 1.95rem);
line-height: 1.22;
letter-spacing: -.01em;
}
/* satır listesi (son kayıtlar, etkinlikler, içindekiler) */
.satirlar { display: flex; flex-direction: column; }
.satirlar li {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 6px 16px;
align-items: baseline;
padding: 11px 0;
border-top: 1px solid color-mix(in oklab, var(--cizgi) 82%, transparent);
}
.satirlar li:first-child { border-top: 0; padding-top: 2px; }
.kutu--dolu .satirlar li,
.kutu--derin .satirlar li { border-top-color: color-mix(in srgb, #FFFFFF 18%, transparent); }
.satirlar a { text-decoration: none; }
.satirlar a:hover { text-decoration: underline; text-underline-offset: 3px; }
.satirlar .s-ad {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 600;
font-size: 16.5px;
line-height: 1.26;
}
.satirlar .s-yan {
font: 400 12.5px/1.3 var(--yt-govde);
color: var(--murekkep-3);
white-space: nowrap;
}
.kutu--dolu .satirlar .s-yan,
.kutu--derin .satirlar .s-yan { color: color-mix(in oklab, #FFFFFF 58%, var(--vurgu)); }
/* çipler */
.cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.cip {
display: inline-block;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid color-mix(in oklab, var(--vurgu) 26%, var(--cizgi));
font: 500 12px/1.25 var(--yt-govde);
color: color-mix(in oklab, var(--vurgu) 86%, var(--murekkep));
text-decoration: none;
white-space: nowrap;
}
.kutu--dolu .cip,
.kutu--derin .cip {
border-color: color-mix(in srgb, #FFFFFF 34%, transparent);
color: color-mix(in oklab, #FFFFFF 86%, var(--vurgu));
}
.cip:hover { border-color: currentColor; }
/* bülten formu — kâğıt kutuda açık, dolu kutuda ters */
.form { display: flex; gap: 8px; flex-wrap: wrap; }
.form input {
flex: 1 1 9rem;
min-width: 0;
padding: 11px 13px;
border-radius: var(--yaricap);
border: 1px solid var(--cizgi);
background: var(--kagit-2);
color: var(--murekkep);
font: 400 15px/1.3 var(--yt-govde);
}
.form input::placeholder { color: var(--murekkep-3); }
.form button {
padding: 11px 18px;
border: 0;
border-radius: var(--yaricap);
background: var(--v-koyu);
color: color-mix(in oklab, #FFFFFF 95%, var(--vurgu));
font: 600 14px/1.3 var(--yt-govde);
cursor: pointer;
}
.form button:hover { background: var(--murekkep); }
.kutu--dolu .form input,
.kutu--derin .form input {
border-color: color-mix(in srgb, #FFFFFF 40%, transparent);
background: color-mix(in srgb, #FFFFFF 12%, transparent);
color: inherit;
}
.kutu--dolu .form input::placeholder,
.kutu--derin .form input::placeholder { color: color-mix(in oklab, #FFFFFF 54%, var(--vurgu)); }
.kutu--dolu .form button,
.kutu--derin .form button {
background: color-mix(in oklab, #FFFFFF 94%, var(--vurgu));
color: var(--v-koyu);
}
.kutu--dolu .form button:hover,
.kutu--derin .form button:hover { background: #FFFFFF; }
/* aile kutusu */
.aile { display: flex; flex-wrap: wrap; gap: 7px 14px; }
.aile a {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 600;
font-size: 17px;
text-decoration: none;
color: var(--murekkep-2);
border-bottom: 1px solid color-mix(in oklab, var(--vurgu) 34%, transparent);
}
.aile a:hover { color: var(--vurgu); border-bottom-color: currentColor; }
/* künye kutusu */
.kunye-liste { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.kunye-liste a {
font: 400 13.5px/1.5 var(--yt-govde);
color: var(--murekkep-2);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.kunye-liste a:hover { color: var(--vurgu); border-bottom-color: currentColor; }
.hukuk {
font: 400 11.5px/1.5 var(--yt-govde);
color: var(--murekkep-3);
}
/* ---- 7. Telefon: mozaik iki sütuna iner -------------------------------- */
@media (max-width: 1040px) {
.mozaik {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: minmax(12rem, auto);
grid-template-areas:
"son son"
"rakam alinti"
"dosya alinti"
"katil kayit"
"katil bulten"
"aile bulten"
"kunye kunye";
}
.a-son { min-height: 21rem; }
}
/* dar kutuda satır künyesi başlığı sıkıştırmasın: alt satıra iner */
@media (max-width: 700px) {
.satirlar li { grid-template-columns: minmax(0, 1fr); }
.satirlar .s-yan { white-space: normal; }
}
@media (max-width: 560px) {
:root { --aralik: 7px; }
.mozaik { grid-auto-rows: minmax(10.5rem, auto); }
.kutu { padding: 15px; gap: 11px; }
.a-son { min-height: 18rem; }
.baslik { font-size: 1.16rem; }
.baslik--dev { font-size: 1.44rem; }
.rakam { font-size: 2.5rem; }
[data-dal="o3"] .rakam { font-size: 2rem; }
.alinti { font-size: 1.12rem; }
.metin { font-size: 14.5px; line-height: 1.5; }
.meta, .kaynak { font-size: 11.5px; }
.satirlar .s-ad { font-size: 14px; }
.satirlar li { padding: 8px 0; }
.aile a { font-size: 15px; }
.hero { padding: 16px; }
.hero__kunye { font-size: 11px; letter-spacing: .08em; }
.hero__cumle { max-width: 100%; font-size: clamp(2.55rem, 11.6vw, 3.25rem); }
}
/* ---- 8. Hareket tercihi ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
animation-delay: 0ms !important;
transition-duration: 1ms !important;
}
/* gren ve ışık yerinde kalır, yalnız hareket durur */
.doku .l1 { transform: none; }
.doku .l2 { transform: none; }
}
@media print {
.doku { display: none; }
.hero { min-height: auto; }
}
/* ==========================================================================
9. EK SAYFALAR (19.09.2026 ek brifi)
Buradan aşağısı yalnız ekler; yukarıdaki hiçbir kural değiştirilmedi,
dört ana sayfa aynen çalışır.
========================================================================== */
:root {
/* düzeltme kutusunun kırmızısı — üçüncü renk değil, tek istisna */
--uyari: #B4232A;
}
/* ---- 9.1 O4 · Zabıt ----------------------------------------------------- */
[data-dal="o4"] { --vurgu: #1B4F7A; /* Zabıt — belge mavisi */
--yt-hero: "Source Serif 4", Georgia, serif;
--yt-baslik: "Source Serif 4", Georgia, serif;
--hero-agirlik: 700;
}
/* ---- 9.2 Yeni ton: düzeltme taşı --------------------------------------- */
.kutu--uyari {
background: linear-gradient(168deg,
color-mix(in oklab, var(--uyari) 9%, var(--kagit)),
color-mix(in oklab, var(--uyari) 3%, var(--kagit)));
border-color: color-mix(in oklab, var(--uyari) 28%, var(--cizgi));
--isik: color-mix(in srgb, var(--uyari) 17%, transparent);
--isik-2: color-mix(in srgb, var(--uyari) 11%, transparent);
--gren-op: .26;
}
.kutu--uyari .etiket { color: color-mix(in oklab, var(--uyari) 76%, var(--murekkep)); }
.kutu--uyari .ok-sat { color: color-mix(in oklab, var(--uyari) 84%, var(--murekkep)); }
/* ---- 9.3 O4 mozaiği: on bir taş ---------------------------------------- */
.mozaik--o4 {
grid-template-rows:
minmax(12.5rem, auto)
minmax(15.5rem, auto)
minmax(15rem, auto)
minmax(15rem, auto)
minmax(11.5rem, auto);
grid-template-areas:
"son son rakam durust"
"son son dosya durust"
"eksen kayit kayit yontem"
"eksen kisi kisi yontem"
"katil katil aile kunye";
}
.a-durust { grid-area: durust; --gez: 56s; }
.a-eksen { grid-area: eksen; --gez: 48s; }
.a-kisi { grid-area: kisi; --gez: 64s; }
.a-yontem { grid-area: yontem; --gez: 42s; }
@media (max-width: 1040px) {
.mozaik--o4 {
grid-template-rows: none;
grid-auto-rows: minmax(12rem, auto);
grid-template-areas:
"son son"
"rakam durust"
"dosya durust"
"eksen kayit"
"eksen yontem"
"kisi yontem"
"kisi katil"
"aile katil"
"kunye kunye";
}
}
/* ---- 9.4 Dağılım çubuğu, çubuk listesi, isim bandı ---------------------- */
.dagilim {
display: flex;
height: 12px;
border-radius: 2px;
overflow: hidden;
background: color-mix(in oklab, var(--vurgu) 10%, var(--kagit));
}
.dagilim i { display: block; height: 100%; }
.dagilim .d1 { background: var(--v-derin); }
.dagilim .d2 { background: var(--v-orta); }
.dagilim .d3 { background: color-mix(in oklab, var(--vurgu) 46%, #FFFFFF); }
.dagilim .d4 { background: color-mix(in oklab, var(--vurgu) 20%, #FFFFFF); }
.k-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.k-liste li { display: flex; flex-direction: column; gap: 2px; }
.k-liste .k-ad {
font: 700 12px/1.2 var(--yt-govde);
letter-spacing: .06em;
color: color-mix(in oklab, var(--vurgu) 84%, var(--murekkep));
}
.k-liste .k-sayi {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 700; font-size: 22px; line-height: 1.05;
}
.k-liste .k-not { font: 400 11.5px/1.35 var(--yt-govde); color: var(--murekkep-3); }
.cubuk-liste { display: flex; flex-direction: column; gap: 9px; }
.cubuk-liste li {
display: grid;
grid-template-columns: 2.1em minmax(0, 1fr) 2.6em;
gap: 10px;
align-items: center;
}
.cubuk-liste .c-kod {
font: 600 11px/1.2 var(--yt-govde);
letter-spacing: .08em;
color: color-mix(in oklab, var(--vurgu) 80%, var(--murekkep));
}
.cubuk-liste .c-ad { font: 400 13px/1.3 var(--yt-govde); color: var(--murekkep-2); }
.cubuk-liste .c-sayi { font: 500 13px/1.2 var(--yt-govde); text-align: right; color: var(--murekkep-2); }
.cubuk-liste .c-cizgi {
grid-column: 1 / -1;
height: 5px; border-radius: 2px;
background: color-mix(in oklab, var(--vurgu) 11%, var(--kagit));
margin-top: -3px;
}
.cubuk-liste .c-cizgi i { display: block; height: 100%; border-radius: 2px; background: var(--vurgu); }
.bant-liste { display: flex; flex-direction: column; gap: 10px; }
.bant-liste li { display: flex; flex-direction: column; gap: 2px; }
.bant-liste .b-ad {
display: inline-block;
align-self: flex-start;
padding: 3px 8px;
border-radius: 2px;
background: color-mix(in oklab, var(--vurgu) 12%, var(--kagit));
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 600; font-size: 15px; line-height: 1.25;
}
.bant-liste .b-sifat { font: 400 12px/1.4 var(--yt-govde); color: var(--murekkep-3); }
/* ---- 9.5 İç sayfa hero'su ve alıntı posteri ---------------------------- */
.hero--ic { min-height: 64vh; min-height: 64svh; }
.hero--ic .hero__cumle { font-size: clamp(1.9rem, 3.6vw, 3.3rem); line-height: 1.12; max-width: 24ch; }
.hero--ic .hero__alt {
font: 400 14px/1.5 var(--yt-govde);
color: color-mix(in oklab, #FFFFFF 70%, var(--vurgu));
}
.hero--ic .hero__alt b { font-weight: 600; color: color-mix(in oklab, #FFFFFF 92%, var(--vurgu)); }
/* mozaiğin bir taşının sayfa genişliğine açılmış hâli */
.poster {
position: relative;
isolation: isolate;
overflow: hidden;
margin: var(--aralik) auto;
max-width: 1460px;
padding: clamp(34px, 5.4vw, 78px) clamp(20px, 5vw, 72px);
border-radius: var(--yaricap);
background: linear-gradient(152deg, var(--v-koyu) 0%, var(--v-orta) 58%, var(--v-derin) 100%);
color: color-mix(in oklab, #FFFFFF 94%, var(--vurgu));
--isik: color-mix(in srgb, var(--v-parlak) 46%, transparent);
--isik-2: color-mix(in srgb, #FFFFFF 14%, transparent);
--l1-op: .58;
--l2-op: .4;
--gez: 50s;
--gren-op: .17;
}
.poster > *:not(.doku) { position: relative; z-index: 1; }
.poster .alinti {
font-size: clamp(1.45rem, 3.1vw, 2.85rem);
line-height: 1.16;
max-width: 26ch;
}
.poster .kaynak { color: color-mix(in oklab, #FFFFFF 62%, var(--vurgu)); margin-top: 18px; }
/* ---- 9.6 Mozaik şerit (iç sayfaların başı ve sonu) --------------------- */
.serit {
display: grid;
gap: var(--aralik);
padding: var(--aralik);
max-width: 1460px;
margin: 0 auto;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-auto-rows: minmax(9.5rem, auto);
}
.serit .kutu { gap: 10px; }
.s-genis { grid-column: span 2; }
.s-tam { grid-column: 1 / -1; }
@media (max-width: 860px) {
.serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-genis { grid-column: span 2; }
}
/* ---- 9.7 Okuma kolonu -------------------------------------------------- */
.kolon {
max-width: 41.5rem; /* 664 px */
margin: 0 auto;
padding: clamp(30px, 4.5vw, 62px) var(--kenar, 20px);
}
.kolon > * + * { margin-top: 1.1em; }
.kolon p { font-size: 19px; line-height: 1.68; }
.kolon h2 {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 600;
font-size: clamp(1.45rem, 2.2vw, 2.05rem);
line-height: 1.16;
letter-spacing: -.012em;
margin-top: 1.9em;
}
.kolon b, .kolon strong { font-weight: 600; }
.kolon sup { font-size: .68em; vertical-align: super; line-height: 0; }
.kolon sup a { color: var(--vurgu); text-decoration: none; font-weight: 600; }
.kolon a { color: inherit; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--vurgu) 45%, transparent); }
.yazi-basi { max-width: 41.5rem; margin: 0 auto; padding: clamp(30px, 4vw, 54px) var(--kenar, 20px) 0; }
.yazi-basi .baslik--manset {
font-family: var(--yt-baslik);
font-variation-settings: var(--hero-varyasyon);
font-style: var(--hero-ital);
font-weight: var(--hero-agirlik);
font-size: clamp(1.95rem, 3.7vw, 3.25rem);
line-height: 1.05;
letter-spacing: -.02em;
text-wrap: balance;
}
.yazi-basi .dek {
margin-top: 16px;
font-size: clamp(1.02rem, 1.45vw, 1.28rem);
line-height: 1.5;
color: var(--murekkep-2);
max-width: 44ch;
}
.kenar-not {
position: relative;
overflow: hidden;
border-radius: var(--yaricap);
padding: clamp(16px, 2vw, 24px);
background: linear-gradient(168deg, var(--v-sis), var(--v-duman));
border: 1px solid color-mix(in oklab, var(--vurgu) 16%, var(--cizgi));
--isik: color-mix(in srgb, var(--vurgu) 22%, transparent);
--gren-op: .24;
isolation: isolate;
}
.kenar-not > *:not(.doku) { position: relative; z-index: 1; }
.kenar-not p { font-size: 16.5px; line-height: 1.58; }
.sayi-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--aralik); }
.sayi-uclu .kutu { gap: 8px; min-height: 0; padding: clamp(14px, 1.4vw, 20px); }
.sayi-uclu .rakam { font-size: clamp(2rem, 3.2vw, 3rem); }
@media (max-width: 560px) { .sayi-uclu { grid-template-columns: 1fr; } }
.kaynakca { counter-reset: kn; }
.kaynakca li {
counter-increment: kn;
display: grid;
grid-template-columns: 2em minmax(0, 1fr);
gap: 4px 10px;
padding: 11px 0;
border-top: 1px solid color-mix(in oklab, var(--cizgi) 82%, transparent);
font-size: 15px;
line-height: 1.5;
}
.kaynakca li::before {
content: counter(kn) ".";
font: 500 13px/1.6 var(--yt-govde);
color: var(--murekkep-3);
}
.kaynakca li:first-child { border-top: 0; }
/* ---- 9.8 Kayıt sayfası: zincir ---------------------------------------- */
.zaman { display: flex; flex-direction: column; }
.zaman li {
position: relative;
padding: 0 0 15px 22px;
font-size: 14.5px;
line-height: 1.5;
color: var(--murekkep-2);
}
.zaman li::before {
content: "";
position: absolute; left: 4px; top: 12px; bottom: -2px;
width: 1px;
background: color-mix(in oklab, var(--vurgu) 28%, var(--cizgi));
}
.zaman li:last-child { padding-bottom: 0; }
.zaman li:last-child::before { display: none; }
.zaman li::after {
content: "";
position: absolute; left: 0; top: 6px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--kagit-2);
border: 1.5px solid color-mix(in oklab, var(--vurgu) 40%, var(--cizgi));
}
.zaman li[data-bu]::after { background: var(--vurgu); border-color: var(--vurgu); }
.zaman .z-gun {
display: block;
font: 600 11.5px/1.3 var(--yt-govde);
letter-spacing: .05em;
color: var(--murekkep-3);
margin-bottom: 2px;
}
.zaman li[data-bu] .z-gun { color: color-mix(in oklab, var(--vurgu) 86%, var(--murekkep)); }
.zaman b { color: var(--murekkep); font-weight: 600; }
/* ---- 9.9 Form (katıl sayfası) ----------------------------------------- */
.alanlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.alanlar .genis { grid-column: 1 / -1; }
@media (max-width: 560px) { .alanlar { grid-template-columns: 1fr; } }
.alan { display: flex; flex-direction: column; gap: 5px; }
.alan > span { font: 600 12.5px/1.3 var(--yt-govde); letter-spacing: .02em; }
.alan input, .alan select {
min-height: 44px;
width: 100%;
padding: 10px 12px;
border-radius: var(--yaricap);
border: 1px solid color-mix(in srgb, #FFFFFF 42%, transparent);
background: color-mix(in srgb, #FFFFFF 13%, transparent);
color: inherit;
font: 400 16px/1.3 var(--yt-govde);
}
.alan select { appearance: none; background-image: none; }
.alan input::placeholder { color: color-mix(in oklab, #FFFFFF 52%, var(--vurgu)); }
.onaylar { display: flex; flex-direction: column; gap: 11px; }
.onay { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.onay input {
width: 20px; height: 20px; margin: 2px 0 0;
accent-color: color-mix(in oklab, #FFFFFF 92%, var(--vurgu));
}
.onay span { font-size: 14.5px; line-height: 1.5; }
.onay a { text-underline-offset: 3px; }
.dugme {
min-height: 44px;
padding: 12px 22px;
border: 0;
border-radius: var(--yaricap);
background: color-mix(in oklab, #FFFFFF 94%, var(--vurgu));
color: var(--v-koyu);
font: 600 15px/1.2 var(--yt-govde);
cursor: pointer;
align-self: flex-start;
}
.dugme:hover { background: #FFFFFF; }
/* adım listesi */
.adimlar { counter-reset: ad; display: flex; flex-direction: column; gap: 12px; }
/* NOT: li'yi ızgara yapmak yasak — madde metnindeki , gibi öğeler ayrı
ızgara hücresine düşüp tek kelimelik sütuna kırılıyor (ölçüldü). Numara
mutlak konumlandırılır, metin tek akış olarak kalır. */
.adimlar li {
counter-increment: ad;
position: relative;
padding-left: 1.9em;
font-size: 15px;
line-height: 1.52;
}
.adimlar li::before {
content: counter(ad);
position: absolute;
left: 0;
top: 0;
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 700;
font-size: 17px;
line-height: 1.35;
color: color-mix(in oklab, var(--vurgu) 72%, var(--murekkep));
}
.kutu--dolu .adimlar li::before,
.kutu--derin .adimlar li::before { color: color-mix(in oklab, #FFFFFF 78%, var(--vurgu)); }
/* ilke listesi (numaralı poster) */
.ilkeler { display: flex; flex-direction: column; gap: 14px; margin: auto 0; }
.ilkeler li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.ilkeler .i-no {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 700; font-size: 17px;
opacity: .62;
}
.ilkeler .i-metin {
font-family: var(--yt-baslik);
font-variation-settings: var(--baslik-varyasyon);
font-weight: 600;
font-size: clamp(1.05rem, 1.35vw, 1.4rem);
line-height: 1.22;
}
/* telefonda ek sayfaların ince ayarı */
@media (max-width: 560px) {
.kolon p { font-size: 17.5px; line-height: 1.62; }
.poster .alinti { font-size: 1.3rem; }
.k-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.k-liste .k-sayi { font-size: 18px; }
.k-liste .k-not { display: none; }
.serit { grid-auto-rows: minmax(8rem, auto); }
.hero--ic .hero__cumle { font-size: clamp(1.6rem, 6.6vw, 2.1rem); max-width: 100%; }
}
/* ---- 9.10 Yıl histogramı (saf CSS, kütüphanesiz) ---------------------- */
.histogram { display: flex; align-items: flex-end; gap: 2px; height: 108px; margin-top: 2px; }
.histogram li {
flex: 1 1 0;
height: var(--h, 50%);
min-width: 0;
display: flex;
flex-direction: column-reverse;
border-radius: 1px;
overflow: hidden;
background: color-mix(in oklab, var(--vurgu) 9%, var(--kagit));
}
.histogram li i { display: block; width: 100%; }
.histogram .d1 { background: var(--v-derin); }
.histogram .d2 { background: var(--v-orta); }
.histogram .d3 { background: color-mix(in oklab, var(--vurgu) 44%, #FFFFFF); }
.histogram .d4 { background: color-mix(in oklab, var(--vurgu) 18%, #FFFFFF); }
.histogram-eksen {
display: flex; justify-content: space-between;
margin-top: 7px;
font: 400 11px/1.2 var(--yt-govde);
color: var(--murekkep-3);
}
@media (max-width: 560px) { .histogram { height: 76px; } }
/* ---- 9.11 Koyu taşta dağılım ve K listesi (okunurluk) ----------------- */
.kutu--dolu .k-liste .k-ad,
.kutu--derin .k-liste .k-ad { color: color-mix(in oklab, #FFFFFF 74%, var(--vurgu)); }
.kutu--dolu .k-liste .k-not,
.kutu--derin .k-liste .k-not { color: color-mix(in oklab, #FFFFFF 60%, var(--vurgu)); }
/* koyu zeminde sıra ters çevrilir: en güvenilir düzey en parlak olan */
.kutu--dolu .dagilim,
.kutu--derin .dagilim { background: color-mix(in srgb, #FFFFFF 14%, transparent); }
.kutu--dolu .dagilim .d1,
.kutu--derin .dagilim .d1 { background: color-mix(in oklab, var(--vurgu) 16%, #FFFFFF); }
.kutu--dolu .dagilim .d2,
.kutu--derin .dagilim .d2 { background: color-mix(in oklab, var(--vurgu) 48%, #FFFFFF); }
.kutu--dolu .dagilim .d3,
.kutu--derin .dagilim .d3 { background: color-mix(in oklab, var(--vurgu) 74%, #FFFFFF); }
.kutu--dolu .dagilim .d4,
.kutu--derin .dagilim .d4 { background: color-mix(in srgb, #FFFFFF 34%, transparent); }
code {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: .9em;
letter-spacing: -.01em;
}
/* ---- 9.12 Hero içindeki çipler ve künye satırı ------------------------ */
.hero .cipler { gap: 7px; }
.hero .cip {
border-color: color-mix(in srgb, #FFFFFF 34%, transparent);
color: color-mix(in oklab, #FFFFFF 86%, var(--vurgu));
}
.hero__satir { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
/* ---- 9.13 Dar taşta eksen listesi: ad kendi satırına iner ------------- */
@media (max-width: 560px) {
.cubuk-liste li { grid-template-columns: 2.1em minmax(0, 1fr); row-gap: 3px; }
.cubuk-liste .c-kod { grid-column: 1; grid-row: 1; }
.cubuk-liste .c-sayi { grid-column: 2; grid-row: 1; }
.cubuk-liste .c-ad { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
.cubuk-liste .c-cizgi { grid-row: 3; margin-top: 1px; }
}
/* ---- 9.14 İmza hareketi şeritte ve üç sayı taşında da geçerli --------- */
.serit:has(.kutu:hover) .kutu:not(:hover) .doku,
.serit:has(.kutu:focus-within) .kutu:not(:focus-within) .doku,
.sayi-uclu:has(.kutu:hover) .kutu:not(:hover) .doku { opacity: .38; }