/* ══════════════════════════════════════════════════════════
   MELACABRE — goth crochet store
   ══════════════════════════════════════════════════════════ */

:root{
  --bg:        #07060a;
  --bg-2:      #0c0913;
  --ink:       #ece6f2;
  --muted:     #a99fb8;
  --faint:     #6f6680;

  --violet:    #9a6bff;
  --violet-lo: #5a3aa8;
  --plum:      #2a1342;
  --teal:      #34e6d4;   /* echoes the sweater */
  --crimson:   #c2173b;

  --line:      rgba(154,107,255,.16);
  --card:      rgba(20,15,30,.55);

  --serif:     "Cormorant Garamond", Georgia, serif;
  --display:   "Playfair Display", "Cinzel", serif;
  --black:     "Playfair Display", Georgia, serif;  /* okunaklı, Türkçe-uyumlu vurgu */
  --ui:        "Jost", system-ui, sans-serif;

  --shell:     min(1200px, 92vw);
  --ease:      cubic-bezier(.16,.84,.34,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  background: radial-gradient(1200px 700px at 50% -10%, #160a26 0%, var(--bg) 55%) fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(17px, 1.15vw, 19px);
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none;
}
@media (pointer:coarse){ body{ cursor:auto; } }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.defs{ position:absolute; }

/* ── selection / scrollbar ── */
::selection{ background: var(--violet); color:#0a0610; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:#0a0710; }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--violet-lo),var(--plum)); border-radius:20px; }

/* ══════════════ BACKDROP LAYERS ══════════════ */

/* Flowing side fluids (gooey) */
.fluid-field{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  filter:url(#goo);
  mix-blend-mode:screen; opacity:.55;
}
.fluid{ position:absolute; top:0; bottom:0; width:34vw; }
.fluid--left{ left:-6vw; }
.fluid--right{ right:-6vw; }
.blob{
  position:absolute; border-radius:50%;
  filter:blur(6px);
  /* --flow set by JS from scroll; gives the "flowing down the sides" feel */
  transform: translateY(calc(var(--flow,0) * 1px));
  will-change: transform;
}
.fluid--left .b1{ left:2vw;  width:16vw; height:16vw; background:radial-gradient(circle at 40% 35%, #7b46e6, transparent 68%); animation:drift1 16s var(--ease) infinite; }
.fluid--left .b2{ left:-3vw; width:22vw; height:22vw; background:radial-gradient(circle at 50% 50%, #34e6d4aa, transparent 66%); animation:drift2 22s var(--ease) infinite; }
.fluid--left .b3{ left:6vw;  width:11vw; height:11vw; background:radial-gradient(circle at 50% 50%, #c2173b99, transparent 64%); animation:drift3 19s var(--ease) infinite; }
.fluid--right .b1{ right:1vw;  width:18vw; height:18vw; background:radial-gradient(circle at 60% 40%, #8a4fff, transparent 68%); animation:drift2 18s var(--ease) infinite; }
.fluid--right .b2{ right:-4vw; width:24vw; height:24vw; background:radial-gradient(circle at 50% 50%, #34e6d4aa, transparent 66%); animation:drift1 24s var(--ease) infinite; }
.fluid--right .b3{ right:5vw;  width:10vw; height:10vw; background:radial-gradient(circle at 50% 50%, #9a6bffcc, transparent 64%); animation:drift3 21s var(--ease) infinite; }

@keyframes drift1{ 0%,100%{ margin-top:-4vh; } 50%{ margin-top:14vh; } }
@keyframes drift2{ 0%,100%{ margin-top:10vh; } 50%{ margin-top:-8vh; } }
@keyframes drift3{ 0%,100%{ margin-top:30vh; } 50%{ margin-top:62vh; } }

/* film grain */
.grain{
  position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-4%,3%)} 40%{transform:translate(3%,-3%)} 60%{transform:translate(-2%,4%)} 80%{transform:translate(4%,-2%)} 100%{transform:translate(0,0)} }

/* soft fog */
.fog{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(60vw 40vh at 15% 20%, rgba(154,107,255,.10), transparent 60%),
    radial-gradient(50vw 40vh at 85% 70%, rgba(52,230,212,.07), transparent 60%);
}

/* ══════════════ CURSOR ══════════════ */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; transform:translate(-50%,-50%); }
.cursor-dot{ width:7px; height:7px; background:var(--teal); box-shadow:0 0 12px var(--teal); }
.cursor-ring{ width:34px; height:34px; border:1px solid rgba(154,107,255,.6); transition:width .25s,height .25s,border-color .25s,background .25s; }
.cursor-ring.is-hot{ width:54px; height:54px; border-color:var(--teal); background:rgba(52,230,212,.06); }
@media (pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ══════════════ SCROLL VEIN ══════════════ */
.scroll-vein{ position:fixed; top:0; left:0; right:0; height:2px; z-index:200; background:rgba(154,107,255,.08); }
.scroll-vein i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--teal),var(--crimson)); box-shadow:0 0 10px var(--violet); }

/* ══════════════ PRELOADER ══════════════ */
.preloader{
  position:fixed; inset:0; z-index:9000; display:grid; place-content:center; justify-items:center; gap:18px;
  background:radial-gradient(circle at 50% 45%, #14091f, #050308);
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.spinner-bat{ fill:var(--violet); filter:drop-shadow(0 0 16px var(--violet)); animation:hover 1.1s ease-in-out infinite; }
@keyframes hover{ 0%,100%{ transform:translateY(-6px) scaleY(1); } 50%{ transform:translateY(6px) scaleY(.78); } }
.preloader__text{ font-family:var(--ui); letter-spacing:.5em; text-transform:uppercase; font-size:.7rem; color:var(--muted); }

/* ══════════════ BATS ══════════════ */
.bat-swarm{ position:fixed; inset:0; z-index:3; pointer-events:none; }
.bat{ position:absolute; will-change:transform; }
.bat__img{ display:block; width:100%; height:auto; transform-origin:50% 42%; filter:drop-shadow(0 5px 12px rgba(0,0,0,.5)); animation:flap .6s ease-in-out infinite; }
@keyframes flap{ 0%,100%{ transform:scaleY(1); } 50%{ transform:scaleY(.8) translateY(3%); } }
@keyframes crossL{ from{ transform:translate(-12vw, 0); } to{ transform:translate(116vw, 0); } }
@keyframes crossR{ from{ transform:translate(116vw, 0) scaleX(-1); } to{ transform:translate(-12vw, 0) scaleX(-1); } }
@keyframes bob{ 0%,100%{ margin-top:0; } 50%{ margin-top:5vh; } }

/* ══════════════ NAV ══════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:300;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:18px clamp(18px,4vw,46px);
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(8,6,12,.72); backdrop-filter:blur(14px); padding:12px clamp(18px,4vw,46px); border-color:var(--line); }
.brand{ display:flex; align-items:center; gap:10px; }
.brand__bat{ fill:var(--violet); filter:drop-shadow(0 0 8px var(--violet)); transition:transform .4s var(--ease); }
.brand:hover .brand__bat{ transform:translateY(-3px) scaleX(1.1); }
.brand__name{ font-family:var(--display); font-weight:600; letter-spacing:.18em; text-transform:uppercase; font-size:.96rem; }
.brand__name--big{ font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.12em; }
.nav__links{ display:flex; gap:30px; font-family:var(--ui); font-weight:300; letter-spacing:.12em; text-transform:uppercase; font-size:.74rem; }
.nav__links a{ position:relative; color:var(--muted); padding:4px 0; transition:color .3s; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px; background:var(--teal); transition:width .35s var(--ease); }
.nav__links a:hover{ color:var(--ink); } .nav__links a:hover::after{ width:100%; }
.cart-btn{ position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--ink); cursor:none; transition:border-color .3s,background .3s,transform .3s; }
.cart-btn:hover{ border-color:var(--teal); transform:translateY(-2px); }
.cart-count{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:10px; background:var(--crimson); color:#fff; font-family:var(--ui); font-size:.62rem; transform:scale(0); transition:transform .3s var(--ease); }
.cart-count.show{ transform:scale(1); }

/* ══════════════ HERO ══════════════ */
.hero{ position:relative; z-index:2; min-height:100svh; display:grid; place-items:center; text-align:center; padding:120px clamp(18px,5vw,40px) 0; overflow:hidden; }
.hero__halo{ position:absolute; top:42%; left:50%; width:min(820px,90vw); aspect-ratio:1; transform:translate(-50%,-50%); background:radial-gradient(circle, rgba(154,107,255,.22), transparent 62%); filter:blur(8px); z-index:-1; }
.hero--img .hero__halo{ opacity:.55; }

/* hero background image (assets/art/hero-bg.jpg) */
.hero__bg{ position:absolute; inset:0; z-index:-2; background:url("assets/art/hero-bg.jpg") center 42%/cover no-repeat; transform:scale(1.04); animation:heroZoom 26s ease-in-out infinite alternate; }
.hero__bg::after{ content:""; position:absolute; inset:0; background:
  radial-gradient(58% 46% at 50% 40%, rgba(7,6,10,.42), transparent 72%),
  linear-gradient(to bottom, rgba(7,6,10,.62) 0%, rgba(7,6,10,.22) 34%, rgba(7,6,10,.5) 72%, var(--bg) 100%); }
@keyframes heroZoom{ from{ transform:scale(1.04); } to{ transform:scale(1.12) translateY(-1.5%); } }
.hero--img .hero__title{ text-shadow:0 4px 40px rgba(0,0,0,.55); }
.hero--img .hero__sub{ text-shadow:0 2px 24px rgba(0,0,0,.7); }
.hero--img .hero__eyebrow{ text-shadow:0 2px 18px rgba(0,0,0,.8); }
.hero__inner{ max-width:880px; position:relative; z-index:3; }
.hero__eyebrow{ font-family:var(--ui); letter-spacing:.42em; text-transform:uppercase; font-size:.72rem; color:var(--teal); margin-bottom:26px; }
.hero__title{ font-family:var(--display); font-weight:700; line-height:.98; font-size:clamp(3.4rem,11vw,8.4rem); text-transform:uppercase; letter-spacing:.02em; }
.hero__title span{ display:block; }
.hero__title--script{ font-family:var(--black); font-style:italic; font-weight:800; text-transform:none; letter-spacing:0; font-size:1.05em; color:transparent; background:linear-gradient(180deg,#c4a6ff,var(--teal)); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 6px 26px rgba(154,107,255,.5)); padding:.06em 0; }
.hero__sub{ max-width:560px; margin:30px auto 0; color:var(--muted); font-size:1.18rem; }
.hero__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:38px; }

/* ── ooze ── */
.ooze{ position:absolute; left:0; right:0; bottom:-1px; z-index:2; line-height:0; }
.ooze svg{ width:100%; height:clamp(80px,12vw,150px); display:block; }
.ooze path{ fill:var(--bg-2); }
.drip{ position:absolute; top:62%; width:9px; background:var(--bg-2); border-radius:0 0 50% 50%; transform-origin:top; animation:drip 5.5s var(--ease) infinite; }
.drip::after{ content:""; position:absolute; left:50%; bottom:-9px; width:9px; height:9px; background:var(--bg-2); border-radius:50%; transform:translateX(-50%); }
.drip.d1{ left:16%; height:34px; animation-delay:.2s; } .drip.d2{ left:34%; height:58px; animation-delay:1.4s; } .drip.d3{ left:53%; height:26px; animation-delay:.8s; } .drip.d4{ left:71%; height:64px; animation-delay:2.1s; } .drip.d5{ left:88%; height:40px; animation-delay:1s; }
@keyframes drip{ 0%{ transform:scaleY(.7); } 50%{ transform:scaleY(1.25); } 100%{ transform:scaleY(.7); } }

/* ══════════════ BUTTONS ══════════════ */
.btn{ font-family:var(--ui); letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; padding:16px 30px; border-radius:40px; cursor:none; transition:transform .35s var(--ease),box-shadow .35s,background .35s,color .35s,border-color .35s; position:relative; overflow:hidden; }
.btn--solid{ background:linear-gradient(120deg,var(--violet),var(--violet-lo)); color:#0b0612; box-shadow:0 10px 30px rgba(154,107,255,.3); }
.btn--solid:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(154,107,255,.5); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-3px); }

/* ══════════════ MARQUEE ══════════════ */
.marquee{ position:relative; z-index:2; background:var(--bg-2); border-block:1px solid var(--line); overflow:hidden; padding:18px 0; }
.marquee__track{ display:flex; gap:34px; align-items:center; width:max-content; animation:scrollX 26s linear infinite; }
.marquee__track span{ font-family:var(--display); text-transform:uppercase; letter-spacing:.22em; font-size:1.1rem; color:var(--muted); white-space:nowrap; }
.marquee__track b{ color:var(--teal); }
@keyframes scrollX{ to{ transform:translateX(-50%); } }

/* ══════════════ SHARED SECTION BITS ══════════════ */
.section-kicker{ font-family:var(--ui); letter-spacing:.32em; text-transform:uppercase; font-size:.7rem; color:var(--teal); display:block; margin-bottom:16px; }
.section-title{ font-family:var(--display); font-weight:600; line-height:1.05; font-size:clamp(2.1rem,5vw,3.6rem); letter-spacing:.01em; }
.section-title em{ font-family:var(--black); font-style:italic; color:transparent; background:linear-gradient(120deg,#c4a6ff,var(--teal)); -webkit-background-clip:text; background-clip:text; }

/* ══════════════ STORY ══════════════ */
.story{ position:relative; z-index:2; background:var(--bg-2); padding:clamp(70px,10vw,130px) 0; }
.story{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,6vw,80px); align-items:center; width:var(--shell); margin-inline:auto; }
.story__frame{ position:relative; border-radius:8px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.6); }
.story__frame img{ width:100%; aspect-ratio:4/5; object-fit:cover; filter:saturate(1.05) contrast(1.05); transition:transform 1.1s var(--ease); }
.story__frame:hover img{ transform:scale(1.06); }
.story__tag{ position:absolute; top:14px; left:14px; font-family:var(--ui); letter-spacing:.2em; text-transform:uppercase; font-size:.62rem; padding:7px 12px; background:rgba(7,6,10,.7); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:30px; color:var(--teal); }
.story__text p{ color:var(--muted); margin-top:18px; }
.story__text .section-title{ margin-top:6px; }
.story__stats{ list-style:none; display:flex; gap:30px; margin-top:34px; flex-wrap:wrap; }
.story__stats li{ display:flex; flex-direction:column; }
.story__stats strong{ font-family:var(--display); font-size:1.9rem; color:var(--ink); }
.story__stats span{ font-family:var(--ui); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); }

/* ══════════════ SHOP ══════════════ */
.shop{ position:relative; z-index:2; width:var(--shell); margin-inline:auto; padding:clamp(70px,10vw,130px) 0; }
.shop__head{ text-align:center; max-width:640px; margin:0 auto clamp(40px,6vw,70px); }
.shop__lead{ color:var(--muted); margin-top:16px; }
.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); }

.card{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; backdrop-filter:blur(6px); transition:transform .5s var(--ease),border-color .5s,box-shadow .5s; }
.card:hover{ transform:translateY(-8px); border-color:rgba(52,230,212,.4); box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(154,107,255,.12); }
.card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.card__imglink{ display:block; width:100%; height:100%; }
.card__name a{ color:inherit; transition:color .3s; }
.card:hover .card__name a{ color:var(--teal); }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease),filter .6s; filter:saturate(1.02); }
.card:hover .card__media img{ transform:scale(1.08); }
.card__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,6,10,.85), transparent 45%); }
.card__badge{ position:absolute; z-index:2; top:14px; left:14px; font-family:var(--ui); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; padding:6px 11px; border-radius:30px; background:rgba(7,6,10,.65); backdrop-filter:blur(6px); border:1px solid var(--line); color:var(--ink); }
.card__badge.hot{ color:#fff; background:linear-gradient(120deg,var(--crimson),#7a0f24); border-color:transparent; }
.card__fav{ position:absolute; z-index:2; top:12px; right:12px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(7,6,10,.55); border:1px solid var(--line); color:var(--muted); cursor:none; transition:color .3s,transform .3s,background .3s; }
.card__fav:hover{ color:var(--crimson); transform:scale(1.1); }
.card__fav.on{ color:var(--crimson); background:rgba(194,23,59,.14); }

.card__body{ position:relative; z-index:2; padding:20px 22px 24px; margin-top:-46px; }
.card__name{ font-family:var(--display); font-size:1.32rem; font-weight:600; }
.card__desc{ color:var(--muted); font-size:.98rem; margin-top:8px; min-height:3.2em; }
.card__meta{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.card__chip{ font-family:var(--ui); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); border-radius:30px; padding:5px 10px; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:18px; }
.card__price{ font-family:var(--display); font-size:1.4rem; color:var(--teal); }
.card__price s{ color:var(--faint); font-size:.85rem; margin-right:8px; }
.card__add{ font-family:var(--ui); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem; padding:12px 18px; border-radius:30px; border:1px solid var(--violet); color:var(--ink); background:transparent; cursor:none; transition:background .3s,color .3s,transform .3s; }
.card__add:hover{ background:var(--violet); color:#0b0612; transform:translateY(-2px); }

/* ══════════════ CRAFT ══════════════ */
.craft{ position:relative; z-index:2; background:var(--bg-2); padding:clamp(60px,8vw,110px) 0; }
.craft__row{ width:var(--shell); margin-inline:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.feature{ padding:34px 28px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.015); transition:transform .5s var(--ease),border-color .5s; }
.feature:hover{ transform:translateY(-6px); border-color:rgba(52,230,212,.35); }
.feature__no{ font-family:var(--black); font-size:2.6rem; color:transparent; background:linear-gradient(120deg,var(--violet),var(--teal)); -webkit-background-clip:text; background-clip:text; }
.feature h3{ font-family:var(--display); font-size:1.3rem; margin-top:8px; }
.feature p{ color:var(--muted); margin-top:10px; font-size:.98rem; }

/* ══════════════ CULT / NEWSLETTER ══════════════ */
.cult{ position:relative; z-index:2; padding:clamp(70px,10vw,130px) clamp(18px,5vw,40px); }
.cult__card{ width:var(--shell); margin-inline:auto; max-width:760px; text-align:center; padding:clamp(40px,6vw,70px); border:1px solid var(--line); border-radius:18px; background:linear-gradient(160deg, rgba(42,19,66,.5), rgba(12,9,19,.6)); backdrop-filter:blur(8px); box-shadow:0 30px 80px rgba(0,0,0,.5); position:relative; overflow:hidden; }
.cult__card::before{ content:""; position:absolute; inset:-40% -20% auto -20%; height:60%; background:radial-gradient(circle, rgba(52,230,212,.14), transparent 60%); }
.cult__bat{ fill:var(--violet); filter:drop-shadow(0 0 14px var(--violet)); margin-bottom:18px; animation:hover 3s ease-in-out infinite; }
.cult__card p{ color:var(--muted); margin-top:14px; }
.cult__form{ display:flex; gap:12px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.cult__form input{ font-family:var(--serif); font-size:1.05rem; padding:15px 22px; min-width:min(320px,80vw); border-radius:40px; border:1px solid var(--line); background:rgba(7,6,10,.55); color:var(--ink); outline:none; transition:border-color .3s; }
.cult__form input:focus{ border-color:var(--teal); }
.cult__note{ font-family:var(--ui); font-size:.78rem; letter-spacing:.06em; color:var(--teal); margin-top:16px; min-height:1.2em; }

/* ══════════════ FOOTER ══════════════ */
.footer{ position:relative; z-index:2; background:var(--bg-2); border-top:1px solid var(--line); padding:clamp(50px,7vw,90px) clamp(18px,5vw,46px) 30px; }
.footer__top{ width:var(--shell); margin-inline:auto; display:grid; grid-template-columns:1.4fr 2fr; gap:40px; }
.footer__brand p{ color:var(--muted); margin-top:14px; max-width:34ch; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.footer__cols h4{ font-family:var(--ui); letter-spacing:.2em; text-transform:uppercase; font-size:.66rem; color:var(--faint); margin-bottom:14px; }
.footer__cols a{ display:block; color:var(--muted); padding:5px 0; transition:color .3s,padding-left .3s; }
.footer__cols a:hover{ color:var(--teal); padding-left:6px; }
.footer__bottom{ width:var(--shell); margin:46px auto 0; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:16px; font-family:var(--ui); font-size:.72rem; letter-spacing:.08em; color:var(--faint); flex-wrap:wrap; }
.footer__bats{ display:flex; align-items:center; gap:10px; fill:var(--faint); opacity:.7; }
.footer__cat{ position:absolute; bottom:100%; right:7%; width:clamp(92px,9vw,124px); margin-bottom:-16px; filter:drop-shadow(0 14px 26px rgba(154,107,255,.3)); pointer-events:none; z-index:3; animation:floaty 6s ease-in-out infinite; }

/* ══════════════ TOAST ══════════════ */
.toast{ position:fixed; left:50%; bottom:30px; z-index:9500; transform:translate(-50%,140%); background:rgba(12,9,19,.92); backdrop-filter:blur(10px); border:1px solid var(--line); color:var(--ink); padding:14px 22px; border-radius:40px; font-family:var(--ui); font-size:.82rem; letter-spacing:.04em; box-shadow:0 18px 50px rgba(0,0,0,.6); transition:transform .5s var(--ease); display:flex; align-items:center; gap:10px; }
.toast.show{ transform:translate(-50%,0); }
.toast b{ color:var(--teal); }

/* ══════════════ REVEAL ANIMATIONS ══════════════ */
.reveal-up,.reveal-left,.reveal-right{ opacity:0; transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0s); will-change:opacity,transform; }
.reveal-up{ transform:translateY(46px); }
.reveal-left{ transform:translateX(-70px); }
.reveal-right{ transform:translateX(70px); }
.reveal-up.in,.reveal-left.in,.reveal-right.in{ opacity:1; transform:none; }

/* ══════════════ NAV ACTIONS / DROPDOWN / HAMBURGER ══════════════ */
.nav__actions{ display:flex; align-items:center; gap:12px; }
.nav__item{ position:relative; display:flex; align-items:center; }
/* invisible bridge over the gap so the mouse can reach the panel without it closing */
.nav__item::after{ content:""; position:absolute; top:100%; left:-14px; right:-14px; height:24px; }
.nav__trigger{ display:inline-flex; align-items:center; gap:6px; }
.nav__trigger svg{ transition:transform .3s var(--ease); }
.nav__item:hover .nav__trigger svg{ transform:rotate(180deg); }

.nav__panel{
  position:absolute; top:calc(100% + 16px); left:50%;
  width:320px; transform:translateX(-50%) translateY(10px);
  background:linear-gradient(165deg, rgba(26,14,42,.96), rgba(10,8,16,.97));
  border:1px solid var(--line); border-radius:14px; padding:14px;
  box-shadow:0 30px 70px rgba(0,0,0,.6); backdrop-filter:blur(14px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.nav__panel::before{ content:""; position:absolute; top:-7px; left:50%; width:12px; height:12px; transform:translateX(-50%) rotate(45deg); background:rgba(26,14,42,.96); border-left:1px solid var(--line); border-top:1px solid var(--line); }
.nav__item:hover .nav__panel, .nav__item:focus-within .nav__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%); }
.nav__panel-head{ display:block; font-family:var(--ui); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint); padding:4px 10px 10px; }
.navlink-reyon{ display:flex; align-items:center; gap:12px; padding:10px; border-radius:10px; color:var(--muted); transition:background .25s, color .25s, padding-left .25s; }
.navlink-reyon:hover{ background:rgba(154,107,255,.10); color:var(--ink); padding-left:14px; }
.navlink-reyon.active{ background:rgba(52,230,212,.10); color:var(--teal); }
.navlink-reyon__ico{ width:30px; height:30px; flex:none; color:var(--violet); }
.navlink-reyon__ico svg{ width:100%; height:100%; }
.navlink-reyon span:nth-child(2){ display:flex; flex-direction:column; line-height:1.25; font-size:.92rem; }
.navlink-reyon b{ color:var(--ink); font-weight:600; }
.navlink-reyon em{ font-style:normal; font-size:.7rem; letter-spacing:.04em; color:var(--faint); }
.navlink-reyon__n{ margin-left:auto; font-family:var(--ui); font-size:.66rem; color:var(--teal); }
.navlink-reyon--all{ justify-content:center; margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 10px 10px; padding-top:14px; font-family:var(--ui); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); }
.navlink-reyon--all:hover{ padding-left:10px; }

.menu-btn{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.02); cursor:none; place-items:center; gap:4px; }
.menu-btn span{ display:block; width:18px; height:1.6px; background:var(--ink); transition:transform .35s var(--ease), opacity .25s; }
.menu-btn.open span:nth-child(1){ transform:translateY(5.6px) rotate(45deg); }
.menu-btn.open span:nth-child(2){ opacity:0; }
.menu-btn.open span:nth-child(3){ transform:translateY(-5.6px) rotate(-45deg); }

/* ── mobile drawer ── */
.drawer{
  position:fixed; inset:0; z-index:290; padding:96px clamp(24px,7vw,48px) 40px;
  background:linear-gradient(160deg, rgba(18,9,28,.98), rgba(7,6,10,.99));
  backdrop-filter:blur(16px); transform:translateX(100%); transition:transform .5s var(--ease);
  overflow-y:auto;
}
.drawer.open{ transform:none; }
.drawer__nav{ display:flex; flex-direction:column; gap:6px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.drawer__nav a{ font-family:var(--display); font-size:1.7rem; color:var(--ink); padding:8px 0; }
.drawer__reyon{ padding-top:22px; }
.drawer__reyon .section-kicker{ margin-bottom:14px; }
#drawerReyon a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid rgba(154,107,255,.08); color:var(--muted); font-family:var(--serif); font-size:1.2rem; }
#drawerReyon a b{ color:var(--violet); margin-right:8px; }
#drawerReyon a span{ font-family:var(--ui); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

/* ══════════════ REYONLAR (arcana directory) ══════════════ */
.reyonlar{ position:relative; z-index:2; width:var(--shell); margin-inline:auto; padding:clamp(60px,9vw,120px) 0 0; }
.reyon-rack{ display:grid; grid-template-columns:repeat(auto-fit, minmax(178px,1fr)); gap:clamp(14px,1.8vw,22px); }

.arcana{
  position:relative; aspect-ratio:3/4.3; padding:24px 16px 20px;
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  border:1px solid var(--line); border-radius:16px; cursor:none; overflow:hidden;
  background:linear-gradient(168deg, rgba(32,18,52,.55), rgba(10,8,16,.7));
  transform-style:preserve-3d; transform:perspective(700px);
  transition:transform .5s var(--ease), border-color .45s, box-shadow .45s, background .45s;
}
.arcana:hover{ border-color:rgba(52,230,212,.45); box-shadow:0 34px 70px rgba(0,0,0,.55), 0 0 44px rgba(154,107,255,.16); }
.arcana.active{ border-color:var(--teal); background:linear-gradient(168deg, rgba(52,230,212,.14), rgba(12,9,19,.78)); }
.arcana::before,.arcana::after{ content:""; position:absolute; width:18px; height:18px; border:1px solid var(--violet); opacity:.45; pointer-events:none; }
.arcana::before{ top:9px; left:9px; border-right:0; border-bottom:0; }
.arcana::after{ bottom:9px; right:9px; border-left:0; border-top:0; }
.arcana__sheen{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s; background:radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(154,107,255,.22), transparent 60%); }
.arcana:hover .arcana__sheen{ opacity:1; }
.arcana__stitch{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.arcana__stitch rect{ fill:none; stroke:var(--teal); stroke-width:1.2; stroke-dasharray:5 8; opacity:0; transition:opacity .4s; }
.arcana:hover .arcana__stitch rect, .arcana.active .arcana__stitch rect{ opacity:.5; animation:stitch 7s linear infinite; }
@keyframes stitch{ to{ stroke-dashoffset:-260; } }
.arcana__num{ font-family:var(--display); font-size:.9rem; letter-spacing:.32em; color:var(--muted); }
.arcana__medallion{ width:66px; height:66px; margin:8px 0 4px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); color:var(--violet); background:rgba(7,6,10,.4); transition:color .4s, border-color .4s, transform .4s; }
.arcana__medallion svg{ width:34px; height:34px; }
.arcana:hover .arcana__medallion, .arcana.active .arcana__medallion{ color:var(--teal); border-color:rgba(52,230,212,.5); transform:translateZ(30px); }
.arcana__name{ font-family:var(--display); font-size:1.08rem; font-weight:600; line-height:1.15; }
.arcana__sub{ font-size:.86rem; color:var(--muted); }
.arcana__count{ margin-top:auto; font-family:var(--ui); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); border:1px solid var(--line); border-radius:30px; padding:5px 12px; }
.arcana__count.soon{ color:var(--faint); }
.arcana__sheen,.arcana__stitch{ z-index:1; }

/* arcana with full AI art (assets/art/reyon-*.jpg) */
.arcana--art{ overflow:hidden; }
.arcana__art{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 26%; transition:transform .6s var(--ease); }
.arcana--art:hover .arcana__art{ transform:scale(1.06); }
.arcana__art::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,6,10,.95) 8%, rgba(7,6,10,.18) 56%, rgba(7,6,10,.5)); }
.arcana--art .arcana__num{ position:relative; z-index:2; text-shadow:0 2px 14px #000; }
.arcana__cap{ position:relative; z-index:2; margin-top:auto; display:flex; flex-direction:column; align-items:center; gap:6px; }
.arcana--art .arcana__name{ text-shadow:0 3px 16px #000; }
.arcana--art .arcana__count{ background:rgba(7,6,10,.55); backdrop-filter:blur(4px); }

/* ── filter pills ── */
.reyon-filter{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:26px; }
.pill{ font-family:var(--ui); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; padding:10px 16px; border-radius:30px; border:1px solid var(--line); color:var(--muted); background:transparent; cursor:none; transition:color .3s, border-color .3s, background .3s, transform .3s; }
.pill:hover{ color:var(--ink); border-color:var(--violet); transform:translateY(-2px); }
.pill.active{ background:linear-gradient(120deg,var(--violet),var(--violet-lo)); color:#0b0612; border-color:transparent; }
.pill b{ opacity:.55; margin-left:7px; font-weight:600; }

/* grid morph transition */
.grid{ transition:opacity .28s var(--ease), filter .28s, transform .28s; }
.grid.morphing{ opacity:0; filter:blur(9px); transform:scale(.985); }

/* product card reyon label */
.card__reyon{ display:block; font-family:var(--ui); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); margin-bottom:7px; }

/* empty reyon state */
.empty{ grid-column:1/-1; text-align:center; padding:clamp(40px,7vw,80px) 24px; border:1px dashed var(--line); border-radius:16px; background:rgba(255,255,255,.012); }
.empty__bat{ fill:var(--violet); filter:drop-shadow(0 0 14px var(--violet)); animation:hover 3s ease-in-out infinite; margin-bottom:14px; }
.empty h3{ font-family:var(--display); font-size:1.5rem; }
.empty p{ color:var(--muted); margin:12px auto 22px; max-width:42ch; }
.empty__cat{ width:clamp(120px,18vw,160px); height:auto; margin:0 auto 6px; display:block; filter:drop-shadow(0 14px 30px rgba(154,107,255,.32)); animation:floaty 5s ease-in-out infinite; }

/* mascot cat in newsletter card */
.cult__cat{ width:clamp(120px,16vw,150px); height:auto; margin:0 auto 6px; display:block; filter:drop-shadow(0 14px 34px rgba(52,230,212,.28)); animation:floaty 5.5s ease-in-out infinite; }

/* AI filigree divider (assets/art/divider.jpg) — black drops out via screen blend */
.flourish{ width:var(--shell); max-width:720px; height:clamp(54px,8vw,104px); margin:clamp(20px,4vw,46px) auto; background:url("assets/art/divider.jpg") center/contain no-repeat; mix-blend-mode:screen; opacity:.92; pointer-events:none; }
@keyframes floaty{ 0%,100%{ transform:translateY(-6px); } 50%{ transform:translateY(6px); } }

/* ══════════════ NAV ICON BUTTONS ══════════════ */
.icon-btn{ position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--ink); cursor:none; transition:border-color .3s,background .3s,transform .3s; }
.icon-btn:hover{ border-color:var(--teal); transform:translateY(-2px); }
.icon-btn svg{ width:20px; height:20px; }
.cart-count,.mini-count{ position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; display:grid; place-items:center; border-radius:10px; background:var(--crimson); color:#fff; font-family:var(--ui); font-size:.6rem; transform:scale(0); transition:transform .3s var(--ease); pointer-events:none; }
.mini-count{ background:var(--violet); }
.cart-count.show,.mini-count.show{ transform:scale(1); }
.nav.active,.nav__links a.active{ color:var(--ink); }
.nav__links a.active::after{ width:100%; }

/* ══════════════ PAGE SHELL ══════════════ */
.page{ position:relative; z-index:2; min-height:70vh; }
.shell{ width:var(--shell); margin-inline:auto; }
.page-hero{ position:relative; z-index:2; text-align:center; padding:clamp(130px,16vw,180px) 5vw 20px; }
.page-hero .section-kicker{ justify-content:center; }
.page-hero p{ color:var(--muted); max-width:580px; margin:16px auto 0; font-size:1.12rem; }
.muted{ color:var(--muted); }
.crumb{ font-family:var(--ui); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:24px; }
.crumb a{ color:var(--muted); } .crumb a:hover{ color:var(--teal); } .crumb span{ color:var(--ink); }

/* ══════════════ SHOP TOOLBAR ══════════════ */
.shop-toolbar{ display:flex; gap:14px; align-items:center; justify-content:center; flex-wrap:wrap; margin-top:24px; }
.search{ position:relative; }
.search input,.sort select{ font-family:var(--ui); font-size:.78rem; letter-spacing:.06em; color:var(--ink); padding:12px 18px; border-radius:30px; border:1px solid var(--line); background:rgba(7,6,10,.55); outline:none; transition:border-color .3s; cursor:none; }
.search input{ min-width:min(280px,72vw); } .search input::placeholder{ color:var(--faint); }
.search input:focus,.sort select:focus{ border-color:var(--teal); }
.sort select{ -webkit-appearance:none; appearance:none; padding-right:34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a99fb8' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; }
.result-count{ font-family:var(--ui); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }

/* ══════════════ PRODUCT DETAIL ══════════════ */
.pd{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.pd__media{ position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.6); }
.pd__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1s var(--ease); }
.pd__media:hover img{ transform:scale(1.05); }
.pd__name{ font-family:var(--display); font-size:clamp(2rem,4vw,2.8rem); font-weight:600; line-height:1.05; margin:6px 0 14px; }
.pd__price{ font-family:var(--display); font-size:1.7rem; color:var(--teal); display:flex; align-items:center; gap:12px; }
.pd__price s{ color:var(--faint); font-size:1rem; }
.pd__save{ font-family:var(--ui); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:linear-gradient(120deg,var(--crimson),#7a0f24); padding:5px 10px; border-radius:30px; }
.pd__short{ color:var(--muted); font-size:1.14rem; margin:16px 0; }
.pd__color{ display:flex; gap:10px; align-items:baseline; margin:8px 0 16px; font-family:var(--ui); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); }
.pd__color b{ font-family:var(--serif); font-size:1rem; letter-spacing:0; text-transform:none; color:var(--ink); }
.pd__buy{ display:flex; gap:12px; align-items:center; margin:8px 0 26px; flex-wrap:wrap; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:30px; overflow:hidden; }
.qty button{ width:42px; height:46px; background:transparent; color:var(--ink); font-size:1.2rem; cursor:none; transition:background .25s; }
.qty button:hover{ background:rgba(154,107,255,.12); }
.qty input{ width:46px; height:46px; text-align:center; background:transparent; color:var(--ink); border:0; border-inline:1px solid var(--line); font-family:var(--ui); outline:none; }
.pd__fav.on{ color:var(--crimson); border-color:var(--crimson); background:rgba(194,23,59,.12); }
.pd__desc p{ color:var(--muted); margin-bottom:12px; }

/* accordion (product + faq) */
.accordion{ margin-top:24px; border-top:1px solid var(--line); }
.acc{ border-bottom:1px solid var(--line); }
.acc__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 2px; background:transparent; color:var(--ink); font-family:var(--display); font-size:1.06rem; text-align:left; cursor:none; }
.acc__head span{ font-family:var(--ui); color:var(--teal); font-size:1.3rem; transition:transform .3s; }
.acc.open .acc__head span{ transform:rotate(45deg); }
.acc__body{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.acc.open .acc__body{ max-height:300px; }
.acc__body p{ color:var(--muted); padding:0 2px 20px; } .acc__body a{ color:var(--teal); }

.related{ margin-top:clamp(60px,9vw,110px); }
.related .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); margin-top:30px; }

/* ══════════════ CART ══════════════ */
.cartwrap{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(24px,4vw,50px); align-items:start; }
.cline{ display:grid; grid-template-columns:88px 1fr auto auto; gap:18px; align-items:center; padding:18px 0; border-bottom:1px solid var(--line); }
.cline__img img{ width:88px; height:110px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.cline__info h3{ font-family:var(--display); font-size:1.18rem; }
.cline__rm{ background:transparent; color:var(--faint); font-family:var(--ui); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; cursor:none; margin-top:8px; transition:color .25s; }
.cline__rm:hover{ color:var(--crimson); }
.cline__price{ font-family:var(--display); font-size:1.2rem; color:var(--teal); white-space:nowrap; }
.summary{ position:sticky; top:100px; border:1px solid var(--line); border-radius:16px; padding:28px; background:linear-gradient(160deg, rgba(42,19,66,.4), rgba(12,9,19,.6)); backdrop-filter:blur(8px); }
.summary h3{ font-family:var(--display); font-size:1.4rem; margin-bottom:18px; }
.summary__row{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; color:var(--muted); }
.summary__row b{ color:var(--ink); font-family:var(--ui); }
.summary__total{ border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:1.15rem; }
.summary__total b{ color:var(--teal); font-family:var(--display); font-size:1.4rem; }
.summary__note{ font-size:.9rem; color:var(--teal); margin:12px 0 18px; }
.summary .btn{ display:block; text-align:center; margin-top:10px; }

/* ══════════════ CHECKOUT ══════════════ */
.checkout{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(24px,4vw,50px); align-items:start; }
.checkout__form h3,.auth__card h3{ font-family:var(--display); font-size:1.3rem; margin:8px 0 16px; }
.checkout__form label,.auth__card label,#contactForm label{ display:flex; flex-direction:column; gap:7px; margin-bottom:15px; font-family:var(--ui); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.checkout__form input,.checkout__form textarea,.auth__card input,#contactForm input,#contactForm textarea{ font-family:var(--serif); font-size:1.04rem; letter-spacing:0; text-transform:none; color:var(--ink); padding:13px 16px; border-radius:10px; border:1px solid var(--line); background:rgba(7,6,10,.55); outline:none; transition:border-color .3s; cursor:none; }
.checkout__form input:focus,.checkout__form textarea:focus,.auth__card input:focus,#contactForm input:focus,#contactForm textarea:focus{ border-color:var(--teal); }
.field2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checkout__form .btn{ width:100%; margin-top:10px; }
.demo-tag{ font-family:var(--ui); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line); border-radius:30px; padding:4px 9px; margin-left:8px; }
.order-done{ text-align:center; max-width:600px; margin:0 auto; padding:40px 0; }
.order-done .empty__bat{ margin-bottom:10px; } .order-done p{ color:var(--muted); margin:14px auto; max-width:46ch; }
.order-done .hero__cta{ margin-top:24px; }

/* ══════════════ AUTH ══════════════ */
.auth{ display:grid; place-items:center; padding:clamp(120px,15vw,170px) 5vw 60px; }
.auth__card{ width:min(440px,92vw); border:1px solid var(--line); border-radius:18px; padding:clamp(30px,5vw,44px); background:linear-gradient(160deg, rgba(42,19,66,.5), rgba(12,9,19,.65)); backdrop-filter:blur(10px); box-shadow:0 30px 80px rgba(0,0,0,.55); text-align:center; }
.auth__bat{ fill:var(--violet); filter:drop-shadow(0 0 14px var(--violet)); margin-bottom:10px; }
.auth__card .section-title{ font-size:2rem; }
.auth__card form{ text-align:left; margin-top:22px; }
.auth__card .btn{ width:100%; margin-top:8px; }
.auth__alt{ margin-top:20px; color:var(--muted); font-size:.95rem; } .auth__alt a{ color:var(--teal); }

/* ══════════════ ACCOUNT ══════════════ */
.account__head{ display:flex; align-items:center; gap:18px; padding-bottom:26px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.account__avatar{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-family:var(--display); font-size:1.7rem; color:#0b0612; background:linear-gradient(135deg,var(--violet),var(--teal)); }
.account__head .btn{ margin-left:auto; }
.account__grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:30px; }
.panel{ border:1px solid var(--line); border-radius:14px; padding:26px; background:rgba(255,255,255,.015); }
.panel h3{ font-family:var(--display); font-size:1.25rem; margin-bottom:16px; }
.order-row{ display:flex; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
.mini-card{ display:block; } .mini-card img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.mini-card span{ display:block; font-size:.82rem; color:var(--muted); margin-top:6px; }

/* ══════════════ ABOUT EXTRAS ══════════════ */
.values{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px); margin-top:40px; }
.timeline{ max-width:720px; margin:40px auto 0; }
.tl{ display:grid; grid-template-columns:90px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--line); }
.tl b{ font-family:var(--display); color:var(--teal); font-size:1.1rem; }
.tl h3{ font-family:var(--display); font-size:1.25rem; } .tl p{ color:var(--muted); margin-top:6px; }

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:900px){
  .nav__links{ display:none; }
  .menu-btn{ display:grid; }
  .grid,.related .grid{ grid-template-columns:repeat(2,1fr); }
  .story{ grid-template-columns:1fr; }
  .craft__row,.values{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .pd,.cartwrap,.checkout,.account__grid{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .icon-btn[href="favoriler.html"]{ display:none; }
}
@media (max-width:560px){
  .grid,.related .grid{ grid-template-columns:1fr; }
  .footer__cols{ grid-template-columns:repeat(2,1fr); }
  .hero__sub{ font-size:1.05rem; }
  .reyon-rack{ grid-template-columns:repeat(2,1fr); }
  .field2{ grid-template-columns:1fr; }
  .cline{ grid-template-columns:64px 1fr auto; }
  .cline__price{ grid-column:2/4; text-align:right; }
  .tl{ grid-template-columns:1fr; gap:6px; }
}

/* ══════════════ MOBILE / TOUCH TUNING ══════════════ */
@media (max-width:760px){
  /* lighter background fx so phones stay smooth */
  .fluid-field{ opacity:.4; }
  .fluid--left .b2,.fluid--right .b2{ filter:blur(10px); }
  .grain{ opacity:.04; }
  .nav{ padding:14px 18px; }
  .nav.scrolled{ padding:10px 18px; }
  .brand__name{ font-size:.86rem; }
  .nav__actions{ gap:8px; }
  .page-hero{ padding-top:clamp(110px,26vw,150px); }
  .hero__cta .btn{ flex:1 1 auto; text-align:center; }
  .account__head .btn{ margin-left:0; width:100%; }
  .related .grid{ gap:16px; }
}
@media (max-width:430px){
  .reyon-rack{ grid-template-columns:1fr 1fr; }
  .marquee__track span{ font-size:.95rem; }
  .pd__buy{ gap:10px; } .pd__buy .btn{ flex:1 1 100%; order:3; }
  .summary{ padding:22px; }
  .cult__form{ flex-direction:column; } .cult__form .btn{ width:100%; }
}

/* On touch devices, no hover — surface the stitched-thread accent on reyon cards anyway */
@media (hover:none){
  .arcana .arcana__stitch rect{ opacity:.28; animation:stitch 9s linear infinite; }
  .card:hover .card__media img,.story__frame:hover img,.pd__media:hover img{ transform:none; }
}

/* ══════════════ REDUCED MOTION ══════════════ */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal-up,.reveal-left,.reveal-right{ opacity:1 !important; transform:none !important; }
  body{ cursor:auto; } .cursor-dot,.cursor-ring{ display:none; }
  .fluid-field{ opacity:.35; }
}

/* ══════════════ LEGAL / PROSE (yasal sayfalar) ══════════════ */
.legal{ width:min(820px,92vw); margin-inline:auto; padding:30px 0 clamp(80px,12vw,140px); color:var(--ink); }
.legal__updated{ display:block; font-family:var(--ui); font-size:.82rem; color:var(--faint); letter-spacing:.02em; margin-bottom:34px; }
.legal h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.35rem,3.2vw,1.9rem); margin:42px 0 14px; line-height:1.2; }
.legal h2:first-of-type{ margin-top:0; }
.legal h3{ font-family:var(--display); font-weight:500; font-size:1.18rem; margin:26px 0 10px; color:#d9ccf0; }
.legal p, .legal li{ font-family:var(--serif); font-size:1.12rem; line-height:1.72; color:var(--muted); }
.legal p{ margin:0 0 14px; }
.legal ul, .legal ol{ margin:0 0 18px; padding-left:1.3em; }
.legal li{ margin:0 0 8px; }
.legal li::marker{ color:var(--teal); }
.legal a{ color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.legal a:hover{ color:#7ff3e6; }
.legal strong{ color:var(--ink); font-weight:600; }
.legal hr{ border:0; border-top:1px solid var(--line); margin:38px 0; }
.legal__box{ border:1px solid var(--line); border-radius:14px; padding:22px 24px; background:linear-gradient(160deg, rgba(42,19,66,.34), rgba(12,9,19,.5)); margin:22px 0; }
.legal__box p:last-child{ margin-bottom:0; }
.legal table{ width:100%; border-collapse:collapse; margin:18px 0; font-family:var(--ui); font-size:.98rem; }
.legal th, .legal td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); color:var(--muted); vertical-align:top; }
.legal th{ color:var(--ink); font-weight:500; width:38%; }
.legal__toc{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-wrap:wrap; gap:10px; }
.legal__toc li{ margin:0; }
.legal__toc a{ font-family:var(--ui); font-size:.86rem; text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:7px 14px; color:var(--muted); }
.legal__toc a:hover{ border-color:var(--teal); color:var(--teal); }

/* ══════════════ ÇEREZ / KVKK BANNER ══════════════ */
.cookie-banner{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(140%); z-index:9000;
  width:min(680px,92vw); border:1px solid var(--line); border-radius:16px; padding:20px 22px;
  background:linear-gradient(160deg, rgba(28,18,46,.96), rgba(10,8,16,.97)); backdrop-filter:blur(10px);
  box-shadow:0 30px 80px rgba(0,0,0,.7); transition:transform .6s var(--ease); }
.cookie-banner.show{ transform:translateX(-50%) translateY(0); }
.cookie-banner p{ font-family:var(--serif); font-size:1.02rem; line-height:1.6; color:var(--muted); margin:0 0 16px; }
.cookie-banner a{ color:var(--teal); }
.cookie-banner__row{ display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:520px){ .cookie-banner__row .btn{ flex:1; text-align:center; } }

/* ── Shopier ödeme yönlendirmesi ── */
.pd__paynote{ font-family:var(--ui); font-size:.84rem; color:var(--faint); margin-top:12px; }
.handoff{ width:min(820px,92vw); margin-inline:auto; padding:20px 0 clamp(80px,12vw,140px); }
.handoff__lead{ color:var(--muted); font-family:var(--serif); font-size:1.14rem; line-height:1.6; margin:10px 0 20px; max-width:660px; }
.handoff__lines{ margin-top:8px; border-top:1px solid var(--line); }
.handoff__lines .cline{ grid-template-columns:72px 1fr auto auto; }
.handoff__buy{ white-space:nowrap; }
@media (max-width:560px){ .handoff__lines .cline{ grid-template-columns:56px 1fr auto; } .handoff__buy{ grid-column:1/4; text-align:center; } }

/* ── ödeme: sözleşme onayı ── */
.co-consent{ display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px; margin:6px 0 4px; font-family:var(--ui); font-size:.92rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.co-consent input{ width:auto !important; margin-top:3px; accent-color:var(--violet); flex:0 0 auto; }
.co-consent a{ color:var(--teal); }