/* ==================================================================
 * Devralınan taban — ortak ekranların sınıf sözlüğü.
 *
 * Sepet, ödeme, hesap, filtreler, abonelik… bu ekranların işaretlemesi temalar arasında ortak
 * ve kendi sınıf adlarını taşıyor. Sıfırdan yazmaya kalkışınca 120 sınıf açıkta kalmıştı; o
 * ekranlar çıplak kalırdı. Taban buraya DÖNÜŞTÜRÜLEREK alındı: her yuvarlatma sıfırlandı, her
 * gölge kaldırıldı, gri tonlar değişkene bağlandı.
 *
 * ÖNCE bu blok geliyor, Kontur'un kimlik katmanı SONRA — çakışan bir kuralda kazanması
 * gereken taraf kimlik. (İlk yazışımda sıra tersti ve taban kazanıyordu.)
 * ================================================================== */

* { box-sizing: border-box; }

/* Form controls do not inherit the page's typeface — the browser gives them its own, so a
   button rendered in Arial next to body copy in the theme's font is the default, not a
   choice. One rule instead of remembering `font: inherit` on every new control; anything
   that wants its own size or weight still declares it and wins on specificity. */
input, textarea, select, button { font: inherit; color: inherit; }
textarea { resize: vertical; }
body {
  margin: 0;
  background: var(--color-bg, #fff);
  color: var(--color-text, #111111);
  font-family: var(--font-body);
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; }

.container { max-width: var(--page-width, 1200px); margin: 0 auto; padding: 0 20px; }

.btn {
  display: inline-block;
  background: var(--color-accent, #16a34a);
  color: #fff;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius);
  font-weight: 650;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn:hover { opacity: .9; }
.btn--ghost { background: transparent; color: var(--color-text); border: 1px solid currentColor; }

/* Announcement bar */
.announcement { background: var(--color-primary, #111); color: #fff; text-align: center; font-size: 13px; padding: 8px 12px; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: 24px; padding: 16px 20px; max-width: var(--page-width); margin: 0 auto; }
.site-header__logo { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.site-nav { display: flex; gap: 18px; }
.site-nav a { font-size: 14px; font-weight: 550; color: var(--ink-muted); }
.site-nav a:hover { color: var(--color-text); }
.site-header__actions { margin-left: auto; display: flex; gap: 14px; align-items: center; }
.cart-link { font-weight: 600; font-size: 14px; }

/* Hero */
.hero { padding: 88px 20px; text-align: center; }
.hero__title { font-size: clamp(32px, 6vw, 60px); line-height: 1.02; margin: 0 0 16px; }
.hero__text { font-size: 18px; color: var(--ink-muted); max-width: 46ch; margin: 0 auto 26px; }

/* Product grid */
/* padding-block, not the shorthand: `padding: Npx 0` came after .container in the cascade
   and zeroed its gutter, so every `container section` page rendered flush to the edge. */
.section { padding-block: 56px; }
.section__title { font-size: 28px; margin: 0 0 28px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 20px; }
.product-card__media { aspect-ratio: 4/5; background: var(--surface-2); border-radius: var(--radius); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { display: flex; justify-content: space-between; gap: 10px; padding: 12px 2px 0; }
.product-card__title { font-weight: 600; font-size: 15px; }
.price { color: var(--color-accent, #16a34a); font-weight: 650; font-variant-numeric: tabular-nums; }

/* Rich text */
.rich-text { text-align: center; padding: 56px 20px; }
.rich-text__heading { font-size: 30px; margin: 0 0 12px; }
.rich-text__text { color: var(--ink-muted); max-width: 60ch; margin: 0 auto 16px; }

/* Image with text */
.image-with-text { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 40px 0; }
.image-with-text__media { background: var(--surface-2); border-radius: var(--radius); min-height: 280px; background-size: cover; background-position: center; }
@media (max-width: 760px) { .image-with-text { grid-template-columns: 1fr; } }

/* Product page */
.product { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 48px 0; }
.product__media img { border-radius: var(--radius); background: var(--surface-2); }
.product__title { font-size: 34px; margin: 0 0 10px; }
.product__price { font-size: 22px; margin: 0 0 20px; }
.product__variant { display: block; margin: 0 0 18px; }
.product__variant-label { display: block; font-size: 13px; color: var(--color-text); opacity: .7; margin-bottom: 6px; }
.product__variant-select { width: 100%; max-width: 320px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 15px; background: var(--color-bg); color: var(--color-text); }
.product__variant-select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.product__desc { color: var(--ink-muted); margin: 20px 0; }
@media (max-width: 760px) { .product { grid-template-columns: 1fr; } }

/* Cart */
.cart-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line__main { display: flex; flex-direction: column; gap: 8px; }
.cart-line__title { font-weight: 600; color: var(--color-text); }
.cart-qty { display: inline-flex; align-items: center; gap: 4px; }
.cart-qty__btn { width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius); font-size: 16px; line-height: 1; cursor: pointer; color: var(--color-text); }
.cart-qty__btn:hover { background: var(--surface-2); }
.cart-qty__btn:disabled { opacity: .5; cursor: default; }
.cart-qty__val { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.cart-remove { margin-left: 8px; border: 0; background: transparent; color: var(--danger); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.cart-remove:disabled { opacity: .5; cursor: default; }
.cart-summary { margin: 24px 0 0 auto; max-width: 420px; }
.cart-coupon { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.cart-coupon input { flex: 1; min-width: 160px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; font-size: 15px; }
.cart-coupon__applied { flex: 1; font-weight: 600; }
.cart-coupon__remove { border: 0; background: transparent; color: var(--danger); cursor: pointer; font: inherit; font-size: 13px; text-decoration: underline; }
.cart-coupon__error { flex-basis: 100%; margin: 0; color: var(--danger); font-size: 13px; }
.cart-totals { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.cart-totals__row { display: flex; justify-content: space-between; font-size: 15px; }
.cart-totals__row--discount { color: var(--accent); }
.cart-totals__row--total { font-size: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
.cart-checkout { display: inline-flex; margin-top: 16px; }
.cart-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 20px; color: var(--ink-muted); font-size: 14px; }
.site-footer__inner { max-width: var(--page-width); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer__links { display: flex; gap: 16px; flex-wrap: wrap; }

/* Checkout */
.checkout { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.checkout-form { display: flex; flex-direction: column; gap: 12px; }
.checkout-h { font-size: 18px; margin: 10px 0 2px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.field input, .field textarea, .field select { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 15px; }
.field textarea { min-height: 72px; }
.checkout-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.checkout-methods { display: flex; flex-direction: column; gap: 8px; }
.pm { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.pm .price { margin-left: auto; font-weight: 600; }
/* Legal approvals (mesafeli satış, ön bilgilendirme) — the order is refused without them. */
.checkout-consents { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 14px; background: #f7f7f5; border-radius: var(--radius); }
.checkout-consent { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; line-height: 1.45; cursor: pointer; }
.checkout-consent input { margin-top: 2px; }
.checkout-consent-note { margin: 0; font-size: 12px; color: #767676; }
.checkout-submit { margin-top: 10px; align-self: flex-start; }
.checkout-error { color: #c0392b; font-size: 14px; }
.checkout-summary { background: #f7f7f5; border-radius: var(--radius); padding: 20px; }
@media (max-width: 760px) { .checkout { grid-template-columns: 1fr; } }

/* Order status / confirmation */
.order-confirm { max-width: 640px; margin: 0 auto; text-align: center; }
/*
 * Sipariş onayı işareti KARE.
 *
 * Devralınan kural `border-radius: 50%` ile mükemmel bir daire çiziyordu — hiçbir şeyin
 * yuvarlak olmadığı bir temada, tek bir daire "buraya bakılmamış" diye okunuyor.
 *
 * Yeşil burada kalıyor ve bu, "yeşil yalnız stok" kuralının bilinçli istisnası: sipariş
 * onayı sayfasında tek bir stok rozeti yok, yani sinyali seyreltmiyor; buna karşılık
 * "işlem tamam" için evrensel olarak okunan renk bu.
 */
.order-check {
  width: 56px; height: 56px; border-radius: var(--radius);
  background: var(--color-accent, #16a34a); color: #fff;
  font-size: 28px; line-height: 56px; text-align: center;
  /*
   * `auto` yatayda: kapsayıcı ortalı, işaret de ortalı olmalı. Daireyi kareye çevirirken
   * `margin: 0 auto 16px`i `0 0 16px` yapmışım ve işaret sola kaçmıştı — sayfanın geri
   * kalanı ortadayken tek başına solda duran bir kutu, düzeltme değil yeni bir hata.
   */
  margin: 0 auto 16px;
}
.order-title { font-size: 30px; margin: 0 0 6px; }
.order-sub { color: var(--ink-muted); margin: 0 0 28px; }
.order-card { text-align: left; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 0 0 20px; }
.order-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.order-total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-size: 17px; }
.order-muted { color: #888; font-size: 13px; }
.order-pay-title { font-size: 16px; margin: 0 0 10px; }
.order-note { color: var(--ink-muted); font-size: 14px; margin: 10px 0 0; }

/* Account */
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.account-email { color: var(--ink-muted); margin: 0 0 20px; }
.account-order { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.account-order:last-child { border-bottom: 0; }
.account-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 820px; }
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form .btn { align-self: flex-start; margin-top: 6px; }
.account-error { color: #c0392b; font-size: 14px; }
@media (max-width: 760px) { .account-auth { grid-template-columns: 1fr; } }

/* Brand logo image (Settings > Marka) — falls back to the wordmark when unset. */
.site-logo { height: 32px; width: auto; display: block; }

/* --- Cookie consent banner (non-essential tags load only after "Kabul et") --- */
.stando-cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: space-between; background: #fff; color: #1a1a1a; border: 1px solid rgba(0,0,0,.14); border-radius: var(--radius); padding: 14px 18px; box-shadow: none; font-size: 14px; line-height: 1.5; max-width: 900px; margin: 0 auto; }
.stando-cc__t { margin: 0; flex: 1 1 320px; }
.stando-cc__t a { color: inherit; text-decoration: underline; }
.stando-cc__a { display: flex; gap: 8px; flex: 0 0 auto; }
.stando-cc__btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius); border: 1px solid rgba(0,0,0,.2); background: #fff; color: #1a1a1a; cursor: pointer; }
.stando-cc__btn--p { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 560px) { .stando-cc { flex-direction: column; align-items: stretch; } .stando-cc__a { justify-content: stretch; } .stando-cc__btn { flex: 1; } }

/* --- Blog --- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.blog-card__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius); }
.blog-card__title { font-size: 20px; margin: 12px 0 6px; }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__excerpt { margin: 0; line-height: 1.6; }
.blog-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; }
.blog-card__tag { padding: 2px 9px; border-radius: var(--radius); border: 1px solid currentColor; text-decoration: none; font-size: 12px; }
.article { max-width: 760px; }
.article__title { font-size: 34px; line-height: 1.2; margin: 0 0 10px; }
.article__meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; margin-bottom: 18px; }
.article__cover { width: 100%; border-radius: var(--radius); margin-bottom: 22px; }
.article__body { line-height: 1.75; font-size: 17px; }
.article__body img { max-width: 100%; border-radius: var(--radius); }

/* --- Yalnız ekran okuyucuya görünen etiketler --- */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Koleksiyon: sıralama ve sayfalama --- */
.coll-bar { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border, rgba(0,0,0,.1)); }
.coll-bar__count { font-size: 13px; opacity: .7; }
.coll-sort { margin-left: auto; }
.coll-sort select { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: var(--radius); background: transparent; color: inherit; cursor: pointer; }
.coll-sort-links { display: inline-flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 8px; flex-wrap: wrap; }
.pager__step, .pager__page { font-size: 13px; padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border, rgba(0,0,0,.12)); }
.pager__pages { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.pager__page.is-current { font-weight: 700; }

/* --- Arama sayfası --- */
.search-form { display: flex; gap: 8px; max-width: 560px; margin: 0 0 16px; }
.search-form input { flex: 1; height: 42px; border: 1px solid var(--border, rgba(0,0,0,.14)); border-radius: var(--radius); font: inherit; font-size: 15px; padding: 0 14px; background: transparent; color: inherit; }
.search-count { font-size: 13px; opacity: .7; margin: 0 0 18px; }

/* --- Benzer ürünler --- */
.related { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border, rgba(0,0,0,.1)); }
.related__title { font-size: 20px; margin: 0 0 20px; }

/* --- Ürün galerisi --- */
/* Rendered only when a product has more than one photo; a strip with one thumbnail is a
   control that does nothing. */
.product__thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.product__thumb { width: 72px; height: 72px; padding: 0; border: 2px solid transparent; border-radius: var(--radius); background: var(--surface-2); overflow: hidden; cursor: pointer; }
.product__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product__thumb:hover { border-color: #d0d0d0; }
/* The active thumbnail is marked with a BORDER, not opacity: a dimmed strip reads as
   "disabled" and the shopper stops clicking it. */
.product__thumb.is-active { border-color: #111; }
.product__thumb:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

/* --- Görsel büyütme --- */
.product__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.product__zoom img { display: block; width: 100%; }
/* The hint only appears on a pointer device: on touch there is no hover to reveal it and it
   would sit permanently over the photo. */
.product__zoom-hint { position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: var(--radius); background: rgb(0 0 0 / 62%); color: #fff; font-size: 12px; opacity: 0; transition: opacity .14s ease; }
.product__zoom:hover .product__zoom-hint, .product__zoom:focus-visible .product__zoom-hint { opacity: 1; }
@media (hover: none) { .product__zoom-hint { display: none; } }
.product__zoom:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

.pz-open { overflow: hidden; }
.pz { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; background: rgb(0 0 0 / 88%); padding: 48px 64px; }
.pz.is-open { display: flex; }
.pz__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pz__close, .pz__nav { position: absolute; border: 0; background: rgb(255 255 255 / 12%); color: #fff; cursor: pointer; border-radius: var(--radius); line-height: 1; }
.pz__close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 26px; }
.pz__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 44px; font-size: 30px; }
.pz__nav--prev { left: 12px; }
.pz__nav--next { right: 12px; }
.pz__close:hover, .pz__nav:hover { background: rgb(255 255 255 / 26%); }
.pz__close:focus-visible, .pz__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pz__count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .pz { padding: 56px 12px; } .pz__nav { width: 38px; height: 38px; font-size: 24px; } }

/* Reviews. The form's fields are plain rather than borrowing the checkout's classes: this
   theme has no .co-field, and a form that silently loses its styling reads as broken. */
.reviews { max-width: 900px; margin: 56px auto 0; padding: 0 20px; }
.reviews__head { display: flex; align-items: baseline; gap: 14px; border-bottom: 1px solid #e6e6e3; padding-bottom: 12px; }
.reviews__title { font-size: 22px; margin: 0; }
.reviews__avg { font-size: 14px; color: var(--ink-muted); }
.reviews__empty { color: var(--ink-muted); padding: 18px 0; }
.review { padding: 18px 0; border-bottom: 1px solid var(--line)eec; }
.review__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.review__stars { letter-spacing: 2px; }
.review__who { font-weight: 600; }
.review__badge { font-size: 12px; padding: 2px 8px; border-radius: var(--radius); background: #e6f4ec; color: #0c5132; }
.review__title { font-size: 16px; margin: 8px 0 4px; }
/* pre-wrap keeps the buyer's paragraphs; anywhere stops one long word widening the page. */
.review__body { margin: 0; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.reviews__form { margin-top: 24px; }
.reviews__form summary { cursor: pointer; font-weight: 600; padding: 10px 0; }
.reviews__form form { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.reviews__field { display: flex; flex-direction: column; gap: 6px; }
.reviews__field > span { font-size: 13px; color: var(--ink-muted); }
.reviews__field input,
.reviews__field select,
.reviews__field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 15px; background: var(--color-bg); color: var(--color-text);
}
.reviews__field input:focus,
.reviews__field select:focus,
.reviews__field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.reviews__note { font-size: 13px; color: var(--ink-muted); margin: 6px 0 0; }

/* Listing filters. Every value is a link and the price box is a real form, so narrowing a
   category works with scripts blocked and each result has an address worth sharing. */
.filters {
  margin: 0 0 22px; border: 1px solid #e6e6e3; border-radius: var(--radius);
  background: var(--color-bg, #fff); color: var(--color-text, #111111);
}
.filters__toggle {
  cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.filters__toggle::-webkit-details-marker { display: none; }
.filters__toggle::after { content: "▾"; margin-left: auto; opacity: .55; }
.filters[open] .filters__toggle::after { content: "▴"; }
.filters__on {
  font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: var(--radius);
  background: #e6f4ec; color: #0c5132;
}
.filters__body {
  display: grid; gap: 22px; padding: 4px 16px 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border-top: 1px solid #f0f0ee;
}
.filters__title { margin: 12px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.filters__values {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  max-height: 220px; overflow-y: auto;
}
.filters__value {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: var(--radius); text-decoration: none; color: inherit; font-size: 14px;
}
.filters__value:hover { background: rgba(0, 0, 0, .04); }
/* A real box, so the panel reads as checkboxes even though every one of them is a link. */
.filters__box {
  flex: none; width: 15px; height: 15px; border: 1px solid #c9c9c4; border-radius: var(--radius);
  background: var(--color-bg, #fff);
}
.filters__value.is-on .filters__box {
  background: var(--color-text, #111); border-color: var(--color-text, #111); position: relative;
}
.filters__value.is-on .filters__box::after {
  content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
  border: solid var(--color-bg, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.filters__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filters__count { flex: none; font-size: 12px; opacity: .6; }
.filters__range { display: flex; align-items: center; gap: 8px; }
.filters__range input {
  width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 14px; background: var(--color-bg, #fff); color: inherit;
}
.filters__apply { flex: none; padding: 8px 12px; font-size: 13px; }
.filters__foot { margin: 0; padding: 12px 16px; border-top: 1px solid #f0f0ee; font-size: 14px; }
.coll-empty { grid-column: 1 / -1; }
@media (max-width: 700px) {
  .filters__range { flex-wrap: wrap; }
  .filters__apply { width: 100%; }
}

/* Digital deliveries on the order page. */
.downloads { margin-top: 24px; }
.download {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--line)eec;
}
.download__left { font-size: 13px; opacity: .65; }

/* --- Ürün videosu ---
   The card carries its own aspect ratio so the strip does not reflow when a poster (or the
   player that replaces it) loads at a different size. */
.product__videos { margin-top: 18px; }
.product__videos-label { font-size: 13px; font-weight: 600; color: var(--ink-muted); margin-bottom: 8px; }
.product__videos-row { display: flex; gap: 12px; flex-wrap: wrap; }
.product__video {
  position: relative; width: 220px; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: #101010; cursor: pointer;
}
.product__video-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.product__video-poster--empty {
  /* No still to show — a plate rather than a hole, so the play button has something to sit on. */
  background: linear-gradient(135deg, #1c1c1c, #333);
}
.product__video-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; display: flex;
  align-items: center; justify-content: center; border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.92); color: #111; box-shadow: none;
  transition: transform 120ms ease;
}
.product__video:hover .product__video-play { transform: scale(1.08); }
.product__video:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
/* Once playing, the card IS the player: no border radius fight, no letterboxed poster behind. */
.product__video[data-playing="1"] { width: 100%; max-width: 520px; background: #000; cursor: default; }
.product__video-player { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) {
  .product__video, .product__video[data-playing="1"] { width: 100%; max-width: none; }
}

/* --- Pakette neler var --- */
.product__bundle { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); }
.product__bundle-title { font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.product__bundle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.product__bundle-list li { font-size: 14px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
/* The count leads the line: "2×" answers the first question a shopper has about a set. */
.product__bundle-qty { font-weight: 650; min-width: 28px; }
.product__bundle-variant { font-size: 12.5px; opacity: 0.7; }

/* --- Abonelik sayfası --- */
.sub-page { max-width: 620px; }
.sub-page__title { font-size: 24px; margin: 24px 0 16px; }
.sub-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 16px; }
.sub-card__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--surface-2); font-size: 14px; }
.sub-card__row:last-child { border-bottom: 0; }
.sub-card__label { opacity: 0.7; }
.sub-card__value { text-align: right; }
.sub-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
/* Cancelling is not hidden, and not dressed up as the obvious choice either. */
.sub-cancel { margin-left: auto; }
.sub-note { margin-top: 14px; font-size: 13px; opacity: 0.8; }

/* --- Tek seferlik / abonelik seçimi --- */
.product__buytype { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0 0 14px; }
.product__buytype-legend { font-size: 13px; font-weight: 650; padding: 0 4px; }
.product__buytype-opt { display: flex; gap: 10px; align-items: center; padding: 6px 0; font-size: 14px; cursor: pointer; }
.product__buytype-opt input { margin: 0; }

/* Cancelling is present and honest, not dressed as the obvious choice: a link, beside the
   buttons, at the far end of the row. */
.sub-cancel { background: none; border: 0; padding: 6px 2px; font: inherit; font-size: 13px; color: inherit; opacity: 0.7; text-decoration: underline; cursor: pointer; }
.sub-cancel:hover { opacity: 1; }


/*
 * Kontur — endüstriyel B2B teması.
 *
 * Tek bir karar bütün temayı belirliyor: HİÇBİR YERDE YUVARLATMA YOK. Yuvarlatılmış köşe
 * "yumuşak, dost canlısı, tüketici" der; teknik ürün satan bir katalogda istenen şey bu değil.
 * Hiyerarşi de gölgeyle değil İNCE ÇİZGİYLE kuruluyor — gölge nesneyi sayfadan kaldırır ve
 * kağıt hissi verir, çizgi ise bir çizim gibi böler. Referans aldığımız sitede 1px'lik gri
 * kenarlık 56 yerde geçiyordu ve gölge hiç yoktu; o oran tesadüf değil, dilin kendisi.
 *
 * Renk neredeyse yok: siyah, beyaz, iki gri. Tek renkli vurgu STOK için ayrıldı, çünkü B2B
 * alıcısının sayfada aradığı ilk şey "var mı". Rengi süs olarak harcamak, onu bilgi olarak
 * kullanamamak demek.
 */

/* ============================ Değişkenler ============================ */
:root {
  --bg: var(--color-bg, #ffffff);
  --ink: var(--color-text, #111111);
  --primary: var(--color-primary, #111111);
  --accent: var(--color-accent, #16a34a);
  --line: var(--color-line, #e5e5e5);

  /* Yüzeyler: beyazdan kıl payı farklı. Bölümleri ayıran şey kontrast değil, kenar çizgisi. */
  --surface: #fafafa;
  --surface-2: #f5f5f5;
  --ink-muted: #525252;
  --ink-faint: #8a8a8a;
  /* Tek uyarı rengi — iptal, hata, silme. Vurgu yeşiliyle karıştırılmasın diye ayrı. */
  --danger: #b91c1c;
  /*
   * Devralınan kurallar `--border` adını kullanıyor ve yedeği rgba(0,0,0,.1). Yedek çalışırdı
   * ama Kontur'un gri tonundan farklı bir gri basardı — aynı sayfada iki ayrı çizgi rengi.
   * Takma ad, o kuralları temanın çizgisine bağlıyor.
   */
  --border: var(--line);

  --font-body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, sans-serif;
  --font-display: "Barlow Semi Condensed", "Barlow", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --pad: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  /* Sıkı harf aralığı: yarı-sıkışık kesimle birlikte mühendislik çizimi etiketi gibi duruyor. */
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin: 0 0 12px;
}
h1 { font-size: clamp(32px, 5vw, 52px); }
h2 { font-size: clamp(24px, 3.4vw, 36px); }
h3 { font-size: 19px; }
p { margin: 0 0 14px; }

.wrap { max-width: var(--page-width, 1200px); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/*
 * Bölüm mikro-etiketi — referansın en çok tekrarlanan deseni: her başlığın üstünde küçük,
 * büyük harfli, geniş aralıklı bir sözcük. İşi başlığı SINIFLANDIRMAK; okuyan, bölüme
 * girmeden ne okuyacağını biliyor.
 */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
  display: block;
}

/*
 * `padding-block`, kısayol DEĞİL.
 *
 * `padding: 64px 0` yazmak yatay dolguyu da sıfırlıyor ve bu kural `.container`dan sonra
 * geldiği için onun yan boşluğunu siliyor: `container section` taşıyan her sayfa ekranın
 * kenarına yapışıyor. Taban CSS'te bu tuzak yorumla işaretlenmişti; kısayolu yazıp aynı
 * hatayı tekrar ettim ve koleksiyon sayfasını ölçünce yakalandı (ızgara x=0, genişlik =
 * bütün ekran).
 */
.section { padding-block: 64px; }
.section--tight { padding-block: 44px; }
.section--line { border-top: 1px solid var(--line); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 680px; margin-bottom: 32px; }
.section-head p { color: var(--ink-muted); margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

/* ============================ Düğmeler ============================ */
/*
 * İki düğme var ve ikisi de köşeli. Birincil dolu siyah, ikincil yalnız çizgi — referanstaki
 * gibi. Üçüncü bir biçim eklemedim: teknik bir sayfada üç ağırlık, hangisinin asıl eylem
 * olduğunu belirsizleştirir.
 */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 14.5px;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 12px 22px; border: 1px solid var(--primary); border-radius: var(--radius);
  background: var(--primary); color: #fff; cursor: pointer; transition: background .14s, color .14s;
}
.btn:hover { background: #000; text-decoration: none; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-secondary { background: transparent; color: var(--primary); }
.btn-secondary:hover { background: var(--primary); color: #fff; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
/* Ok, bağlantının yöne sahip olduğunu söylüyor; hover'da bir adım ileri gidiyor. */
.btn-arrow::after { content: "→"; transition: transform .14s; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ============================ Üst şerit + başlık ============================ */
.announcement {
  background: #000; color: #fff; font-size: 12.5px;
  border-bottom: 1px solid #262626;
}
.announcement .wrap { display: flex; align-items: center; gap: 20px; min-height: 36px; flex-wrap: wrap; }
.announcement__item { display: inline-flex; align-items: center; gap: 7px; color: #d4d4d4; }
.announcement__spacer { margin-left: auto; }

.site-header { background: #0a0a0a; color: #fff; }
.site-header__inner {
  display: flex; align-items: center; gap: 28px;
  max-width: var(--page-width, 1200px); margin: 0 auto; padding: 16px var(--pad);
}
.site-header__logo { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.site-logo { max-height: 40px; width: auto; }
.site-nav { display: flex; gap: 22px; font-size: 14px; font-weight: 500; }
.site-nav a { color: #d4d4d4; }
.site-nav a:hover { color: #fff; }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.cart-link { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }

/* ============================ Hero ============================ */
/*
 * Koyu, köşeli, üstünde geometrik katman. Referanstaki hero'nun yaptığı iş: fotoğrafı
 * doğrudan göstermek yerine üstüne çizim geçirmek — ürünün değil, MÜHENDİSLİĞİN resmi.
 * Görsel yoksa desen tek başına ayakta duruyor, boş bir kutu kalmıyor.
 */
.hero {
  position: relative; background: #0a0a0a; color: #fff; overflow: hidden;
  border-bottom: 1px solid #1f1f1f;
  /*
   * Sola dayalı, ve bunu AÇIKÇA yazmak gerekiyor: devralınan taban `.hero`yu ortalıyor ve
   * benim kuralımda bu özellik bulunmadığı için ortalama sağ kalıyordu. Endüstriyel hero
   * sola dayanır — göz metni soldan tarar, ortalanmış paragraf her satırda yeniden yer arar.
   */
  text-align: left;
  padding: 0;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
/* Köşegen kesik: sağ üstten inen açı, sayfaya bir yön veriyor. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, #0a0a0a 0%, rgba(10,10,10,.92) 42%, rgba(10,10,10,.35) 100%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.028) 22px 23px);
}
.hero__inner {
  position: relative; z-index: 1;
  max-width: var(--page-width, 1200px); margin: 0 auto; padding: 84px var(--pad);
  min-height: 420px; display: flex; flex-direction: column; justify-content: center;
}
.hero__body { max-width: 620px; }
.hero h1 { color: #fff; }
.hero p { color: #b5b5b5; font-size: 17px; max-width: 52ch; }
.hero .eyebrow { color: #737373; }
.hero .btn { background: #fff; color: #0a0a0a; border-color: #fff; }
.hero .btn:hover { background: #e5e5e5; }
/* Hero altındaki yetkinlik şeridi: ne sattığımızı başlıktan önce söylüyor. */
.hero__strip {
  position: relative; z-index: 1; border-top: 1px solid #1f1f1f;
  max-width: var(--page-width, 1200px); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.hero__strip span {
  padding: 16px var(--pad); font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: #a3a3a3;
  border-left: 1px solid #1f1f1f;
}
.hero__strip span:first-child { border-left: 0; }

/* ============================ Sayılar ============================ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border: 1px solid var(--line); }
.stat {
  padding: 30px 24px; border-left: 1px solid var(--line); background: var(--bg);
}
.stat:first-child { border-left: 0; }
.stat__n {
  font-family: var(--font-display); font-weight: 700; font-size: 40px;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.stat__k { font-size: 13.5px; color: var(--ink-muted); margin-top: 8px; }

/* ============================ Ürün kartı ============================ */
/*
 * B2B kartı tüketici kartından farklı: önce MARKA, sonra ad, sonra stok, en sonda fiyat.
 * Sanayi alıcısı markayı bilerek geliyor ("Siemens S7-1200"), estetik seçim yapmıyor.
 * Kart çerçeveli ve gölgesiz; ızgara, kenarlıkların üst üste binmesiyle tek bir tablo gibi
 * okunuyor — dağınık kutular değil.
 */
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0; border: 1px solid var(--line); border-right: 0; border-bottom: 0;
}
.product-card {
  display: flex; flex-direction: column; background: var(--bg);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 0; transition: background .14s;
}
.product-card:hover { background: var(--surface); text-decoration: none; }
.product-card__media {
  aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden;
  border-bottom: 1px solid var(--line);
}
/*
 * `contain`, `cover` değil: teknik üründe kadraj kırpmak parçanın bir kısmını gizler ve
 * alıcı tam da o ayrıntıya bakıyor. `mix-blend-mode: multiply` denendi ve kaldırıldı —
 * beyaz zeminli katalog çekiminde güzel duruyor ama koyu zeminli bir fotoğrafı yüzeye
 * boyuyor; kazandırdığından fazlasını götüren bir süs.
 */
.product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.product-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.product-card__brand {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px;
}
.product-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin: 0 0 10px; }
.product-card__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

/* Stok: temanın tek rengi. Bilgi taşıyor, süs değil. */
.stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; }
.stock::before { content: ""; width: 7px; height: 7px; background: currentColor; }
.stock--in { color: var(--accent); }
.stock--out { color: var(--ink-faint); }

/*
 * Fiyat MÜREKKEP renginde, vurgu renginde değil.
 *
 * Devralınan kural fiyatı `--color-accent` ile boyuyordu; bu temada o değişken stok yeşili.
 * Sonuç, sepette yeşil bir fiyattı — yani "yeşil = stok bilgisi" kuralını kendi elimle
 * bozmuş oluyordum. Bir rengi bilgiye ayırmanın bedeli, onu başka hiçbir yerde
 * kullanmamaktır.
 */
.price { font-family: var(--font-mono); font-weight: 500; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); }
.price--sale { display: inline-flex; align-items: baseline; gap: 8px; }
.price__was { color: var(--ink-faint); font-size: 13px; }
.price__badge {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: var(--ink); color: #fff; padding: 2px 6px;
}

/* ============================ Markalar ============================ */
/*
 * Marka duvarı yalnız yazıyla. Logoları toplamak tüccarın işi ve çoğu zaman yapmıyor;
 * eksik logolarla delik deşik bir ızgara, hiç logo olmamasından kötü görünüyor.
 */
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.brands__item {
  padding: 22px 16px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.02em;
  color: var(--ink-muted); transition: color .14s, background .14s;
}
.brands__item:hover { color: var(--ink); background: var(--surface); text-decoration: none; }

/* ============================ Hizmet / neden biz ============================ */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.tile { padding: 26px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* Numara ikon yerine geçiyor: sıralı, tarafsız, hiçbir ikon kütüphanesine bağlı değil. */
.tile__n { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; }
.tile h3 { margin: 10px 0 8px; }
.tile p { color: var(--ink-muted); font-size: 14px; margin: 0; }

/* ============================ Ürün sayfası ============================ */
.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line); }
.product__media { background: var(--surface-2); border-right: 1px solid var(--line); padding: 28px; }
.product__media img { width: 100%; object-fit: contain; }
.product__info { padding: 32px; }
.product__brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.product__price { font-family: var(--font-mono); font-size: 26px; font-weight: 500; margin: 14px 0; }
.product__row { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.product__desc { color: var(--ink-muted); }

/* Teknik tablo — B2B'nin asıl içeriği. Zebra yok: çizgi zaten var, ikisi birden gürültü. */
.spec { width: 100%; border-collapse: collapse; font-size: 14px; margin: 20px 0; }
.spec th, .spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.spec th { width: 42%; color: var(--ink-muted); font-weight: 500; }
.spec td { font-family: var(--font-mono); font-size: 13.5px; }

/*
 * Ürün açıklamasının içindeki zengin içerik: `.specs`, `.feat`, `.desc-note`.
 *
 * Bu sınıfları tema üretmiyor — tüccarın açıklama HTML'i taşıyor ve veride zaten var.
 * Teknik özellik listesi B2B temasının en iyi basması gereken şey; stilsiz bırakılınca
 * "FrekansFMF çoklu · 4–45 kHz" diye yapışık okunuyordu, yani etiketle değer ayırt
 * edilemiyordu. Ürün sayfasını ölçerken yakalandı.
 */
.specs { list-style: none; margin: 16px 0; padding: 0; }
.specs li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
}
.specs li > span:first-child { color: var(--ink-muted); flex: 0 0 auto; }
/* Değer mono ve sağa dayalı: alt alta okunduğunda sütun oluşuyor, göz taramayı öyle yapıyor. */
.specs li > span:last-child { font-family: var(--font-mono); font-size: 13.5px; text-align: right; }

.feat { list-style: none; margin: 14px 0; padding: 0; }
.feat li { position: relative; padding: 4px 0 4px 18px; font-size: 14.5px; }
/* Madde işareti kare — bu temada hiçbir şey yuvarlak değil. */
.feat li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: var(--ink); }

.desc-note {
  border-left: 2px solid var(--ink); padding: 8px 0 8px 14px; margin: 16px 0;
  color: var(--ink-muted); font-size: 14px;
}

/* ============================ Form alanları ============================ */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field-help { font-size: 12.5px; color: var(--ink-muted); }
/*
 * Türü SAYARAK değil, DIŞLAYARAK seçiliyor.
 *
 * Önce `input[type="text"], input[type="email"], …` yazılmıştı ve hesap sayfasındaki
 * `<input name="name" required>` — type özniteliği olmayan — hiçbirine uymuyordu: aynı
 * formda 390px'lik alanların yanında 177px'lik bir alan duruyordu. Tür yazmadan input
 * koymak elle yazılmış işaretlemede yaygın; liste hep bir eksik kalır, dışlama kalmaz.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):not([type="color"]),
select, textarea {
  width: 100%; font: inherit; font-size: 14.5px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }

/* ============================ Sepet / ödeme ============================ */
.cart-table { width: 100%; border-collapse: collapse; }
.cart-table th { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-align: left; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.cart-table td { padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cart-table .right { text-align: right; }
.totals { margin-left: auto; max-width: 340px; border: 1px solid var(--line); padding: 20px; }
.totals__row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14.5px; }
.totals__row--sum { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-weight: 700; font-size: 17px; }
.qty { display: inline-flex; border: 1px solid var(--line); }
.qty button { border: 0; background: transparent; width: 32px; height: 32px; cursor: pointer; font: inherit; }
.qty span { width: 38px; display: grid; place-items: center; border-inline: 1px solid var(--line); font-family: var(--font-mono); font-size: 13.5px; }

/* ============================ Koleksiyon ============================ */
.coll-bar { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.coll-bar__count { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); }
.coll-sort { margin-left: auto; }
.coll-sort select { width: auto; }
.filters { border: 1px solid var(--line); padding: 18px; margin-bottom: 20px; }
.filters__group { margin-bottom: 14px; }
.filters__price { display: flex; gap: 10px; align-items: end; }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 30px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13.5px;
}
.pagination .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================ Blog / sayfa / hesap ============================ */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border: 1px solid var(--line); border-right: 0; border-bottom: 0; }
.blog-card { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: block; }
.blog-card:hover { background: var(--surface); text-decoration: none; }
.blog-card time { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); letter-spacing: .08em; }
.blog-card h3 { margin: 10px 0 8px; }
.blog-card p { color: var(--ink-muted); font-size: 14px; margin: 0; }
.article__body img { border: 1px solid var(--line); }
.page-content { max-width: 720px; }
.account { display: grid; gap: 24px; }

.image-with-text { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.image-with-text__content { padding: 36px; display: flex; flex-direction: column; justify-content: center; }
.image-with-text img { width: 100%; height: 100%; object-fit: cover; }
.rich-text__image { border: 1px solid var(--line); }

.empty { padding: 60px 24px; text-align: center; color: var(--ink-muted); border: 1px solid var(--line); }
.error { border: 1px solid #b91c1c; color: #b91c1c; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.notice { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }

/* ============================ Altbilgi ============================ */
/*
 * Altbilginin üst boşluğu YOK.
 *
 * 72px vardı ve son bölüm zeminli olduğunda (markalar duvarı gibi) arada öksüz bir beyaz
 * şerit bırakıyordu — nefes değil, boşluk gibi okunuyordu. Bölümlerin kendi 64px'lik dikey
 * dolgusu zaten var; koyu altbilginin içeriğe dayanması hem daha derli toplu hem de
 * tam genişlikte bir kapanış veriyor.
 */
.site-footer { background: #0a0a0a; color: #a3a3a3; font-size: 14px; margin-top: 0; }
.site-footer__inner {
  max-width: var(--page-width, 1200px); margin: 0 auto; padding: 48px var(--pad);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px;
}
.site-footer h4 { color: #fff; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--font-mono); font-weight: 500; margin-bottom: 12px; }
.site-footer a:hover { color: #fff; }
.site-footer__contact { line-height: 1.9; }
.site-footer__bottom {
  border-top: 1px solid #1f1f1f; font-size: 12.5px; color: #737373;
  padding: 18px var(--pad); max-width: var(--page-width, 1200px); margin: 0 auto;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ============================ Dar ekran ============================ */
@media (max-width: 860px) {
  .product, .image-with-text { grid-template-columns: 1fr; }
  .product__media { border-right: 0; border-bottom: 1px solid var(--line); }
  .site-nav { display: none; }
  .hero__inner { padding: 56px var(--pad); min-height: 320px; }
  /*
   * Dar ekranda kenarlık ızgarası bozuluyor: tek sütunda sağ kenarlık artık sütunu değil
   * kutuyu çiziyor. Izgaranın kendi çerçevesine bırakıp hücreninkini kaldırmak, üst üste
   * binen çift çizgiyi önlüyor.
   */
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat { border-top: 1px solid var(--line); }
  .stats > .stat:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 560px) {
  /*
   * Dar başlık: 375px'te logo ve "Sepet (1)" ikişer satıra kırılıyor, başlık iki kat
   * yükseliyordu — yapışkan bir başlıkta bu, ekranın üstünden kalıcı olarak yer çalmak
   * demek. Küçült ve kırılmayı engelle; boşluğu da daralt.
   */
  .site-header__inner { gap: 12px; padding-inline: 16px; }
  .site-header__logo { font-size: 17px; white-space: nowrap; }
  .site-header__actions { gap: 12px; font-size: 13px; }
  .cart-link, .site-header__actions > a { white-space: nowrap; }
  .site-logo { max-height: 30px; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-left: 0; }
  .totals { max-width: none; }
}

/* ==================================================================
 * Modernleştirme katmanı
 *
 * Kural: SÜS EKLEME, dili derinleştir. Gölge, gradyan yığını ve yuvarlatma bu temanın
 * kimliğini bozar. Bunun yerine teknik çizimin kendi sözlüğü kullanılıyor — köşe ayraçları,
 * blueprint ızgarası, ölçü çizgisi — ve hareket bilgi taşıyacak kadar, dikkat çekecek kadar
 * değil.
 * ================================================================== */

/* --- Köşe ayracı: teknik çizimde kadrajı işaretleyen şey. Yuvarlatmanın yerini tutuyor. --- */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--ink); opacity: .28; transition: opacity .18s;
}
.bracket::before { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.bracket::after { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.bracket:hover::before, .bracket:hover::after { opacity: 1; }

/* --- Bölüm başlığına ölçü çizgisi: mikro etiketin üstünde kısa, kalın bir iz. --- */
.eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px;
  background: var(--ink); vertical-align: middle; margin-right: 10px;
  transform: translateY(-1px);
}
.hero .eyebrow::before { background: #fff; opacity: .55; }

/* --- Hero: blueprint ızgarası + köşe ayraçları + derinlik --- */
.hero::after {
  background:
    /* ızgara — çok soluk, teknik kağıt hissi */
    repeating-linear-gradient(to right, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 64px),
    /* okunabilirlik için metnin arkasını koyulaştıran geçiş */
    linear-gradient(105deg, #0a0a0a 0%, rgba(10,10,10,.94) 46%, rgba(10,10,10,.42) 100%),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.022) 22px 23px);
}
.hero__inner { min-height: 500px; }
.hero h1 { font-size: clamp(38px, 6vw, 68px); letter-spacing: -0.025em; }
/* Hero kadrajının köşe işaretleri — sayfanın "çizim" olduğunu söyleyen detay. */
.hero__inner::before, .hero__inner::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: rgba(255,255,255,.42);
}
.hero__inner::before { top: 30px; left: var(--pad); border-top: 2px solid; border-left: 2px solid; }
.hero__inner::after { bottom: 30px; right: var(--pad); border-bottom: 2px solid; border-right: 2px solid; }

/* --- Ürün kartı: hareket bilgi taşıyor — "bu tıklanabilir" --- */
.product-card { position: relative; transition: background .16s, border-color .16s; }
.product-card__media img { transition: transform .32s cubic-bezier(.2,.7,.3,1); }
.product-card:hover .product-card__media img { transform: scale(1.045); }
.product-card:hover { background: var(--bg); }
/* Üst kenarda ince bir iz: kart "seçili" oluyor, kutu büyümüyor — ızgara bozulmasın. */
.product-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.product-card:hover::after { transform: scaleX(1); }
.product-card__title { transition: opacity .16s; }

/* --- Sayılar: rakamın altına ölçü çizgisi --- */
.stat { position: relative; overflow: hidden; }
.stat__n { position: relative; display: inline-block; padding-bottom: 8px; }
.stat__n::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--ink);
}

/* --- Marka duvarı: üzerine gelince kutu doluyor --- */
.brands__item { position: relative; }
.brands__item::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--ink);
  transform: scaleX(0); transition: transform .2s;
}
.brands__item:hover::after { transform: scaleX(1); }

/* --- Kutucuklar: numara vurgulu, üzerine gelince zemin --- */
.tile { transition: background .16s; }
.tile:hover { background: var(--surface); }
.tile__n { font-weight: 500; color: var(--ink); opacity: .38; }

/* --- Düğme: dolgu soldan geliyor, kutu yerinde kalıyor --- */
.btn { position: relative; overflow: hidden; }
.btn-secondary { transition: color .18s; }
.btn-secondary::before {
  content: ""; position: absolute; inset: 0; background: var(--primary); z-index: -1;
  transform: scaleX(0); transform-origin: left; transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.btn-secondary:hover::before { transform: scaleX(1); }

/* --- Yapışkan başlık: kaydırınca inceliyor --- */
.site-header { position: sticky; top: 0; z-index: 40; transition: padding .2s; }
.site-header__inner { transition: padding .2s; }
body.is-scrolled .site-header__inner { padding-top: 10px; padding-bottom: 10px; }
body.is-scrolled .site-header { border-bottom: 1px solid #262626; }

/* --- Odak halkası: klavyeyle gezen görebilsin --- */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.site-header :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

/*
 * --- Giriş hareketi ---
 * `.reveal` sınıfını motion.js ekliyor; betik çalışmazsa hiçbir şey gizli KALMIYOR, çünkü
 * başlangıç durumu betik tarafından veriliyor. Animasyonu CSS'te başlatıp JS ile açmak,
 * betiği engellenen ziyaretçiye boş bir sayfa gösterirdi — referans aldığımız sitede tam
 * olarak bu oluyor ve ekran görüntüsü alırken bomboş çıkıyordu.
 */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
}