/* ============================================================
   Sedefon — global stiller
   index.html'den ayrıldı (CDN/Babel kurulumu korunur; file:// uyumlu)
   ============================================================ */

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { background: #000; margin: 0; overflow-x: clip; }

/* ---------- Liquid glass tasarım sistemi ---------- */
.liquid-glass {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%,
    rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.liquid-glass-strong {
  background: rgba(255,255,255,0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border: none;
  box-shadow: 4px 4px 4px rgba(0,0,0,0.05), inset 0 1px 1px rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}
.liquid-glass-strong::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%,
    rgba(255,255,255,0.2) 20%,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.2) 80%,
    rgba(255,255,255,0.5) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---------- Demo dalga formu (equalizer) ---------- */
@keyframes eqbar {
  0%, 100% { transform: scaleY(0.35); }
  50% { transform: scaleY(1); }
}

/* ---------- Klavye odak halkası ---------- */
a:focus-visible, button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 3px;
}

/* ---------- Sonsuz kayan yazı bandı (marquee) ---------- */
@keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marquee-scroll linear infinite; width: max-content; }

/* ---------- Boşta nabız / kayma ipucu ---------- */
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(8px); opacity: 1; } }
.scroll-cue { animation: scrollcue 1.8s ease-in-out infinite; }

/* ---------- Dokunma/tıklama geri bildirimi (press feedback) ---------- */
.tap { transition: transform .18s ease; }
.tap:active { transform: scale(0.96); }

/* ---------- Premium: kart hover kalkışı ---------- */
.card-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1); will-change: transform; }
@media (hover: hover) { .card-lift:hover { transform: translateY(-6px); } }

/* ---------- Sinematik film granı ---------- */
.grain {
  position: fixed; inset: -12%; z-index: 40; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-size: 130px 130px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.5s steps(3) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -2%); }
}

/* ---------- Dokunmatik: 300ms tıklama gecikmesini kaldır ---------- */
a, button { touch-action: manipulation; }

/* ---------- Üst düzey cila: seçim + scrollbar ---------- */
::selection { background: #fff; color: #000; }
html { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) #000; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }

/* ---------- Kontur tipografi (marquee/mega) ---------- */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.5);
}

/* ---------- Mega footer wordmark ---------- */
.mega-wordmark {
  font-size: clamp(4rem, 17vw, 15rem);
  line-height: .85; text-align: center; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3);
  transition: color .5s ease, -webkit-text-stroke-color .5s ease;
  user-select: none; cursor: default;
}
.mega-wordmark:hover { color: #fff; -webkit-text-stroke-color: #fff; }

/* ---------- Nav link roll (hover'da yazı yukarı kayar) ---------- */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll > span { display: block; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.roll::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 100%; width: 100%;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.roll:hover > span, a:hover .roll > span { transform: translateY(-100%); }
.roll:hover::after, a:hover .roll::after { transform: translateY(-100%); }

/* ---------- Sinematik preloader ---------- */
#sedefon-loader {
  position: fixed; inset: 0; z-index: 200; background: #000;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
#sedefon-loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
#sedefon-loader .loader-word {
  font-family: 'Fraunces', serif; font-style: italic; color: #fff;
  font-size: 2.2rem; letter-spacing: -1px; text-align: center;
  animation: loader-pulse 1.6s ease-in-out infinite;
}
#sedefon-loader .loader-bar {
  width: 170px; height: 2px; background: rgba(255,255,255,.14);
  border-radius: 9999px; overflow: hidden; margin: 20px auto 0;
}
#sedefon-loader .loader-bar span {
  display: block; height: 100%; width: 40%; background: #fff; border-radius: 9999px;
  animation: loader-slide 1.1s ease-in-out infinite;
}
@keyframes loader-slide { from { transform: translateX(-110%); } to { transform: translateX(400%); } }
@keyframes loader-pulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }

/* ---------- Kart spotlight (imleç ışığı, cam yüzeylerde) ---------- */
@media (hover: hover) and (pointer: fine) {
  .liquid-glass::after, .liquid-glass-strong::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.09), transparent 65%);
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
  }
  .liquid-glass:hover::after, .liquid-glass-strong:hover::after { opacity: 1; }
}

/* ---------- Özel imleç (nokta + yaylı halka) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: -100px; left: -100px; pointer-events: none;
    z-index: 100; mix-blend-mode: difference; transform: translate(-50%, -50%);
  }
  .cursor-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
  .cursor-ring {
    width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.9);
    transition: width .25s ease, height .25s ease, opacity .25s ease;
  }
  .cursor-ring.big { width: 58px; height: 58px; }
}

/* ---------- Hareket azaltma tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eq-bar, .marquee-track, .scroll-cue, .grain { animation: none !important; }
  .eq-bar { height: 35% !important; }
  .tap { transition: none; }
  .tap:active { transform: none; }
  .card-lift { transition: none; }
  .card-lift:hover { transform: none; }
  #sedefon-loader .loader-word, #sedefon-loader .loader-bar span { animation: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto; }
  .roll > span, .roll::after { transition: none; }
  .mega-wordmark { transition: none; }
}