/* Moda Örgü — örgü ürünlerine asılan etiketler: her mevsim bir etiket, bir renk, bir ikon */
:root{
  --paper:#F5ECDD;
  --paper-deep:#E9DCC6;
  --ink:#2B211B;
  --ink-soft:#5E4A3D;
  --rope:#7A5640;
  --rust:#A8461F;
  --gx:clamp(20px,5vw,72px);
  --r:22px;
  /* katmanlı gölge: ince temas gölgesi + yumuşak orta + uzun ve dağınık */
  --shadow:0 1px 2px rgba(43,33,27,.14),0 6px 12px -3px rgba(43,33,27,.16),0 22px 36px -14px rgba(43,33,27,.28);
  --shadow-lift:0 2px 3px rgba(43,33,27,.14),0 12px 20px -4px rgba(43,33,27,.2),0 34px 50px -16px rgba(43,33,27,.34);
  --display:"Young Serif",Georgia,serif;
  --text:"Hanken Grotesk",system-ui,sans-serif;
}
/* Animasyonlu özel değişkenler: kaydırma, savrulma ve yaylanma için */
@property --sy{syntax:'<number>';inherits:true;initial-value:0}
@property --kx{syntax:'<length>';inherits:false;initial-value:0px}
@property --ky{syntax:'<length>';inherits:false;initial-value:0px}
@property --kr{syntax:'<angle>';inherits:false;initial-value:0deg}
*{box-sizing:border-box;margin:0}
body{font:400 1.0625rem/1.65 var(--text);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:3px solid var(--rust);outline-offset:3px}
h1:focus,main:focus{outline:none}
.skip{position:absolute;left:var(--gx);top:-70px;z-index:60;padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none}
.skip:focus{top:10px}

/* ---------- Mevsim renkleri ---------- */
[data-id=ilkbahar]{--bg:#9CBE63;--on:#1E2B12}  /* körpe yaprak yeşili */
[data-id=yaz]{--bg:#F4C847;--on:#3A2A05}        /* öğle güneşi */
[data-id=sonbahar]{--bg:#B5532B;--on:#FFF1E2}   /* kuru yaprak, kiremit */
[data-id=kis]{--bg:#2A3A55;--on:#E6EEF6}        /* gece mavisi, kar beyazı */

/* ---------- Üst çubuk ---------- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px var(--gx);background:var(--paper);border-bottom:1px solid rgba(43,33,27,.14)}
.brand{font-family:var(--display);font-size:1.45rem;text-decoration:none;letter-spacing:-.01em}
nav#nav{display:flex;gap:clamp(14px,2.4vw,30px)}
nav#nav a{position:relative;text-decoration:none;font-weight:500;padding:6px 0}
nav#nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rust);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
nav#nav a::after{background:repeating-linear-gradient(90deg,var(--rust) 0 6px,transparent 6px 10px)}
nav#nav a:hover::after,nav#nav a.active::after{transform:scaleX(1)}
.menu-btn{display:none;background:none;border:0;padding:10px;margin-right:-10px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;
  transition:transform .4s cubic-bezier(.3,1.6,.5,1),opacity .2s,width .3s}
.menu-btn span:nth-child(2){width:16px;margin-left:auto}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0;width:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Kaydırdıkça uzayan dikişli ip, ucunda dönen yumak */
.yarn-progress{position:absolute;left:0;right:0;bottom:-8px;height:16px;pointer-events:none}
.yp-line{position:absolute;left:0;top:6px;height:3px;width:calc(var(--p,0) * 100%);
  background:repeating-linear-gradient(90deg,var(--rust) 0 7px,transparent 7px 11px)}
.yp-ball{position:absolute;top:0;left:calc(var(--p,0) * (100% - 16px));width:16px;height:16px;transform:rotate(calc(var(--p,0) * 3600deg));
  fill:var(--rust);stroke:var(--paper);stroke-width:.9;stroke-linecap:round}

/* Dağınık örgü parçaları: kaydırınca süzülür, dokununca savrulur */
.decor{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.piece{position:absolute;left:var(--x);top:var(--y);height:auto;max-width:none;user-select:none;-webkit-user-drag:none;
  width:clamp(64px,calc(var(--s) * .0714vw),calc(var(--s) * 1px));
  transform:translate3d(var(--kx),calc(var(--sy) * var(--d) * 1px + var(--ky)),0) rotate(calc(var(--r) * 1deg + var(--sy) * var(--dr) * 1deg + var(--kr)));
  filter:drop-shadow(0 12px 12px rgba(0,0,0,.3));will-change:transform;
  transition:--kx .9s cubic-bezier(.2,1.7,.4,1),--ky .9s cubic-bezier(.2,1.7,.4,1),--kr .9s cubic-bezier(.2,1.7,.4,1)}

/* ---------- Sayfalar ---------- */
.view[hidden]{display:none}
/* Adres çubuğundaki #mevsim, tarayıcıyı bölüme kaydırıp sabit menünün altında bırakmasın: her zaman en üst */
.view{scroll-margin-top:100vh}
main{min-height:70vh}

/* ---------- Ana sayfa ---------- */
.hero{padding:clamp(40px,8vw,104px) var(--gx) clamp(28px,5vw,56px)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(3.4rem,11.5vw,10rem);line-height:.92;letter-spacing:-.025em}
.lead{margin-top:clamp(22px,3vw,34px);max-width:30ch;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.45;color:var(--ink-soft)}

/* İp ve etiketler */
.hang{position:relative;padding:0 var(--gx) clamp(64px,9vw,120px)}
.thread{position:absolute;left:0;top:0;width:100%;height:16px;z-index:3;pointer-events:none;overflow:visible;
  clip-path:inset(-4px 100% -4px 0);animation:draw 1.2s cubic-bezier(.6,.1,.2,1) .1s forwards}
.thread path{fill:none;vector-effect:non-scaling-stroke}
.thread .rope{stroke:var(--rope);stroke-width:4}
.thread .twist{stroke:#D9C3A5;stroke-width:1.6;stroke-dasharray:3 7}
@keyframes draw{to{clip-path:inset(-4px 0 -4px 0)}}

.tags{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px);max-width:1240px;margin:0 auto;padding-top:10px;align-items:start}
.tag{display:block;position:relative;text-decoration:none;color:var(--on);transform-origin:50% 0;
  transition:transform .7s cubic-bezier(.3,1.7,.5,1)}
.tag:hover,.tag:focus-visible{transform:rotate(2.4deg)}
.tag:nth-child(even):hover,.tag:nth-child(even):focus-visible{transform:rotate(-2.4deg)}
.tag:focus-visible{outline:none}
.tag:focus-visible .tag-body{outline:3px solid var(--ink);outline-offset:4px}
.tag-in{display:block;position:relative;padding-top:var(--drop,30px);transform-origin:50% 0;
  animation:hang 1.7s cubic-bezier(.3,.1,.2,1) var(--delay,0s) both}
@keyframes hang{
  0%{transform:translateY(-26px) rotate(-8deg);opacity:0}
  14%{opacity:1}
  30%{transform:translateY(0) rotate(5deg)}
  52%{transform:rotate(-2.6deg)}
  76%{transform:rotate(1.1deg)}
  100%{transform:rotate(0)}}
.tag:nth-child(1){--drop:26px;--delay:.7s}
.tag:nth-child(2){--drop:70px;--delay:.84s}
.tag:nth-child(3){--drop:40px;--delay:.98s}
.tag:nth-child(4){--drop:88px;--delay:1.12s}
.string{position:absolute;left:50%;top:0;width:3px;margin-left:-1.5px;height:calc(var(--drop) + 30px);z-index:2;border-radius:2px;
  background:linear-gradient(90deg,var(--rope) 0 60%,#5C402F 60%);box-shadow:1px 0 2px rgba(43,33,27,.25)}
.tag-body{position:relative;display:flex;flex-direction:column;min-height:clamp(300px,33vw,430px);padding:62px 20px 20px;
  background:var(--bg);border-radius:var(--r);
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.08);
  transition:box-shadow .5s ease}
.tag:hover .tag-body,.tag:focus-visible .tag-body{box-shadow:var(--shadow-lift),inset 0 1px 0 rgba(255,255,255,.38),inset 0 -2px 0 rgba(0,0,0,.08)}
.hole{position:absolute;top:20px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--paper);
  box-shadow:inset 0 2px 3px rgba(0,0,0,.35),0 0 0 3px rgba(255,255,255,.28)}
.tag-icon{width:clamp(40px,4.4vw,56px);height:auto;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.tag-body .decor{border-radius:inherit}
.tag-body .piece{width:calc(var(--s) * 1%);filter:drop-shadow(0 8px 8px rgba(0,0,0,.28))}
.tag:hover .piece,.tag:focus-visible .piece{--kx:var(--hx);--ky:var(--hy);--kr:var(--hr)}
.tag-icon,.tag-name,.tag-blurb,.tag-count{position:relative;z-index:1}
.hole{z-index:2}
.tag-name{margin-top:auto;font-family:var(--display);font-size:clamp(1.65rem,3.3vw,2.7rem);line-height:1;letter-spacing:-.02em}
.tag-blurb{display:block;margin-top:10px;font-size:.95rem;line-height:1.4;max-width:24ch}
.tag-count{display:block;margin-top:10px;font-size:.9rem;font-weight:700}

/* ---------- Mevsim sayfası ---------- */
.s-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);color:var(--on);
  padding:clamp(24px,4vw,44px) var(--gx) clamp(40px,7vw,88px);
  border-radius:0 0 clamp(28px,5vw,56px) clamp(28px,5vw,56px);
  box-shadow:0 18px 30px -18px rgba(43,33,27,.45),0 2px 3px rgba(43,33,27,.12)}
.s-hero .decor{z-index:-1}
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:700}
.back::before{content:"";width:9px;height:9px;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg);margin-right:2px;transition:transform .25s}
.back:hover::before{transform:translateX(-4px) rotate(45deg)}
.season h1{font-family:var(--display);font-weight:400;font-size:clamp(3.6rem,13vw,11rem);line-height:.9;letter-spacing:-.025em;
  margin:clamp(40px,8vw,110px) 0 clamp(14px,2vw,24px)}
.s-hero .blurb{max-width:34ch;font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.45}
.s-hero .count{margin-top:14px;font-weight:700}

.gal{padding:clamp(28px,5vw,64px) var(--gx) clamp(56px,8vw,110px)}
.grid{columns:3 280px;column-gap:clamp(12px,2vw,28px)}
.card{break-inside:avoid;display:block;width:100%;margin:0 0 clamp(12px,2vw,28px);padding:0;border:0;background:none;
  cursor:zoom-in;text-align:left;color:inherit;font:inherit}
.card .ph{position:relative;display:block;overflow:hidden;border-radius:var(--r);background:var(--paper-deep);box-shadow:var(--shadow);
  transition:box-shadow .4s ease,transform .4s cubic-bezier(.3,.7,.3,1)}
.card:hover .ph,.card:focus-visible .ph{box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.card .ph::after{content:"";position:absolute;inset:9px;border:2px dashed rgba(255,255,255,.92);border-radius:calc(var(--r) - 9px);
  opacity:0;transform:scale(1.04);transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.5,.5,1);pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.card:hover .ph::after,.card:focus-visible .ph::after{opacity:1;transform:none}
.card img{width:100%;height:auto;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.card:hover img,.card:focus-visible img{transform:scale(1.04)}
.card span.t{display:block;margin-top:8px;font-family:var(--display);font-size:1.15rem;line-height:1.25}
.empty{max-width:34ch;padding:28px 0;font-size:1.2rem;color:var(--ink-soft)}

/* ---------- Alt bilgi ---------- */
footer{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,96px) var(--gx) 40px;
  border-radius:clamp(28px,5vw,56px) clamp(28px,5vw,56px) 0 0;box-shadow:0 -14px 30px -18px rgba(43,33,27,.5)}
.foot-name{font-family:var(--display);font-size:clamp(2rem,6vw,3.6rem);line-height:1}
.foot-small{margin-top:10px;opacity:.78}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px}
.foot-links a{display:inline-flex;align-items:center;gap:9px;padding:6px 0;text-decoration:none;font-weight:500}
.foot-links a::before{content:"";width:14px;height:18px;background:var(--bg);border-radius:5px}
.foot-links a:hover{text-decoration:underline;text-underline-offset:4px}
.insta{display:inline-flex;align-items:center;gap:12px;margin-top:36px;padding:12px 20px 12px 16px;border-radius:999px;
  border:1.5px solid rgba(245,236,221,.35);text-decoration:none;font-weight:500;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.insta{position:relative}
.insta .ig-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.insta .stitch{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.insta .stitch rect{x:6px;y:6px;width:calc(100% - 12px);height:calc(100% - 12px);rx:20px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-dasharray:6 6;opacity:0;transition:opacity .3s ease}
.insta:hover .stitch rect,.insta:focus-visible .stitch rect{opacity:.8;animation:march 1s linear infinite}
@keyframes march{to{stroke-dashoffset:-24}}
.insta:hover,.insta:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.insta:focus-visible{outline:3px solid var(--paper);outline-offset:3px}

/* ---------- Büyük görüntü ---------- */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(32,24,19,.97);display:flex;padding:56px 76px 40px;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(245,236,221,.4) transparent}
.lightbox[hidden]{display:none}
.lightbox figure{margin:auto;width:min(92vw,720px)}
.lightbox img{display:block;max-height:min(62vh,600px);max-width:100%;margin:0 auto;border-radius:var(--r);object-fit:contain;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lightbox figcaption{margin:22px auto 0;max-width:62ch;color:var(--paper);text-align:left}
.lb-meta{font-size:.95rem;font-weight:500;opacity:.75}
#lb-title{margin:4px 0 12px;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,4vw,2.2rem);line-height:1.1;letter-spacing:-.01em}
.lb-text p{margin:0 0 .8em;line-height:1.6;font-size:1.02rem}
.lb-tags{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.lb-tags:empty{display:none}
.lb-tags li{padding:4px 12px;border-radius:999px;border:1px solid rgba(245,236,221,.35);font-size:.88rem}
.lb-ig{display:inline-block;margin-top:18px;padding:8px 0;color:var(--paper);font-weight:700;text-underline-offset:4px}
.lb-ig[hidden]{display:none}
.lb-close,.lb-nav{position:fixed;z-index:2;display:grid;place-items:center;padding:0;background:rgba(245,236,221,.12);color:var(--paper);border:0;border-radius:50%;
  width:52px;height:52px;cursor:pointer;transition:background .2s,color .2s}
.lb-close:hover,.lb-nav:hover{background:var(--paper);color:var(--ink)}

/* Kapat: iki çapraz tığ */
.hooks{width:40px;height:40px;overflow:visible}
.hk{transform-origin:24px 24px;transition:transform .4s cubic-bezier(.3,1.7,.5,1)}
.hk1{transform:rotate(45deg)}
.hk2{transform:rotate(-45deg);color:#E7B04A}
.lb-close:hover .hk1,.lb-close:focus-visible .hk1{transform:rotate(36deg)}
.lb-close:hover .hk2,.lb-close:focus-visible .hk2{transform:rotate(-36deg)}
.lb-close:hover .hk2{color:#B5532B}
.hooks .loop{fill:none;stroke:#E7B04A;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:88;opacity:0;transform-origin:24px 24px}
.lb-close.snip .hk1{animation:snip1 .48s cubic-bezier(.5,0,.3,1)}
.lb-close.snip .hk2{animation:snip2 .48s cubic-bezier(.5,0,.3,1)}
.lb-close.snip .loop{animation:loop .48s ease-out}
@keyframes snip1{0%{transform:rotate(45deg)}38%{transform:rotate(6deg)}70%{transform:rotate(60deg)}100%{transform:rotate(45deg)}}
@keyframes snip2{0%{transform:rotate(-45deg)}38%{transform:rotate(-6deg)}70%{transform:rotate(-60deg)}100%{transform:rotate(-45deg)}}
@keyframes loop{0%{opacity:1;stroke-dashoffset:88;transform:rotate(-90deg)}60%{opacity:1;stroke-dashoffset:0;transform:rotate(0)}100%{opacity:0;stroke-dashoffset:0;transform:rotate(40deg) scale(1.25)}}

/* Önceki / sonraki: örgü şişi, üzerinde kayan ilmek */
.needle{width:32px;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.needle circle{fill:currentColor;stroke:none}
.needle .ring{stroke:#E7B04A;stroke-width:2.4;opacity:.95}
.lb-prev .needle{transform:scaleX(-1)}
.nd{transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.lb-nav:hover .nd,.lb-nav:focus-visible .nd{transform:translateX(3px)}
.lb-nav.slide .ring{animation:ringslide .5s cubic-bezier(.4,0,.2,1)}
@keyframes ringslide{0%{transform:translateX(0)}60%{transform:translateX(17px) scaleX(.85)}100%{transform:translateX(0)}}
.lb-close{top:16px;right:16px}
.lb-prev{left:12px;top:50%;transform:translateY(-50%)}
.lb-next{right:12px;top:50%;transform:translateY(-50%)}

/* ---------- Tablet ve telefon: her etiket kendi ip parçasından asılır ---------- */
@media (max-width:1000px){
  .thread{display:none}
  .tags{grid-template-columns:1fr 1fr;row-gap:clamp(20px,4vw,36px)}
  .tag::before{content:"";position:absolute;z-index:3;top:0;height:4px;left:calc(clamp(14px,2vw,28px) / -2);right:calc(clamp(14px,2vw,28px) / -2);background:var(--rope);border-radius:2px}
  .tag:nth-child(odd)::before{left:calc(var(--gx) * -1)}
  .tag:nth-child(even)::before{right:calc(var(--gx) * -1)}
  .tag:nth-child(1),.tag:nth-child(3){--drop:24px}
  .tag:nth-child(2),.tag:nth-child(4){--drop:56px}
  .tag:nth-child(3){--delay:.98s}
  .tag-body{min-height:clamp(250px,52vw,380px)}
  .tag-blurb{display:none}
}
@media (max-width:760px){
  .menu-btn{display:block}
  nav#nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);
    padding:6px var(--gx) 16px;border-bottom:1px solid rgba(43,33,27,.14);display:none}
  nav#nav.open{display:flex}
  nav#nav a{padding:13px 0;font-size:1.15rem;border-bottom:1px solid rgba(43,33,27,.1)}
  nav#nav a::after{display:none}
  nav#nav a.active{color:var(--rust);font-weight:700}
  .tag-body{padding:56px 14px 16px}
  .season h1{margin-top:176px}
  .piece{left:var(--mx);top:var(--my);width:clamp(54px,calc(var(--s) * .107vw),110px)}
  .tag-body .piece{left:var(--x);top:var(--y);width:calc(var(--s) * 1%)}
  .s-hero .piece:nth-child(n+6){display:none}
  .grid{columns:2 140px;column-gap:10px}
  .card{margin-bottom:14px}
  .lightbox{padding:56px 16px 84px}
  .lb-nav{width:44px;height:44px;top:auto;bottom:16px;transform:none}
  .lb-prev{left:16px}.lb-next{right:16px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .thread{animation:none!important;clip-path:none!important}
  .tag-in{animation:none!important}
  .piece{transform:rotate(calc(var(--r) * 1deg))!important}
  .yp-ball{transform:none!important}
  .insta:hover .stitch rect{animation:none!important}
}