/* ===========================================================
BENGİ KÜLTÜR: Malzeme Dili (Faz 1)
Merkezi malzeme sözlüğü. Kütüphane temasının fiziksel
hissini kuran her şey burada tanımlı: kağıt dokusu,
yırtık kenar, katalog kartı deliği, mühür, fotoğraf montu.
NEDEN TEK DOSYA: bu görünümler sonraki fazlarda birden fazla
yerde lazım olacak (fiş kartı profil, Raflar, Kıraathane).
Her bölüm kendi CSS'inde yeniden icat ederse birbiriyle
çelişen beş versiyon çıkar. Bu projede daha önce yaşandı:
eser kartı beş ayrı dosyada tekrarlanıyordu.
HİÇBİR GÖRSEL DOSYA KULLANILMIYOR. Tüm doku ve kenarlar
saf CSS: gradient, mask, clip-path, box-shadow.
Değişkenler style.css içindeki :root bloğundan geliyor.
=========================================================== */
/* -----------------------------------------------------------
1. KRAFT KAĞIT DOKUSU
Düz renk yerine çok hafif bir dokulu yüzey. Opaklık bilerek
çok düşük (%1.2): göze doku olarak değil, "düz olmayan bir
yüzey" olarak çarpsın.
----------------------------------------------------------- */
.malzeme-kraft {
background-color: var(--kraft, #F3F0E4);
background-image:
repeating-linear-gradient(0deg,
transparent 0 3px,
rgba(38, 42, 29, .012) 3px 4px),
repeating-linear-gradient(90deg,
transparent 0 3px,
rgba(38, 42, 29, .012) 3px 4px);
}
html:is([data-tema="karanlik"],[data-tema="los"]) .malzeme-kraft {
/* Koyu zeminde siyah doku görünmez; açık renkli iz kullanıyoruz */
background-image:
repeating-linear-gradient(0deg,
transparent 0 3px,
rgba(237, 236, 224, .022) 3px 4px),
repeating-linear-gradient(90deg,
transparent 0 3px,
rgba(237, 236, 224, .022) 3px 4px);
}
/* -----------------------------------------------------------
2. TIRTIKLI ÜST KENAR
Bloktan koparılmış kağıt hissi.
mask-image tercih edildi, clip-path polygon DEĞİL: polygon
yüzdelerle yazıldığında kart genişliği değişince diş sayısı
sabit kalıp orantısı bozuluyor. Tekrarlayan SVG deseni ise
genişlik ne olursa olsun aynı diş boyutunu koruyor.
----------------------------------------------------------- */
.malzeme-tirtik {
--tirtik-yukseklik: 7px;
-webkit-mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Cpath d='M0 7 L8 0 L16 7 Z' fill='black'/%3E%3C/svg%3E"),
linear-gradient(#000 0 0);
-webkit-mask-size: 16px var(--tirtik-yukseklik), 100% 100%;
-webkit-mask-position: top left, top var(--tirtik-yukseklik) left;
-webkit-mask-repeat: repeat-x, no-repeat;
-webkit-mask-composite: source-over;
mask-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Cpath d='M0 7 L8 0 L16 7 Z' fill='black'/%3E%3C/svg%3E"),
linear-gradient(#000 0 0);
mask-size: 16px var(--tirtik-yukseklik), 100% 100%;
mask-position: top left, top var(--tirtik-yukseklik) left;
mask-repeat: repeat-x, no-repeat;
mask-composite: add;
padding-top: calc(var(--tirtik-yukseklik) + 4px);
}
/* -----------------------------------------------------------
3. KATALOG KARTI DELİĞİ
Eski kütüphane çekmecelerindeki metal çubuk deliği.
Tek başına "bu bir kart, web sayfası değil" hissini kurar.
Kullanım: kapsayıcıya position:relative gerekiyor.
----------------------------------------------------------- */
.malzeme-delik {
position: relative;
}
.malzeme-delik::before {
content: "";
position: absolute;
left: 18px;
top: 14px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--sayfa, #FAF8F1);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
pointer-events: none;
}
/* -----------------------------------------------------------
4. MÜHÜR / DAMGA
Rozet sisteminin (Faz 6) ve kayıt tarihi damgasının görünümü.
border-radius bilerek kusurlu: gerçek bir mühür asla tam
daire basmaz. Dört farklı yüzde değeri organik bir kenar
veriyor.
----------------------------------------------------------- */
.malzeme-damga {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 6px 12px;
border: 2px solid var(--kiremit, #B0603A);
border-radius: 47% 53% 51% 49%;
color: var(--kiremit, #B0603A);
font-family: var(--font-daktilo, ui-monospace, 'Courier New', monospace);
font-size: 11px;
letter-spacing: .04em;
text-transform: uppercase;
transform: rotate(-8deg);
opacity: .82;
background: transparent;
}
.malzeme-damga-duz {
/* Eğik durmaması gereken yerler için (tablo içi, dar alan) */
transform: none;
}
/* -----------------------------------------------------------
5. FOTOĞRAF KÖŞE MONTU
Albüme yapıştırılmış eski fotoğraf hissi. Dört köşede küçük
üçgen "mont" var.
İşaretleme:
![]()