/* Kelivo katalog - "gece sergisi": karanlik salon, havada donen eserler, her eserin kendi renginden isik.
   Duzen: ust bant > donen halka sahnesi > tanitim > koleksiyon dizini > eser izgarasi. */
@font-face{font-family:"Big Shoulders Display";src:url(fonts/big-shoulders.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(fonts/bodoni-moda-italic.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}

:root{
  color-scheme:dark;
  --zemin:#0e0c10; --zemin-2:#17141a; --zemin-3:#221e26;
  --yazi:#f1ebe1; --ikincil:#a99f95; --ince:#2f2a33;
  --sampanya:#e8c48a; --sampanya-koyu:#c99f5c;
  --golge:0 2px 3px rgb(0 0 0 / .35),0 18px 40px -12px rgb(0 0 0 / .6),0 50px 90px -40px rgb(0 0 0 / .7);
  --baslik:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --metin:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --vurgu-italik:"Bodoni Moda",Didot,Georgia,serif;
  --kenar:clamp(16px,4vw,56px);
  --azami:1320px;
  --yavas:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;scrollbar-color:var(--zemin-3) var(--zemin);background:var(--zemin)}
body{margin:0;background:var(--zemin);color:var(--yazi);font:400 1.0625rem/1.62 var(--metin);
  -webkit-font-smoothing:antialiased;caret-color:var(--sampanya);overflow-x:hidden}
::selection{background:var(--sampanya);color:var(--zemin)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--sampanya)}
:focus-visible{outline:2px solid var(--sampanya);outline-offset:3px;border-radius:3px}
::-webkit-scrollbar{width:11px}::-webkit-scrollbar-track{background:var(--zemin)}
::-webkit-scrollbar-thumb{background:var(--zemin-3);border:3px solid var(--zemin);border-radius:8px}
h1,h2{font-family:var(--baslik);font-weight:800;line-height:.92;letter-spacing:-.01em;text-transform:uppercase;text-wrap:balance;margin:0}
h2{font-size:clamp(2.4rem,5vw,4rem);margin:0 0 .7em}
p{text-wrap:pretty}
.atla{position:absolute;left:-999px;top:8px;background:var(--yazi);color:var(--zemin);padding:.6em 1em;z-index:9}
.atla:focus{left:8px}

/* ---- ust / alt ---- */
.ust{position:sticky;top:0;z-index:20;background:rgb(14 12 16 / .78);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s}
.ust.kaydi{border-bottom-color:var(--ince)}
.ust-ic{max-width:var(--azami);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px var(--kenar)}
.logo{font-family:var(--baslik);font-size:1.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.ust-nav{display:flex;gap:clamp(.9rem,2.4vw,2rem);font-size:.95rem}
.ust-nav a{text-decoration:none;color:var(--ikincil)}
.ust-nav a:hover{color:var(--yazi)}
.ust-nav .ust-etsy{color:var(--sampanya)}
.alt{margin-top:clamp(72px,10vw,150px);border-top:1px solid var(--ince)}
.alt-ic{max-width:var(--azami);margin:0 auto;padding:56px var(--kenar) 44px;display:grid;gap:.6rem;color:var(--ikincil)}
.alt-logo{font-family:var(--baslik);font-size:3.2rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--yazi)}
.alt nav{display:flex;gap:1.4rem}
.alt-qr{display:flex;align-items:center;gap:18px;margin:.6rem 0 1rem}
.alt-qr img{width:112px;height:112px;border-radius:8px;box-shadow:0 0 0 1px var(--ince)}
.alt-qr p{margin:0;line-height:1.5}
.alt-qr strong{color:var(--yazi);font-weight:600}
.alt-not{font-size:.82rem;max-width:62ch;margin-top:1.4rem;color:#857c73}

main{max-width:var(--azami);margin:0 auto;padding:0 var(--kenar)}

/* ---- butonlar ---- */
.buton{display:inline-flex;align-items:center;gap:.55em;background:var(--yazi);color:var(--zemin);
  padding:.95em 1.6em;border-radius:999px;text-decoration:none;font-weight:700;font-size:.98rem;letter-spacing:.01em;
  box-shadow:0 10px 30px -10px rgb(232 196 138 / .45);transition:transform .35s var(--yavas),box-shadow .35s var(--yavas),background .2s}
.buton:hover{color:var(--zemin);background:var(--sampanya);transform:translateY(-2px);box-shadow:0 16px 40px -10px rgb(232 196 138 / .6)}
.buton svg{transition:transform .35s var(--yavas)}
.buton:hover svg{transform:translate(2px,-2px)}
.metin-link{font-weight:600;color:var(--yazi)}

/* ================= SERGI: donen halka ================= */
.sergi{--eser:clamp(118px,14vw,200px);position:relative;width:100vw;margin-left:calc(50% - 50vw);padding:clamp(8px,2vw,24px) 0 clamp(32px,5vw,56px);
  overflow:hidden;isolation:isolate}
.sergi-isik{position:absolute;inset:-10%;z-index:-2;background:var(--img) center/cover no-repeat;
  filter:blur(90px) saturate(1.5) brightness(.6);opacity:.3;transform:scale(1.1);transition:opacity .6s}
.sergi-isik.degisiyor{opacity:.1}
.sergi::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% 40%,transparent 35%,var(--zemin) 85%),
             linear-gradient(to bottom,transparent 70%,var(--zemin))}
.sergi-arka{position:absolute;left:50%;top:clamp(10px,4vw,40px);transform:translateX(-50%);z-index:-1;margin:0;
  font-family:var(--baslik);font-weight:900;text-transform:uppercase;letter-spacing:.02em;line-height:.8;
  font-size:clamp(7rem,30vw,26rem);color:transparent;-webkit-text-stroke:1px rgb(241 235 225 / .10);white-space:nowrap;
  pointer-events:none;user-select:none}
.sergi-sahne{position:relative;z-index:1;height:clamp(300px,38vw,470px);perspective:1400px;perspective-origin:50% 38%;
  touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.sergi-sahne.surukleniyor{cursor:grabbing}
.halka{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:6%;width:0;height:0;
  transform-style:preserve-3d;--r:calc(var(--eser) * var(--n) / 6.283 * 1.18);
  transform:translateZ(calc(var(--r) * -1)) rotateY(calc(var(--aci,0) * 1deg))}
.halka-eser{position:absolute;left:calc(var(--eser) / -2);top:0;width:var(--eser);
  transform:rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));
  filter:brightness(calc(.15 + .13 * var(--yakin,1) + .72 * var(--isik,0))) saturate(calc(.5 + .5 * var(--isik,0)))}
.halka-eser a{position:relative;display:block;transform:scale(calc(.86 + .22 * var(--on,0)));transition:transform .5s var(--yavas)}
.halka-eser img{width:100%;border-radius:3px;box-shadow:var(--golge);background:var(--zemin-2);
  -webkit-box-reflect:below 10px linear-gradient(transparent 72%,rgb(255 255 255 / .16));-webkit-user-drag:none}
.sergi-alt{position:relative;display:grid;justify-items:center;text-align:center;gap:.2rem;padding:0 var(--kenar)}
.sergi-kol{margin:0;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sampanya)}
/* baslik kutusu sabit 2 satir yuksekliginde: tek/iki satirlik adlarda butonlar yerinden oynamaz */
.sergi-ad-kutu{--bf:clamp(2.4rem,6vw,4.8rem);height:calc(var(--bf) * .9 * 2 + .1em);width:100%;display:flex;align-items:center;justify-content:center}
.sergi-ad{margin:0;font-family:var(--baslik);font-weight:900;text-transform:uppercase;line-height:.9;
  font-size:clamp(2.4rem,6vw,4.8rem);letter-spacing:-.005em;max-width:18ch;text-wrap:balance;
  background:linear-gradient(180deg,var(--yazi) 55%,rgb(241 235 225 / .55));-webkit-background-clip:text;background-clip:text;color:transparent}
.sergi-kontrol{display:flex;align-items:center;gap:14px;margin-top:1.3rem}
.ok{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgb(241 235 225 / .22);
  background:rgb(241 235 225 / .04);color:var(--yazi);cursor:pointer;transition:background .25s,border-color .25s,transform .3s var(--yavas)}
.ok:hover{background:rgb(241 235 225 / .12);border-color:rgb(241 235 225 / .45);transform:scale(1.06)}
/* ---- tepeden vuran spot isigi: sadece one gelen eser aydinlanir ---- */
.spot{position:absolute;left:50%;top:8px;z-index:0;width:calc(var(--eser) * 3.2);transform:translateX(-50%);pointer-events:none;
  height:calc(clamp(8px,2vw,24px) + clamp(300px,38vw,470px) * .06 + var(--eser) * 1.5);
  opacity:calc(.25 + .75 * var(--spot,1))}
.spot-lamba{position:absolute;left:50%;top:0;width:clamp(84px,9vw,124px);height:clamp(18px,2vw,26px);transform:translateX(-50%);border-radius:0 0 60px 60px;
  background:linear-gradient(#2a262d,#141216);box-shadow:inset 0 -3px 0 rgb(255 240 214 / .95),0 8px 34px 6px rgb(255 232 196 / .5)}
.spot-huzme{position:absolute;inset:0;mix-blend-mode:screen;
  background:conic-gradient(from 180deg at 50% 0,rgb(255 238 210 / .34) 0deg,rgb(255 238 210 / .2) 18deg,rgb(255 238 210 / 0) 30deg,
    rgb(255 238 210 / 0) 330deg,rgb(255 238 210 / .2) 342deg,rgb(255 238 210 / .34) 360deg);
  -webkit-mask-image:linear-gradient(#000 40%,transparent 100%);mask-image:linear-gradient(#000 40%,transparent 100%);filter:blur(3px)}
.spot-havuz{position:absolute;left:50%;bottom:calc(var(--eser) * -.18);width:calc(var(--eser) * 2);height:calc(var(--eser) * .5);
  transform:translateX(-50%);border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(closest-side,rgb(255 236 205 / .16),transparent)}
html:not(.js) .spot{display:none}
@media (prefers-reduced-motion:no-preference){
  .spot-lamba{animation:lamba-yan 1.4s .5s steps(1) both}
  @keyframes lamba-yan{0%{box-shadow:none}12%{box-shadow:inset 0 -2px 0 rgb(255 240 214 / .9),0 6px 26px 4px rgb(255 232 196 / .45)}18%{box-shadow:none}
    30%{box-shadow:inset 0 -2px 0 rgb(255 240 214 / .9),0 6px 26px 4px rgb(255 232 196 / .45)}}
}
/* JS yoksa: halka yerine yatay kayan serit */
html:not(.js) .sergi-sahne{height:auto;perspective:none;cursor:auto}
html:not(.js) .halka{position:static;width:auto;height:auto;transform:none;display:flex;gap:16px;overflow-x:auto;padding:24px var(--kenar)}
html:not(.js) .halka-eser{position:static;transform:none;flex:0 0 200px;filter:none}
html:not(.js) .sergi-kontrol .ok{display:none}
@media (prefers-reduced-motion:no-preference){
  .sergi-sahne{animation:sahne-gir 1.6s var(--yavas) both}
  @keyframes sahne-gir{from{opacity:0;filter:blur(10px);transform:translateY(30px) scale(.96)}to{opacity:1;filter:none;transform:none}}
}

/* ---- tanitim ---- */
.tanitim{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem clamp(24px,5vw,72px);align-items:end;
  padding-top:clamp(40px,6vw,80px)}
.tanitim h1{font-size:clamp(2.6rem,6vw,5.2rem);grid-row:span 2}
.tanitim p{margin:0;color:var(--ikincil);max-width:52ch}
.kapak-linkler{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}

.blok{padding-top:clamp(64px,9vw,120px)}
.tumu{margin:2.2rem 0 0;font-weight:600}

/* ---- koleksiyon dizini ---- */
.kol-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--ince)}
.kol-satir a{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) auto;gap:1.5rem;
  align-items:center;padding:1.2rem 0;border-bottom:1px solid var(--ince);text-decoration:none;transition:padding .45s var(--yavas)}
.kol-ad{font-family:var(--baslik);font-weight:800;text-transform:uppercase;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1}
.kol-tanit{color:var(--ikincil);font-size:.95rem;max-width:56ch;transition:opacity .3s}
.kol-adet{font-family:var(--baslik);font-size:1.6rem;font-weight:700;color:var(--ikincil);font-variant-numeric:tabular-nums}
.kol-satir a:hover{padding-left:.9rem;color:var(--yazi)}
.kol-satir a:hover .kol-ad{color:var(--sampanya)}
.kol-onizleme{position:absolute;right:5rem;top:50%;display:flex;gap:8px;pointer-events:none;opacity:0;
  transform:translate(14px,-50%) rotate(-2deg);transition:opacity .35s,transform .55s var(--yavas)}
.kol-onizleme img{width:64px;border-radius:2px;box-shadow:var(--golge)}
@media (hover:hover) and (min-width:1000px){
  .kol-satir a:hover .kol-onizleme{opacity:1;transform:translate(0,-50%) rotate(0)}
  .kol-satir a:hover .kol-tanit{opacity:.15}
}

/* ---- liste basligi ---- */
.liste-bas{padding:clamp(28px,5vw,64px) 0 clamp(28px,4vw,48px)}
.liste-bas h1{font-size:clamp(3rem,8vw,6.5rem)}
.giris{color:var(--ikincil);font-size:1.1rem;max-width:60ch;margin:1.1rem 0 0}
.adet{font-size:.88rem;color:var(--sampanya);letter-spacing:.14em;text-transform:uppercase;margin:.8rem 0 0}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1.4rem;padding:0;font-size:.86rem;color:var(--ikincil)}
.kirinti li+li::before{content:"/";margin-right:.4rem;color:var(--ince)}
.kirinti a{text-decoration:none}.kirinti a:hover{text-decoration:underline}

/* ---- eser izgarasi: her eser kendi renginde parlar ---- */
.plakalar{list-style:none;margin:0;padding:0;columns:4 250px;column-gap:clamp(18px,2.4vw,34px)}
.plaka{break-inside:avoid;margin:0 0 clamp(28px,3.4vw,48px)}
.plaka-a{display:block;text-decoration:none}
.plaka-cerceve{position:relative;display:block;isolation:isolate;transition:transform .6s var(--yavas)}
.plaka-cerceve::before{content:"";position:absolute;inset:8% 6% -4%;z-index:-1;background:var(--img) center/cover;
  filter:blur(34px) saturate(1.8);opacity:0;transform:scale(.9);transition:opacity .5s,transform .6s var(--yavas)}
.plaka-cerceve img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:3px;box-shadow:var(--golge);background:var(--zemin-2)}
.plaka-etiket{display:flex;flex-direction:column;gap:.15rem;padding:.9rem .1rem 0}
.plaka-ad{font-weight:600;font-size:1.02rem;line-height:1.25}
.plaka-kol{font-size:.78rem;color:var(--ikincil);letter-spacing:.08em;text-transform:uppercase}
@media (hover:hover){
  .plaka-a:hover .plaka-cerceve{transform:translateY(-8px)}
  .plaka-a:hover .plaka-cerceve::before{opacity:.75;transform:scale(1.05)}
  .plaka-a:hover .plaka-ad{color:var(--sampanya)}
}

/* ---- urun sayfasi ---- */
.urun{padding-top:clamp(20px,3vw,40px)}
.urun-ust{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4.5vw,72px);align-items:start}
.sahne{--pad:clamp(22px,4vw,60px);position:relative;margin:0;padding:var(--pad);isolation:isolate;border-radius:6px;overflow:hidden;
  background:var(--zemin-2);perspective:1200px}
.sahne-isik{position:absolute;inset:-15%;z-index:-1;background:var(--img) center/cover;filter:blur(70px) saturate(1.8) brightness(.8);opacity:.6}
.sahne-egim{transform:rotateX(calc(var(--ry,0) * 1deg)) rotateY(calc(var(--rx,0) * 1deg));transition:transform .6s var(--yavas);transform-style:preserve-3d}
.sahne-egim img{width:100%;border-radius:3px;box-shadow:var(--golge);transition:opacity .35s}
.kucukler{list-style:none;display:flex;gap:10px;margin:22px 0 0;padding:4px 2px 8px;overflow-x:auto;scrollbar-width:thin;scroll-snap-type:x proximity}
.kucukler li{flex:0 0 auto;scroll-snap-align:center}
/* ana gorsel: onceki / sonraki oklari + sayac */
.sahne-ana{position:relative;touch-action:pan-y;perspective:1200px}
.sahne-ok{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:46px;height:46px;margin-top:-23px;border-radius:50%;
  border:1px solid rgb(241 235 225 / .3);background:rgb(14 12 16 / .55);color:var(--yazi);cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .25s,transform .3s var(--yavas),opacity .25s}
.sahne-ok:hover{background:rgb(14 12 16 / .8);transform:scale(1.06)}
.sahne-ok-geri{left:10px}.sahne-ok-ileri{right:10px}
.sahne-sayac{position:absolute;right:12px;bottom:10px;z-index:2;margin:0;padding:3px 10px;border-radius:99px;font-size:.8rem;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;background:rgb(14 12 16 / .6);color:var(--yazi)}
html:not(.js) .sahne-ok,html:not(.js) .sahne-sayac{display:none}
/* genis ekranda oklar gorselin USTUNDE degil, iki yanindaki bosluktadir */
@media (min-width:700px){
  .sahne-ok{width:42px;height:42px;margin-top:-21px}
  .sahne-ok-geri{left:calc(var(--pad) * -.5 - 21px)}
  .sahne-ok-ileri{right:calc(var(--pad) * -.5 - 21px)}
}
.kucuk{display:block;padding:0;border:0;background:none;cursor:pointer;opacity:.5;transition:opacity .25s,transform .3s var(--yavas)}
.kucuk img{width:64px;height:80px;object-fit:cover;border-radius:2px;box-shadow:var(--golge)}
.kucuk:hover{opacity:.9;transform:translateY(-2px)}
.kucuk[aria-pressed="true"]{opacity:1}
.etiket-kart{position:sticky;top:96px}
.etiket-kart h1{font-size:clamp(2.8rem,5.4vw,4.8rem)}
.urun-alt{color:var(--ikincil);font-size:1.08rem;margin:.9rem 0 1.6rem}
.muze{margin:0 0 1.8rem;border-top:1px solid var(--yazi)}
.muze div{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--ince);font-size:.95rem}
.muze dt{color:var(--ikincil)}
.muze dd{margin:0}
.muze dd a{margin-right:.8rem}
.buton-not{font-size:.85rem;color:var(--ikincil);margin:.9rem 0 0;max-width:40ch}
.urun-metin{max-width:68ch;padding-top:clamp(48px,7vw,96px)}
.urun-metin h2{font-size:clamp(2rem,3.4vw,2.8rem);margin:0 0 .6em}
.urun-metin p{color:#d6cec3}
.urun-metin * + h2{margin-top:2.4rem}
.ideal{padding-left:1.1em;margin:0;color:#d6cec3}
.ideal li{margin:.3em 0}
.ideal li::marker{color:var(--sampanya)}
.ilgili{padding-top:clamp(64px,9vw,120px)}

/* ---- uyum ---- */
@media (max-width:900px){
  .tanitim{grid-template-columns:1fr}
  .tanitim h1{grid-row:auto}
  .urun-ust{grid-template-columns:1fr}
  .etiket-kart{position:static}
  .kol-satir a{grid-template-columns:1fr auto;gap:.3rem 1rem}
  .kol-tanit{grid-column:1/-1;grid-row:2}
}
@media (max-width:560px){
  body{font-size:1rem}
  .ust-nav a:first-child{display:none}
  .plakalar{columns:2;column-gap:14px}
  .plaka-ad{font-size:.95rem}
  .muze div{grid-template-columns:5.6rem 1fr}
  .ok{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* ---- koleksiyon rehberi (izgaranin altinda) ---- */
.rehber{max-width:68ch;margin:clamp(56px,8vw,96px) 0 0;padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--ince)}
.rehber h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:0 0 1rem}
.rehber p{color:var(--ikincil);margin:0 0 1rem}
.rehber-bilgi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem 2rem;margin:1.6rem 0 0;font-size:.95rem}
.rehber-bilgi dt{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sampanya)}
.rehber-bilgi dd{margin:.2rem 0 0;color:var(--yazi)}