/* =====================================================================
WNM — Liquid Glass (Apple tarzı sıvı cam) paylaşımlı modülü
Saf CSS + SVG. Hiçbir framework / build step yok.
Kullanım:
...
temel cam yüzey
ripple icin kirpilmis
sivi kirilma (specular kenari)
Tasarim ilkesi: MEVCUT elemanin arka planini SILMEZ. Sadece
- mouse'u takip eden specular/caustic isigi (::before)
- hafif noise + ic kenar parlamasi (::after)
- tiklamada ripple (.lg-ripple, JS enjekte eder)
ekler. Boylece navbar/sidebar/profil mevcut gorunumunu korur,
uzerine Apple "Liquid Glass" etkilesimi biner.
Tum degerler :root degiskenlerinden gelir -> kolay ozellestirme.
===================================================================== */
:root {
/* Cam tint ve isik renkleri (koyu varsayilan tema) */
--lg-tint-rgb: 255, 255, 255; /* specular/highlight rengi */
--lg-warm-rgb: 255, 210, 120; /* sicak altin caustic */
--lg-specular-alpha: 0.16; /* mouse highlight yogunlugu */
--lg-edge-alpha: 0.14; /* ust ic kenar parlamasi */
--lg-noise-alpha: 0.045; /* doku gurultusu */
/* Backdrop materyali — blur + saturate + contrast (derinlik) */
--lg-backdrop: blur(20px) saturate(1.6) contrast(1.06);
/* Mouse pozisyonu (JS gunceller). Varsayilan: merkez */
--lg-mx: 50%;
--lg-my: 50%;
/* Hareket suresi */
--lg-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
--lg-spring: 420ms;
}
/* Acik ("frosted") tema — sadece cam tint'ini degistirir, site paletini degil.
ile aktiflesir (liquid-glass.js toggle eder). */
[data-theme="light"] {
--lg-tint-rgb: 255, 255, 255;
--lg-warm-rgb: 120, 190, 255; /* serin mavi caustic */
--lg-specular-alpha: 0.30;
--lg-edge-alpha: 0.26;
--lg-noise-alpha: 0.06;
--lg-backdrop: blur(24px) saturate(1.4) contrast(1.02) brightness(1.08);
}
/* ---------------------------------------------------------------------
Temel cam yuzey
--------------------------------------------------------------------- */
.lg-glass {
position: relative; /* ::before/::after icin */
isolation: isolate; /* blend-mode'lari yuzeyle sinirla */
-webkit-backdrop-filter: var(--lg-backdrop);
backdrop-filter: var(--lg-backdrop);
transition:
transform var(--lg-spring) var(--lg-ease),
box-shadow var(--lg-spring) var(--lg-ease),
border-color var(--lg-spring) var(--lg-ease);
}
/* Mouse'u takip eden specular highlight + caustic.
inset:0 oldugu icin elemandan TASMAZ; border-radius:inherit ile
yuvarlatilmis koselere uyar. pointer-events:none -> tiklamayi gecirir. */
.lg-glass::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 1;
background:
radial-gradient(120px 120px at var(--lg-mx) var(--lg-my),
rgba(var(--lg-tint-rgb), var(--lg-specular-alpha)) 0%,
rgba(var(--lg-tint-rgb), calc(var(--lg-specular-alpha) * 0.45)) 30%,
transparent 62%),
radial-gradient(180px 180px at var(--lg-mx) var(--lg-my),
rgba(var(--lg-warm-rgb), calc(var(--lg-specular-alpha) * 0.55)) 0%,
transparent 70%);
mix-blend-mode: screen;
opacity: 0.9;
/* Mouse hareketinde isigin akiciligi */
transition: background 80ms linear, opacity var(--lg-spring) var(--lg-ease);
}
/* Ic kenar parlamasi (ust-sol highlight) + cok hafif noise dokusu — tek katman.
Edge gradient yuzeye derinlik; noise (SVG feTurbulence data-URI) gercekcilik.
opacity cok dusuk (--lg-noise-alpha) tutuldu -> doku belli belirsiz. */
.lg-glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 140px 140px;
mix-blend-mode: overlay;
opacity: var(--lg-noise-alpha);
}
/* Cam yuzeyin kendi icerigi specular katmanlarin USTUNDE kalsin */
.lg-glass > * { position: relative; z-index: 2; }
/* ---------------------------------------------------------------------
Etkilesim — hover wobble + ripple kirpma
--------------------------------------------------------------------- */
/* Kirpilmis varyant: ripple'in ve specular'in tasmasini engeller.
Sadece popout/dropdown ICERMEYEN elemanlara verilir (buton, pill, kart). */
.lg-clip { overflow: hidden; }
/* Hover'da hafif sivi yukselme — yalniz interaktif (lg-clip) yuzeylerde */
.lg-clip:hover {
transform: translateY(-1px) scale(1.012);
}
.lg-clip:active {
transform: translateY(0) scale(0.995);
transition-duration: 120ms;
}
/* Ripple — JS tiklamada .lg-ripple span enjekte eder, --lg-mx/--lg-my merkezli */
.lg-ripple {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 1;
width: 12px; height: 12px;
left: var(--lg-mx); top: var(--lg-my);
transform: translate(-50%, -50%) scale(0);
background: radial-gradient(circle,
rgba(var(--lg-tint-rgb), 0.45) 0%,
rgba(var(--lg-warm-rgb), 0.22) 45%,
transparent 70%);
mix-blend-mode: screen;
animation: lg-ripple-anim 620ms var(--lg-ease) forwards;
}
@keyframes lg-ripple-anim {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0.85; }
100% { transform: translate(-50%, -50%) scale(34); opacity: 0; }
}
/* ---------------------------------------------------------------------
Sivi kirilma (refraction) — GUVENLI mod.
SVG displacement filtresi SADECE specular ::before katmanina uygulanir
(backdrop'a degil — Chrome backdrop-filter:url() desteklemez).
Specular gradyani kenarlarda transparan'a indigi icin "kagit yirtigi"
tirtikli kenar OLUSMAZ. scale dusuk tutuldu (#lg-refraction'da scale=8).
--------------------------------------------------------------------- */
.lg-glass--refract::before {
filter: url(#lg-refraction);
}
/* ---------------------------------------------------------------------
Cam tema toggle butonu (kucuk, sabit, kose) — istenirse kaldirilir
--------------------------------------------------------------------- */
.lg-theme-toggle {
position: fixed;
right: 16px; bottom: 16px;
z-index: 400;
padding: 8px 14px;
font: 600 11px/1 'Inter', sans-serif;
letter-spacing: 0.4px;
color: rgba(var(--lg-tint-rgb), 0.85);
background: rgba(20, 20, 26, 0.55);
border: 1px solid rgba(var(--lg-tint-rgb), 0.18);
border-radius: 999px;
cursor: pointer;
-webkit-backdrop-filter: var(--lg-backdrop);
backdrop-filter: var(--lg-backdrop);
box-shadow:
inset 0 1px 1px rgba(var(--lg-tint-rgb), 0.18),
inset 0 -1px 1px rgba(0, 0, 0, 0.25),
0 4px 16px rgba(0, 0, 0, 0.30);
transition: transform var(--lg-spring) var(--lg-ease), border-color 160ms;
}
.lg-theme-toggle:hover {
transform: translateY(-1px) scale(1.04);
border-color: rgba(var(--lg-warm-rgb), 0.5);
}
@media (max-width: 768px) { .lg-theme-toggle { right: 12px; bottom: 12px; } }
/* ---------------------------------------------------------------------
Erisilebilirlik / performans — hareket azaltma tercihi
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.lg-glass, .lg-glass::before, .lg-clip:hover, .lg-theme-toggle {
transition: none !important;
transform: none !important;
}
.lg-ripple { display: none; }
}