/* asparajans.com: single stylesheet. Mirrors the live site design. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-ext-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Values below are measured from the live Breakdance site (global settings, post-155/1399/1688/1698/1765/1877 CSS).
   Breakpoints match Breakdance: 1119 / 1023 / 767 / 479. */
:root {
  --bg: #000;
  --text: #a1a9b3;
  --white: #fff;
  --accent: #e64500;
  --line: #474747;
  --card: #1e1e1e;
  --field-line: #333;
  --field-text: #7a8c9e;
  --check: #0da532;
  --star: #f8b500;
  --px: max(80px, 4.1667vw);
  --py: max(80px, 4.1667vw);
  color-scheme: dark;
}
@media (max-width: 1119px) { :root { --px: max(60px, 3.125vw); --py: max(60px, 3.125vw); } }
@media (max-width: 1023px) { :root { --px: max(40px, 2.0833vw); } }
@media (max-width: 767px) { :root { --px: max(24px, 1.25vw); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 500 max(16px, 0.8333vw)/1.6 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { color: var(--white); font-weight: 500; line-height: 1.2; margin: 0; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
/* Icons scale with the layout on screens wider than max(1920px, 100vw) (see build.mjs). */
svg[style*="--i"] { width: max(calc(var(--i) * 1px), calc(var(--i) * 100vw / 1920)); height: max(calc(var(--i) * 1px), calc(var(--i) * 100vw / 1920)); }
strong, b { font-weight: 700; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: max(2px, 0.1042vw) solid var(--accent); outline-offset: max(3px, 0.1563vw); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: min(-999px, -52.0313vw); top: max(8px, 0.4167vw); background: var(--accent); color: #fff; padding: max(8px, 0.4167vw) max(14px, 0.7292vw); border-radius: max(999px, 52.0313vw); z-index: 100; }
.skip:focus { left: max(8px, 0.4167vw); }
.center { text-align: center; }

/* Type */
.tagline { font-size: max(14px, 0.7292vw); letter-spacing: 0.05em; color: var(--text); text-transform: lowercase; }
.tagline.caps { text-transform: uppercase; }
.tagline.asis { text-transform: none; }
.h-hero { font-size: max(40px, 2.0833vw); max-width: max(550px, 28.6458vw); margin-top: max(8px, 0.4167vw); }
.h-sec { font-size: max(39.0625px, 2.0345vw); margin-top: max(8px, 0.4167vw); }
.hl { color: var(--accent); font-weight: 700; }
.hl2 { color: var(--accent); font-weight: 400; }
.mb40 { margin-bottom: max(40px, 2.0833vw); }
@media (max-width: 479px) { .h-hero { font-size: max(36px, 1.875vw); } .h-sec { font-size: max(34px, 1.7708vw); } }

/* Buttons: outlined orange pill (Breakdance "secondary") */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: max(8px, 0.4167vw); padding: max(14px, 0.7292vw) max(24px, 1.25vw); border: 1px solid var(--accent); border-radius: 9999px; background: transparent; color: var(--accent); font-family: inherit; font-size: max(15px, 0.7813vw); font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; white-space: nowrap; }
.btn:hover { background: var(--accent); color: #fff; }
.btn:disabled { opacity: .6; cursor: wait; }
.btn-light { border-color: #fff; color: #fff; font-size: max(14px, 0.7292vw); font-weight: 500; letter-spacing: 0; text-transform: none; padding: max(8px, 0.4167vw) max(16px, 0.8333vw); margin-top: max(16px, 0.8333vw); }
.btn-light:hover { background: #fff; color: var(--accent); }
.btn-muted { border-color: var(--line); color: var(--text); }
.btn-muted:hover { background: var(--line); color: #fff; }
.cta-row { display: flex; align-items: center; gap: max(16px, 0.8333vw); flex-wrap: wrap; }
.phone-link { color: #fff; font-size: max(16px, 0.8333vw); }
@media (max-width: 479px) { .phone-link { font-size: max(14px, 0.7292vw); } }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }

/* Header: overlays the hero; logo + "Referanslar" pill in the left half */
.site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: max(16px, 0.8333vw) var(--px); }
.header-inner { width: 50%; padding-right: var(--px); display: flex; align-items: center; justify-content: space-between; gap: max(16px, 0.8333vw); }
.logo img { width: max(120px, 6.25vw); height: auto; }
@media (max-width: 1023px) { .header-inner { width: 100%; padding-right: 0; } }

/* Bands: full-width sections separated by thin grid lines */
.band { border-bottom: 1px solid var(--line); }
.pad { padding: var(--py) var(--px); }

/* Split sections (50/50, image column + text column) */
.hero, .split { display: grid; grid-template-columns: 1fr 1fr; overflow: clip; }
.col-text { padding: var(--py) var(--px); display: flex; flex-direction: column; justify-content: center; }
.col-media { position: relative; overflow: hidden; min-height: 100%; }
.col-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero { min-height: 100vh; }
.hero.hero-compact { min-height: 70vh; }
.hero-compact .hero-text { padding-bottom: max(64px, 3.3333vw); }
.hero-text { padding: max(160px, 8.3333vw) var(--px) max(80px, 4.1667vw); }
.hero-text .tagline { margin-top: 0; }
.hero-lead { margin: max(24px, 1.25vw) 0; font-size: max(17px, 0.8854vw); max-width: max(540px, 28.125vw); }
.hero-lead p + p { margin-top: 1em; }
.hero-text .cta-row { margin-bottom: max(24px, 1.25vw); }
.col-aside { padding: max(160px, 8.3333vw) var(--px) max(80px, 4.1667vw); display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--line); }
@media (max-width: 1119px) { .hero, .hero.hero-compact { min-height: 0; } }
@media (max-width: 1023px) { .hero-compact .col-media { display: none; } .hero-compact .hero-text { padding-top: max(140px, 7.2917vw); } }
@media (max-width: 1023px) {
  .hero, .split { grid-template-columns: 1fr; }
  .col-media { min-height: 0; }
  .col-media img { position: static; height: auto; aspect-ratio: auto; }
  .flip-mobile .col-media { order: -1; }
  .col-aside { border-left: 0; border-top: 1px solid var(--line); padding-top: var(--py); }
  .hero-lead { max-width: none; }
}
@media (max-width: 479px) { .hero-lead { font-size: max(16px, 0.8333vw); } }

.h-sec.narrow { max-width: max(452px, 23.5417vw); }
.lead-18 { font-size: max(18px, 0.9375vw); margin: max(24px, 1.25vw) 0 max(20px, 1.0417vw); max-width: max(540px, 28.125vw); }
.rt p + p { margin-top: 1em; }
.rt-block { margin-bottom: max(32px, 1.6667vw); }

/* Rating badge */
.rating { display: inline-flex; align-items: center; gap: max(16px, 0.8333vw); padding: max(8px, 0.4167vw) 0; color: #fff; }
.rating-g { width: max(80px, 4.1667vw); height: auto; }
.rating-body { display: flex; flex-direction: column; }
.rating-top { display: flex; align-items: center; gap: max(8px, 0.4167vw); font-size: max(14px, 0.7292vw); }
.rating-count { font-size: max(14px, 0.7292vw); font-weight: 600; text-transform: uppercase; line-height: 1.2; }
.stars { display: inline-flex; gap: 1px; color: var(--star); }
.stars svg { width: max(16px, 0.8333vw); height: max(16px, 0.8333vw); }

/* Strip: bordered columns with icon, label, title, divider, text */
.strip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: rgba(0, 0, 0, .2); }
.strip-item { padding: max(64px, 3.3333vw) max(24px, 1.25vw); display: flex; justify-content: center; text-align: center; border-left: 1px solid var(--line); }
.strip-item:first-child { border-left: 0; }
.strip-inner { width: max(310px, 16.1458vw); max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: max(24px, 1.25vw); }
.strip-icon { color: var(--text); line-height: 0; }
.strip-label { font-size: max(14px, 0.7292vw); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.strip-title { font-size: max(32px, 1.6667vw); }
.strip-title a { color: #fff; transition: color .2s; }
.strip-title a:hover { color: var(--accent); }
.divider { display: block; width: max(56px, 2.9167vw); border-top: 1px solid var(--accent); }
.strip-item strong { color: #d5d9de; }
.strip-head { border-bottom: 1px solid var(--line); }
.strip-head .h-sec { margin-bottom: 0; }
.strip-icon .steps-n { width: max(48px, 2.5vw); height: max(48px, 2.5vw); font-size: max(18px, 0.9375vw); }
/* five services: 3 on top, 2 below */
.strip.n5 .strip-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.strip.n5 .strip-item { grid-column: span 2; }
.strip.n5 .strip-item:nth-child(n+4) { grid-column: span 3; border-top: 1px solid var(--line); }
.strip.n5 .strip-item:nth-child(4) { border-left: 0; }
.strip.n4 .strip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip.n4 .strip-title, .strip.n5 .strip-item:nth-child(n+4) .strip-title { font-size: max(28px, 1.4583vw); }
.strip-item p a { color: inherit; text-decoration: underline; text-underline-offset: max(3px, 0.1563vw); }
.strip.n2 .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1119px) {
  .strip.n4 .strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip.n4 .strip-item:nth-child(3) { border-left: 0; }
  .strip.n4 .strip-item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 1023px) {
  .strip-grid, .strip.n5 .strip-grid, .strip.n4 .strip-grid, .strip.n2 .strip-grid { grid-template-columns: 1fr; }
  .strip-item, .strip.n5 .strip-item { grid-column: auto !important; border-left: 0; padding: max(64px, 3.3333vw) max(40px, 2.0833vw); }
  .strip-item + .strip-item { border-top: 1px solid var(--line); }
}
@media (max-width: 479px) { .strip-title { font-size: max(28px, 1.4583vw); } }

/* Counters: number over an orange circle with the logo watermark */
.counter { padding: max(112px, 5.8333vw) max(24px, 1.25vw) max(64px, 3.3333vw); align-items: center; }
.counter-inner { position: relative; margin-left: max(56px, 2.9167vw); width: max(200px, 10.4167vw); text-align: center; }
.counter-bubble { position: absolute; top: min(-56px, -2.9167vw); left: min(-64px, -3.3333vw); width: max(160px, 8.3333vw); height: max(160px, 8.3333vw); border-radius: 9999px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.counter-bubble img { width: max(120px, 6.25vw); opacity: .35; }
.counter-num { position: relative; color: #fff; font-size: max(60px, 3.125vw); font-weight: 700; line-height: 1; letter-spacing: 0.05em; margin-bottom: max(48px, 2.5vw); }
.counter-title { position: relative; font-size: max(20px, 1.0417vw); }

/* Two-up feature grid (Neden Bizimle) */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: max(32px, 1.6667vw); margin: max(24px, 1.25vw) 0 max(32px, 1.6667vw); }
.grid2 h3 { font-size: max(24px, 1.25vw); margin-bottom: max(8px, 0.4167vw); }
@media (max-width: 767px) { .grid2 { grid-template-columns: 1fr; } }

/* Checklist */
.checklist { list-style: none; display: flex; flex-direction: column; gap: max(8px, 0.4167vw); margin: max(24px, 1.25vw) 0 max(32px, 1.6667vw); }
.checklist li { display: flex; align-items: flex-start; gap: max(12px, 0.625vw); }
.checklist .ck { color: var(--check); line-height: 0; margin-top: max(3px, 0.1563vw); flex: none; }
.checklist strong { color: #fff; }

/* Carousel (reviews + references) */
.carousel { position: relative; padding: 0 max(44px, 2.2917vw); width: 100%; }
.car-track { position: relative; display: grid; grid-auto-flow: column; gap: max(24px, 1.25vw); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-track::-webkit-scrollbar { display: none; }
.car-track > * { scroll-snap-align: start; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; padding: 0; cursor: pointer; line-height: 0; }
.car-btn.prev { left: 0; }
.car-btn.next { right: 0; }
.car-btn[disabled] { opacity: .25; cursor: default; }
.no-js .car-btn { display: none; }

/* References slider */
.refs-band { display: flex; flex-direction: column; align-items: center; }
.refs-intro { max-width: max(768px, 40vw); margin: max(32px, 1.6667vw) 0 max(40px, 2.0833vw); }
.refs-track { grid-auto-columns: calc((100% - 3 * max(24px, 1.25vw)) / 4); }
.ref-slide { display: flex; flex-direction: column; align-items: center; }
.ref-shot img { border-radius: max(8px, 0.4167vw); aspect-ratio: 5 / 8; object-fit: cover; object-position: top; }
.refs-note { max-width: max(500px, 26.0417vw); margin-top: max(56px, 2.9167vw); }
.refs-note a { color: inherit; text-decoration: underline; text-underline-offset: max(3px, 0.1563vw); }
.refs-band .car-btn { top: 40%; }
@media (max-width: 1119px) { .refs-track { grid-auto-columns: calc((100% - 2 * max(24px, 1.25vw)) / 3); } }
@media (max-width: 767px) { .refs-track { grid-auto-columns: calc((100% - max(24px, 1.25vw)) / 2); } }
@media (max-width: 479px) { .refs-track { grid-auto-columns: 100%; } .carousel { padding: 0 max(36px, 1.875vw); } }

/* Reviews */
.reviews-band { display: flex; flex-direction: column; align-items: center; }
.reviews-track { --n: 4; grid-auto-columns: calc((100% - (var(--n) - 1) * max(16px, 0.8333vw)) / var(--n)); gap: max(16px, 0.8333vw); align-items: stretch; }
@media (min-width: 1500px) { .reviews-track { --n: 5; } }
@media (min-width: 1800px) { .reviews-track { --n: 6; } }
.review { margin: 0; background: #1b1b1b; border-radius: max(8px, 0.4167vw); padding: max(16px, 0.8333vw); text-align: left; display: flex; flex-direction: column; gap: max(12px, 0.625vw); }
.review-head { display: flex; align-items: center; gap: max(12px, 0.625vw); }
.review-head b { display: block; color: #fff; font-size: max(14px, 0.7292vw); line-height: 1.3; }
.review-head small { display: block; color: #bbb; font-size: max(12px, 0.625vw); line-height: 1.3; }
.review-head .src { margin-left: auto; font-size: max(11px, 0.5729vw); color: #bbb; border: 1px solid #333; border-radius: max(999px, 52.0313vw); padding: 1px max(8px, 0.4167vw); }
.avatar { width: max(40px, 2.0833vw); height: max(40px, 2.0833vw); border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: max(17px, 0.8854vw); }
.review-stars { display: flex; align-items: center; gap: max(6px, 0.3125vw); }
.review-stars .stars svg { width: max(17px, 0.8854vw); height: max(17px, 0.8854vw); }
.review blockquote { margin: 0; color: #e6e6e6; font-size: max(14px, 0.7292vw); line-height: 1.55; }
.review.clamp blockquote p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review .more { align-self: flex-start; margin-top: auto; background: none; border: 0; padding: 0; color: #bbb; font: inherit; font-size: max(13px, 0.6771vw); cursor: pointer; }
.reviews-note { margin-top: max(32px, 1.6667vw); font-size: max(14px, 0.7292vw); }
.reviews-note a { color: var(--text); }
.reviews-note a:hover { color: #fff; }
@media (max-width: 1119px) { .reviews-track { --n: 3; } }
@media (max-width: 767px) { .reviews-track { --n: 2; } }
@media (max-width: 559px) { .reviews-track { --n: 1; } }

/* FAQ accordion */
.faq { display: flex; flex-direction: column; gap: max(8px, 0.4167vw); margin: max(24px, 1.25vw) 0 max(32px, 1.6667vw); }
.faq details { border: 1px solid var(--line); border-radius: max(8px, 0.4167vw); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: max(16px, 0.8333vw); padding: max(16px, 0.8333vw); color: #fff; cursor: pointer; list-style: none; line-height: 1.3; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { line-height: 0; color: #fff; flex: none; }
.faq .i-minus, .faq details[open] .i-plus { display: none; }
.faq details[open] .i-minus { display: inline; }
.faq-a { padding: 0 max(16px, 0.8333vw) max(16px, 0.8333vw); }
.faq-a p + p { margin-top: .8em; }
.faq-a a { color: var(--accent); }

/* Contact band (footer CTA + form) */
.contact-band { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; border-top: 1px solid var(--line); }
.contact-left { position: relative; border-right: 1px solid var(--line); padding: max(70px, 3.6458vw) var(--px) max(80px, 4.1667vw); display: flex; flex-direction: column; justify-content: center; background: #000 url('/assets/img/cta-bg-1600.webp') right center / cover no-repeat; overflow: hidden; }
.contact-left::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .75); }
.contact-left-inner { position: relative; min-height: max(500px, 26.0417vw); display: flex; flex-direction: column; justify-content: center; }
.contact-text { color: #fff; margin: max(24px, 1.25vw) 0 max(32px, 1.6667vw); max-width: max(675px, 35.1563vw); }
.contact-links { display: flex; flex-wrap: wrap; gap: max(8px, 0.4167vw) max(24px, 1.25vw); }
.contact-links a { color: #fff; font-size: max(20px, 1.0417vw); }
.contact-logo { position: absolute; z-index: 1; right: max(40px, 2.0833vw); bottom: max(40px, 2.0833vw); width: max(150px, 7.8125vw); }
.contact-right { padding: var(--py) var(--px); display: flex; align-items: center; justify-content: center; }
.contact-right .form { width: 100%; max-width: max(800px, 41.6667vw); }
@media (max-width: 1119px) { .contact-band { min-height: 0; } }
@media (max-width: 1023px) { .contact-left { background-image: url('/assets/img/cta-bg-900.webp'); background-position: center; } .contact-links { flex-direction: column; } .contact-logo { width: max(100px, 5.2083vw); } }
@media (max-width: 767px) {
  .contact-band { grid-template-columns: 1fr; }
  .contact-left { border-right: 0; }
  .contact-left-inner { min-height: 0; }
  .contact-logo { display: none; }
  .contact-right { padding-top: 0; min-height: max(400px, 20.8333vw); }
  .contact-band .contact-right { padding-top: max(40px, 2.0833vw); }
}

/* Forms */
.form { text-align: left; }
.form-title { font-size: max(25px, 1.3021vw); margin-bottom: max(24px, 1.25vw); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: max(16px, 0.8333vw); }
.field { display: flex; flex-direction: column; gap: max(8px, 0.4167vw); }
.field.wide { grid-column: 1 / -1; }
.field > span { color: #fff; font-weight: 300; line-height: 1; }
.req { color: #e02b2b; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form input[type=url], .form textarea { width: 100%; background: transparent; border: 1px solid var(--field-line); border-radius: max(8px, 0.4167vw); color: #dfe3e8; font: inherit; font-size: max(15px, 0.7813vw); padding: max(12px, 0.625vw) max(16px, 0.8333vw); }
.form input::placeholder, .form textarea::placeholder { color: var(--field-text); opacity: 1; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--accent); }
.form textarea { min-height: max(140px, 7.2917vw); resize: vertical; }
.form .check { display: flex; gap: max(10px, 0.5208vw); align-items: flex-start; margin: max(20px, 1.0417vw) 0 max(24px, 1.25vw); font-size: max(14px, 0.7292vw); color: var(--text); }
.form .check input { width: max(18px, 0.9375vw); height: max(18px, 0.9375vw); margin: max(2px, 0.1042vw) 0 0; accent-color: var(--accent); flex: none; }
.form .check a { color: #fff; text-decoration: underline; text-underline-offset: max(3px, 0.1563vw); }
.form .hp { position: absolute; left: -9999px; }
.form-status { margin-top: max(16px, 0.8333vw); font-size: max(15px, 0.7813vw); min-height: 1.5em; }
.form-status.ok { color: #6ad38b; }
.form-status.err { color: #ff7a59; }
.form-status.err a { color: #fff; }
@media (max-width: 767px) { .form-grid { grid-template-columns: 1fr; } }

/* Footer bar */
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: max(16px, 0.8333vw); padding: max(24px, 1.25vw) var(--px); font-size: max(14px, 0.7292vw); }
.footer-links { display: flex; flex-wrap: wrap; gap: max(8px, 0.4167vw) max(16px, 0.8333vw); justify-content: flex-end; }
.footer-links a, .footer-links button { color: var(--text); font-size: max(14px, 0.7292vw); transition: color .2s; }
.footer-links a:hover, .footer-links button:hover { color: #fff; }
@media (max-width: 767px) { .site-footer { flex-direction: column; align-items: flex-start; } .footer-links { justify-content: flex-start; } }
@media (max-width: 479px) { .site-footer { padding-bottom: max(112px, 5.8333vw); } }

/* Mobile bottom bar (phones only, like the old site) */
.mobile-bar { display: none; }
@media (max-width: 479px) {
  .mobile-bar { display: flex; position: fixed; z-index: 30; left: max(24px, 1.25vw); right: max(24px, 1.25vw); bottom: max(24px, 1.25vw); height: max(60px, 3.125vw); padding: 0 max(16px, 0.8333vw); border-radius: max(50px, 2.6042vw); background: var(--accent); align-items: center; justify-content: space-between; }
  .mb-side { display: flex; align-items: center; gap: max(8px, 0.4167vw); width: max(90px, 4.6875vw); color: #000; font-size: max(14px, 0.7292vw); }
  .mb-side.end { justify-content: flex-end; }
  .mb-wa { width: max(72px, 3.75vw); height: max(72px, 3.75vw); border-radius: 50%; background: #fa0000; color: #000; display: flex; align-items: center; justify-content: center; }
}

/* Case cards (/referanslar/, /blog/) */
.cases { padding: var(--py) var(--px); display: flex; flex-direction: column; gap: max(80px, 4.1667vw); }
.case { display: grid; grid-template-columns: 1fr 1fr; min-height: max(550px, 28.6458vw); border-radius: max(16px, 0.8333vw); overflow: hidden; box-shadow: rgba(99, 99, 99, .2) 0 max(2px, 0.1042vw) max(8px, 0.4167vw); }
.case-text { position: relative; background: var(--card); padding: max(64px, 3.3333vw); display: flex; flex-direction: column; justify-content: center; }
.case-badge { position: absolute; top: max(24px, 1.25vw); right: max(24px, 1.25vw); background: var(--accent); color: #fff; font-size: max(14px, 0.7292vw); padding: max(8px, 0.4167vw) max(16px, 0.8333vw); border-radius: max(8px, 0.4167vw); line-height: 1.3; }
.case-label { color: var(--accent); margin-bottom: max(8px, 0.4167vw); }
.case-text .h-sec { margin-top: 0; }
.case-text .h-sec a { color: #fff; }
.case-desc { margin: max(24px, 1.25vw) 0 max(32px, 1.6667vw); }
.case-link { align-self: flex-start; font-size: max(14px, 0.7292vw); position: relative; padding-bottom: max(5px, 0.2604vw); }
.case-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s; }
.case-link:hover::after { transform: scaleX(1); transform-origin: left; }
.case-note { margin-top: max(24px, 1.25vw); font-size: max(14px, 0.7292vw); font-style: italic; max-width: max(629px, 32.7604vw); }
.case-note a { color: inherit; text-decoration: underline; }
.case-media { position: relative; overflow: hidden; display: block; }
.case-back { position: absolute; top: 0; right: min(-40px, -2.0833vw); width: 65%; z-index: 1; }
.case-front { position: absolute; z-index: 2; left: 15%; top: max(64px, 3.3333vw); width: 70%; border-radius: max(8px, 0.4167vw) max(8px, 0.4167vw) 0 0; box-shadow: rgba(0, 0, 0, .3) 0 max(19px, 0.9896vw) max(38px, 1.9792vw), rgba(0, 0, 0, .22) 0 max(15px, 0.7813vw) max(12px, 0.625vw); }
@media (max-width: 1119px) { .case-text { padding: max(64px, 3.3333vw) max(60px, 3.125vw); } }
@media (max-width: 1023px) { .case { grid-template-columns: 1fr; } .case-text { padding: max(80px, 4.1667vw) max(40px, 2.0833vw); } .case-media { min-height: max(500px, 26.0417vw); } }
@media (max-width: 767px) { .case-text { padding: max(80px, 4.1667vw) max(24px, 1.25vw); } .case-badge { font-size: max(12px, 0.625vw); } }
@media (max-width: 479px) { .case-media { min-height: max(400px, 20.8333vw); } }

/* Two-column text band (left heading, right text) */
.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo > div { padding: var(--py) var(--px); }
.duo > div:first-child { border-right: 1px solid var(--line); }
.duo .rt { max-width: max(640px, 33.3333vw); }
.note { margin-top: 1em; padding-left: max(16px, 0.8333vw); border-left: max(2px, 0.1042vw) solid var(--accent); }
@media (max-width: 1023px) { .duo { grid-template-columns: 1fr; } .duo > div:first-child { border-right: 0; padding-bottom: 0; } }

/* Gallery (reference detail) */
.gallery { padding: var(--py) var(--px); display: grid; grid-template-columns: 1fr 1fr; gap: max(32px, 1.6667vw); align-items: start; }
.gallery img { width: 100%; border-radius: max(8px, 0.4167vw); }
.gallery-actions { grid-column: 1 / -1; display: flex; gap: max(16px, 0.8333vw); justify-content: center; flex-wrap: wrap; }
@media (max-width: 767px) { .gallery { grid-template-columns: 1fr; } }

/* Article (blog post): text column scrolls inside a full-height panel on desktop, like the old template */
.post { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; overflow: clip; }
.post-text { border-right: 1px solid var(--line); padding: max(160px, 8.3333vw) max(40px, 2.0833vw) max(80px, 4.1667vw); display: flex; flex-direction: column; min-height: 0; }
.post-scroll { padding: 0 max(40px, 2.0833vw); height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #555 transparent; }
.post-scroll h1 { font-size: max(40px, 2.0833vw); }
.prose { margin: max(24px, 1.25vw) 0; font-size: max(17px, 0.8854vw); }
.prose p, .prose ul { margin-bottom: 1em; }
.prose ul { padding-left: 1.3em; }
.prose li + li { margin-top: .25em; }
.prose h2 { font-size: max(24px, 1.25vw); margin: 1.6em 0 .7em; }
.prose h3 { font-size: max(19px, 0.9896vw); margin: 1.3em 0 .5em; }
.prose a { color: var(--accent); }
.prose strong { color: #d5d9de; }
.post-meta { font-size: max(14px, 0.7292vw); margin-top: max(8px, 0.4167vw); }
.post .col-media { min-height: 0; }
@media (max-width: 1119px) { .post { height: auto; } .post-scroll { height: auto; overflow: visible; } .post-text { padding: max(160px, 8.3333vw) max(60px, 3.125vw) max(60px, 3.125vw); } .post-scroll { padding: 0; } }
@media (max-width: 1023px) { .post { grid-template-columns: 1fr; } .post-text { border-right: 0; padding: max(140px, 7.2917vw) max(40px, 2.0833vw) max(40px, 2.0833vw); } .post .col-media { order: 2; } }
@media (max-width: 767px) { .post-text { padding: max(120px, 6.25vw) max(24px, 1.25vw) max(40px, 2.0833vw); } }
@media (max-width: 479px) { .prose { font-size: max(16px, 0.8333vw); } .post-scroll h1 { font-size: max(34px, 1.7708vw); } }

/* Plain document pages (KVKK, cookies) */
.doc { padding: var(--py) var(--px); max-width: calc(max(860px, 44.7917vw) + 2 * var(--px)); margin: 0 auto; }
.doc .prose h2 { font-size: max(22px, 1.1458vw); }
.doc.band { border-bottom: 0; }
.table-wrap { overflow-x: auto; margin: 0 0 1em; }
.prose table { width: 100%; min-width: max(560px, 29.1667vw); table-layout: fixed; border-collapse: collapse; font-size: max(15px, 0.7813vw); }
.prose th:nth-child(1) { width: 20%; } .prose th:nth-child(2) { width: 20%; } .prose th:nth-child(3) { width: 38%; } .prose th:nth-child(4) { width: 22%; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: max(10px, 0.5208vw) max(12px, 0.625vw); border-bottom: 1px solid var(--line); }
.prose th { color: #fff; font-weight: 600; }
.prose td:first-child { color: #fff; overflow-wrap: anywhere; }
.doc mark { background: #3a2a00; color: #ffcf66; padding: 0 max(4px, 0.2083vw); border-radius: max(4px, 0.2083vw); }

/* Steps (process) */
.steps-n { display: inline-flex; width: max(40px, 2.0833vw); height: max(40px, 2.0833vw); border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); align-items: center; justify-content: center; font-weight: 700; }

/* Entrance animation (slideLeft / slideRight on image columns) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transition: opacity .9s ease, transform .9s ease; }
  .js .reveal.from-left { transform: translateX(min(-40px, -2.0833vw)); }
  .js .reveal.from-right { transform: translateX(max(40px, 2.0833vw)); }
  .js .reveal.case { transform: translateY(max(30px, 1.5625vw)); }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Cookie consent */
.consent { position: fixed; z-index: 40; left: max(16px, 0.8333vw); right: max(16px, 0.8333vw); bottom: max(16px, 0.8333vw); max-width: max(460px, 23.9583vw); background: #111; border: 1px solid var(--line); border-radius: max(16px, 0.8333vw); padding: max(20px, 1.0417vw); box-shadow: 0 max(20px, 1.0417vw) max(60px, 3.125vw) rgba(0, 0, 0, .6); font-size: max(14px, 0.7292vw); }
.consent a { color: #fff; text-decoration: underline; }
.consent-actions { display: flex; gap: max(10px, 0.5208vw); justify-content: flex-end; margin-top: max(14px, 0.7292vw); }
.consent .btn { padding: max(10px, 0.5208vw) max(18px, 0.9375vw); font-size: max(13px, 0.6771vw); }
@media (min-width: 768px) { .consent { left: auto; right: max(24px, 1.25vw); bottom: max(24px, 1.25vw); } }
@media (max-width: 479px) { .consent { bottom: max(100px, 5.2083vw); } }