:root {
  --bg: #f4f2ee; --bg2: #ece6db; --surface: #fff; --ink: #18150f; --muted: #6b665e;
  --accent: #a8835c; --deep: #2a2620; --line: rgba(24,21,15,.12);
  --display: "Cormorant", Georgia, serif; --body: "Hanken", system-ui, sans-serif;
  --ease: cubic-bezier(.22,1,.36,1); --pad: clamp(1.25rem,5vw,5rem); --maxw: 1280px;
}
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; }
h1,h2,h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* nav */
.nav { position: sticky; top: 46px; z-index: 150; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: 1.1rem var(--pad); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.nav.is-stuck { background: color-mix(in srgb,var(--bg) 96%, transparent); border-bottom-color: var(--line); }
.brand { font-family: var(--body); font-weight: 700; letter-spacing: .26em; font-size: .95rem; text-align: center; }
.nav-links { display: flex; gap: 2rem; font-size: .85rem; letter-spacing: .04em; }
.nav-links a { color: var(--muted); transition: color .2s; } .nav-links a:hover { color: var(--ink); }
.cart-btn { justify-self: end; display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; letter-spacing: .06em; padding: 8px 16px; border: 1px solid rgba(24,21,15,.2); border-radius: 999px; transition: background-color .2s,color .2s; }
.cart-btn:hover { background: var(--ink); color: var(--bg); }
.cart-count { min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; font-family: var(--body); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; justify-self: start; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s, opacity .2s; }
.nav-drawer { display: none; }
@media (max-width: 860px) {
  .nav-links { display: none; } .nav-toggle { display: flex; } .nav { grid-template-columns: auto 1fr auto; } .brand { text-align: center; }
  .nav-drawer { position: fixed; inset: 92px 0 auto 0; z-index: 140; display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem var(--pad) 2rem; background: var(--surface); border-bottom: 1px solid var(--line); }
  .nav-drawer a { padding: .75rem 0; font-size: 1.4rem; font-family: var(--display); border-bottom: 1px solid var(--line); }
  body.drawer-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg);} body.drawer-open .nav-toggle span:nth-child(2){opacity:0;} body.drawer-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}
}

/* hero */
.hero { display: grid; gap: clamp(2rem,4vw,3.5rem); align-items: center; padding: clamp(2.5rem,6vw,5rem) var(--pad); grid-template-columns: 1fr; }
@media (min-width: 1000px){ .hero { grid-template-columns: 1.05fr .95fr; } }
.hero-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.hero-title { font-size: clamp(3rem,8vw,6.5rem); font-weight: 500; line-height: .98; letter-spacing: -.01em; }
.hero-title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero-title .line [data-line] { display: block; }
.hero-lede { margin-top: 1.5rem; max-width: 40ch; color: var(--muted); font-size: 1.1rem; }
.hero-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.8rem; font-size: .95rem; letter-spacing: .06em; padding-bottom: 4px; border-bottom: 1.5px solid var(--ink); }
.hero-link span { transition: transform .2s; } .hero-link:hover span { transform: translateX(5px); }
.hero-look { position: relative; aspect-ratio: 4/5; border-radius: 16px; overflow: hidden; background: linear-gradient(155deg, rgba(70,66,60,.05), rgba(70,66,60,.32)), url("/taslak/moda-eticaret/assets/img/look.jpg") center/cover; }
.hero-look::after { content:""; position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.look-tag { position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 1; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: #fff; padding: 6px 12px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; }

/* sec head */
.sec-head { max-width: var(--maxw); margin: 0 auto clamp(2rem,4vw,3rem); }
.kicker { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.sec-title { font-size: clamp(2rem,5vw,3.4rem); font-weight: 500; }

/* collection */
.collection { padding: clamp(2rem,5vw,4rem) var(--pad) clamp(3.5rem,7vw,6rem); }
.grid { max-width: var(--maxw); margin: 0 auto; display: grid; gap: clamp(1.5rem,3vw,2.5rem); grid-template-columns: repeat(2,1fr); }
@media (min-width: 860px){ .grid { grid-template-columns: repeat(3,1fr); } }
.product { display: flex; flex-direction: column; gap: .75rem; }
.thumb { aspect-ratio: 4/5; border-radius: 12px; position: relative; overflow: hidden; }
.product[style*="--t:0"] .thumb { background: url("/taslak/moda-eticaret/assets/img/p-a.jpg") center/cover; }
.product[style*="--t:1"] .thumb { background: url("/taslak/moda-eticaret/assets/img/p-b.jpg") center/cover; }
.product[style*="--t:2"] .thumb { background: url("/taslak/moda-eticaret/assets/img/p-c.jpg") center/cover; }
.product[style*="--t:3"] .thumb { background: url("/taslak/moda-eticaret/assets/img/p-d.jpg") center/cover; }
.product[style*="--t:4"] .thumb { background: url("/taslak/moda-eticaret/assets/img/p-e.jpg") center/cover; }
.product[style*="--t:5"] .thumb { background: url("/taslak/moda-eticaret/assets/img/p-f.jpg") center/cover; }
.thumb::after { content:""; position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: overlay; }
.p-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.p-name { font-family: var(--body); font-size: .98rem; font-weight: 500; }
.p-price { color: var(--muted); font-variant-numeric: tabular-nums; }
.p-foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .15rem; }
.sizes { display: flex; gap: .35rem; }
.size { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); font-size: .8rem; color: var(--muted); transition: all .18s; }
.size:hover { border-color: var(--accent); color: var(--ink); }
.size.is-on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.add { font-size: .82rem; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #fff; transition: transform .2s, background-color .2s; }
.add:hover { transform: translateY(-2px); background: color-mix(in srgb,var(--accent) 86%, #000); }
.add.added { background: var(--deep); }

/* banner */
.banner { background: var(--deep); color: #f1ece2; text-align: center; padding: clamp(4rem,9vw,7rem) var(--pad); }
.banner-text { font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(2rem,6vw,4.5rem); line-height: 1.1; }

/* atolye */
.atolye { display: grid; gap: clamp(2.5rem,6vw,5rem); align-items: center; padding: clamp(3.5rem,8vw,7rem) var(--pad); grid-template-columns: 1fr; }
@media (min-width: 980px){ .atolye { grid-template-columns: .9fr 1.1fr; } }
.atolye-media { aspect-ratio: 5/4; border-radius: 16px; background: linear-gradient(150deg, rgba(70,66,60,.05), rgba(70,66,60,.28)), url("/taslak/moda-eticaret/assets/img/atolye.jpg") center/cover; }
.atolye-text { margin-top: 1.4rem; color: var(--muted); max-width: 48ch; }
.atolye-facts { list-style: none; padding: 0; margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 2rem; }
.atolye-facts b { display: block; font-family: var(--display); font-size: 2rem; font-weight: 600; color: var(--accent); }
.atolye-facts li { font-size: .85rem; color: var(--muted); }

/* footer */
.footer { padding: clamp(3rem,6vw,5rem) var(--pad) 2.5rem; background: var(--bg2); }
.news { max-width: 640px; margin-bottom: clamp(2.5rem,5vw,4rem); }
.news-title { font-size: clamp(1.6rem,3.5vw,2.4rem); font-weight: 500; margin-bottom: 1.25rem; }
.news-form { display: flex; gap: .5rem; max-width: 440px; }
.news-form input { flex: 1; padding: 13px 16px; border-radius: 999px; border: 1px solid rgba(24,21,15,.2); background: var(--surface); color: var(--ink); font-size: .95rem; }
.news-form button { padding: 13px 26px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; transition: background-color .2s; }
.news-form button:hover { background: var(--accent); }
.news-ok { margin-top: .75rem; color: var(--accent); font-size: .9rem; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.foot-links .brand { font-weight: 700; letter-spacing: .26em; }
.foot-links > div { display: flex; gap: 1.5rem; font-size: .85rem; }
.foot-links a { color: var(--muted); } .foot-links a:hover { color: var(--ink); }

/* cart slide-over */
.cart-overlay { position: fixed; inset: 0; z-index: 250; background: rgba(24,21,15,.4); opacity: 0; transition: opacity .3s; }
.cart-overlay.is-open { opacity: 1; }
.cart { position: fixed; top: 0; right: 0; z-index: 260; width: min(420px, 92vw); height: 100%; background: var(--surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .4s var(--ease); box-shadow: -20px 0 60px rgba(24,21,15,.2); }
.cart.is-open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--line); }
.cart-head h2 { font-size: 1.6rem; font-weight: 500; }
.cart-x { font-size: 1.8rem; line-height: 1; width: 40px; height: 40px; border-radius: 50%; } .cart-x:hover { background: var(--bg2); }
.cart-items { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.cart-empty { color: var(--muted); }
.cart-item { display: grid; grid-template-columns: 48px 1fr auto; gap: .85rem; align-items: center; }
.cart-item .ci-thumb { width: 48px; height: 60px; border-radius: 8px; background: linear-gradient(160deg,#d8c7a6,#8a7a5e); }
.ci-name { font-size: .92rem; font-weight: 500; } .ci-meta { font-size: .8rem; color: var(--muted); }
.ci-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.ci-rm { font-size: .75rem; color: var(--muted); text-decoration: underline; margin-top: .2rem; } .ci-rm:hover { color: var(--accent); }
.cart-foot { padding: 1.5rem; border-top: 1px solid var(--line); }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1rem; }
.cart-total strong { font-family: var(--display); font-size: 1.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.checkout { width: 100%; padding: 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 600; transition: background-color .2s; }
.checkout:hover { background: var(--accent); }