/* Kategori sayfalarının ortak stili. Ana sayfa kendi inline CSS'ini
   kullanmaya devam ediyor (ilk boyamada ekstra istek olmasın diye);
   buradaki değerler onunla aynı tokenlardan türetildi. */

:root { --ink:#0b0b0b; --muted:#8c929d; --line:#dcdfe2; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:"Manrope",Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
::selection { background:#111; color:#fff; }
:focus-visible { outline:2px solid #111; outline-offset:4px; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:20; padding:10px 16px; background:#111; color:#fff; font-size:12px; }
.skip-link:focus { left:8px; top:8px; }

/* ---- üst menü ---- */
.site-header { position:sticky; top:0; z-index:10; height:78px; padding:0 5.2vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#fff; border-bottom:1px solid var(--line); }
.site-links { display:flex; align-items:center; gap:34px; font-size:12px; font-weight:500; white-space:nowrap; }
.site-links.right { justify-content:flex-end; }
.site-links a { position:relative; padding:7px 0; }
.site-links a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor; transition:right .25s ease; }
.site-links a:hover::after, .site-links a:focus-visible::after { right:0; }
.site-links a[aria-current="page"]::after { right:0; }
.site-brand { display:inline-flex; align-items:center; gap:9px; padding:0 28px; font-size:18px; font-weight:500; letter-spacing:-.04em; text-transform:uppercase; }
.site-brand::before { content:""; width:36px; height:15px; flex:0 0 auto; background:currentColor; -webkit-mask:url("paralaks-mark.svg") center/contain no-repeat; mask:url("paralaks-mark.svg") center/contain no-repeat; }

/* ---- sayfa başlığı ---- */
.page-head { padding:74px 5.2vw 42px; text-align:center; }
.page-eyebrow { margin:0 0 14px; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.page-head h1 { margin:0; font-size:clamp(40px,6.4vw,86px); line-height:.98; font-weight:300; letter-spacing:-.055em; }
.page-lede { max-width:52ch; margin:18px auto 0; color:var(--muted); font-size:14px; font-weight:300; line-height:1.55; }

/* ---- kategori sayfası: sol filtre + sağ ürün ızgarası ---- */
.category-layout { display:grid; grid-template-columns:220px 1fr; align-items:start; gap:clamp(24px,3vw,48px); padding:0 5.2vw 20px; }
.category-main { min-width:0; }

.filter-panel { position:sticky; top:96px; border:0; padding:0; }
.filter-panel summary { display:none; }
.filter-group { padding:18px 0; border-bottom:1px solid var(--line); }
.filter-group:first-of-type { padding-top:0; }
.filter-group__title { margin:0 0 12px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.filter-option { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:13px; cursor:pointer; }
.filter-option input { accent-color:#111; width:15px; height:15px; flex-shrink:0; }
.filter-option__count { color:var(--muted); font-size:11px; }
.filter-reset { display:block; margin-top:16px; padding:9px 0; background:none; border:0; border-bottom:1px solid var(--ink); font: inherit; font-size:11px; letter-spacing:.03em; cursor:pointer; }

.filter-empty { padding:60px 20px; text-align:center; color:var(--muted); font-size:13px; }

@media (max-width:900px) {
  .category-layout { grid-template-columns:1fr; }
  .filter-panel { position:static; border:1px solid var(--line); padding:0 16px; margin-bottom:8px; }
  .filter-panel summary { display:flex; align-items:center; justify-content:space-between; padding:14px 0; font-size:12px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; list-style:none; }
  .filter-panel summary::-webkit-details-marker { display:none; }
  .filter-panel summary::after { content:"+"; font-size:16px; }
  .filter-panel[open] summary::after { content:"–"; }
  .filter-panel[open] summary { border-bottom:1px solid var(--line); }
  .filter-panel .filter-group:last-of-type { border-bottom:0; }
  .filter-panel .filter-reset { margin-bottom:18px; }
}

/* ---- ürün / kart ızgarası ---- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.tile { position:relative; min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; background:#fff; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .25s ease; }
a.tile:hover, a.tile:focus-visible { background:#f6f6f4; }
.tile-image { position:absolute; left:10%; top:12%; width:80%; height:52%; object-fit:contain; mix-blend-mode:multiply; transition:transform .35s ease; }
a.tile:hover .tile-image { transform:scale(1.06); }
.tile-name { margin:0; font-size:13px; font-weight:400; letter-spacing:-.02em; }
.tile-meta { margin:5px 0 0; font-size:11px; font-weight:300; color:var(--muted); }
.tile-go { position:absolute; right:16px; bottom:16px; font-size:16px; font-weight:300; transition:transform .25s ease; }
.tile-go svg { width:18px; height:18px; display:block; }
a.tile:hover .tile-go { transform:translateX(3px); }

/* Kategori sayfalarındaki (kadın/erkek/unisex) büyük kart varyantı:
   görsel kartın çok daha büyük bir kısmını kaplıyor. */
.tile.tile--large { min-height:310px; padding:22px; border-right-color:#111; border-bottom-color:#111; }
.tile.tile--large .tile-image { left:3%; top:5%; width:94%; height:68%; }
/* Kartın kendi sağ/alt çizgisi zaten siyah; ızgaranın en üst ve en sol
   kenarını çevreleyen çizgi de aynı tona getiriliyor ki tüm kartlar
   tek bir siyah çerçeve içindeymiş gibi görünsün. */
.grid--large { border-top-color:#111; border-left-color:#111; }

/* Görselsiz kartlar (koleksiyon anlatımları) */
.tile.text-only { min-height:190px; justify-content:space-between; }
.tile.text-only .tile-name { font-size:20px; font-weight:400; letter-spacing:-.04em; }

/* Marka kartları: logo ortada, ad altında. Logoların en-boy oranları çok
   farklı olduğu için hepsine aynı kutu verilip object-fit:contain ile
   ölçekleniyor; böylece görsel ağırlıkları eşitleniyor. */
.tile.brand-tile { min-height:190px; align-items:center; justify-content:center; gap:20px; text-align:center; }
.tile.brand-tile img { width:154px; height:34px; object-fit:contain; opacity:.85; }
.tile.brand-tile .tile-name { font-size:10px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }

.count { margin:14px 0 0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ---- seri blokları (koleksiyonlar) ---- */
.series { padding-top:8px; scroll-margin-top:90px; }
.series + .series { padding-top:52px; }
.series-head { padding:0 5.2vw 26px; max-width:760px; }
.series-head h2 { margin:0; font-size:26px; font-weight:400; letter-spacing:-.04em; }
.series-head p { margin:8px 0 0; color:var(--muted); font-size:14px; font-weight:300; line-height:1.55; }

/* ---- ürün sayfası ---- */
.crumbs { padding:22px 5.2vw 0; font-size:11px; color:var(--muted); display:flex; flex-wrap:wrap; gap:7px; }
.crumbs a:hover, .crumbs a:focus-visible { color:var(--ink); }
.crumbs [aria-current] { color:var(--ink); }

.product-detail { display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(24px,4vw,62px); align-items:center; padding:34px 5.2vw 66px; }
.detail-image { background:#f4f4f2; display:grid; place-items:center; padding:5% 6%; }
.detail-image img { width:100%; height:auto; display:block; mix-blend-mode:multiply; }
.detail-body h1 { margin:0; font-size:clamp(32px,4.2vw,54px); line-height:1.02; font-weight:300; letter-spacing:-.05em; }
.detail-blurb { margin:16px 0 0; color:var(--muted); font-size:14px; font-weight:300; line-height:1.6; }

.specs { margin:28px 0 0; border-top:1px solid var(--line); }
.specs > div { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); }
.specs dt { margin:0; font-size:12px; color:var(--muted); font-weight:300; }
.specs dd { margin:0; font-size:12px; }

.detail-note { margin:22px 0 0; font-size:12px; font-weight:300; line-height:1.6; color:var(--muted); }
.detail-cats { margin:18px 0 0; font-size:11px; color:var(--muted); }
.detail-cats a { border-bottom:1px solid var(--line); padding-bottom:1px; color:var(--ink); }
.detail-cats a:hover, .detail-cats a:focus-visible { border-color:var(--ink); }

.related { padding-bottom:20px; }
.related-title { margin:0; padding:0 5.2vw 22px; font-size:20px; font-weight:400; letter-spacing:-.04em; }

/* ---- sanal deneme (3D try-on) ---- */
.vto-trigger { display:inline-flex; align-items:center; gap:9px; margin-top:24px; padding:13px 22px; border:1px solid var(--ink); background:var(--ink); color:#fff; font:inherit; font-size:12px; font-weight:500; letter-spacing:.02em; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.vto-trigger svg { width:17px; height:17px; flex-shrink:0; }
.vto-trigger:hover, .vto-trigger:focus-visible { background:#fff; color:var(--ink); }

/* Modal: sitenin geri kalanından tamamen bağımsız bir katman. İçindeki
   .vto-modal__frame bir <iframe> — vto/index.html kendi CSS/JS'ini taşır,
   buraya hiçbir şey sızmaz. */
.vto-modal { position:fixed; inset:0; z-index:100; display:none; }
.vto-modal[data-open="true"] { display:flex; }
.vto-modal__backdrop { position:absolute; inset:0; background:rgba(11,11,11,.72); }
.vto-modal__panel { position:relative; margin:auto; width:min(94vw,980px); height:min(90dvh,760px); background:#050505; border-radius:20px; overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.4); }
.vto-modal__frame { width:100%; height:100%; border:0; display:block; background:#050505; }
/* Kapatma kontrolü iframe içinde (vto/index.html'in kendi X butonu) —
   burada ayrı bir kapatma butonu yok, ikisi aynı köşede çakışırdı.
   Panel dışına tıklama ve ESC de modalı kapatır. */

@media (max-width:560px) {
  .vto-modal__panel { width:100vw; height:100dvh; border-radius:0; }
}

/* ---- alt bilgi ---- */
.page-outro { padding:62px 5.2vw; text-align:center; }
.page-outro h2 { margin:0; font-size:20px; font-weight:400; letter-spacing:-.04em; }
.page-outro p { margin:9px 0 0; color:var(--muted); font-size:14px; font-weight:300; }
.back-home { display:inline-block; margin-top:20px; padding:11px 22px; border:1px solid var(--line); font-size:11px; letter-spacing:.04em; transition:background .25s ease, border-color .25s ease; }
.back-home:hover, .back-home:focus-visible { background:#111; border-color:#111; color:#fff; }
footer { padding:28px 5.2vw; display:flex; justify-content:space-between; gap:14px; border-top:1px solid var(--line); font-size:10px; color:#5f646c; }

@media (max-width:560px) {
  /* Beş kategori marka ile aynı satıra sığmıyor: marka üstte, menü altta. */
  .site-header { height:auto; padding:12px 14px 10px; grid-template-columns:auto auto; justify-content:center; align-items:start; column-gap:13px; row-gap:7px; }
  .site-brand { grid-column:1 / -1; grid-row:1; justify-self:center; padding:0; font-size:15px; }
  .site-links { gap:11px; font-size:9px; }
  .site-links.left { grid-column:1; grid-row:2; }
  .site-links.right { grid-column:2; grid-row:2; justify-content:flex-start; }

  .page-head { padding:46px 20px 30px; }
  .grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
  .tile { min-height:210px; padding:15px; }
  .page-outro { padding:46px 20px; }

  .series-head { padding:0 20px 20px; }
  .series-head h2 { font-size:21px; }
  .series + .series { padding-top:40px; }
  .crumbs { padding:16px 20px 0; }
  .product-detail { grid-template-columns:1fr; gap:26px; padding:22px 20px 48px; }
  .related-title { padding:0 20px 18px; }
  footer { flex-direction:column; align-items:center; text-align:center; }

  .category-layout { padding:0 20px 20px; gap:16px; }
  .grid--large { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
  .tile.tile--large { min-height:230px; padding:14px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .tile-image, a.tile:hover .tile-image, .tile-go, .site-links a::after { transition:none; }
}