/* ============================================================
   Akgül Teknoloji — hazır tema demoları
   Ortak iskelet + 10 renk/tipografi paleti
   ============================================================ */

:root {
  --font-display: "Bricolage Grotesque", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "Consolas", monospace;
  --demo-bar: #0b0b26;
}

[data-theme="lila"] {
  --bg: #f8f5ff;
  --surface: #ffffff;
  --ink: #241a44;
  --muted: #5d5478;
  --line: #ded5f7;
  --line-strong: #bdb0ea;
  --soft: #ece6ff;
  --accent: #5b2bff;
  --accent-fg: #ffffff;
  --band: #241a44;
  --band-ink: #f8f5ff;
  --band-muted: #cdc4e8;
  --band-accent: #cdbfff;
  --band-line: rgba(255, 255, 255, .22);
  --radius: 22px;
  --radius-sm: 10px;
  --btn-radius: 999px;
  --head-font: var(--font-display);
  --head-weight: 700;
  --tilt: -1.2deg;
  --hero-grad: radial-gradient(760px 360px at 88% 4%, rgba(91, 43, 255, .10), transparent 70%);
  --media-grad: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .9) 0 9%, transparent 10%), linear-gradient(135deg, #d8ccff, #8b5cf6 55%, #5b2bff);
}

[data-theme="murekkep"] {
  --bg: #141417;
  --surface: #1d1d22;
  --ink: #f6f5ef;
  --muted: #b9b8b0;
  --line: #33333a;
  --line-strong: #4b4b54;
  --soft: #202026;
  --accent: #d4ff3f;
  --accent-fg: #161a08;
  --band: #d4ff3f;
  --band-ink: #151807;
  --band-muted: #41470f;
  --band-accent: #2c3306;
  --band-line: rgba(0, 0, 0, .22);
  --radius: 4px;
  --radius-sm: 2px;
  --btn-radius: 2px;
  --head-font: var(--font-serif);
  --head-weight: 400;
  --tilt: 1.2deg;
  --hero-grad: radial-gradient(640px 320px at 90% 0%, rgba(212, 255, 63, .08), transparent 70%);
  --media-grad: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px), linear-gradient(135deg, #2b2b31, #0e0e10);
}

[data-theme="vitrin"] {
  --bg: #fdf7ee;
  --surface: #fffaf3;
  --ink: #2a1c17;
  --muted: #6b5a51;
  --line: #e8d8c6;
  --line-strong: #d4bda4;
  --soft: #f6e7d8;
  --accent: #b0175f;
  --accent-fg: #ffffff;
  --band: #2a1c17;
  --band-ink: #fdf7ee;
  --band-muted: #d9c4b4;
  --band-accent: #f4c9a3;
  --band-line: rgba(255, 255, 255, .22);
  --radius: 14px;
  --radius-sm: 8px;
  --btn-radius: 999px;
  --head-font: var(--font-display);
  --head-weight: 700;
  --tilt: 1deg;
  --hero-grad: radial-gradient(680px 340px at 90% 6%, rgba(176, 23, 95, .08), transparent 70%);
  --media-grad: linear-gradient(135deg, #f1ddc6, #e6c9ac 60%, #dbb98f);
}

[data-theme="nane"] {
  --bg: #f1fbf6;
  --surface: #ffffff;
  --ink: #102a22;
  --muted: #4c6b61;
  --line: #cfe8dd;
  --line-strong: #a9d3c3;
  --soft: #e0f5ec;
  --accent: #087a5f;
  --accent-fg: #ffffff;
  --band: #102a22;
  --band-ink: #f1fbf6;
  --band-muted: #b9d6cb;
  --band-accent: #a8e8d2;
  --band-line: rgba(255, 255, 255, .22);
  --radius: 18px;
  --radius-sm: 10px;
  --btn-radius: 999px;
  --head-font: var(--font-display);
  --head-weight: 700;
  --tilt: -1deg;
  --hero-grad: radial-gradient(680px 340px at 86% 8%, rgba(8, 122, 95, .09), transparent 70%);
  --media-grad: linear-gradient(135deg, #d5f0e3, #b7e0cd 60%, #9ed2ba);
}

[data-theme="gece"] {
  --bg: #0b1120;
  --surface: #111b2e;
  --ink: #eaf2ff;
  --muted: #a8bdd8;
  --line: #24344f;
  --line-strong: #3b5276;
  --soft: #101a2c;
  --accent: #57e0ff;
  --accent-fg: #06121c;
  --band: #57e0ff;
  --band-ink: #06121c;
  --band-muted: #0d3f4d;
  --band-accent: #072430;
  --band-line: rgba(0, 0, 0, .24);
  --radius: 16px;
  --radius-sm: 8px;
  --btn-radius: 6px;
  --head-font: var(--font-display);
  --head-weight: 700;
  --tilt: 1.4deg;
  --hero-grad: radial-gradient(720px 360px at 90% 0%, rgba(87, 224, 255, .12), transparent 70%);
  --media-grad: repeating-linear-gradient(90deg, rgba(87, 224, 255, .09) 0 1px, transparent 1px 22px), linear-gradient(135deg, #162a45, #070d18);
}

[data-theme="kum"] {
  --bg: #fbf3e7;
  --surface: #fffcf6;
  --ink: #2b2116;
  --muted: #6b5a48;
  --line: #e7d5bd;
  --line-strong: #d2b894;
  --soft: #f6e4cd;
  --accent: #a8461c;
  --accent-fg: #ffffff;
  --band: #2b2116;
  --band-ink: #fbf3e7;
  --band-muted: #dccab8;
  --band-accent: #f2cfa4;
  --band-line: rgba(255, 255, 255, .22);
  --radius: 16px;
  --radius-sm: 8px;
  --btn-radius: 8px;
  --head-font: var(--font-display);
  --head-weight: 700;
  --tilt: -1.4deg;
  --hero-grad: radial-gradient(680px 340px at 88% 4%, rgba(176, 74, 31, .09), transparent 70%);
  --media-grad: linear-gradient(135deg, #f2ddc0, #e4c9a4 60%, #d6b384);
}

[data-theme="zeytin"] {
  --bg: #f7f4e8;
  --surface: #fffdf6;
  --ink: #232817;
  --muted: #5d6248;
  --line: #dedcc4;
  --line-strong: #c3c0a0;
  --soft: #e8e6cf;
  --accent: #4a5d23;
  --accent-fg: #ffffff;
  --band: #232817;
  --band-ink: #f7f4e8;
  --band-muted: #cfd0b8;
  --band-accent: #d8ddb2;
  --band-line: rgba(255, 255, 255, .2);
  --radius: 20px;
  --radius-sm: 10px;
  --btn-radius: 999px;
  --head-font: var(--font-serif);
  --head-weight: 400;
  --tilt: -1deg;
  --hero-grad: radial-gradient(680px 340px at 86% 10%, rgba(74, 93, 35, .10), transparent 70%);
  --media-grad: radial-gradient(circle at 50% 48%, #f7f4e8 0 30%, #d9d7b4 31% 46%, #a9ac7d 47% 62%, transparent 63%), linear-gradient(135deg, #e8e6cf, #7d8452);
}

[data-theme="kobalt"] {
  --bg: #f2f5ff;
  --surface: #ffffff;
  --ink: #0b1638;
  --muted: #4f5a7a;
  --line: #d5dcf5;
  --line-strong: #aebbea;
  --soft: #e4eaff;
  --accent: #1d3fd8;
  --accent-fg: #ffffff;
  --band: #0b1638;
  --band-ink: #f2f5ff;
  --band-muted: #b5c3e8;
  --band-accent: #bcc9ff;
  --band-line: rgba(255, 255, 255, .2);
  --radius: 6px;
  --radius-sm: 3px;
  --btn-radius: 3px;
  --head-font: var(--font-display);
  --head-weight: 800;
  --tilt: 1.6deg;
  --hero-grad: radial-gradient(700px 360px at 92% 0%, rgba(29, 63, 216, .10), transparent 70%);
  --media-grad: repeating-linear-gradient(135deg, #c8ff3d 0 8px, transparent 8px 46px), linear-gradient(135deg, #1d3fd8, #0b1638);
}

[data-theme="seftali"] {
  --bg: #fff5f0;
  --surface: #fffaf7;
  --ink: #3a1f24;
  --muted: #75565c;
  --line: #f0d8d0;
  --line-strong: #dfb8ac;
  --soft: #ffe1d6;
  --accent: #b23a5b;
  --accent-fg: #ffffff;
  --band: #3a1f24;
  --band-ink: #fff5f0;
  --band-muted: #e4c9c4;
  --band-accent: #ffcabe;
  --band-line: rgba(255, 255, 255, .22);
  --radius: 26px;
  --radius-sm: 14px;
  --btn-radius: 999px;
  --head-font: var(--font-serif);
  --head-weight: 400;
  --tilt: -1.6deg;
  --hero-grad: radial-gradient(680px 360px at 88% 4%, rgba(178, 58, 91, .09), transparent 70%);
  --media-grad: radial-gradient(circle at 30% 30%, #fff7f2 0 18%, transparent 19%), linear-gradient(135deg, #ffd9cd, #f0b8a6 60%, #e29b86);
}

[data-theme="grafit"] {
  --bg: #f4f4f2;
  --surface: #ffffff;
  --ink: #161616;
  --muted: #565650;
  --line: #cfcfca;
  --line-strong: #a8a8a0;
  --soft: #e9e9e5;
  --accent: #161616;
  --accent-fg: #ffffff;
  --band: #161616;
  --band-ink: #f4f4f2;
  --band-muted: #c7c7c1;
  --band-accent: #d8d8d2;
  --band-line: rgba(255, 255, 255, .22);
  --radius: 0;
  --radius-sm: 0;
  --btn-radius: 0;
  --head-font: var(--font-serif);
  --head-weight: 400;
  --tilt: 0deg;
  --hero-grad: repeating-linear-gradient(0deg, rgba(22, 22, 22, .04) 0 1px, transparent 1px 64px);
  --media-grad: repeating-linear-gradient(135deg, rgba(22, 22, 22, .16) 0 1px, transparent 1px 12px), linear-gradient(135deg, #e9e9e5, #cfcfca);
}

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

* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3 { font-weight: var(--head-weight); }
::selection { background: var(--accent); color: var(--accent-fg); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 13px;
  font-weight: 600;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.wrap {
  width: min(calc(100% - 40px), 1160px);
  margin-inline: auto;
}

/* Demo şeridi */

.demo-bar {
  background: var(--demo-bar);
  color: #f4f2ff;
  font-size: 11.5px;
}
.demo-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 9px 0;
}
.demo-bar__tag {
  padding: 4px 8px;
  border-radius: 999px;
  background: #d4ff3f;
  color: #10122b;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.demo-bar strong { font-size: 12px; letter-spacing: -.01em; }
.demo-bar__note { color: #c9c5e6; }
.demo-bar__links {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.demo-bar a { color: #f4f2ff; text-decoration: underline; text-underline-offset: 3px; }
.demo-bar a:hover { color: #d4ff3f; }
.demo-bar__cta {
  padding: 6px 12px;
  border-radius: 999px;
  background: #d4ff3f;
  color: #10122b !important;
  text-decoration: none !important;
  font-weight: 600;
}
.demo-bar__cta:hover { background: #e4ff8a; }

/* Üst menü */

.topnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topnav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 68px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
  font-family: var(--head-font);
  font-size: 17px;
  font-weight: 700;
}
.brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--head-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.brand__name small {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
}
.nav a { color: var(--muted); }
.nav a:hover { color: var(--accent); }
.topnav__cta { margin-left: 2px; }
.navtoggle {
  display: none;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--btn-radius);
  font-size: 12px;
  font-weight: 600;
}

/* Butonlar */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 11.5px; }

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 8vw, 96px) 0 clamp(52px, 7vw, 84px);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-grad);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(32px, 5vw, 68px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hero h1 {
  max-width: 15ch;
  margin-top: 14px;
  font-family: var(--head-font);
  font-weight: var(--head-weight);
  font-size: clamp(2.7rem, 5.8vw, 4.5rem);
  line-height: .99;
  letter-spacing: -.04em;
}
.hero h1 em,
.section-head h2 em,
.about__body h2 em,
.cta h2 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.lede {
  max-width: 52ch;
  margin-top: 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hero__ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 26px;
  font-size: 11.5px;
  color: var(--muted);
}
.hero__ticks li::before {
  content: "✓";
  margin-right: 6px;
  color: var(--accent);
  font-weight: 700;
}

/* Mini önizleme */

.hero__visual { position: relative; }
.preview {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 42px 80px -50px rgba(0, 0, 0, .55);
  transform: rotate(var(--tilt));
}
.preview__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.preview__bar i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.preview__bar i:nth-child(1) { background: var(--accent); }
.preview__bar span {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .04em;
  color: var(--muted);
}
.preview__body { padding: 16px 18px 20px; }
.preview__nav {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  font-weight: 600;
}
.preview__nav b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: calc(var(--radius-sm) * .8);
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 10px;
}
.preview__links { display: flex; gap: 4px; margin-left: auto; }
.preview__links i { width: 16px; height: 3px; border-radius: 2px; background: var(--line); }
.preview__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding-top: 16px;
}
.preview__hero small {
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.preview__hero strong {
  font-family: var(--head-font);
  font-weight: var(--head-weight);
  font-size: clamp(18px, 2.4vw, 26px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.preview__hero em { font-family: var(--font-serif); font-style: italic; color: var(--accent); }
.preview__btn {
  display: inline-flex;
  margin-top: 3px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 7.5px;
  font-weight: 600;
}
.preview__media {
  height: clamp(90px, 13vw, 150px);
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .55);
  background: var(--media-grad);
}
.hero__chip {
  position: absolute;
  left: -16px;
  bottom: -16px;
  display: flex;
  flex-direction: column;
  padding: 9px 13px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .55);
}
.hero__chip b { font-size: 11px; line-height: 1.1; }
.hero__chip span { font-family: var(--font-mono); font-size: 7.5px; opacity: .85; }

/* Orta hizalı hero */

[data-layout="center"] .hero__inner { display: block; }
[data-layout="center"] .hero__copy {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
}
[data-layout="center"] .hero h1 {
  max-width: none;
  margin-inline: auto;
  font-size: clamp(3rem, 7vw, 5.2rem);
}
[data-layout="center"] .lede { margin-inline: auto; }
[data-layout="center"] .hero__actions,
[data-layout="center"] .hero__ticks { justify-content: center; }
[data-layout="center"] .hero__visual {
  max-width: 720px;
  margin: clamp(36px, 5vw, 56px) auto 0;
}

/* Şerit */

.strip {
  background: var(--soft);
  border-block: 1px solid var(--line);
}
.strip__inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.strip__item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 18px 22px;
  border-left: 1px solid var(--line);
}
.strip__item:first-child { border-left: 0; padding-left: 0; }
.strip__no {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
}
.strip__label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Bölümler */

.section { padding: clamp(54px, 7vw, 88px) 0; }
.section--soft { background: var(--soft); border-block: 1px solid var(--line); }
.section[id] { scroll-margin-top: 84px; }
.section-head { max-width: 700px; margin-bottom: 32px; }
.section-head h2 {
  margin-top: 10px;
  font-family: var(--head-font);
  font-weight: var(--head-weight);
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.section-head p {
  max-width: 62ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.section-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition: transform .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); border-color: var(--accent); }
.card__no { font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.card h3 { font-family: var(--head-font); font-size: 19px; line-height: 1.2; letter-spacing: -.03em; }
.card p { font-size: 13px; line-height: 1.65; color: var(--muted); }
.card ul { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.card li::before { content: "—"; margin-right: 8px; color: var(--accent); }

.rows { border-top: 1px solid var(--line); }
.row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 20px;
  align-items: start;
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
}
.row__no { padding-top: 3px; font-family: var(--font-mono); font-size: 10px; color: var(--accent); }
.row h3 { font-family: var(--head-font); font-size: 19px; line-height: 1.25; letter-spacing: -.03em; }
.row p { max-width: 60ch; margin-top: 5px; font-size: 12.5px; line-height: 1.65; color: var(--muted); }
.row__meta {
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.works { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.work {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.work__media {
  display: flex;
  align-items: flex-end;
  height: 220px;
  padding: 14px;
  background: var(--work-grad, var(--media-grad));
}
.work__media span {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.work__body { padding: 16px 20px 22px; }
.work__body h3 { font-family: var(--head-font); font-size: 21px; letter-spacing: -.03em; }
.work__body p { margin-top: 5px; color: var(--muted); font-size: 12.5px; }

.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.product {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .7);
  background: var(--surface);
}
.product__thumb {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  aspect-ratio: 1 / 1;
  padding: 8px;
  background: var(--product-grad, var(--media-grad));
}
.product__thumb span {
  padding: 3px 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.product__body { padding: 12px 13px 15px; }
.product h3 { font-size: 13.5px; line-height: 1.3; letter-spacing: -.02em; }
.product p { margin-top: 2px; color: var(--muted); font-size: 10.5px; }
.product__quote {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
}
.product:nth-child(1) .product__thumb { background: linear-gradient(135deg, #f6d7c8, #e9b9a2); }
.product:nth-child(2) .product__thumb { background: linear-gradient(135deg, #e7ded0, #cbbba3); }
.product:nth-child(3) .product__thumb { background: linear-gradient(135deg, #e8c9b6, #c99a7c); }
.product:nth-child(4) .product__thumb { background: linear-gradient(135deg, #f3e4cf, #ddc19c); }

.menu-list { border-top: 1px solid var(--line); }
.menu-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--line-strong);
}
.menu-row h3 { font-family: var(--head-font); font-size: 18px; letter-spacing: -.02em; }
.menu-row p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.menu-row strong {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
}

.schedule { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.slot {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.slot > span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.slot h3 { margin-top: 8px; font-family: var(--head-font); font-size: 21px; letter-spacing: -.03em; }
.slot p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.slot b {
  display: block;
  margin-top: 16px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 9.5px;
  font-weight: 500;
  color: var(--muted);
}

.quote-list { border-top: 1px solid var(--line); }
.quote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.quote-row h3 { font-family: var(--head-font); font-size: 17px; letter-spacing: -.02em; }
.quote-row p { margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.quote-row strong { flex-shrink: 0; font-family: var(--font-mono); font-size: 11.5px; }

.quote-link {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 0;
  border-bottom: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.quote-link:hover { color: var(--ink); }
.product__quote.quote-link { margin-top: 8px; }
.quote-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.split-feature {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: start;
  gap: 24px;
}
.appointment {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 28px 60px -46px rgba(0, 0, 0, .45);
}
.appointment h3 { font-family: var(--head-font); font-size: 21px; letter-spacing: -.03em; }
.appointment > p { margin-top: 5px; color: var(--muted); font-size: 12.5px; }
.appointment__rows { display: flex; flex-direction: column; gap: 7px; margin: 18px 0; }
.appointment__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--soft);
  font-size: 11.5px;
}
.appointment__row span { color: var(--muted); }
.appointment .btn { width: 100%; }

.quote {
  padding: clamp(28px, 5vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.quote blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.55rem, 3.1vw, 2.3rem);
  line-height: 1.3;
  letter-spacing: -.02em;
}
.quote figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.note {
  margin-top: 18px;
  padding: 13px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--soft);
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}
.note strong { color: var(--ink); }

/* Hakkında */

.about {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  gap: clamp(28px, 4.5vw, 56px);
}
.about__media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.about__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about__media figcaption {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.about__body h2 {
  margin-top: 12px;
  font-family: var(--head-font);
  font-weight: var(--head-weight);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.about__body > p {
  max-width: 58ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.about__note {
  margin-top: 16px;
  padding-left: 13px;
  border-left: 2px solid var(--accent);
  font-size: 11.5px !important;
  line-height: 1.65 !important;
}
.about__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 22px;
  margin-top: 24px;
}
.about__facts > div {
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.about__facts dt {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.about__facts dd {
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* Galeri */

.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gallery__item {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .8);
  background: var(--surface);
}
.gallery__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .35s;
}
.gallery__item:hover img { transform: scale(1.025); }
.gallery__item figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
}
.gallery__item figcaption span {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--accent);
}

/* SSS */

.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  padding: 16px 0;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  color: var(--accent);
  transition: transform .2s;
}
.faq__item[open] summary { color: var(--accent); }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p {
  max-width: 68ch;
  padding: 0 0 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
}

/* Tema künyesi */

.spec {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.spec__box {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.spec__box > span {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}
.spec__box strong {
  display: block;
  margin-top: 8px;
  font-family: var(--head-font);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink);
}
.spec__box p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

[data-theme="grafit"] .spec__box { border-radius: 0; border-top: 2px solid var(--ink); }
[data-theme="kobalt"] .spec__box { border-top: 3px solid var(--accent); }
[data-theme="gece"] .spec__box > span,
[data-theme="gece"] .faq__item summary::after,
[data-theme="gece"] .gallery__item figcaption span { font-family: var(--font-mono); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips span {
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

/* CTA ve alt bilgi */

.cta {
  padding: clamp(40px, 6vw, 62px) 0;
  background: var(--band);
  color: var(--band-ink);
}
.cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.cta .eyebrow { color: var(--band-ink); opacity: .8; }
.cta h2 {
  margin-top: 10px;
  font-family: var(--head-font);
  font-size: clamp(1.75rem, 3.3vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}
.cta h2 em {
  color: var(--band-accent, var(--accent));
}
.cta p { max-width: 54ch; margin-top: 8px; color: var(--band-muted); font-size: 12.5px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cta .btn { background: var(--band-ink); color: var(--band); }
.cta .btn--ghost {
  background: transparent;
  color: var(--band-ink);
  border-color: var(--band-line);
}
.cta .btn--ghost:hover { border-color: var(--band-ink); color: var(--band-ink); }

.foot {
  padding: 26px 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.foot__inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--muted);
}
.foot strong { display: block; color: var(--ink); font-size: 12.5px; }
.foot p { margin-top: 3px; }
.foot__note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.foot a { text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: var(--accent); }

/* Tema karakterleri */

[data-theme="murekkep"] .brand__mark,
[data-theme="murekkep"] .preview__nav b { border-radius: 0; }
[data-theme="murekkep"] .card:hover { border-color: var(--accent); }
[data-theme="murekkep"] .work__media span { background: var(--accent); color: var(--accent-fg); }
[data-theme="murekkep"] .hero h1 { letter-spacing: -.02em; }

[data-theme="vitrin"] .eyebrow { letter-spacing: .12em; }
[data-theme="vitrin"] .preview__media { border-radius: 999px 999px var(--radius-sm) var(--radius-sm); }

[data-theme="nane"] .preview__media { border-radius: var(--radius) var(--radius) 999px 999px; }
[data-theme="nane"] .card { border-radius: 22px; }

[data-theme="gece"] .preview__hero small,
[data-theme="gece"] .eyebrow,
[data-theme="gece"] .strip__no { font-family: var(--font-mono); }
[data-theme="gece"] .preview__media { border-radius: 4px; }
[data-theme="gece"] .row__meta { border-radius: 3px; }

[data-theme="kum"] .row__meta { background: var(--surface); }
[data-theme="kum"] .hero h1 { text-transform: none; }

[data-theme="zeytin"] .preview__media { border-radius: 50% 50% var(--radius-sm) var(--radius-sm); }
[data-theme="zeytin"] .menu-row strong { color: var(--ink); }

[data-theme="kobalt"] .strip {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
[data-theme="kobalt"] .strip__item { border-color: rgba(255, 255, 255, .16); }
[data-theme="kobalt"] .strip__no { color: #c8ff3d; }
[data-theme="kobalt"] .btn,
[data-theme="kobalt"] .navtoggle { text-transform: uppercase; letter-spacing: .06em; font-size: 10.5px; }
[data-theme="kobalt"] .hero h1 { letter-spacing: -.05em; }
[data-theme="kobalt"] .hero h1 em { font-family: var(--font-serif); }
[data-theme="kobalt"] .card { border-top: 3px solid var(--accent); }

[data-theme="seftali"] .preview__media { border-radius: 999px 999px var(--radius) var(--radius); }
[data-theme="seftali"] .brand__mark { border-radius: 50%; }
[data-theme="seftali"] .eyebrow { letter-spacing: .12em; }

[data-theme="grafit"] .preview { transform: none; box-shadow: none; }
[data-theme="grafit"] .hero__chip { background: var(--ink); color: var(--bg); }
[data-theme="grafit"] .eyebrow { letter-spacing: .14em; }
[data-theme="grafit"] .card { border-top: 2px solid var(--ink); }
[data-theme="grafit"] .card:hover { transform: none; border-color: var(--ink); }
[data-theme="grafit"] .row__meta { border-radius: 0; }
[data-theme="grafit"] .slot { border-top: 2px solid var(--ink); }

/* Duyarlı */

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__copy { max-width: 680px; }
  .hero__visual { max-width: 560px; margin: 12px auto 0; width: 100%; }
  .cards { grid-template-columns: 1fr 1fr; }
  .products { grid-template-columns: 1fr 1fr; }
  .schedule { grid-template-columns: 1fr 1fr; }
  .split-feature { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 520px; }
  .spec { grid-template-columns: 1fr 1fr; }
  [data-layout="center"] .hero__visual { max-width: 640px; }
}

@media (max-width: 820px) {
  .nav { display: none; }
  .navtoggle { display: inline-flex; }
  .topnav__cta { display: none; }
  .nav.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 20px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .5);
  }
  .nav.is-open a {
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .nav.is-open a:last-child { border-bottom: 0; }
  .demo-bar__note { display: none; }
  .demo-bar__links { margin-left: auto; }
  .demo-bar__links > a:first-child { display: none; }
}

@media (max-width: 620px) {
  .wrap { width: min(calc(100% - 28px), 1160px); }
  .demo-bar { font-size: 10.5px; }
  .demo-bar__inner { padding: 8px 0; gap: 6px 8px; }
  .demo-bar__tag { font-size: 8px; }
  .demo-bar__cta { padding: 5px 9px; }
  .topnav__inner { min-height: 60px; }
  .brand__name { font-size: 13.5px; }
  .brand__name small { font-size: 7px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.2rem); }
  [data-layout="center"] .hero h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); }
  .lede { font-size: 14.5px; }
  .hero__chip { left: 8px; bottom: -14px; }
  .strip__inner { grid-template-columns: 1fr; }
  .strip__item { border-left: 0; border-top: 1px solid var(--line); padding: 13px 0; }
  .strip__item:first-child { border-top: 0; }
  .cards, .products, .schedule { grid-template-columns: 1fr; }
  .gallery, .spec { grid-template-columns: 1fr; }
  .about__media { max-width: none; }
  .about__facts { gap: 0 16px; }
  .row { grid-template-columns: 32px 1fr; gap: 12px; }
  .row__meta { grid-column: 2; justify-self: start; }
  .menu-row { flex-direction: column; gap: 4px; }
  .menu-row strong { margin-top: 2px; }
  .work__media { height: 180px; }
  .cta__inner { flex-direction: column; align-items: flex-start; }
  .foot__inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .btn:hover, .card:hover { transform: none; }
  .gallery__item:hover img { transform: none; }
}

@media print {
  .demo-bar, .topnav, .cta, .hero__visual { display: none; }
  body { background: #fff; color: #000; }
}