:root{--forest:var(--t1);--copper:var(--v3);--paper:var(--t12)}
body{color:var(--forest);-webkit-font-smoothing:antialiased}
.topline{background:var(--blok);color:var(--blok-yazi);height:30px;font-size:13px}
.header{height:98px;padding-left:4.5%;padding-right:4.5%}
.brand{flex-direction:row;align-items:center;gap:12px}
.brand-emblem{width:53px;height:53px;object-fit:cover;border-radius:50%;flex-shrink:0}
.brand .brand-lockup{display:flex;flex-direction:column;gap:7px;letter-spacing:0;line-height:1}
.brand .brand-name{font:34px/.95 Georgia,serif;letter-spacing:-1.7px}
.header nav{gap:27px;font-size:13px}
.nav-shop{background:var(--forest);border-color:var(--forest);color:var(--t12);border-radius:2px;padding:12px 17px;margin-left:12px}
.header nav .nav-contact{font-size:13px}
.hero{grid-template-columns:.87fr 1.13fr;min-height:690px}
.hero-copy{padding:60px 9% 25px 10.4%}
.hero h1{font-size:clamp(60px,6.1vw,98px);letter-spacing:-.06em}
.hero-copy .eyebrow{font-size:13px;letter-spacing:.15em}
.hero-copy>p{font-size:14px;line-height:1.95;color:var(--t4)}
.hero .button{background:var(--forest);gap:36px}
.hero-actions{gap:19px}
.hero-secondary{font-size:13px}
.hero-art>img{object-position:61% center}
.hero-art:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--cam-ince),transparent 30%,transparent 70%,#29352d18)}
.hero-art .art-tag,.hero-edition{z-index:1;color:var(--t1);background:var(--cam-kati);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 9px;border-radius:3px}
.art-card{z-index:2;width:230px;border:0;background:var(--cam-kati);right:28px;bottom:48px;border-radius:2px;box-shadow:0 12px 35px #2d332314;transition:transform .3s}
.art-card:hover{transform:translateY(-4px)}
.render-note{z-index:2;right:28px;color:var(--t1);background:var(--cam-kati);padding:3px 6px;font-size:13px}
.values-strip{border-top:1px solid var(--t9);padding:22px 4.5%;background:var(--t11);color:var(--t4)}
.values-strip i{font-size:16px}
.collection{padding-top:92px;padding-bottom:65px}
.collection .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.collection .product-title-row{display:block}
.collection .product-price{display:block;margin-top:8px;font-size:14px}
.product-visual{background:var(--t10);border-radius:3px}
.product-title-row button:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.product-card{min-width:0}
.product-meta{color:var(--t4)}
.product-detail-line{color:var(--t4)}
.visual-note{color:var(--t5);line-height:1.7}
.section-head h2{font-size:clamp(42px,4vw,64px)}
.space-edit{padding-top:35px;padding-bottom:90px}
.space-edit .section-head h2{font-size:clamp(38px,3.5vw,55px)}
.space-edit .section-head>p{font-size:14px;line-height:1.9}
.space-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.space-card{position:relative;display:flex;min-height:280px;align-items:flex-end;isolation:isolate;overflow:hidden;background:var(--t10);padding:32px}
.space-card.decor{background:var(--t9)}
.space-card>div:not(.space-art){position:relative;z-index:1;max-width:70%;pointer-events:none}
.space-card span:not(.space-arrow){font-size:13px;letter-spacing:.13em}
.space-card h3{font:34px/1.15 Georgia,serif;letter-spacing:-1.3px;margin:13px 0 8px}
.space-card p{font-size:13px;color:var(--t4)}
.space-art{position:absolute;right:-15%;top:-6%;width:75%;height:105%;z-index:-1}
.space-art img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s}
.space-card:hover .space-art img{transform:translateY(-5px) rotate(-3deg)}
.space-arrow{position:absolute;right:23px;bottom:28px;border:1px solid #81927366;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;font-size:19px;background:var(--cam-ince)}
.showroom-banner{background:var(--blok);color:var(--blok-yazi);border-radius:3px;min-height:480px}
.showroom-banner h2{letter-spacing:-.04em}
.showroom-banner .room-graphic{background:linear-gradient(120deg,var(--blok-gradyan-a),var(--blok-gradyan-b))}
.manifesto{padding-top:100px;padding-bottom:100px}
footer{background:var(--t10)}
.footer-top .brand .brand-name{font-size:31px}
.footer-top .brand .brand-lockup{letter-spacing:0}
.footer-top .brand-emblem{width:48px;height:48px}
.room-page .header{height:98px}.room-page .sahne-kap{top:98px;height:calc(100dvh - 98px)}
.catalog h1{font-size:clamp(55px,5.5vw,84px)}
.catalog .product-grid{gap:45px 27px}
.catalog .filters button{border-color:var(--t8);padding:10px 16px;font-size:13px;transition:background .2s}
.catalog .filters button.active{background:var(--forest)}
.catalog .filters button:hover:not(.active){background:var(--t10)}
.catalog-search input{font-size:14px}
.dialog-info .button{background:var(--forest)}
.dialog-close{position:sticky;float:right;top:14px;margin:14px 14px -49px 0;right:auto;z-index:5}
.reveal-ready{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease}
.reveal-ready.is-visible{opacity:1;transform:none}
@media(max-width:1100px){.header nav{gap:17px}.nav-shop{margin-left:0}.hero{min-height:650px}.hero h1{font-size:65px}.hero-copy{padding-top:49px}.hero-copy .eyebrow{font-size:13px}.collection .product-grid{gap:17px}.collection .product-meta{font-size:13px}.space-card{min-height:245px;padding:25px}.space-card h3{font-size:29px}.brand .brand-name{font-size:30px}.brand-emblem{width:46px;height:46px}}
@media(max-width:760px){.header,.room-page .header{height:83px;padding:0 6%}.brand{gap:10px}.brand-emblem{width:43px;height:43px}.brand .brand-name{font-size:29px}.hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:33px 6% 23px}.hero h1{font-size:clamp(48px,13vw,65px)}.hero-copy .eyebrow{font-size:13px}.hero-copy>p{font-size:14px}.hero-actions{gap:17px}.hero .button{gap:26px}.hero-art{min-height:470px}.hero-art>img{object-position:64% center}.hero-art .art-tag{font-size:13px;max-width:130px}.hero-edition{font-size:13px}.art-card{width:210px;right:22px;bottom:43px}.render-note{right:22px;font-size:13px}.values-strip{padding:17px 6%;font-size:13px}.collection{padding-top:53px;padding-bottom:40px}.collection .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 14px}.product-grid[data-limit]>.product-card:last-child{display:block}.collection .product-meta{font-size:13px}.collection .product-title-row button{font-size:14px}.section-head h2{font-size:41px}.space-edit{padding-top:20px;padding-bottom:55px}.space-edit .section-head h2{font-size:37px}.space-grid{grid-template-columns:1fr;gap:15px}.space-card{min-height:240px;padding:27px}.space-card h3{font-size:32px}.space-art{right:-5%;width:70%;top:-5%}.showroom-banner{min-height:0}.manifesto{padding-top:60px;padding-bottom:60px}.footer-top{gap:30px 17px}.footer-top .brand .brand-name{font-size:25px}.footer-top .brand-emblem{width:36px;height:36px}.footer-top .brand{gap:7px}.footer-top>p{font-size:21px}.catalog .product-grid{gap:30px 14px}.catalog .filters button{font-size:13px;padding:8px 11px}.room-page .sahne-kap{top:83px;height:calc(100dvh - 83px)}}
@media(prefers-reduced-motion:reduce){.reveal-ready{opacity:1;transform:none;transition:none}}

/* ── Dokunmatik cihazda dokunma payı ──
   İnce metin bağlantıları (13-18 px) parmakla isabetli tıklanamıyordu.
   Padding + negatif margin ile görünüm değişmeden tıklama alanı büyür. */
@media (pointer: coarse) {
  /* Dokunma hedefini yalnızca dolguyla büyütürüz. Negatif kenar boşluğu
     tek satırda işe yarıyordu ama punto büyüyüp filtreler iki satıra
     sarınca satırları üst üste bindirdi; konteyner boşluğu onun yerine
     kısılıyor. */
  .product-detail-line button,
  .footer-top a,
  .footer-bottom a,
  [data-filter],
  .gallery-thumbs button {
    padding-block: 9px;
  }
  [data-filter] { padding-inline: 16px; }
  .footer-top > div { gap: 0; }
  .filters { gap: 8px; }
}

/* ── Obje numarası: fotoğraf üstünde her zaman okunsun ──
   Etiket sabit koyu renkteydi; koyu fotoğraflarda (Ay Kedisi, Zeus)
   kayboluyordu. İnce, bulanık bir zemin her karede okunur kılar. */
.product-index {
  background: var(--cam-kati);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--t1);
  padding: 5px 11px;
  border-radius: 999px;
  line-height: 1;
}

/* ── Ürün penceresi ──
   900 px genişlik 1440 px ekranda küçük kalıyordu; fotoğraf ve
   bilgi sütunu birlikte daha rahat okunsun diye genişletildi. */
dialog {
  width: min(1180px, 94vw);
  max-height: 92dvh;
}
.dialog-picture > img { max-height: 620px; }
.dialog-info { padding: 52px 46px; }
@media (max-width: 900px) {
  dialog { width: 96vw; }
  .dialog-info { padding: 30px 24px 36px; }
  .dialog-picture > img { max-height: 46vh; }
}

/* ── Ürün başlığı: dokunma hedefi ──
   Başlık düğmesi 18px yüksekliğinde kalıyordu; parmakla isabet ettirmek zor.
   Dikey dolgu hedefi büyütür, eşit negatif kenar boşluğu ise düzeni
   olduğu yerde tutar — kart yerleşimi değişmez. */
.product-title-row button {
  padding-block: 7px;
  margin-block: -7px;
}

/* ── Ürün görseli: odak halkası ──
   .product-visual overflow:hidden ve düğme kabı tamamen dolduruyor;
   dışarı taşan halka kırpılıp görünmez oluyordu. Halka içeri alındı. */
.product-visual > button:focus-visible { outline-offset: -4px; }

/* ── Mağaza bandı: yazı kemerle çakışıyordu ──
   "DOKUN. DÖNDÜR. KEŞFET." satırının sağ ucu .arch grafiğinin üstüne
   biniyor, o bölgede kontrast 2.08:1'e düşüyordu. Kemer yukarı alındı. */
.showroom-banner .room-graphic { padding-bottom: 66px; }

/* ── Odak halkası: zor zeminler ──
   Vurgu rengi koyu bandın üstünde 2.63:1'de kalıyor (gerek 3.0); bantta
   blok yazısı rengine geçilir. Fotoğraf üstünde ise kahverengi halka taşın
   dokusunda eriyor (1.01:1) — dıştaki cam halka her zeminde sınır çizer. */
.showroom-banner :focus-visible { outline-color: var(--blok-yazi); }
.art-card:focus-visible { box-shadow: 0 0 0 4px var(--cam-kati); }

/* ── Çok dar ekran (≈320px / %400 yakınlaştırma) ──
   Başlık yan boşlukları + menü düğmesi dolgusu birlikte 326px'e ulaşıp
   yatay kaydırma yaratıyordu (WCAG 1.4.10 Yeniden Akış). */
@media (max-width: 400px) {
  .header { padding-inline: 4%; }
  .menu-toggle { padding-inline: 4px; gap: 8px; }
  .header .tema-dugme { margin-right: 6px; }
}

/* Ekran okuyucuya açık, görsel olarak gizli başlık.
   (Önce yalnızca magaza.html içinde tanımlıydı; koleksiyon sayfası da
   başlık hiyerarşisindeki h1→h3 atlamasını kapatmak için kullanıyor.) */
.gizli-baslik {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

