/* Raryum tanıtım broşürleri — A4, pazarlama odaklı, yazıcı dostu.
   Sözleşme belgelerinden farkı: kapak bandı, renkli kartlar, daha görsel ritim.
   Ekranda gri zemin üstünde sayfa; yazdırınca/PDF'te temiz A4. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --br-ink: #111418;
  --br-muted: #4b5563;
  --br-line: #d6dae0;
  --br-em: #0e5c3a;
  --br-em-soft: #e7f3ec;
  --br-co: #1d4ed8;
  --br-co-soft: #e9effd;
  --br-vi: #5b54b8;
  --br-vi-soft: #edecf9;
  --br-cu: #b45309;
  --br-cu-soft: #fdf2e3;
  --br-dark: #07100d;
  --br-spark: #c2f000;
  --br-bg: #ffffff;
  --br-band: #f4f6f8;
  --br-sans: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --br-mono: 'JetBrains Mono', ui-monospace, monospace;
  --br-serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #5b6370;
  color: var(--br-ink);
  font-family: var(--br-sans);
  font-size: 12.5px;
  line-height: 1.55;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Üst araç çubuğu — yazdırırken gizlenir */
.doc-toolbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px;
  background: #07100d;
  color: #e8efe9;
  border-bottom: 1px solid #1c2a24;
}
.doc-toolbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -0.02em; }
.doc-toolbar__tile {
  width: 30px; height: 30px; border: 1.5px solid #34d399; border-radius: 6px;
  display: grid; place-items: center; position: relative; color: #34d399;
}
.doc-toolbar__tile b { font: 700 13px/1 var(--br-sans); }
.doc-toolbar__tile span { position: absolute; top: 2px; left: 3px; font: 500 7px/1 var(--br-mono); }
.doc-toolbar__actions { display: flex; gap: 10px; }
.doc-btn {
  appearance: none; cursor: pointer;
  font: 600 13px/1 var(--br-sans);
  padding: 10px 16px; border-radius: 8px; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.doc-btn--primary { background: #c2f000; color: #0a0f0c; }
.doc-btn--primary:hover { background: #d2ff2e; }
.doc-btn--ghost { background: transparent; color: #e8efe9; border-color: #2a3a32; }
.doc-btn--ghost:hover { border-color: #4b5f54; }

/* A4 sayfa */
.page {
  background: var(--br-bg);
  width: 210mm;
  min-height: 296mm;
  margin: 24px auto;
  padding: 16mm 16mm 14mm;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
  display: flow-root;
  position: relative;
}

/* Kapak bandı (1. sayfa üstü) */
.br-cover {
  background: var(--br-dark);
  color: #e8efe9;
  border-radius: 12px;
  padding: 28px 30px 26px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
.br-cover::after {
  content: '';
  position: absolute; right: -40px; top: -40px;
  width: 220px; height: 220px;
  border: 1.5px solid rgba(52, 211, 153, 0.25);
  border-radius: 24px;
  transform: rotate(12deg);
}
.br-cover__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.br-cover__tile {
  width: 44px; height: 44px; border: 2px solid #34d399; border-radius: 9px;
  display: grid; place-items: center; position: relative; color: #34d399; flex: none;
}
.br-cover__tile b { font: 800 18px/1 var(--br-sans); }
.br-cover__tile span { position: absolute; top: 4px; left: 5px; font: 500 8px/1 var(--br-mono); }
.br-cover__name { font: 800 22px/1 var(--br-sans); letter-spacing: -0.02em; }
.br-cover__slogan { font: italic 400 13px/1.2 var(--br-serif); color: #9fb3a8; margin-top: 3px; }
.br-eyebrow {
  font: 500 10px/1 var(--br-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: #34d399; margin: 0 0 10px;
}
.br-cover h1 { font: 800 30px/1.15 var(--br-sans); letter-spacing: -0.022em; margin: 0 0 10px; max-width: 480px; }
.br-cover h1 em { font: italic 400 1.04em/1 var(--br-serif); color: #6ee7b7; }
.br-cover p { margin: 0; max-width: 520px; color: #b7c4bc; font-size: 13px; }

/* İç sayfa başlığı (2.+ sayfalar) */
.br-pagehead {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 12px; border-bottom: 2px solid var(--br-ink); margin-bottom: 20px;
}
.br-pagehead__brand { display: flex; align-items: center; gap: 10px; font: 800 16px/1 var(--br-sans); letter-spacing: -0.02em; }
.br-pagehead__tile {
  width: 32px; height: 32px; border: 1.5px solid var(--br-em); border-radius: 7px;
  display: grid; place-items: center; position: relative; color: var(--br-em); flex: none;
}
.br-pagehead__tile b { font: 800 13px/1 var(--br-sans); }
.br-pagehead__tile span { position: absolute; top: 2px; left: 4px; font: 500 6.5px/1 var(--br-mono); }
.br-pagehead__meta { font: 500 9.5px/1.5 var(--br-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--br-muted); text-align: right; }

/* Bölüm başlıkları */
.br-section-eyebrow {
  font: 500 10px/1 var(--br-mono);
  text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--br-em); margin: 0 0 6px;
}
h2.br-title { font: 800 20px/1.2 var(--br-sans); letter-spacing: -0.02em; margin: 0 0 6px; }
p.br-lede { margin: 0 0 16px; color: var(--br-muted); font-size: 12.5px; max-width: 620px; }

/* Kart ızgaraları */
.br-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.br-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.br-card {
  border: 1px solid var(--br-line);
  border-top: 3px solid var(--card-accent, var(--br-em));
  border-radius: 10px;
  padding: 14px 15px;
  background: #fff;
  break-inside: avoid;
  page-break-inside: avoid;
}
.br-card--soft { background: var(--card-soft, var(--br-em-soft)); border: none; border-top: 3px solid var(--card-accent, var(--br-em)); }
.br-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.br-tile {
  width: 38px; height: 38px; border: 1.5px solid var(--card-accent, var(--br-em)); border-radius: 8px;
  display: grid; place-items: center; position: relative; color: var(--card-accent, var(--br-em)); flex: none;
  background: #fff;
}
.br-tile b { font: 800 14px/1 var(--br-sans); }
.br-tile span { position: absolute; top: 3px; left: 4px; font: 500 7px/1 var(--br-mono); }
.br-card__cat { font: 500 8.5px/1.3 var(--br-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--card-accent, var(--br-em)); text-align: right; }
.br-card h3 { font: 700 14.5px/1.25 var(--br-sans); letter-spacing: -0.01em; margin: 0 0 5px; }
.br-card p { margin: 0; font-size: 11.5px; color: var(--br-muted); }
.br-card ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--br-muted); display: grid; gap: 4px; }
.br-card li { position: relative; padding-left: 13px; }
.br-card li::before { content: '+'; position: absolute; left: 0; top: 0; color: var(--card-accent, var(--br-em)); font-family: var(--br-mono); font-size: 10px; }
.br-card__who { margin-top: 9px !important; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.08); font-size: 10.5px !important; }
.br-card__who b { font: 500 8.5px/1 var(--br-mono); letter-spacing: 0.1em; color: var(--card-accent, var(--br-em)); display: block; margin-bottom: 2px; }

/* Süreç şeridi (6 faz) */
.br-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.br-flow__item { text-align: center; }
.br-flow__tile {
  width: 40px; height: 40px; margin: 0 auto 6px;
  border: 1.5px solid var(--flow-accent, var(--br-em)); border-radius: 8px;
  display: grid; place-items: center; position: relative; color: var(--flow-accent, var(--br-em));
}
.br-flow__tile b { font: 800 13px/1 var(--br-sans); }
.br-flow__tile span { position: absolute; top: 2px; left: 4px; font: 500 6.5px/1 var(--br-mono); }
.br-flow__name { font: 700 10px/1.3 var(--br-sans); margin: 0 0 2px; }
.br-flow__sub { font-size: 9px; color: var(--br-muted); margin: 0; }

/* Vurgu şeridi */
.br-strip {
  background: var(--br-band);
  border: 1px solid var(--br-line);
  border-radius: 10px;
  padding: 13px 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  break-inside: avoid; page-break-inside: avoid;
}
.br-strip--3 { grid-template-columns: repeat(3, 1fr); }
.br-strip__item b { display: block; font: 500 8.5px/1.4 var(--br-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--br-em); margin-bottom: 3px; }
.br-strip__item span { font-size: 11px; color: var(--br-ink); font-weight: 600; }
.br-strip__item p { margin: 2px 0 0; font-size: 10px; color: var(--br-muted); }

/* Alıntı / editorial vurgu */
.br-pull {
  font: italic 400 17px/1.4 var(--br-serif);
  color: var(--br-em);
  border-left: 3px solid var(--br-em);
  padding: 4px 0 4px 16px;
  margin: 18px 0;
  max-width: 600px;
}

/* Sayfa altbilgisi */
.br-foot {
  margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--br-line);
  font: 500 9px/1.6 var(--br-mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--br-muted);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* Kapanış / iletişim bloğu */
.br-contact {
  background: var(--br-dark); color: #e8efe9;
  border-radius: 12px; padding: 20px 24px;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: center;
  break-inside: avoid; page-break-inside: avoid;
}
.br-contact h3 { font: 800 18px/1.25 var(--br-sans); letter-spacing: -0.018em; margin: 0 0 6px; }
.br-contact h3 em { font: italic 400 1.04em/1 var(--br-serif); color: #6ee7b7; }
.br-contact p { margin: 0; font-size: 11.5px; color: #b7c4bc; }
.br-contact__list { display: grid; gap: 7px; font-size: 11.5px; }
.br-contact__list b { font: 500 8.5px/1 var(--br-mono); letter-spacing: 0.12em; color: #34d399; display: block; margin-bottom: 1px; }

.br-sp-6 { height: 6px; } .br-sp-10 { height: 10px; } .br-sp-14 { height: 14px; } .br-sp-18 { height: 18px; }

/* ------------------------------------------------------------------
   Kurumsal sürüm (kurumsal-*.html) — iş odaklı, resmi belge dili.
   Pazarlama sürümünden farkı: koyu kapak yok; sade beyaz belge,
   numaralı bölümler, tablo düzeni, ölçülü vurgu.
------------------------------------------------------------------- */
.kur-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-bottom: 14px; border-bottom: 2.5px solid var(--br-ink); margin-bottom: 18px;
}
.kur-head__brand { display: flex; align-items: center; gap: 12px; }
.kur-head__name { font: 800 22px/1 var(--br-sans); letter-spacing: -0.02em; }
.kur-head__slogan { font: italic 400 12px/1.2 var(--br-serif); color: var(--br-muted); margin-top: 3px; }
.kur-head__meta { text-align: right; font: 500 9.5px/1.6 var(--br-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--br-muted); }

.kur-title { font: 800 23px/1.2 var(--br-sans); letter-spacing: -0.02em; margin: 0 0 6px; }
.kur-subtitle { font-size: 12.5px; color: var(--br-muted); margin: 0 0 16px; max-width: 640px; }

.kur-summary {
  background: var(--br-band); border: 1px solid var(--br-line); border-left: 3px solid var(--br-em);
  border-radius: 8px; padding: 13px 16px; margin: 0 0 18px;
  font-size: 12px; color: var(--br-ink);
  break-inside: avoid; page-break-inside: avoid;
}
.kur-summary b { font: 500 9px/1 var(--br-mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--br-em); display: block; margin-bottom: 6px; }

h2.kur-art { font: 700 15px/1.3 var(--br-sans); margin: 20px 0 8px; }
h2.kur-art .n { color: var(--br-em); font-family: var(--br-mono); font-size: 12px; margin-right: 8px; }
.kur-p { margin: 0 0 8px; font-size: 12px; color: var(--br-ink); text-align: justify; }
.kur-p--muted { color: var(--br-muted); }

table.kur-table {
  width: 100%; border-collapse: collapse; margin: 6px 0 12px;
  font-size: 11px; line-height: 1.5;
  break-inside: avoid; page-break-inside: avoid;
}
.kur-table th {
  text-align: left; font: 500 9px/1.4 var(--br-mono); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--br-em); background: var(--br-band);
  padding: 8px 10px; border: 1px solid var(--br-line);
}
.kur-table td { padding: 8px 10px; border: 1px solid var(--br-line); vertical-align: top; color: var(--br-ink); }
.kur-table td .t-name { font-weight: 700; display: block; }
.kur-table td .t-sub { color: var(--br-muted); font-size: 10.5px; }
.kur-table tr { page-break-inside: avoid; }
.kur-table .t-num { font-family: var(--br-mono); color: var(--br-muted); white-space: nowrap; }

.kur-list { margin: 0 0 10px; padding-left: 18px; font-size: 12px; }
.kur-list li { margin: 0 0 4px; }

.kur-foot-contact {
  margin-top: 18px; border: 1px solid var(--br-line); border-top: 3px solid var(--br-em);
  border-radius: 8px; padding: 14px 16px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  font-size: 11px;
  break-inside: avoid; page-break-inside: avoid;
}
.kur-foot-contact b { font: 500 8.5px/1 var(--br-mono); letter-spacing: 0.12em; color: var(--br-em); display: block; margin-bottom: 3px; }
@media screen and (max-width: 800px) { .kur-foot-contact { grid-template-columns: 1fr 1fr; } }

@media print {
  html, body { background: #fff; }
  .doc-toolbar { display: none; }
  .page { width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none; page-break-after: always; }
  .page:last-child { page-break-after: auto; }
  @page { size: A4; margin: 11mm 12mm; }
}

/* Yalnızca ekran: print'te A4 genişliği ~794px olduğundan bu sorgu
   "screen" ile sınırlı olmalı — yoksa PDF tek sütuna düşer. */
@media screen and (max-width: 800px) {
  .page { width: auto; margin: 0; padding: 22px 16px; }
  .br-grid-3, .br-grid-2, .br-strip, .br-flow, .br-contact { grid-template-columns: 1fr; }
}
