/* ============================================================
   Türk Bürosan — MODERN MİNİMAL / GRID
   Saf siyah-beyaz, kalın ızgara çizgileri, numaralı bölümler,
   dev geometrik tipografi (Archivo). Keskin köşeler.
   style.css'ten SONRA yüklenir; unlayered => @layer'ları ezer.
   ============================================================ */

:root {
  --radius: 0px;

  --background: #ffffff;
  --foreground: #0a0a0a;
  --surface: #ffffff;
  --surface-2: #f4f4f4;
  --card: #ffffff;
  --card-foreground: #0a0a0a;

  --muted: #f4f4f4;
  --muted-foreground: #6a6a6a;

  --border: #0a0a0a;          /* SİYAH ızgara çizgileri */
  --input: #0a0a0a;

  /* "gold" tokenleri siyaha eşlendi (vurgu = siyah) */
  --gold: #0a0a0a;
  --gold-bright: #0a0a0a;
  --gold-soft: #333333;
  --gold-deep: #000000;

  --primary: #0a0a0a;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f4;
  --secondary-foreground: #0a0a0a;
  --accent: #f4f4f4;
  --accent-foreground: #0a0a0a;
  --ring: #0a0a0a;

  --gradient-gold: linear-gradient(#0a0a0a, #0a0a0a);
  --gradient-veil: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 55%, rgba(0,0,0,.65));
  --shadow-lux: none;
  --shadow-gold: none;

  --ink: #0a0a0a;
  --line: #0a0a0a;

  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
}

/* ---- Temel tipografi ---- */
body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); }
h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: -.02em; }
.font-display { font-family: var(--font-display) !important; }

/* Dev başlık ve bölüm başlığı ölçekleri (Tailwind'den bağımsız) */
.tb-display { font-family: var(--font-display); text-transform: uppercase; font-weight: 800; letter-spacing: -.02em; line-height: .92; }
.tb-h1 { font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: .9; }
.tb-h2 { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: .98; }
.tb-num { font-family: var(--font-display); font-weight: 800; line-height: 1; }

/* ---- Eyebrow / numaralı etiket ---- */
.eyebrow {
  color: #0a0a0a; text-transform: uppercase; font-family: var(--font-sans);
  letter-spacing: .26em; font-size: .7rem; font-weight: 600;
}

/* ---- Butonlar: kare, dolu siyah ---- */
.bg-gold-gradient {
  background-image: var(--gradient-gold) !important;
  background-color: #0a0a0a;
  color: #fff;
  border-radius: 0 !important;
  box-shadow: none !important;
}
a.bg-gold-gradient, button.bg-gold-gradient { transition: background-color .2s, color .2s; }
a.bg-gold-gradient:hover, button.bg-gold-gradient:hover { background-color: #333; opacity: 1; }
.tracking-\[0\.2em\] { border-radius: 0 !important; }

/* ---- Kartlar: düz, siyah çerçeve, köşesiz ---- */
.lux-card { background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: none; transition: none; }
.lux-card-hover:hover { border-color: var(--line); box-shadow: 8px 8px 0 0 #0a0a0a; transform: none; }

/* ---- Girişler ---- */
.border-input { border-radius: 0; background: #fff; border-color: #0a0a0a; }

/* ============================================================
   IZGARA SİSTEMİ — çizgiler gap-px + siyah zemin ile oluşur
   ============================================================ */
.tb-grid { background: #0a0a0a; }         /* hücreler arası 1px siyah çizgi */
.tb-cell { background: #fff; }

/* ============================================================
   HEADER (minimal, çerçeveli)
   ============================================================ */
.tb-topbar { background: #0a0a0a; color: #bdbdbd; font-size: .72rem; letter-spacing: .04em; }
.tb-topbar a { color: #bdbdbd; transition: color .2s; }
.tb-topbar a:hover { color: #fff; }
.tb-topbar .tb-dot { color: #555; }

.tb-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid #0a0a0a;
}
.tb-brand { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.tb-navlink { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; position: relative; }
.tb-navlink .tb-navnum { font-size: .58rem; color: #9a9a9a; margin-right: .35rem; vertical-align: .1em; }
.tb-navlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -22px; height: 2px; background: #0a0a0a; transition: right .3s ease; }
.tb-navlink:hover::after, .tb-navlink[data-active="1"]::after { right: 0; }

/* ============================================================
   HERO (2 hücreli ızgara: dev tipografi | görsel)
   ============================================================ */
.tb-hero3 { border-bottom: 1px solid #0a0a0a; }
.tb-hero3__text { color: #4a4a4a; }
.tb-hero3__media { position: relative; overflow: hidden; min-height: 340px; }
.tb-hero3__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Kayan bant (özellikler) */
.tb-strip__item { padding: 1.4rem 1.5rem; }
.tb-strip__k { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.tb-strip__v { color: #6a6a6a; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; margin-top: .35rem; }

/* ============================================================
   NEDEN BİZ — numaralı ızgara hücreleri
   ============================================================ */
.tb-why { padding: 2.25rem 1.75rem; min-height: 220px; display: flex; flex-direction: column; }
.tb-why__n { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: #0a0a0a; }
.tb-why__t { margin-top: 1.5rem; font-weight: 700; font-size: 1.05rem; }
.tb-why__d { margin-top: .6rem; color: #6a6a6a; font-size: .875rem; line-height: 1.6; }

/* ============================================================
   ÜRÜN HÜCRESİ (flush grid)
   ============================================================ */
.tb-prod { display: block; background: #fff; }
.tb-prod__img { position: relative; overflow: hidden; border-bottom: 1px solid #0a0a0a; }
.tb-prod__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s ease; }
.tb-prod:hover .tb-prod__img img { transform: scale(1.05); }
.tb-prod__info { padding: 1.15rem 1.25rem; transition: background-color .25s, color .25s; }
.tb-prod:hover .tb-prod__info { background: #0a0a0a; color: #fff; }
.tb-prod:hover .tb-prod__info .tb-prod__cat,
.tb-prod:hover .tb-prod__info .tb-prod__inc { color: #cfcfcf; }
.tb-prod__cat { font-size: .62rem; text-transform: uppercase; letter-spacing: .18em; color: #8a8a8a; }
.tb-prod__name { margin-top: .35rem; font-weight: 700; font-size: .98rem; }
.tb-prod__row { margin-top: .9rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tb-prod__price { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
.tb-prod__inc { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; display: inline-flex; align-items: center; gap: .3rem; }
.tb-badge { position: absolute; top: 0; left: 0; z-index: 2; background: #0a0a0a; color: #fff; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .4rem .7rem; }

/* ============================================================
   KATEGORİ HÜCRESİ
   ============================================================ */
.tb-cat { position: relative; display: block; overflow: hidden; aspect-ratio: 3/2; background: #fff; }
.tb-cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%) contrast(1.05); transition: transform .6s ease, filter .4s ease; }
.tb-cat:hover img { transform: scale(1.05); filter: grayscale(0%); }
.tb-cat__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.8) 100%); }
.tb-cat__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; }
.tb-cat__name { color: #fff; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; letter-spacing: -.01em; }
.tb-cat__meta { color: #d0d0d0; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; margin-top: .3rem; display: inline-flex; align-items: center; gap: .4rem; }

/* ============================================================
   SİYAH CTA BANDI
   ============================================================ */
.tb-cta { background: #0a0a0a; color: #fff; }
.tb-cta__btn { background: #fff; color: #0a0a0a; border-radius: 0; }

/* ============================================================
   YÜZEN WHATSAPP
   ============================================================ */
.tb-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; background: #0a0a0a; color: #fff; border: 1px solid #0a0a0a; transition: transform .2s; }
.tb-fab:hover { transform: translateY(-3px); }

/* ============================================================
   FOOTER (siyah)
   ============================================================ */
.tb-footer { background: #0a0a0a; color: #b0b0b0; border-top: 1px solid #0a0a0a; }
.tb-footer .text-muted-foreground { color: #9a9a9a; }
.tb-footer .text-foreground { color: #fff; }
.tb-footer .eyebrow { color: #e2e2e2; }
.tb-footer .text-gold, .tb-footer a.hover\:text-gold:hover, .tb-footer .hover\:text-gold:hover { color: #fff; }
.tb-footer .text-gold-gradient { color: #fff !important; -webkit-text-fill-color: #fff; background: none; }
.tb-footer .border-border, .tb-footer .border-border\/70, .tb-footer .border-border\/60 { border-color: rgba(255,255,255,.16); }
.tb-footer .bg-surface { background: transparent; }

/* ---- page_hero (iç sayfalar) uyumu ---- */
.hairline { background-image: linear-gradient(90deg, #0a0a0a, #0a0a0a); }
.tb-kicker-line { height: 3px; width: 40px; background: #0a0a0a; }
.shadow-lux { box-shadow: none !important; }

/* border-x guvenli tanim (derlemede olmayabilir) */
.border-x { border-left: 1px solid var(--border); border-right: 1px solid var(--border); }