/* ── LIQUID METAL BUTON DERİSİ (14.09.2026) ──────────────────────────────────
   React "LiquidMetalButton" bileşeninin HTML/CSS karşılığı. Katmanlar:
   rim (sıvı metal çerçeve, WebGL) → pill (mint iç hap — mağaza rozeti/ikon tonu, 14.09) → lab (yazı/ikon) → rip (dalga)
   Ölçüler (padding/yükseklik/genişlik) butonun kendi sınıfından gelir; burası yalnız deri.
   JS: /lm-buton.js — .btn / .obtn / .qbtn öğelerini bulur, katmanları içine kurar.      */
:root{--lm-tint:#5fa9a0}                              /* çerçeve metal tonu (14.09) — /lm-deneme sayfasındaki B */
.lm{position:relative;background:transparent!important;border:0!important;box-shadow:none!important;
  color:#08323D!important;font-weight:400!important;font-size:14px!important;text-shadow:0 1px 0 rgba(255,255,255,.55);
  perspective:1000px;perspective-origin:50% 50%;transform-style:preserve-3d;transform:none!important;
  overflow:visible!important;-webkit-tap-highlight-color:transparent;outline:none}
.lm:hover,.lm:active,.lm:focus{transform:none!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.lm.sel{color:#fff!important;text-shadow:0 1px 2px rgba(8,50,61,.35)}
.lm.sel .lm-pill{background:linear-gradient(180deg,#0F4C5C 0%,#08323D 100%)}                         /* seçili durum (qbtn.sel): hap teal'e, yazı beyaza döner (sitedeki .qbtn.sel ile aynı) */
.lm-rim,.lm-pill,.lm-rip{position:absolute;pointer-events:none;border-radius:100px}
.lm-rim{inset:0;z-index:1;overflow:hidden;transform:translateZ(0);
  /* WebGL gelene kadar / yoksa: durağan teal-metal yedek */
  background:linear-gradient(135deg,#cfe9e4 0%,#3f8a86 36%,#e4f4f1 50%,#4a938e 66%,#c4e2dd 100%);
  box-shadow:0 0 0 1px rgba(8,50,61,.3),0 36px 14px rgba(8,50,61,.02),0 20px 12px rgba(8,50,61,.08),0 9px 9px rgba(8,50,61,.12),0 2px 5px rgba(8,50,61,.15);
  transition:transform .8s cubic-bezier(.34,1.56,.64,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.lm-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.lm-pill{inset:2px;z-index:2;background:linear-gradient(180deg,#DCF3EF 0%,#A8D8D0 100%);transform:translateZ(10px);
  transition:transform .8s cubic-bezier(.34,1.56,.64,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.lm-lab{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:inherit;
  min-width:0;transform:translateZ(20px);pointer-events:none;white-space:nowrap}
.lm-lab svg{filter:drop-shadow(0 1px 0 rgba(255,255,255,.55))}
.lm-ust{z-index:5;transform:translateZ(30px)}         /* butonun kendi mutlak konumlu çocuğu (ör. bildirim rozeti) üstte kalsın */
.lm-rip{inset:0;z-index:4;overflow:hidden;transform:translateZ(25px)}
.lm-rip>span{position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle,rgba(8,50,61,.3) 0%,rgba(8,50,61,0) 70%);   /* açık hapta beyaz dalga görünmez → teal dalga */
  animation:lm-dalga .6s ease-out forwards}
@keyframes lm-dalga{0%{transform:translate(-50%,-50%) scale(0);opacity:.6}100%{transform:translate(-50%,-50%) scale(4);opacity:0}}
.lm.lm-ustunde .lm-rim{box-shadow:0 0 0 1px rgba(8,50,61,.4),0 12px 6px rgba(8,50,61,.05),0 8px 5px rgba(8,50,61,.1),0 4px 4px rgba(8,50,61,.15),0 1px 2px rgba(8,50,61,.2)}
.lm.lm-basili .lm-rim{transform:translateZ(0) translateY(1px) scale(.98);box-shadow:0 0 0 1px rgba(8,50,61,.5),0 1px 2px rgba(8,50,61,.3)}
.lm.lm-basili .lm-pill{transform:translateZ(10px) translateY(1px) scale(.98);box-shadow:inset 0 2px 4px rgba(8,50,61,.4),inset 0 1px 2px rgba(8,50,61,.3)}
/* Paylaşılan shader kaynağı: ekranda görünmez ama görüş alanında (kütüphane görüş dışını durdurur) */
.lm-kaynak{position:fixed;left:0;top:0;width:400px;height:48px;opacity:0;pointer-events:none;z-index:-1;contain:strict}