/* ASD Tasarım — E-Katalog
   Sayfa tasarımı 560 × 792 (A4 oranı) tabanında kurgulanır; tüm ölçüler sayfa genişliğine göre (cqw)
   ölçeklenir, böylece katalog telefonda da büyük ekranda da PDF'te de aynı düzende görünür. */
:root {
  --ink: #0b0b0d; --carbon: #131316; --graphite: #1d1d22; --bone: #f3f2ee; --mist: #a2a2aa;
  --paper: #efefec; --paper-ink: #131315; --paper-mute: #5c5c63;
  --orange: #f25d3c; --orange-deep: #e0482a; --orange-ink: #b83a1c; --green: #92c83e; --green-ink: #46701a;
  --dipro-bg: #12151c;
  --line: rgba(243, 242, 238, .14); --line-paper: rgba(19, 19, 21, .14);
  --f: "Archivo", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--f); color: var(--bone); -webkit-font-smoothing: antialiased;
  background: radial-gradient(60% 50% at 50% 45%, #1b1b20 0%, var(--ink) 70%) fixed, var(--ink);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.mono { font-family: var(--f); letter-spacing: .16em; text-transform: uppercase; }

/* ---------------- Görüntüleyici çerçevesi ---------------- */
.kbar { display: flex; align-items: center; gap: 18px; padding: 12px clamp(14px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.kbar__brand img { width: 54px; height: auto; }
.kbar__title { margin: 0; font-size: .95rem; font-weight: 600; font-stretch: 85%; display: flex; gap: 12px; align-items: baseline; }
.kbar__title .mono { font-size: .66rem; color: var(--orange); font-weight: 500; }
.kbar__act { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kbtn {
  appearance: none; border: 1px solid var(--line); background: transparent; color: var(--bone); font: 500 .82rem/1 var(--f);
  padding: 10px 14px; border-radius: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .2s, background .2s, color .2s;
}
.kbtn:hover { border-color: var(--orange); color: #fff; }
.kbtn:first-child { background: var(--orange); border-color: var(--orange); color: #fff; }
.kbtn:first-child:hover { background: var(--orange-deep); }
.kbtn--ghost { color: var(--mist); }
.kbtn--lang { color: var(--mist); letter-spacing: .14em; font-size: .74rem; }
.kbtn--icon { padding: 9px; }
.kbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.kctl .kbtn:first-child { background: transparent; border-color: var(--line); color: var(--bone); }
.kctl .kbtn:first-child:hover { border-color: var(--orange); }
.kbtn:disabled { opacity: .35; cursor: default; border-color: var(--line); }

.stage { position: relative; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(10px, 2.4vh, 28px) clamp(8px, 3vw, 40px); }
.book { width: 100%; height: 100%; }
.stage .stf__parent { margin: 0 auto; }

.kctl { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px 14px; }
.kctl__count { font-size: .78rem; min-width: 84px; text-align: center; color: var(--mist); }
.kctl__count b { color: var(--bone); font-weight: 600; }
.kctl__bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--line); }
.kctl__bar i { display: block; height: 100%; width: 0; background: var(--orange); transition: width .5s ease; }

@media (max-width: 640px) {
  .kbar { gap: 10px; }
  .kbar__title { font-size: .82rem; }
  .kbar__title .mono, .kbtn--ghost, [data-fs] { display: none; }
  .kbtn { padding: 9px 11px; font-size: .78rem; }
}

/* ---------------- Sayfa ---------------- */
.pg { container-type: inline-size; background: var(--paper); color: var(--paper-ink); overflow: hidden; }
.pg__in { position: relative; width: 100%; height: 100%; padding: 7.5cqw 7.5cqw 11cqw; overflow: hidden; font-size: 2.32cqw; line-height: 1.55; }
.pg--ink { background: var(--ink); color: var(--bone); }
.pg--dipro { background: radial-gradient(120% 60% at 95% -5%, rgba(160, 102, 255, .16), transparent 60%), radial-gradient(90% 50% at -10% 15%, rgba(43, 155, 255, .14), transparent 60%), var(--dipro-bg); color: var(--bone); }
.pg p { margin: 0 0 .9em; }
.pg ul, .pg ol { margin: 0; padding: 0; list-style: none; }

.eyebrow { display: flex; align-items: center; gap: .9em; margin: 0 0 3cqw !important; font-size: 1.62cqw; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--orange-ink); }
.eyebrow::before { content: ""; width: 5cqw; height: 1px; background: currentColor; flex: none; }
.pg--ink .eyebrow, .pg--dipro .eyebrow { color: var(--orange); }
.eyebrow--sm { margin-top: 5cqw !important; }

.h2 { margin: 0 0 4cqw; font-weight: 700; font-stretch: 78%; font-size: 7.6cqw; line-height: 1; letter-spacing: -.012em; text-wrap: balance; }
.h2 em, .back__title em, .cover__title i { font-style: normal; color: var(--orange-deep); }
.pg--ink .h2 em, .pg--dipro .h2 em { color: var(--orange); }
.h2--sm { font-size: 6.4cqw; margin-bottom: 3cqw; }
.lead { font-size: 2.75cqw; line-height: 1.55; color: var(--paper-mute); }
.pg--ink .lead, .pg--dipro .lead { color: var(--mist); }
.pg h3 { margin: 0; font-weight: 700; font-stretch: 80%; letter-spacing: -.01em; line-height: 1.12; }

.folio { position: absolute; left: 7.5cqw; right: 7.5cqw; bottom: 5.4cqw; display: flex; justify-content: space-between; padding-top: 2cqw; border-top: 1px solid var(--line-paper); font-size: 1.5cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mute); }
.pg--ink .folio, .pg--dipro .folio { border-color: var(--line); color: var(--mist); }
.folio span:last-child { font-weight: 700; color: var(--orange-ink); }
.pg--ink .folio span:last-child, .pg--dipro .folio span:last-child { color: var(--orange); }

/* Kapak */
.cover .pg__in { padding: 7cqw; display: flex; flex-direction: column; background: radial-gradient(70% 40% at 100% 0%, rgba(242, 93, 60, .14), transparent 70%), radial-gradient(60% 30% at 0% 100%, rgba(146, 200, 62, .08), transparent 70%); }
.cover__top { display: flex; justify-content: space-between; align-items: flex-start; }
.cover__logo { width: 19cqw; }
.cover__top .mono { font-size: 1.6cqw; text-align: right; color: var(--mist); line-height: 1.6; }
.cover__img { position: relative; margin: 6cqw -7cqw 0; height: 62cqw; overflow: hidden; }
.cover .pg__in > * { flex-shrink: 0; }
.cover .pg__in > .cover__img { flex-shrink: 1; min-height: 24cqw; }
.cover__img img { width: 100%; height: 100%; object-fit: cover; }
.cover__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 13, .1), rgba(11, 11, 13, .2) 55%, var(--ink)); }
.cover__title { margin: -18cqw 0 0; position: relative; font-weight: 800; font-stretch: 72%; font-size: 15.5cqw; line-height: .9; letter-spacing: -.02em; }
.cover__title i { color: var(--orange); }
.pg .cover__sub { position: relative; margin: 5cqw 0 0; max-width: 72cqw; font-size: 2.7cqw; line-height: 1.55; color: var(--mist); }
.cover__disc { position: relative; margin: 7cqw 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.cover__disc li { padding: 2.4cqw 1.5cqw 0 0; font-weight: 700; font-stretch: 80%; font-size: 2.9cqw; line-height: 1.15; }
.cover__disc li span { display: block; margin-bottom: 1cqw; font-weight: 600; font-stretch: 100%; font-size: 1.4cqw; letter-spacing: .16em; color: var(--orange); }
.cover__foot { margin-top: auto; display: flex; justify-content: space-between; padding-top: 3cqw; border-top: 1px solid var(--line); font-size: 1.6cqw; color: var(--mist); }
.cover__foot span:last-child { color: var(--green); }

/* İçindekiler */
.toc { counter-reset: t; border-top: 1px solid var(--line-paper); }
.toc a { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; padding: 1.42cqw 0; border-bottom: 1px solid var(--line-paper); text-decoration: none; font-size: 2.6cqw; font-weight: 500; transition: color .2s, padding .2s; }
.toc a b { font-weight: 700; font-stretch: 80%; color: var(--orange-ink); font-size: 2.6cqw; }
.toc a:hover { color: var(--orange-ink); padding-left: 1.2cqw; }
.toc__note { margin-top: 4cqw !important; font-size: 1.95cqw; color: var(--paper-mute); }

/* Biz kimiz */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4.5cqw 0 5cqw; border-top: 1px solid var(--line-paper); border-bottom: 1px solid var(--line-paper); }
.stats div { padding: 3cqw 0 3cqw 2.5cqw; border-left: 1px solid var(--line-paper); }
.stats div:first-child { border-left: 0; padding-left: 0; }
.stats b { display: block; font-weight: 700; font-stretch: 78%; font-size: 6cqw; line-height: 1; }
.stats span { display: block; margin-top: 1.2cqw; font-size: 1.55cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mute); }
.quote { margin: 0; padding-left: 3cqw; border-left: 2px solid var(--orange); font-size: 2.9cqw; font-weight: 500; line-height: 1.45; }
.quote cite { display: block; margin-top: 1.6cqw; font-style: normal; font-size: 1.6cqw; letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mute); }

/* Yolculuk */
.timeline { border-left: 1px solid var(--line-paper); margin-left: 1cqw !important; }
.timeline li { position: relative; padding: 0 0 2.4cqw 5cqw; display: grid; gap: .6cqw; }
.timeline li::before { content: ""; position: absolute; left: -1.05cqw; top: .9cqw; width: 2.1cqw; height: 2.1cqw; border-radius: 50%; background: var(--paper); border: 2px solid var(--orange); }
.timeline b { font-size: 1.7cqw; color: var(--orange-ink); font-weight: 600; }
.timeline strong { font-size: 3.2cqw; font-weight: 700; font-stretch: 80%; line-height: 1.1; }
.timeline span { color: var(--paper-mute); }
.principles { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-paper); }
.principles div { padding: 2cqw 2cqw 2cqw 0; border-bottom: 1px solid var(--line-paper); }
.principles div:nth-child(even) { padding-left: 3cqw; border-left: 1px solid var(--line-paper); }
.principles .mono { display: block; font-size: 1.5cqw; color: var(--green-ink); font-weight: 600; margin-bottom: .8cqw; }
.principles strong { font-size: 2.6cqw; font-weight: 700; font-stretch: 80%; line-height: 1.15; display: block; }

/* Hizmetler */
.svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); margin-top: 3cqw; }
.svc { position: relative; padding: 2.6cqw 3cqw 2.6cqw 0; border-bottom: 1px solid var(--line); }
.svc:nth-child(even) { padding-left: 3.4cqw; padding-right: 0; border-left: 1px solid var(--line); }
.svc__no { position: absolute; right: 2.4cqw; top: 3.4cqw; font-size: 1.6cqw; color: var(--mist); }
.svc:nth-child(even) .svc__no { right: 0; }
.svc__k { margin: 0 0 1cqw !important; font-size: 1.5cqw; color: var(--green); font-weight: 600; }
.svc h3 { font-size: 3.8cqw; margin-bottom: 1.2cqw; }
.svc p { color: var(--mist); font-size: 1.95cqw; }
.svc ul { display: flex; flex-wrap: wrap; gap: 1cqw; }
.svc li { font-size: 1.6cqw; padding: .7cqw 1.4cqw; border: 1px solid var(--line); color: var(--bone); }

/* Hizmet detay sayfaları */
.detail__img { margin: -7.5cqw -7.5cqw 5.5cqw; height: 40cqw; overflow: hidden; position: relative; }
.detail__img img { width: 100%; height: 100%; object-fit: cover; }
.pg--dipro .detail__img { margin-bottom: 4.5cqw; }
.pg--dipro .detail__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--dipro-bg)); }
.pg:not(.pg--dipro) .detail__img::after { content: ""; position: absolute; left: 7.5cqw; bottom: 0; width: 14cqw; height: 1.1cqw; background: var(--orange); }
.pg p:not(.eyebrow):not(.lead):not(.works) { color: var(--paper-mute); }
.pg--ink p:not(.eyebrow):not(.lead):not(.works), .pg--dipro p:not(.eyebrow):not(.lead):not(.works) { color: var(--mist); }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3cqw; margin: 1cqw 0 3cqw !important; border-top: 1px solid var(--line-paper); }
.pg--dipro .checks { border-color: var(--line); }
.checks li { position: relative; padding: 1.5cqw 0 1.5cqw 3.4cqw; border-bottom: 1px solid var(--line-paper); font-size: 2.1cqw; font-weight: 500; }
.pg--dipro .checks li { border-color: var(--line); }
.checks li::before { content: ""; position: absolute; left: 0; top: 2.35cqw; width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--green); }
.works { margin: 0 !important; font-size: 2.1cqw; font-weight: 500; line-height: 1.5; }
.works .mono { display: block; margin-bottom: .8cqw; font-size: 1.5cqw; color: var(--orange-ink); font-weight: 600; }
.pg--dipro .works .mono { color: var(--orange); }

/* Pazarlama */
.mks { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-paper); }
.mk { padding: 3.2cqw 3cqw 3.2cqw 0; border-bottom: 1px solid var(--line-paper); }
.mk:nth-child(even) { padding-left: 3.4cqw; padding-right: 0; border-left: 1px solid var(--line-paper); }
.mk .mono { display: block; font-size: 1.5cqw; color: var(--orange-ink); font-weight: 600; margin-bottom: 1.2cqw; }
.mk h3 { font-size: 3.7cqw; margin-bottom: 1.4cqw; }
.mk p { font-size: 2.05cqw; margin: 0 !important; }

/* Süreç */
.steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); margin-top: 2.6cqw; }
.steps li { padding: 2.4cqw 3cqw 2.4cqw 0; border-bottom: 1px solid var(--line); }
.steps li:nth-child(even) { padding-left: 3.4cqw; padding-right: 0; border-left: 1px solid var(--line); }
.steps b { display: block; font-weight: 800; font-stretch: 72%; font-size: 6.4cqw; line-height: 1; color: var(--orange); }
.steps h3 { font-size: 3.5cqw; margin: 1.2cqw 0 1cqw; }
.steps p { font-size: 2.05cqw; margin: 0 !important; }
.note { margin-top: 3cqw !important; font-size: 1.7cqw; color: var(--green) !important; font-weight: 600; }

/* Projeler */
.pjs { display: grid; grid-template-columns: 1fr 1fr; gap: 4.4cqw 3.6cqw; }
.pj img { width: 100%; aspect-ratio: 580 / 319; object-fit: cover; background: #eee; }
.pj__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5cqw; margin-top: 2cqw; padding-bottom: 1.4cqw; border-bottom: 1px solid var(--line-paper); }
.pj h3 { font-size: 3.4cqw; }
.pj__meta .mono { font-size: 1.32cqw; color: var(--paper-mute); text-align: right; font-weight: 600; }
.pj p { margin: 1.4cqw 0 .8cqw !important; font-size: 1.95cqw; line-height: 1.5; }
.pj__url { font-size: 1.45cqw; color: var(--orange-ink); font-weight: 600; }

/* Referanslar */
.logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-paper); border-left: 1px solid var(--line-paper); }
.logos li { aspect-ratio: 1 / .72; display: grid; place-items: center; padding: 2cqw; border-right: 1px solid var(--line-paper); border-bottom: 1px solid var(--line-paper); background: #fff; }
.logos img { width: 100%; height: 100%; object-fit: contain; }

/* Ofisler */
.ofs { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw 3.6cqw; }
.of img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.of > div { padding-top: 2cqw; }
.of .mono { font-size: 1.4cqw; color: var(--orange-ink); font-weight: 600; }
.of h3 { font-size: 4.4cqw; margin: .8cqw 0 1.2cqw; }
.of p { font-size: 1.95cqw; line-height: 1.5; margin: 0 0 .8cqw !important; }
.of .of__c { color: var(--paper-ink) !important; font-weight: 600; }

/* Arka kapak */
.back .pg__in { display: flex; flex-direction: column; padding-bottom: 7.5cqw; background: radial-gradient(70% 45% at 0% 100%, rgba(242, 93, 60, .16), transparent 70%), radial-gradient(60% 40% at 100% 0%, rgba(146, 200, 62, .07), transparent 70%); }
.back__title { margin: 6cqw 0 5cqw; font-weight: 800; font-stretch: 72%; font-size: 11.5cqw; line-height: .95; letter-spacing: -.02em; }
.back__title em { color: var(--orange); }
.back__contact { margin-top: 3cqw !important; border-top: 1px solid var(--line); }
.back__contact li { display: flex; justify-content: space-between; align-items: baseline; padding: 2.4cqw 0; border-bottom: 1px solid var(--line); }
.back__contact .mono { font-size: 1.55cqw; color: var(--mist); }
.back__contact a { font-weight: 700; font-stretch: 80%; font-size: 4cqw; text-decoration: none; }
.back__contact a:hover { color: var(--orange); }
.back__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.back__qr { display: flex; align-items: flex-end; gap: 2.4cqw; }
.back__qr svg { width: 17cqw; height: auto; }
.back__qr .mono { font-size: 1.4cqw; color: var(--mist); max-width: 16cqw; line-height: 1.5; }
.back__logo { width: 17cqw; }

/* ---------------- PDF / yazdırma: sayfalar alt alta, A4 ---------------- */
.is-print body { display: block; overflow: visible; background: #fff; }
.is-print .kbar, .is-print .kctl { display: none; }
.is-print .stage { display: block; padding: 0; }
.is-print .pg { width: 210mm; height: 297mm; break-after: page; page-break-after: always; }
@page { size: A4; margin: 0; }
@media print {
  body { display: block; overflow: visible; background: #fff; }
  .kbar, .kctl { display: none; }
  .stage { display: block; padding: 0; }
  .pg { width: 210mm !important; height: 297mm !important; break-after: page; position: static !important; transform: none !important; display: block !important; }
}

/* ---------------- Açık tema (sitedeki seçim hatırlanır): yalnızca görüntüleyici çerçevesi açılır, sayfalar aynı kalır ---------------- */
[data-theme="light"] body { background: radial-gradient(60% 50% at 50% 45%, #ffffff 0%, #e9e8e3 72%) fixed, #e9e8e3; color: #141416; }
[data-theme="light"] :is(.kbar, .kctl) { --bone: #141416; --mist: #5a5a62; --line: rgba(19, 19, 21, 0.16); color: var(--bone); }
[data-theme="light"] .kbar__brand img { filter: invert(1); }
[data-theme="light"] .kbar .kbtn:first-child { color: #0b0b0d; }
[data-theme="light"] .kbtn:hover { color: var(--orange-ink); }
[data-theme="light"] .kctl__bar { background: rgba(19, 19, 21, 0.12); }