/* ============================================================
   LIVING-METAL DESIGN SYSTEM  —  the locked visual language.
   Build the whole site in THIS language. Pair with metal.js.
   Concept: the interface IS polished hand-hammered copper. Real
   copper-texture surfaces, a specular glint that tracks the pointer,
   a sheen that drifts on scroll, hammered "seam" dividers between
   sections, and headings pressed/engraved into the metal.
   NO decorative SVG. Icons/bullets = CSS. Text stays legible by
   sitting on a darkened tone layer over the copper.
   ============================================================ */

:root {
  /* tones */
  --espresso:   #1a110a;   /* near-black warm base            */
  --espresso-2: #241812;   /* raised panel base               */
  --copper-lo:  #7c3f20;   /* shadow copper                   */
  --copper:     #b5622f;   /* core copper                     */
  --copper-hi:  #e0985d;   /* lit copper                      */
  --glow:       #f6c891;   /* specular highlight / emphasis   */
  --tin:        #cdc6b6;   /* tinned silver accent            */
  --cream:      #f3e7d6;   /* primary text on dark            */
  --cream-soft: #cbb9a3;   /* secondary text on dark          */
  --ink:        #f3e7d6;

  /* texture files (generated) */
  --tex-copper: url("../images/doku-bakir.jpg");
  --tex-dark:   url("../images/doku-koyu.jpg");
  --tex-patina: url("../images/doku-patina.jpg");
  --tex-tin:    url("../images/doku-kalay.jpg");

  --mx: 50%; --my: -15%;  /* pointer glint position (set by metal.js) */
  --sheen: 0%;            /* scroll sheen position (set by metal.js)  */

  --radius: 4px;          /* ONE corner language, used everywhere     */
  --seam-h: 30px;
}

/* ---- Copper material surface -------------------------------------------
   .metal = a real hammered-copper surface. Its ::before darkens for text
   legibility; its ::after is the moving specular glint. Put content in a
   positioned child (z-index:1) or it inherits stacking fine (layers are -1). */
.metal {
  position: relative;
  isolation: isolate;
  background: #3a2415 var(--tex-copper) center / cover;
  color: var(--cream);
}
.metal.metal--dark  { background-color:#241812; background-image: var(--tex-dark); }
.metal.metal--patina{ background-image: var(--tex-patina); }
.metal.metal--tin   { background-image: var(--tex-tin); color:#2a1c10; }

.metal::before {                    /* legibility tone (darken copper)     */
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(16,10,6,.62), rgba(16,10,6,.78));
}
.metal.metal--soft::before { background: linear-gradient(180deg, rgba(16,10,6,.30), rgba(16,10,6,.52)); }
.metal::after {                     /* moving specular glint               */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 60% at var(--mx) var(--my),
              rgba(255,232,196,.42), rgba(255,201,140,.14) 34%, transparent 62%);
  mix-blend-mode: soft-light;
  transition: background .12s linear;
}

/* ---- Hammered seam divider (between sections) --------------------------- */
.seam {
  height: var(--seam-h);
  background: #2a1a10 var(--tex-copper) center / cover;
  box-shadow: inset 0 7px 14px rgba(0,0,0,.55), inset 0 -7px 14px rgba(0,0,0,.55);
  position: relative;
}
.seam::after {                      /* a bright drifting line on the seam   */
  content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(246,200,145,.75) var(--sheen), transparent);
}

/* ---- Headings pressed into metal --------------------------------------- */
.emboss {
  color: var(--glow);
  text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 -1px 0 rgba(255,255,255,.10);
  letter-spacing: .2px;
}
.engrave {                          /* darker "stamped" label               */
  color: var(--copper-hi);
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
  text-transform: uppercase; letter-spacing: .18em; font-size: .78rem;
}

/* ---- Copper button (with live sheen) ----------------------------------- */
.btn-copper {
  position: relative; overflow: hidden; isolation:isolate;
  display: inline-flex; align-items: center; justify-content: center; gap:.5em;
  padding: .9em 1.5em; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--copper-lo), var(--copper) 45%, var(--copper-hi));
  color: #2a1408; font-weight: 700; text-decoration:none;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 22px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-copper::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(40% 60% at var(--mx) var(--my), rgba(255,255,255,.7), transparent 55%);
  mix-blend-mode: screen;
}
.btn-copper:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 12px 28px rgba(0,0,0,.42); }
.btn-copper:focus-visible { outline: 2px solid var(--glow); outline-offset: 2px; }

/* ghost button on dark */
.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.9em 1.4em; border-radius:var(--radius);
  border:1px solid rgba(246,200,145,.5); color:var(--cream); text-decoration:none; font-weight:600;
  transition: border-color .18s, background .18s;
}
.btn-ghost:hover { border-color: var(--glow); background: rgba(246,200,145,.08); }

/* ---- CSS bullet (no SVG) ------------------------------------------------ */
.dotlist { list-style:none; margin:0; padding:0; }
.dotlist li { position:relative; padding-left:1.4em; margin:.5em 0; }
.dotlist li::before {
  content:""; position:absolute; left:0; top:.55em; width:.5em; height:.5em; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--copper-hi), var(--copper-lo));
  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}