/* ==========================================================================
   BvB Navigasyon — ortak tasarım sistemi
   Renkler logo dosyasından örneklenmiştir; resmî brandbook ile doğrulanmalıdır.
   ========================================================================== */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-latin.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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/schibsted-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  --white: #FFFFFF;
  --paper: #F5F4F0;
  --mist: #EDF1F4;
  --line: #DCE1E6;
  --line-strong: #8E98A2;
  --graphite: #18202A;
  --muted: #53606C;
  --navy: #0C345A;
  --blue: #0078A8;
  --signal: #4CB8E8;
  --ink: #07111E;
  --ink-2: #0C1B2D;
  --ink-line: #1F344B;
  --on-ink: #FFFFFF;
  --on-ink-muted: #AFBDCB;
  --action: #0A66A8;
  --action-hover: #08548B;
  --focus: #0078A8;
  --focus-on-ink: #8AD6F5;

  --logo-mark: #0078A8;
  --logo-v: #0C345A;
  --logo-text: #3B3839;

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.8125rem;

  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-6: 3rem;
  --s-8: 4rem;
  --s-12: 6rem;
  --section: clamp(4.5rem, 2.8rem + 6vw, 8rem);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 10px;

  --container: 77.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --header-h: 4.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }

body { margin: 0; background: var(--white); color: var(--graphite); font: 400 var(--fs-body)/1.6 var(--font); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
address { font-style: normal; }
h1, h2, h3, h4 { font-weight: 600; color: var(--navy); text-wrap: balance; hyphens: manual; }
h2 { font-weight: 560; }
h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.028em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.012em; }
h4 { font-size: 1rem; line-height: 1.35; }
p { max-width: 68ch; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.dark :focus-visible { outline-color: var(--focus-on-ink); }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: var(--s-1); left: var(--s-1); z-index: 100; padding: 0.75rem 1rem; background: var(--white); color: var(--ink); font-weight: 600; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.dark.section--navy { background: #0B2540; --ink-line: #24456A; }
.section--navy .milestone::before { background: #0B2540; }
.dark { background: var(--ink); color: var(--on-ink); --logo-mark: #2A9AD4; --logo-v: #7CC2EE; --logo-text: #FFFFFF; }
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--on-ink); }
.paper { background: var(--paper); }
.mist { background: var(--mist); }

/* Küçük üst etiket: büyük harf yerine cümle düzeni; başında rota motifinin başlangıç noktası */
.label { display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: var(--blue); }
.label::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border: 1.5px solid currentColor; border-radius: 50%; }
.dark .label { color: var(--signal); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.dark .lead { color: var(--on-ink-muted); }
.muted { color: var(--muted); }
.dark .muted { color: var(--on-ink-muted); }
.section { padding-block: var(--section); }
.stack { display: grid; gap: var(--s-2); align-content: start; }
.stack-lg { display: grid; gap: var(--s-3); align-content: start; }

.grid-12 { display: grid; gap: var(--s-4) var(--s-3); }
@media (min-width: 64em) { .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* ---------- Butonlar ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 3rem;
  padding: 0.625rem 1.375rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: var(--on-ink);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { background: var(--ink); }
.btn svg { width: 1rem; height: 1rem; flex: none; transition: transform 0.2s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--action); color: #FFFFFF; }
.btn--primary:hover { background: var(--action-hover); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: #DCEBF6; }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--mist); }
.dark .btn--ghost { color: var(--on-ink); border-color: rgb(255 255 255 / 0.35); }
.dark .btn--ghost:hover { background: rgb(255 255 255 / 0.06); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; box-shadow: none; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { background: var(--action); }
.btn[disabled] svg, .btn[aria-disabled="true"] svg { transform: none; }

.link { color: var(--blue); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size 0.2s ease; }
.link:hover { background-size: 100% 2px; }
.dark .link { color: var(--on-ink); }
.arrow-link { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; color: var(--navy); text-decoration: none; }
.arrow-link svg { width: 1rem; transition: transform 0.2s ease; }
.arrow-link:hover svg { transform: translateX(4px); }
.dark .arrow-link { color: var(--on-ink); }

/* ---------- Teyit bekleyen içerik işareti ---------- */
.pending { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.125rem 0.5rem; border: 1px dashed #B58A2A; border-radius: 4px; background: #FFF8E6; color: #6B4E0E; font-size: var(--fs-small); font-weight: 500; }
.dark .pending { background: rgb(255 210 120 / 0.08); color: #F5D38B; border-color: #9E7B2B; }

/* Görsel yer tutucu (onaylı asset bekleniyor) */
.placeholder {
  display: grid;
  place-items: center;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background:
    repeating-linear-gradient(135deg, rgb(12 52 90 / 0.035) 0 12px, transparent 12px 24px),
    var(--white);
  color: var(--muted);
  text-align: center;
}
.placeholder strong { color: var(--graphite); font-weight: 600; }
.placeholder p { font-size: var(--fs-small); max-width: 36ch; }

/* ---------- Rota motifi (liste göstergesi) ---------- */
.route li { position: relative; padding: 0 0 var(--s-4) 2.25rem; }
.route li:last-child { padding-bottom: 0; }
.route li::before { content: ""; position: absolute; left: 6px; top: 1rem; bottom: -0.25rem; width: 2px; background: var(--blue); opacity: 0.3; }
.route li:last-child::before { display: none; }
.route li::after { content: ""; position: absolute; left: 0; top: 0.35rem; width: 14px; height: 14px; border: 2px solid var(--blue); border-radius: 50%; background: var(--route-bg, var(--white)); }
.route li:last-child::after { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 4px rgb(12 52 90 / 0.14); }
.route p { margin-top: 0.25rem; color: var(--muted); font-size: var(--fs-small); max-width: 40ch; }
.dark .route li::after { --route-bg: var(--ink); border-color: var(--signal); }
.dark .route li::before { background: var(--signal); }
.dark .route li:last-child::after { background: var(--white); border-color: var(--white); box-shadow: 0 0 0 4px rgb(255 255 255 / 0.16); }
.dark .route p { color: var(--on-ink-muted); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); transition: background-color 0.25s ease, border-color 0.25s ease; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--header-h); }
.brand { display: inline-flex; padding-block: var(--s-1); }
.brand .logo { width: 4.25rem; }
.site-nav a { display: flex; align-items: center; min-height: 2.75rem; color: var(--graphite); font-weight: 500; text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--navy); font-weight: 600; }

.menu-toggle { display: none; }
.js .menu-toggle { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.75rem; margin-right: -0.75rem; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; }
.js .menu-toggle:hover, .js .menu-toggle[aria-expanded="true"] { background: var(--mist); }
.js .header--dark .menu-toggle:hover, .js .header--dark .menu-toggle[aria-expanded="true"] { background: rgb(255 255 255 / 0.1); }
.menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 1.125rem; height: 2px; background: currentColor; }
.menu-icon { position: relative; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -6px; }
.menu-icon::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }

.js .site-nav { display: none; position: absolute; top: 100%; inset-inline: 0; background: var(--white); border-bottom: 1px solid var(--line); max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
.js .site-nav.is-open { display: block; }
.js .site-nav ul { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; padding-block: var(--s-1) var(--s-3); }
.js .site-nav li + li { border-top: 1px solid var(--line); }
.js .site-nav a { min-height: 3.25rem; font-size: 1.0625rem; }

/* Koyu açılış bölümü olan sayfalarda header en üstte şeffaf */
.header--dark { background: var(--ink); color: var(--on-ink); border-bottom-color: rgb(255 255 255 / 0.08); --logo-mark: #2A9AD4; --logo-v: #7CC2EE; --logo-text: #FFFFFF; }
.header--dark :focus-visible { outline-color: var(--focus-on-ink); }
.header--dark .site-nav a { color: var(--on-ink-muted); }
.header--dark .site-nav a[aria-current="page"] { color: var(--on-ink); }
.js .header--dark .site-nav { background: var(--ink); border-bottom-color: var(--ink-line); }
.js .header--dark .site-nav li + li { border-top-color: var(--ink-line); }
.js .header--dark .site-nav a { color: var(--on-ink); }
.js .header--dark.is-top { background: transparent; border-bottom-color: transparent; }
/* Hero'dayken (header şeffaf) menünün arkasında yumuşak bir koyulaşma; header'ın altına taşarak kaybolur, sert kenar bırakmaz */
.js .header--dark::before { content: ""; position: absolute; inset: 0 0 -70% 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
  background: linear-gradient(180deg, rgb(4 10 20 / 0.62) 0%, rgb(4 10 20 / 0.4) 45%, rgb(4 10 20 / 0.14) 75%, rgb(4 10 20 / 0) 100%); }
.js .header--dark.is-top::before { opacity: 1; }
.js .header--dark + main > :first-child { padding-top: calc(var(--header-h) + 1px + var(--intro-pad, 0px)); margin-top: calc(-1 * var(--header-h) - 1px); }

@media (min-width: 72em) {
  /* Masaüstünde header biraz daha yüksek: logo üst kenara yapışmasın */
  :root { --header-h: 5.25rem; }
  .brand .logo { width: 4.75rem; }
  .js .menu-toggle { display: none; }
  .js .site-nav { display: block; position: static; background: none !important; border: 0; max-height: none; overflow: visible; }
  .js .site-nav ul { display: flex; width: auto; padding: 0; column-gap: var(--s-4); }
  .js .site-nav li + li { border-top: 0; }
  .js .site-nav a { position: relative; min-height: 2.75rem; font-size: var(--fs-small); }
  .js .header--dark .site-nav a { color: var(--on-ink-muted); }
  .js .header--dark .site-nav a:hover, .js .header--dark .site-nav a[aria-current="page"] { color: var(--on-ink); }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.5rem; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 0.3s ease; }
  .site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
}

/* ---------- Sayfa girişleri (iç sayfalar) ---------- */
.page-intro { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.page-intro .grid-12 { align-items: end; }
.page-intro h1 { max-width: 16ch; }
.page-intro .lead { max-width: 40ch; }
@media (min-width: 64em) {
  .page-intro h1 { grid-column: 1 / span 7; }
  .page-intro .intro-side { grid-column: 8 / -1; }
  .page-intro--stacked .intro-side { grid-column: auto; }
}

/* ---------- Cihazlar (CSS çerçeve; ekranlar gerçek ekran görüntüleri) ---------- */

.phone { position: relative; margin: 0; padding: 0; container-type: inline-size; border-radius: 14% / 6.6%; background: linear-gradient(150deg, #6A7480 0%, #1B222B 20%, #0B0F14 55%, #262E38 82%, #6A7480 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 0 0 3px #07090C, 0 40px 60px -24px rgb(7 17 30 / 0.55); }
.phone-screen { position: relative; margin: 3.2cqi; overflow: hidden; border-radius: 11.5% / 5.4%; background: #000; }
.phone-screen img { width: 100%; }
.phone-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgb(255 255 255 / 0.10) 0%, rgb(255 255 255 / 0) 38%); pointer-events: none; }

.window { overflow: hidden; border-radius: var(--r-md); background: var(--white); box-shadow: 0 0 0 1px rgb(12 52 90 / 0.12), 0 30px 60px -30px rgb(12 52 90 / 0.45); }
.window-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding-inline: 12px; background: #F4F6F8; border-bottom: 1px solid #E2E7EC; }
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #C9D1D9; }
.window img { width: 100%; }

.detail { margin: 0; overflow: hidden; border-radius: var(--r-md); background: var(--white); box-shadow: 0 0 0 1px rgb(12 52 90 / 0.1), 0 20px 40px -20px rgb(12 52 90 / 0.45); }
.detail img { width: 100%; }

/* ---------- Hakkımızda ---------- */
/* Açılış: imza töreni fotoğrafı; mobilde fotoğraf üstte, metin altta; masaüstünde tam ekran, metin solda fotoğrafın üstünde */
.about-hero { --intro-pad: 0px; position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; overflow: clip; background: var(--ink); }
.ab-media { position: relative; flex: 1 1 auto; min-height: clamp(13rem, 56vw, 26rem); background: #050B14; }
.ab-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ab-content { position: relative; z-index: 2; display: grid; gap: var(--s-4); padding-block: var(--s-4); }
.ab-copy { display: grid; justify-items: start; gap: var(--s-2); }
.about-hero h1 { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #FFFFFF; }
.ab-lead { max-width: 52ch; margin-top: var(--s-1); font-size: var(--fs-lead); line-height: 1.6; color: rgb(255 255 255 / 0.84); }
.ab-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid rgb(255 255 255 / 0.14); }
.ab-logos { flex: 0 1 auto; justify-content: flex-start; }
.ab-logos .hh-logo { opacity: 0.9; }
@media (min-width: 64em) {
  .about-hero { display: grid; }
  .js .header--dark + main > .about-hero { padding-top: 0; }
  .ab-media { position: absolute; inset: 0; z-index: -1; min-height: 0; }
  .ab-media img { object-position: 60% 35%; }
  .ab-media::after { content: ""; position: absolute; inset: 0; background:
    linear-gradient(90deg, rgb(4 10 20 / 0.94) 0%, rgb(4 10 20 / 0.85) 38%, rgb(4 10 20 / 0.5) 62%, rgb(4 10 20 / 0.35) 100%),
    linear-gradient(180deg, rgb(4 10 20 / 0.55) 0, rgb(4 10 20 / 0) 30%, rgb(4 10 20 / 0) 65%, rgb(4 10 20 / 0.85) 100%); }
  .ab-content { grid-template-rows: 1fr auto; padding-top: calc(var(--header-h) + var(--s-6)); }
  .ab-copy { align-self: center; max-width: 40rem; }
}
/* İçerik blokları: solda küçük etiket, sağda başlık ve metin */
.ab-grid { display: grid; gap: var(--s-3); align-items: start; }
.ab-body { display: grid; gap: var(--s-2); max-width: 48rem; }
.ab-body h2 { margin-bottom: var(--s-1); }
.ab-body p { color: var(--muted); }
.ab-body .ab-first { font-size: var(--fs-lead); line-height: 1.6; color: var(--graphite); }
.dark .ab-body .ab-first { color: rgb(255 255 255 / 0.84); }
@media (min-width: 64em) {
  .ab-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); }
  .ab-body { grid-column: 1 / span 9; }
}
.milestones { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.milestone { position: relative; display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 2px solid var(--ink-line); }
.milestone::before { content: ""; position: absolute; left: 0; top: -8px; width: 14px; height: 14px; border: 2px solid var(--signal); border-radius: 50%; background: var(--ink); }
.milestone:last-child::before { background: var(--white); border-color: var(--white); }
.milestone time, .milestone .when { font-size: var(--fs-small); font-weight: 600; color: var(--signal); }
.milestone p { color: var(--on-ink-muted); font-size: var(--fs-small); }
@media (min-width: 56em) { .milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-4); } }

/* ---------- Türkiye'nin Navigasyonu ---------- */
/* Açılış: araç fotoğrafı koyulaştırılmış arka plan; solda başlık ve metin, sağda arayüz önizlemesi (laptop + telefon),
   altta ana sayfadaki gibi durum satırı. Mobilde metin üstte, cihazlar altta. */
.product-hero { position: relative; isolation: isolate; overflow: clip; background: var(--ink); }
.js .header--dark + main > .product-hero { padding-top: var(--header-h); }
.ph-media { position: absolute; inset: 0; z-index: -1; background: #050B14; }
.ph-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; opacity: 0.55; }
.ph-media::after { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgb(4 10 20 / 0.9) 0%, rgb(4 10 20 / 0.7) 40%, rgb(4 10 20 / 0.35) 100%),
  linear-gradient(180deg, rgb(4 10 20 / 0.6) 0, rgb(4 10 20 / 0) 30%, rgb(4 10 20 / 0) 70%, rgb(4 10 20 / 0.85) 100%); }
.ph-content { display: grid; gap: var(--s-6); padding-block: var(--s-6) var(--s-4); }
.ph-main { display: grid; gap: var(--s-8); align-items: center; }
.ph-copy { display: grid; justify-items: start; gap: var(--s-2); }
.product-hero h1 { font-size: clamp(2.25rem, 1.45rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #FFFFFF; }
.ph-lead { max-width: 46ch; margin-top: var(--s-1); font-size: var(--fs-lead); line-height: 1.55; color: rgb(255 255 255 / 0.8); }
.ph-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid rgb(255 255 255 / 0.14); }
.ph-status { display: inline-flex; align-items: center; gap: 0.625rem; font-size: var(--fs-small); color: rgb(255 255 255 / 0.78); }
.ph-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgb(76 184 232 / 0.2); }
/* Cihazlar: laptop (web) önde-arkada, telefon solda önde */
.ph-devices { position: relative; padding: 0 16% 2% 0; }
.laptop { margin: 0; }
.lt-lid { position: relative; padding: 2.4% 2.4% 3%; border-radius: 2.6% 2.6% 1% 1% / 4% 4% 1.5% 1.5%; background: #0B0D10; box-shadow: inset 0 0 0 1px #2E333A, 0 0 0 1px #8D949C, 0 40px 70px -34px rgb(0 0 0 / 0.55); }
.lt-lid::before { content: ""; position: absolute; top: 0.9%; left: 50%; width: 0.7%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #2A3038; box-shadow: inset 0 0 0 1px #3B434D; }
.lt-screen { overflow: hidden; border-radius: 0.4% / 0.7%; background: #000; }
.lt-screen img { display: block; width: 100%; height: auto; }
.lt-base { position: relative; width: 114%; height: 0; padding-bottom: 2.4%; margin-left: -7%; border-radius: 0 0 46% 46% / 0 0 100% 100%; background: linear-gradient(180deg, #F1F3F5 0%, #D3D8DD 38%, #AEB4BB 78%, #8D949C 100%); box-shadow: 0 1px 0 #6F767E, 0 22px 30px -16px rgb(7 17 30 / 0.45); }
.lt-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 42%; transform: translateX(-50%); border-radius: 0 0 0.75rem 0.75rem; background: linear-gradient(180deg, #A9AFB6, #C9CED3); }
.ph-devices .phone { position: absolute; right: 0; bottom: 0; width: 27%; }
/* Hover: cihazlar hafifçe ayrışır (yalnız fareli cihazlarda; "hareketi azalt"ta genel kural geçişleri kapatır) */
@media (hover: hover) and (pointer: fine) {
  .ph-devices .laptop, .ph-devices .phone { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s ease; }
  .ph-devices:hover .laptop { transform: translate3d(-1.5%, -1.5%, 0); }
  .ph-devices:hover .phone { transform: translate3d(6%, -5%, 0); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 0 0 3px #07090C, 0 60px 80px -28px rgb(0 0 0 / 0.75); }
}
@media (min-width: 64em) {
  .product-hero { min-height: 100vh; min-height: 100svh; display: grid; }
  .js .header--dark + main > .product-hero { padding-top: 0; }
  .ph-content { grid-template-rows: 1fr auto; padding-top: calc(var(--header-h) + var(--s-6)); }
  .ph-main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); }
  .ph-copy { grid-column: 1 / span 5; }
  .ph-devices { grid-column: 6 / -1; }
}
/* Hero'nun altındaki proje metni: solda küçük etiket, sağda iki tonlu, ölçülü punto; üstte ince çizgi */
.ph-intro { padding-block: clamp(3.5rem, 2rem + 4vw, 5.5rem); background: var(--paper); }
.ph-intro-grid { display: grid; align-items: start; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ph-statement { max-width: 44ch; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); font-weight: 450; line-height: 1.45; letter-spacing: -0.015em; color: var(--navy); text-wrap: pretty; }
.ph-statement span { color: #74808C; }
@media (min-width: 64em) {
  .ph-intro-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); }
  .ph-statement { grid-column: 1 / span 9; }
}

.drive .grid-12 { align-items: center; }
.drive-device { position: relative; margin: 0; }
.drive-device .window { width: 100%; }
.drive-copy .route { margin-top: var(--s-3); }
@media (min-width: 64em) {
  .drive-device { grid-column: 1 / span 6; }
  .drive-copy { grid-column: 8 / -1; }
}

.data .grid-12 { align-items: center; }
.data-media { position: relative; padding: clamp(1.25rem, 3.5vw, 3rem); border-radius: 16px; background:
  linear-gradient(rgb(12 52 90 / 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(90deg, rgb(12 52 90 / 0.05) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(160deg, #E9F1F8 0%, #DDE8F2 100%); }
.data-media .detail { position: absolute; }
.data-media .detail--kategori { left: -1rem; bottom: -1.5rem; width: 34%; }
@media (max-width: 39.99em) { .data-media .detail--kategori { display: none; } }
@media (min-width: 64em) {
  .data-copy { grid-column: 1 / span 4; }
  .data-media { grid-column: 6 / -1; }
}

.future { padding-block: var(--section); }
.future-statement { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; font-weight: 500; max-width: 20ch; text-wrap: balance; }
.future .grid-12 { align-items: start; }
.future-text { display: grid; gap: var(--s-2); max-width: 46ch; color: var(--on-ink-muted); }
.future-text p:first-child { font-size: var(--fs-lead); line-height: 1.55; color: rgb(255 255 255 / 0.86); }
/* Başlık solda, metin sağda; ikisi aynı üst çizgiden başlar */
@media (min-width: 64em) {
  .future .future-statement { grid-column: 1 / span 6; }
  .future .future-text { grid-column: 8 / -1; padding-top: 0.5rem; }
}

.availability .grid-12 { align-items: center; }
.availability-media { margin: 0; }
/* Dizüstü (web) ve önde telefon (mobil) */
.av-devices { position: relative; padding: 0 14% 4% 0; }
.av-devices .phone { position: absolute; right: 0; bottom: 0; width: 25%; }
.platforms { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.platform { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); padding-block: var(--s-2); border-bottom: 1px solid var(--line); }
.platform:first-child { border-top: 1px solid var(--line); }
.platform strong { font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--mist); color: var(--navy); font-size: var(--fs-caption); font-weight: 600; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
@media (min-width: 64em) {
  .availability-copy { grid-column: 1 / span 6; }
  .availability-media { grid-column: 8 / -1; }
}

/* ---------- SSS (akordeon) ---------- */
.faq .grid-12 { align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0; font-size: inherit; }
.faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); width: 100%; min-height: 3.5rem; padding: var(--s-3) 0; border: 0; background: none; color: var(--navy); font: inherit; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); font-weight: 600; text-align: left; cursor: pointer; }
.faq-q:hover { color: var(--blue); }
.faq-q .sign { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.faq-q .sign::before, .faq-q .sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: currentColor; transition: transform 0.25s ease; }
.faq-q .sign::after { transform: rotate(90deg); }
.faq-q[aria-expanded="true"] .sign::after { transform: rotate(0deg); }
.faq-a { padding: 0 0 var(--s-3); color: var(--muted); max-width: 64ch; }
.js .faq-a[hidden] { display: none; }
@media (min-width: 64em) {
  .faq .stack { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  .faq-list { grid-column: 6 / -1; }
}

/* ---------- Haberler sayfası ---------- */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-6); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.filter { min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--graphite); font: inherit; font-weight: 500; cursor: pointer; }
.filter:hover { border-color: var(--line-strong); }
.filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-ink); }
.archive { display: grid; gap: var(--s-6); }
.archive-item { display: grid; gap: var(--s-3); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.archive-item .news-cover { aspect-ratio: 16 / 9; }
.archive-item h2 { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); }
.archive-item .stack-lg { justify-items: start; }
.js [data-cat][hidden] { display: none; }
@media (min-width: 64em) {
  .archive-item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: start; }
  .archive-item .news-cover { grid-column: 1 / span 5; }
  .archive-item .stack-lg { grid-column: 7 / -1; }
}
/* Haberler: gruplar */
.news-group { display: grid; gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.news-sub { font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem); }
/* Videolar: yatay ve dikey video aynı yükseklikte */
.video-row { display: grid; gap: var(--s-6) var(--s-4); align-items: start; }
.video-card { display: grid; gap: var(--s-2); justify-items: start; align-content: start; }
.video-card .vcard-media { width: 100%; }
.video-card h3 { font-size: var(--fs-h3); }
.vcard-media.vframe-v { aspect-ratio: 4 / 5; background: #050B14; }
.vcard-media.vframe-v video { object-fit: contain; }
@media (min-width: 64em) {
  .video-row { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--s-4); }
  .vcard-media.vframe-v { aspect-ratio: 8 / 9; }
}
/* Basında BvB: öne çıkan haber kartı + liste */
.press-grid { display: grid; gap: var(--s-4); align-items: start; }
.press-feature { position: relative; display: grid; gap: var(--s-2); align-content: start; min-height: 100%; padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); border-radius: var(--r-lg); background: var(--ink); color: var(--on-ink); transition: background-color 0.25s ease; }
.press-feature:hover { background: #0E2238; }
.press-source { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.02em; color: var(--signal); }
.press-feature h3 { font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem); line-height: 1.2; letter-spacing: -0.02em; }
.press-feature h3 a { color: #FFFFFF; text-decoration: none; }
.press-feature h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.press-feature h3 a:focus-visible { outline: none; }
.press-feature:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.press-feature .news-meta { color: var(--on-ink-muted); }
.press-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: var(--s-3); font-size: var(--fs-small); font-weight: 600; color: #FFFFFF; }
.press-more svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.press-feature:hover .press-more svg { transform: translateX(3px); }
.press-list { border-top: 1px solid var(--line); }
.press-list li { display: grid; gap: 0.375rem; padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.press-source-sm { font-weight: 600; color: var(--navy); }
.press-list li a { justify-self: start; color: var(--navy); font-weight: 600; font-size: 1.0625rem; line-height: 1.4; text-decoration: none; }
.press-list li a:hover { color: var(--action); text-decoration: underline; text-underline-offset: 0.2em; }
@media (min-width: 64em) {
  .press-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-6); align-items: stretch; }
  .press-list { align-self: start; }
}

/* ---------- Basın Odası ---------- */
.resources { display: grid; gap: var(--s-6); }
.res-group { display: grid; gap: var(--s-3); }
.res-group > header { display: grid; gap: var(--s-1); }
.res-group > header p { color: var(--muted); max-width: 60ch; }
.res-list { border-top: 1px solid var(--line); }
.res-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.res-item h3 { font-size: 1.0625rem; }
.res-item p { grid-column: 1; font-size: var(--fs-small); color: var(--muted); }
.res-item .btn { grid-row: 1 / span 2; grid-column: 2; min-height: 2.75rem; padding: 0.5rem 1rem; font-size: var(--fs-small); }
.brand-preview { display: grid; gap: var(--s-2); }
.brand-tile { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 1px solid var(--line); }
.brand-tile .logo { width: 38%; }
.brand-tile--dark { background: var(--ink); border-color: var(--ink); --logo-mark: #FFFFFF; --logo-v: #FFFFFF; --logo-text: #FFFFFF; }
.brand-tile--light { background: var(--white); }
/* Renk örnekleri: telefonda alt alta (renk kutusu + ad), geniş ekranda üç sütun şerit */
.swatches { display: grid; gap: 0.625rem; }
.swatch { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: 0.75rem; min-width: 0; font-size: var(--fs-small); color: var(--muted); }
.swatch i { display: block; width: 100%; height: 2.75rem; min-width: 0; border-radius: var(--r-sm); border: 1px solid rgb(0 0 0 / 0.06); }
@media (min-width: 40em) {
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-1); }
  .swatch { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; font-size: var(--fs-caption); }
  .swatch i { height: auto; aspect-ratio: 4 / 1; }
}
@media (min-width: 40em) { .brand-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); } .brand-preview .swatches { grid-column: 1 / -1; } }
@media (min-width: 64em) {
  .press-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: start; }
  .press-nav { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--s-4)); }
  .resources { grid-column: 5 / -1; }
}
.press-nav ul { display: grid; border-top: 1px solid var(--line); }
.press-nav a { display: flex; align-items: center; min-height: 2.75rem; padding-block: 0.5rem; border-bottom: 1px solid var(--line); color: var(--graphite); font-weight: 500; text-decoration: none; }
.press-nav a:hover { color: var(--blue); }
.contact-lines { display: grid; gap: var(--s-2); }
.contact-lines dt { font-size: var(--fs-small); color: var(--muted); }
.contact-lines dd { font-size: 1.0625rem; font-weight: 600; color: var(--navy); }
.contact-lines a { text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.dark .contact-lines dt { color: var(--on-ink-muted); }
.dark .contact-lines dd { color: var(--on-ink); }

/* ---------- Kariyer ---------- */
.career-hero { --intro-pad: clamp(3rem, 2rem + 5vw, 6.5rem); padding-block: var(--intro-pad) clamp(3rem, 6vw, 5rem); }
.career-hero h1 { max-width: 15ch; }
.career-hero .grid-12 { align-items: start; row-gap: var(--s-4); }
.career-hero .lead { max-width: 46ch; color: rgb(255 255 255 / 0.86); }
/* Başlık, metin ve etiketler solda, koyu tarafta; araç sağda açıkta kalır */
@media (min-width: 64em) { .career-hero h1, .career-hero .stack-lg { grid-column: 1 / span 6; } }
.fields { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.fields li { padding: 0.4375rem 0.875rem; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px; background: rgb(255 255 255 / 0.07); color: rgb(255 255 255 / 0.9); font-size: var(--fs-small); font-weight: 500; }

/* ---------- Formlar ---------- */
/* Tüm alanlar aynı yükseklikte ve hizada; ince çerçeve, odakta mavi halka; açılır liste ve dosya alanı sitenin diline uygun */
.form { display: grid; gap: var(--s-3); }
.form-row { display: grid; gap: var(--s-3); align-items: start; }
/* Yan yana alanlar: etiket, kutu ve uyarı satırları iki sütunda hizalı kalır (biri hata verince diğeri kaymaz) */
@media (min-width: 40em) {
  .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; row-gap: 0; }
  .form-row > .field { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0.5rem; }
  .form-row > .field > label { align-self: end; }
}
.form-req { font-size: var(--fs-small); color: var(--muted); }
.req { margin-left: 0.2em; color: #B42318; font-weight: 600; }
.field { display: grid; gap: 0.5rem; align-content: start; }
.field label, .field .field-label { font-weight: 500; font-size: var(--fs-small); color: var(--graphite); }
.field .opt { font-weight: 400; color: var(--muted); }
.field .hint { font-size: var(--fs-caption); color: var(--muted); }
.field input:not([type="file"]), .field select, .field textarea {
  display: block; width: 100%; height: 3.25rem; margin: 0; padding: 0 1rem;
  border: 1px solid #CDD5DD; border-radius: var(--r-sm); background: var(--white);
  color: var(--graphite); font: inherit; font-size: 1rem; line-height: 1.4;
  -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { height: auto; min-height: 9.5rem; padding-block: 0.875rem; resize: vertical; }
.field select { padding-right: 2.75rem; cursor: pointer; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%230C345A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.125rem; }
.field select:invalid { color: #6B7682; }
/* Özel açılır liste (JS ile; native select arka planda) */
.select { position: relative; }
.select-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.select-button { display: flex; align-items: center; width: 100%; height: 3.25rem; padding: 0 2.75rem 0 1rem; border: 1px solid #CDD5DD; border-radius: var(--r-sm); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8' fill='none' stroke='%230C345A' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0.875rem center / 1.125rem; color: var(--graphite); font: inherit; font-size: 1rem; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.select-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.select.is-empty .select-value { color: #8A96A3; }
.select-button:hover { border-color: #9AA6B2; }
.select-button:focus-visible, .select.is-open .select-button { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgb(10 102 168 / 0.22); }
.select.is-open .select-button { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 12l4.5-4.5L14.5 12' fill='none' stroke='%230A66A8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.select-list { position: absolute; z-index: 20; top: calc(100% + 0.375rem); left: 0; right: 0; max-height: 18rem; overflow-y: auto; margin: 0; padding: 0.375rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); box-shadow: 0 18px 40px -16px rgb(7 17 30 / 0.3); list-style: none; }
.select-list:focus { outline: none; }
.select-list li { position: relative; display: flex; align-items: center; min-height: 2.75rem; padding: 0 2.5rem 0 0.75rem; border-radius: var(--r-sm); color: var(--graphite); cursor: pointer; }
.select-list li.is-active { background: var(--mist); color: var(--navy); }
.select-list li[aria-selected="true"] { font-weight: 600; color: var(--navy); }
.select-list li[aria-selected="true"]::after { content: ""; position: absolute; right: 0.875rem; top: 50%; width: 0.375rem; height: 0.75rem; margin-top: -0.45rem; border: solid var(--action); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.field [aria-invalid="true"] + .select-button { border-color: #B42318; }
.field input::placeholder, .field textarea::placeholder { color: #8A96A3; opacity: 1; }
.field input:not([type="file"]):hover, .field select:hover, .field textarea:hover { border-color: #9AA6B2; }
.field input:not([type="file"]):focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgb(10 102 168 / 0.22); }
.field [aria-invalid="true"] { border-color: #B42318; }
.field .error, .check .error { display: flex; gap: 0.375rem; margin: 0; font-size: var(--fs-small); line-height: 1.4; color: #B42318; font-weight: 500; }
.check .error { flex-basis: 100%; }
.field .error::before, .check .error::before { content: "!"; display: grid; place-items: center; flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; border-radius: 50%; background: #B42318; color: #fff; font-size: 0.6875rem; font-weight: 700; line-height: 1; }
.file-drop[aria-invalid="true"] { border-color: #B42318; background: #FFFBFA; }
/* Dosya alanı: kesik çizgili bırakma alanı; gerçek input alanı kaplar (tıklama ve sürükle-bırak çalışır) */
.file-drop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; min-height: 5.5rem; padding: 1rem 1.25rem; border: 1px dashed #AEB9C4; border-radius: var(--r-sm); background: var(--white); color: var(--muted); font-size: var(--fs-small); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
.file-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-drop:hover, .file-drop.is-over { border-color: var(--action); background: #F5F9FC; }
.file-drop:focus-within { border-color: var(--action); border-style: solid; box-shadow: 0 0 0 3px rgb(10 102 168 / 0.22); }
.file-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgb(10 102 168 / 0.08); color: var(--action); }
.file-icon svg { width: 1.25rem; height: 1.25rem; }
.file-cta { font-weight: 600; color: var(--action); }
.file-name { flex-basis: 100%; padding-left: 3.375rem; font-weight: 500; color: var(--graphite); }
.file-name:empty { display: none; }
.form-note { max-width: 62ch; font-size: var(--fs-small); color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.form-status { display: inline-flex; align-items: flex-start; gap: 0.5rem; max-width: 44ch; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.form-status svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 0.05rem; color: var(--action); }
.form-status.is-busy { color: var(--graphite); }
.form-status.is-ok { padding: 0.625rem 0.875rem; border-radius: var(--r-sm); background: #ECF7F1; color: #0E5A35; font-weight: 500; }
.form-status.is-ok svg { color: #127A47; }
.form-status.is-error { color: #B42318; font-weight: 500; }
.form-status.is-error svg { color: #B42318; }
button[type="submit"][disabled] { cursor: not-allowed; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

/* ---------- İletişim ---------- */
.contact-layout { display: grid; gap: var(--s-8); }
.contact-card { display: grid; gap: var(--s-3); align-content: start; }
.support { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--r-lg); background: var(--paper); }
.support ul { display: grid; gap: 0.25rem; padding-left: 1.25rem; list-style: disc; color: var(--muted); }
.warning { display: flex; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid #F1C9C4; border-radius: var(--r-sm); background: #FDF4F3; color: #7A1D15; font-size: var(--fs-small); }
@media (min-width: 64em) {
  .contact-layout { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); }
  .contact-card { grid-column: 1 / span 4; }
  .contact-form { grid-column: 6 / -1; }
}

/* ---------- Footer ---------- */
.site-footer { padding-top: var(--s-8); font-size: var(--fs-small); }
.footer-grid { display: grid; gap: var(--s-6); padding-bottom: var(--s-6); }
.footer-about { display: grid; gap: var(--s-3); max-width: 30rem; }
.footer-about .logo { width: 5.5rem; }
.footer-about p { color: var(--on-ink-muted); }
.footer-col h2 { margin-bottom: var(--s-2); font-size: var(--fs-small); font-weight: 600; color: var(--on-ink); }
.footer-col a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--on-ink-muted); text-decoration: none; }
.footer-col a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.footer-col p { color: var(--on-ink-muted); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--ink-line); color: var(--on-ink-muted); }
@media (min-width: 48em) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: 1 / -1; } }
@media (min-width: 64em) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } .footer-about { grid-column: auto; } }
.footer-col a { overflow-wrap: anywhere; }

/* ---------- Görünür olma animasyonu ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------- Yardımcı yerleşim sınıfları ---------- */
.pt-0 { padding-top: 0; }
.mt-6 { margin-top: var(--s-6); }
@media (min-width: 64em) {
  .col-full { grid-column: 1 / -1; }
  .col-a { grid-column: 1 / span 5; }
  .col-b { grid-column: 7 / -1; }
  .col-a4 { grid-column: 1 / span 4; }
  .col-b6 { grid-column: 6 / -1; }
}

/* ---------- Haber kartları ---------- */
.news-card { display: grid; gap: var(--s-2); align-content: start; }
.news-card a.news-title { text-decoration: none; }
.news-card a.news-title:hover h3, .news-card a.news-title:focus-visible h3 { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1.5px; }
.news-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; font-size: var(--fs-small); color: var(--muted); }
.news-meta .cat { font-weight: 600; color: var(--blue); }
.news-card p { color: var(--muted); }
.news-cover { position: relative; display: grid; align-content: end; aspect-ratio: 16 / 10; padding: var(--s-3); overflow: hidden; border-radius: var(--r-md); background: var(--ink); color: var(--on-ink); }
.news-cover svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.news-cover > span { position: relative; z-index: 1; align-self: start; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); font-weight: 600; letter-spacing: -0.01em; }
.news-cover:has(> span) { align-content: start; }
.news-photo { margin: 0; padding: 0; }
.news-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.empty { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-md); color: var(--muted); }

/* ---------- Görsel açıklaması / kaynak satırı (tüm sayfalarda tek biçim) ---------- */
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--muted); }
.dark .caption { color: var(--on-ink-muted); }

/* ---------- Video kartı (haberler; kapak + oynat düğmesi, tıklanınca yerel oynatıcı) ---------- */
.vcard { gap: var(--s-2); }
.vcard h3 { font-size: var(--fs-h3); }
.vcard-media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--r-md); background: var(--ink); }
.vcard-media video { width: 100%; height: 100%; object-fit: cover; }
.vcard-play { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 0.625rem; width: 100%; padding: 0.875rem; border: 0; background: linear-gradient(0deg, rgb(4 10 20 / 0.45), rgb(4 10 20 / 0) 45%); color: #FFFFFF; font: inherit; cursor: pointer; }
.vcard-play[hidden] { display: none; }
.vcard-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #FFFFFF; color: var(--navy); transition: transform 0.2s ease; }
.vcard-icon svg { width: 1.125rem; margin-left: 2px; }
.vcard-time { padding-bottom: 0.625rem; font-size: var(--fs-caption); font-weight: 600; font-variant-numeric: tabular-nums; }
.vcard-play:hover .vcard-icon, .vcard-play:focus-visible .vcard-icon { transform: scale(1.06); }
.vcard-play:focus-visible { outline-offset: -4px; }
/* Haberler › Görüntülü haberler: büyük video + yanında künye */
.va-head { display: grid; gap: var(--s-1); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.va-feature { display: grid; gap: var(--s-3); }
.va-body { display: grid; justify-items: start; gap: var(--s-2); align-content: start; }
.va-body h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.va-body > p:not(.news-meta) { max-width: 36ch; font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); }
.va-body .arrow-link { margin-top: var(--s-1); }
/* Öne çıkan videoda oynat düğmesi sol altta (kapaktaki başlığı kapatmaz), biraz daha büyük; süre küçük etiket */
.va-feature .vcard-play { padding: clamp(0.875rem, 2vw, 1.5rem); }
.va-feature .vcard-icon { width: clamp(3rem, 2.4rem + 1.6vw, 4rem); height: clamp(3rem, 2.4rem + 1.6vw, 4rem); box-shadow: 0 6px 20px rgb(4 10 20 / 0.35); }
.va-feature .vcard-icon svg { width: 40%; }
.va-feature .vcard-time { margin-bottom: clamp(0.65rem, 0.35rem + 0.8vw, 1.15rem); padding: 0.25rem 0.625rem; border-radius: 999px; background: rgb(4 10 20 / 0.7); }
@media (min-width: 64em) {
  .va-feature { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: end; }
  .va-feature .vcard-media { grid-column: 1 / span 8; }
  .va-body { grid-column: 9 / -1; padding-top: var(--s-3); border-top: 1px solid var(--line); }
}

/* ---------- Basın Odası girişi: başlık ve metin sola hizalı, alt alta ---------- */
.page-intro--stacked .container { display: grid; gap: var(--s-3); justify-items: start; }
.page-intro--stacked h1 { max-width: none; }
.page-intro--stacked .lead { max-width: 62ch; }
.press-body { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); border-top: 1px solid var(--line); }
@media (max-width: 63.99em) { .press-nav { margin-bottom: var(--s-6); } }

/* ---------- İç sayfa giriş görselleri ---------- */
.career-hero--photo { position: relative; isolation: isolate; background:
  linear-gradient(90deg, rgb(7 17 30 / 0.95) 0%, rgb(7 17 30 / 0.86) 38%, rgb(7 17 30 / 0.45) 62%, rgb(7 17 30 / 0.2) 100%),
  #07111E url("../img/yolarda-kapak.webp") 70% 55% / cover no-repeat; }
@media (max-width: 47.99em) { .career-hero--photo { background:
  linear-gradient(180deg, rgb(7 17 30 / 0.9), rgb(7 17 30 / 0.78)),
  #07111E url("../img/yolarda-kapak-960.webp") 65% 50% / cover no-repeat; } }

/* ---------- Boş durumlar: sakin bilgi paneli ---------- */
.note-panel { display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-4); border-radius: var(--r-md); background: var(--mist); color: var(--muted); }
.paper .note-panel { background: var(--white); }
.note-panel p { max-width: 56ch; }
.note-panel strong { color: var(--graphite); font-weight: 600; }
.note-panel a:not(.arrow-link) { color: var(--blue); font-weight: 600; }
.note-panel[hidden] { display: none; }

/* ---------- 404: sayfa listesi ---------- */
.nf-action { margin-top: var(--s-4); }
.nf-links { padding-top: 0; }
.nf-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.nf-list li { border-bottom: 1px solid var(--line); }
.nf-list .arrow-link { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
@media (min-width: 48em) { .nf-list { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); } }

/* ---------- Footer ---------- */
/* Son bölüm koyuysa footer ile arasına ayırıcı çizgi (ör. Hakkımızda › Geleceğe Bakışımız) */
main:has(> section.dark:last-child) + .site-footer { padding-top: 0; }
main:has(> section.dark:last-child) + .site-footer > .container { padding-top: var(--s-8); border-top: 1px solid var(--ink-line); }

/* =====================================================================
   ANA SAYFA
   Ritim: film (koyu, tam ekran) → ne yapıyoruz (sakin metin + harita) → saha fotoğrafı (tam genişlik)
          → kimler var (ince ayırıcılı liste) → haberler (kompakt) → kariyer şeridi → footer
   ===================================================================== */

/* Header ana sayfada filmin üstünde şeffaf; menü bir tık daha belirgin */
@media (min-width: 72em) {
  .header--home .brand .logo { width: 5.25rem; }
  .js .header--home .site-nav ul { column-gap: clamp(1.5rem, 2.4vw, 2.5rem); }
  .js .header--home .site-nav a { font-size: 0.9375rem; }
  .js .header--home.header--dark .site-nav a { color: rgb(255 255 255 / 0.86); }
  .js .header--home.header--dark .site-nav a:hover { color: #FFFFFF; }
}

/* ---------- Açılış ---------- */
.home-hero { --intro-pad: 0px; position: relative; isolation: isolate; overflow: clip; background: var(--ink); }
.js .header--dark + main > .home-hero { padding-top: 0; }
.hh-media { position: relative; background: #050B14 url("../img/yolarda-kapak-960.webp") 62% 45% / cover no-repeat; }
.hh-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; }
.hh-content { position: relative; z-index: 2; display: grid; gap: var(--s-6); }
.hh-copy { display: grid; justify-items: start; gap: var(--s-3); }
.home-hero h1 { max-width: 12ch; font-size: clamp(2.25rem, 1.45rem + 2.6vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: #FFFFFF; }
.hh-lead { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: rgb(255 255 255 / 0.92); }
.hh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-1); }

/* İkincil film bağlantısı: çerçeveli küçük ikon + metin + süre; alt çizgi yalnız üzerine gelince */
.hh-film { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 2.75rem; padding: 0; border: 0; background: none; color: #FFFFFF; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.hh-film-icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border: 1px solid rgb(255 255 255 / 0.45); border-radius: 50%; transition: background-color 0.2s ease, border-color 0.2s ease; }
.hh-film-icon svg { width: 1rem; height: 1rem; }
.hh-film-label { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.3em; text-decoration-thickness: 1px; transition: text-decoration-color 0.2s ease; }
.hh-film-time { margin-left: -0.25rem; font-size: var(--fs-small); font-weight: 400; color: rgb(255 255 255 / 0.82); font-variant-numeric: tabular-nums; }
.hh-film:hover .hh-film-icon, .hh-film:focus-visible .hh-film-icon { border-color: #FFFFFF; background: rgb(255 255 255 / 0.12); }
.hh-film:hover .hh-film-label, .hh-film:focus-visible .hh-film-label { text-decoration-color: currentColor; }
.hh-film[hidden], .hh-toggle[hidden], .hh-close[hidden] { display: none; }

.hh-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-2); border-top: 1px solid rgb(255 255 255 / 0.14); }
/* Hero alt satırı: BvB, ortaklar ve paydaş logoları beyaz, oranları korunur (yalnız yükseklik verilir) */
.hh-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) clamp(1.25rem, 3vw, 2.5rem); margin-right: auto; --logo-mark: #FFFFFF; --logo-v: #FFFFFF; --logo-text: #FFFFFF; }
.hh-logo { display: flex; flex: none; align-items: center; opacity: 0.82; }
/* Çatı marka BvB: tam beyaz, daha büyük, sağında ince dikey ayraç; ortak ve paydaş logoları daha küçük ve geride */
.hh-logo--bvb { opacity: 1; padding-right: clamp(1.25rem, 3vw, 2.5rem); border-right: 1px solid rgb(255 255 255 / 0.32); }
.hh-logo svg { display: block; width: auto; }
.hh-logo--basarsoft svg *, .hh-logo--bv svg *, .hh-logo--togg svg * { fill: #FFFFFF; }
.hh-logo--bvb svg { height: clamp(1.875rem, 1.55rem + 0.7vw, 2.375rem); }
.hh-logo--basarsoft svg { height: clamp(1rem, 0.82rem + 0.45vw, 1.3rem); }
.hh-logo--bv svg { height: clamp(0.9375rem, 0.78rem + 0.42vw, 1.25rem); }
.hh-logo--togg svg { height: clamp(1.75rem, 1.4rem + 0.85vw, 2.375rem); }

/* Hero tam ekran; sayfanın devam ettiğini bu sakin bağlantı söyler */
.hh-next { display: inline-flex; flex: none; align-items: center; white-space: nowrap; gap: 0.5rem; min-height: 2.75rem; padding-inline: 0.25rem; font-size: var(--fs-small); color: rgb(255 255 255 / 0.9); text-decoration: none; transition: color 0.2s ease; }
.hh-next svg { width: 1rem; height: 1rem; transition: transform 0.2s ease; }
.hh-next:hover { color: #FFFFFF; }
.hh-next:hover svg { transform: translateY(2px); }
/* Telefonda logolar tek satırda, satırı kaplar; kaydırma ipucu gizli */
@media (max-width: 47.99em) {
  .hh-logos { flex: 1; flex-wrap: nowrap; justify-content: flex-start; gap: min(0.875rem, 3.4vw); margin-right: 0; }
  .hh-logo--bvb { padding-right: min(0.875rem, 3.4vw); }
  .hh-next { display: none; }
  .hh-logo--bvb svg { height: min(1.625rem, 7vw); }
  .hh-logo--togg svg { height: min(1.25rem, 5.3vw); }
  .hh-logo--basarsoft svg { height: min(0.9375rem, 3.9vw); }
  .hh-logo--bv svg { height: min(0.875rem, 3.7vw); }
}
.hh-toggle, .hh-close { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgb(255 255 255 / 0.4); border-radius: 50%; background: rgb(4 10 20 / 0.35); color: #FFFFFF; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; }
.hh-toggle:hover, .hh-close:hover { border-color: #FFFFFF; background: rgb(4 10 20 / 0.7); }
.hh-toggle svg, .hh-close svg { width: 1rem; height: 1rem; }
.hh-toggle .i-play { display: none; margin-left: 2px; }
.hh-toggle[aria-pressed="true"] .i-play { display: block; }
.hh-toggle[aria-pressed="true"] .i-pause { display: none; }
.hh-close { position: absolute; top: calc(var(--header-h) + var(--s-2)); right: var(--gutter); z-index: 3; width: auto; gap: 0.5rem; padding: 0 1rem; border-radius: var(--r-sm); grid-auto-flow: column; font: inherit; font-size: var(--fs-small); font-weight: 500; }

/* Telefon ve tablet: header'ın altında kısa bir film şeridi, hemen ardından metin ve ana eylem.
   Yükseklik sabit değil; içerik doğal akar. */
@media (max-width: 63.99em) {
  .js .header--dark + main > .home-hero { padding-top: var(--header-h); }
  .home-hero { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
  .hh-media { flex: 1 1 auto; height: auto; min-height: clamp(9.5rem, 42vw, 18rem); max-height: 62svh; }
  .hh-video { position: absolute; inset: 0; }
  .hh-content { gap: var(--s-3); padding-block: var(--s-3); }
  .hh-copy { gap: var(--s-2); }
  .hh-actions { margin-top: var(--s-1); }
  .hh-toggle { flex: none; margin-left: auto; }
  /* Mobilde yalnız ikon: araç ve ekipmanın üstünü kapatmasın */
  .hh-close { top: calc(var(--header-h) + var(--s-1)); right: var(--s-1); width: 2.75rem; padding: 0; border-radius: 50%; }
  .hh-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .hh-media { min-height: clamp(12rem, 18vw, 20rem); }
  .hh-content { padding-block: var(--s-6) var(--s-4); }
}

/* Masaüstü ve geniş tablet (1024 px+): film tam ekran, metin solda filmin üstünde; okunurluk için yalnız sol kenarda kısa bir koyulaşma */
@media (min-width: 64em) {
  .home-hero { min-height: 100vh; min-height: 100svh; display: grid; }
  .hh-media { position: absolute; inset: 0; }
  .hh-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
    linear-gradient(90deg, rgb(4 10 20 / 0.86) 0%, rgb(4 10 20 / 0.78) 35%, rgb(4 10 20 / 0.5) 55%, rgb(4 10 20 / 0) 75%),
    linear-gradient(180deg, rgb(4 10 20 / 0.6) 0, rgb(4 10 20 / 0) calc(var(--header-h) + 5rem), rgb(4 10 20 / 0) 55%, rgb(4 10 20 / 0.72) 100%); transition: opacity 0.3s ease; }
  /* Metin, menü ile alt satır arasındaki alanda dikeyde ortalı */
  .hh-content { grid-template-rows: 1fr auto; padding-top: calc(var(--header-h) + var(--s-6)); padding-bottom: var(--s-4); }
  .hh-copy { align-self: center; }
  /* Sesli film oynarken metin çekilir, film tamamen görünür */
  .home-hero.is-film .hh-content { opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s 0.25s; }
  .home-hero.is-film .hh-media::after { opacity: 0; }
  .home-hero.is-film .hh-media { z-index: 2; top: var(--header-h); background-image: none; }
}
/* Kısa masaüstü ekranları (ör. 1280×600): açılış menüyle birlikte ekrana sığsın; boşluklar ve başlık ekran yüksekliğine göre küçülür.
   İçerik yine sığmazsa (yazı büyütme vb.) açılış kesilmeden uzar. */
@media (min-width: 64em) and (max-height: 47.5em) {
  .hh-content { gap: var(--s-3); padding-top: calc(var(--header-h) + var(--s-3)); padding-bottom: var(--s-2); }
  .hh-copy { gap: var(--s-2); }
  .home-hero h1 { font-size: clamp(2.25rem, 0.6rem + 5.6vh, 3.75rem); }
  .hh-lead { font-size: clamp(1rem, 0.55rem + 1.3vh, 1.1875rem); }
}
/* 1024–1439 px: aracı biraz sağa kaydır, metinle çakışmasın */
@media (min-width: 64em) and (max-width: 89.99em) { .hh-video { object-position: 75% 50%; } }
/* Sesli film: her ekranda filmin tamamı görünür (kırpılmaz); telefonda/tablette şerit 16:9 olur */
.home-hero.is-film .hh-video { object-fit: contain; object-position: 50% 50%; background: #000; }
@media (max-width: 63.99em) { .home-hero.is-film .hh-media { flex: none; aspect-ratio: 16 / 9; height: auto; min-height: 0; max-height: none; } }
.br-md { display: none; }
@media (min-width: 26em) { .br-md { display: inline; } .home-hero h1 { max-width: none; } }

/* ---------- Ne yapıyoruz ---------- */
.home-about { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); background: var(--paper); }
.home-about .grid-12 { align-items: center; row-gap: var(--s-4); }
.ha-copy { display: grid; justify-items: start; gap: var(--s-2); }
.statement { max-width: 18ch; margin-top: var(--s-1); font-size: clamp(1.875rem, 1.3rem + 2vw, 3rem); font-weight: 560; line-height: 1.05; letter-spacing: -0.035em; }
.ha-text { max-width: 48ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.ha-copy .arrow-link { margin-top: var(--s-1); }
/* Harita: metnin yanında geniş temsilî çizim */
.ha-map { width: 100%; max-width: 40rem; margin: 0; }
.ha-map svg { width: 100%; }
.ha-map text { font: 500 19px var(--font); fill: var(--navy); }
@media (min-width: 64em) {
  .ha-copy { grid-column: 1 / span 5; }
  .ha-map { grid-column: 6 / -1; justify-self: end; }
}

/* ---------- Saha fotoğrafı ---------- */
/* Tam genişlik, alçak yatay çerçeve. Fotoğraf çerçeveden uzun; sayfa kaydırıldıkça çerçeve içinde kayar.
   Bilinçli kadraj: araç bütünüyle görünmez, kaydırdıkça ekipmandan gövdeye keşfedilir. JS yoksa ya da "hareketi azalt"ta sabit kadraj. */
.home-field { margin: 0; }
.hf-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--mist); }
.hf-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 72%; }
.hf-frame { --pan-scale: 1.3; }
.js .hf-frame.is-pan img { position: absolute; top: 0; left: calc((1 - var(--pan-scale)) * 50%); width: calc(var(--pan-scale) * 100%); height: auto; max-width: none; transform: translate3d(0, var(--pan, 0px), 0); will-change: transform; }
@media (min-width: 48em) { .hf-frame { aspect-ratio: 2.4 / 1; } .hf-frame img { object-position: 50% 74%; } }

/* ---------- Kimler var: rolleri gösteren ince ayırıcılı liste ---------- */
.home-partners .grid-12 { row-gap: var(--s-6); align-items: start; }
/* Solda başlık, metin ve bağlantı alt alta; sağda ortaklar tek satırda. Dar ekranlarda alt alta. */
.hp-head { grid-column: 1 / -1; display: grid; justify-items: start; gap: var(--s-2); }
.hp-head h2 { max-width: 14ch; }
.hp-head p { max-width: 40ch; color: var(--muted); }
.hp-side { display: grid; justify-items: start; gap: var(--s-2); }
.home-partners .pcards { grid-column: 1 / -1; }
@media (min-width: 80em) {
  .hp-head { grid-column: 1 / span 4; }
  .home-partners .pcards { grid-column: 5 / -1; }
  .home-partners .pcard:first-child { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--line); }
}
/* Ortaklar: yan yana sütunlar, aralarında ince dikey ayırıcı; logo, kısa tanım ve metin bağlantı */
.pcards { display: grid; border-top: 1px solid var(--line); }
.pcard { display: flex; flex-direction: column; gap: var(--s-2); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.pcard-logo { display: flex; align-items: center; height: 3rem; }
.pcard-logo svg { width: auto; }
.pcard--basarsoft .pcard-logo svg { height: 2rem; }
.pcard--bv .pcard-logo svg { height: 1.875rem; }
.pcard--togg .pcard-logo svg { height: 3rem; }
.pcard p:not(.pcard-role) { flex: 1; max-width: 40ch; color: var(--muted); line-height: 1.6; }
.pcard-btn { display: inline-flex; align-items: center; align-self: flex-start; gap: 0.375rem; min-height: 2.75rem; white-space: nowrap; color: var(--navy); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.pcard-btn svg { flex: none; width: 1rem; height: 1rem; transition: transform 0.25s ease; }
.pcard-btn:hover { color: var(--action); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.pcard-btn:hover svg { transform: translate(2px, -2px); }
@media (min-width: 48em) {
  .pcards { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 0; }
  .pcard { padding: var(--s-1) clamp(1.25rem, 3vw, 2.5rem); border-bottom: 0; border-left: 1px solid var(--line); }
  .pcard:first-child { padding-left: 0; border-left: 0; }
  .pcard:last-child { padding-right: 0; }
}
.ab-roles { margin-top: var(--s-4); }

/* ---------- Haberler ---------- */
.hn-wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.hn-head { display: grid; gap: var(--s-1); }
.hn-head p { max-width: 44ch; color: var(--muted); }
.hn-cards { display: grid; gap: 0 clamp(1.5rem, 3vw, 3rem); }
/* Haber: solda kaynak, tarih ve başlık; sağda küçük görsel (küpür). Üstte ince çizgi. */
.hn-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(5.5rem, 22vw, 9.5rem); grid-template-areas: "meta media" "title media"; grid-template-rows: auto 1fr; align-content: start; align-items: start; gap: 0.5rem var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.hn-item .hn-meta { grid-area: meta; }
.hn-item h3 { grid-area: title; }
.hn-media { grid-area: media; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-sm); background: var(--ink); }
.hn-media img, .hn-media svg { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hn-media--route { background: linear-gradient(135deg, #0B2540, var(--ink)); }
.hn-item:hover .hn-media img, .hn-item:hover .hn-media svg { transform: scale(1.035); }
.hn-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-size: var(--fs-small); color: var(--muted); }
.hn-source { font-weight: 600; color: var(--navy); }
.hn-source::after { content: ""; display: inline-block; width: 1px; height: 0.8em; margin-left: 0.75rem; background: var(--line-strong); vertical-align: -0.05em; }
.hn-item h3 { max-width: 34ch; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.35; letter-spacing: -0.01em; }
.hn-item h3 a { color: var(--navy); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color 0.2s ease; }
.hn-item h3 a::after { content: ""; position: absolute; inset: 0; }
.hn-item:hover h3 a { text-decoration-color: currentColor; }
.hn-item h3 a:focus-visible { outline: none; }
.hn-item:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 6px; border-radius: var(--r-md); }
.hn-all { justify-self: start; }
@media (min-width: 48em) {
  .hn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .hn-wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .hn-cards { grid-column: 1 / -1; }
  .hn-all { grid-column: 2; grid-row: 1; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) { .hn-item:hover .hn-media img, .hn-item:hover .hn-media svg { transform: none; } }

/* ---------- Kariyer şeridi (kompakt, kutusuz) ---------- */
.home-career { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.home-career .grid-12 { align-items: end; row-gap: var(--s-3); }
.home-career h2 { max-width: 16ch; }
.hc-side { display: grid; justify-items: start; gap: var(--s-3); }
.hc-side p { max-width: 44ch; color: var(--muted); }
@media (min-width: 64em) {
  .home-career h2 { grid-column: 1 / span 6; }
  .hc-side { grid-column: 8 / -1; }
}

/* ---------- Harita: Gebze'den 81 ile yayılan çizgiler ---------- */
/* Hareketsiz hâl (hareketi azalt / JS yok): tüm bağlantılar ve iller görünür */
.tm-line { stroke-opacity: 0.28; }
.tm-il { fill: #0078A8; stroke: #FFFFFF; stroke-width: 1.5; }
.tm-labels text, .ha-map .tm-origin { paint-order: stroke; stroke: #EEF2F6; stroke-width: 5px; stroke-linejoin: round; }
.tm-labels text { font-size: 17px; fill: #4A5A6A; }
.ha-map .tm-origin { font-weight: 600; fill: var(--navy); }
.tm-pulse { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-route] .tm-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tm-line 9s ease-out infinite var(--d) both; }
  .js [data-route] .tm-il { fill: #B3C2CF; transform-box: fill-box; transform-origin: center; animation: tm-il 9s ease-out infinite var(--d) both; }
  .js [data-route] .tm-pulse { transform-box: fill-box; transform-origin: center; animation: tm-pulse 2.4s ease-out infinite; }
  .js [data-route] .tm-line, .js [data-route] .tm-il, .js [data-route] .tm-pulse { animation-play-state: paused; }
  .js [data-route].is-in .tm-line, .js [data-route].is-in .tm-il, .js [data-route].is-in .tm-pulse { animation-play-state: running; }
}
/* Çizgi Gebze'den ile uzanır, il noktası yanar; bir süre kalır, söner ve döngü yeniden başlar */
@keyframes tm-line {
  0% { stroke-dashoffset: 1; stroke-opacity: 0.55; }
  14% { stroke-dashoffset: 0; stroke-opacity: 0.55; }
  30% { stroke-dashoffset: 0; stroke-opacity: 0.22; }
  68% { stroke-dashoffset: 0; stroke-opacity: 0.22; }
  80%, 100% { stroke-dashoffset: 0; stroke-opacity: 0; }
}
@keyframes tm-il {
  0%, 12% { fill: #B3C2CF; transform: scale(1); }
  16% { fill: #0078A8; transform: scale(1.7); }
  22% { fill: #0078A8; transform: scale(1); }
  68% { fill: #0078A8; transform: scale(1); }
  80%, 100% { fill: #B3C2CF; transform: scale(1); }
}
@keyframes tm-pulse {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(2.2); }
}



/* ---------- Çerez bandı ---------- */
/* Sol altta yüzen sade panel; sayfayı kilitlemez. Reddet ve Kabul et eşit ağırlıkta. */
.cookie { position: fixed; z-index: 90; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: grid; gap: 0.875rem; max-height: calc(100vh - 1.5rem); overflow-y: auto; padding: 1rem 1.125rem 0.75rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); color: var(--graphite); box-shadow: 0 16px 40px -18px rgb(7 17 30 / 0.4); }
.cookie[hidden] { display: none; }
.cookie-title { font-size: 1rem; font-weight: 600; letter-spacing: 0; color: var(--navy); }
.cookie-text { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.cookie-text a { color: var(--navy); font-weight: 600; text-underline-offset: 0.2em; }
.cookie-prefs fieldset { display: grid; border-top: 1px solid var(--line); }
.cookie-opt { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-2); padding-block: 0.625rem; border-bottom: 1px solid var(--line); cursor: pointer; }
.cookie-opt-text { display: grid; gap: 0.125rem; font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }
.cookie-opt-text strong { color: var(--graphite); font-weight: 600; }
.cookie-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cookie-switch { position: relative; width: 2.5rem; height: 1.5rem; border-radius: 999px; background: #C9D3DC; transition: background-color 0.2s ease; }
.cookie-switch::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); transition: transform 0.2s ease; }
.cookie-opt input:checked + .cookie-switch { background: var(--action); }
.cookie-opt input:checked + .cookie-switch::after { transform: translateX(1rem); }
.cookie-opt input:disabled + .cookie-switch { opacity: 0.5; }
.cookie-opt:has(input:disabled) { cursor: default; }
.cookie-opt input:focus-visible + .cookie-switch { outline: 3px solid var(--focus); outline-offset: 2px; }
.cookie-actions { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 0.5rem; }
.cookie.is-prefs .cookie-actions { grid-template-columns: 1fr 1fr; }
.cookie-btn { min-height: 2.75rem; padding: 0 0.75rem; border: 1px solid var(--navy); border-radius: var(--r-sm); background: var(--white); color: var(--navy); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.cookie-btn:hover { background: var(--navy); color: #FFFFFF; }
.cookie-btn--save { grid-column: 1 / -1; border-color: var(--action); background: var(--action); color: #FFFFFF; }
.cookie-btn--save:hover { border-color: var(--action-hover); background: var(--action-hover); }
.cookie.is-prefs [data-c="reject"], .cookie.is-prefs [data-c="accept"] { order: 2; }
.cookie-more { justify-self: start; min-height: 2.75rem; padding: 0 0.375rem 0 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: var(--fs-small); font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.cookie-more:hover { color: var(--navy); }
.cookie-more[hidden], .cookie-btn[hidden] { display: none; }
.cookie :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (min-width: 40em) { .cookie { left: 1.25rem; right: auto; bottom: 1.25rem; width: 22rem; } }

/* Footer alt satırı: yasal bağlantılar */
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.footer-legal a, .footer-legal button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--on-ink-muted); font: inherit; text-decoration: none; cursor: pointer; }
.footer-legal a:hover, .footer-legal button:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.footer-bottom { align-items: center; }

/* Yasal metin sayfaları */
.legal { display: grid; gap: var(--s-3); justify-items: start; }
.legal > * { max-width: 60rem; width: 100%; }
.legal > p { max-width: 62ch; }
.intro-side .btn { margin-top: var(--s-2); }
.legal h2 { margin-top: var(--s-4); font-size: var(--fs-h3); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.cookie-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: var(--fs-small); }
.cookie-table th, .cookie-table td { padding: 0.875rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cookie-table thead th { background: var(--mist); color: var(--navy); font-weight: 600; }
.cookie-table tbody tr:last-child td { border-bottom: 0; }
.cookie-table td { color: var(--muted); }
.cookie-table code { font-size: 0.875em; color: var(--graphite); }

/* ---------- KVKK ---------- */
.kv-layout { display: grid; gap: var(--s-6); align-items: start; }
.kv-list { border-top: 1px solid var(--line); }
.kv-item { border-bottom: 1px solid var(--line); }
.kv-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 3.5rem; padding: var(--s-3) 0; font-weight: 600; color: var(--navy); cursor: pointer; list-style: none; }
.kv-item summary::-webkit-details-marker { display: none; }
.kv-item summary:hover { color: var(--action); }
.kv-item summary .sign { position: relative; flex: none; width: 1.25rem; height: 1.25rem; }
.kv-item summary .sign::before, .kv-item summary .sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: currentColor; transition: transform 0.2s ease; }
.kv-item summary .sign::after { transform: rotate(90deg); }
.kv-item[open] summary .sign::after { transform: rotate(0deg); }
.kv-item summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.kv-body { display: grid; gap: var(--s-2); padding-bottom: var(--s-4); font-size: var(--fs-small); line-height: 1.7; color: var(--muted); }
.kv-body > * { max-width: 72ch; }
.kv-body h2, .kv-body h3, .kv-body h4 { margin-top: var(--s-2); font-size: 1rem; color: var(--graphite); }
.kv-body strong { color: var(--graphite); }
.kv-body ul, .kv-body ol { display: grid; gap: 0.375rem; padding-left: 1.25rem; list-style: disc; }
.kv-body ol { list-style: decimal; }
.kv-body a { color: var(--action); overflow-wrap: anywhere; }
.kv-body .table-wrap { max-width: none; }
.kv-body table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.kv-body td, .kv-body th { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.kv-body thead th { background: var(--mist); color: var(--navy); }
.kv-side { display: grid; gap: var(--s-3); align-content: start; }
.kv-cta { padding: var(--s-3); border-radius: var(--r-md); background: var(--mist); color: var(--graphite); }
.kv-cta a { color: var(--action); font-weight: 600; }
.kv-company { display: grid; gap: var(--s-2); margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.kv-company dt { color: var(--muted); }
.kv-company dd { margin: 0.125rem 0 0; color: var(--graphite); }
.kv-company a { color: var(--action); }
@media (min-width: 64em) {
  .kv-layout { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: var(--s-8); }
  .kv-side { position: sticky; top: calc(var(--header-h) + var(--s-4)); }
}
/* KVKK başvuru formu */
.kvf-layout { align-items: start; }
.kvf-text { gap: var(--s-2); }
.kvf-text p { color: var(--muted); }
.kvf-form-wrap { display: grid; gap: var(--s-2); }
.check { display: flex; align-items: flex-start; gap: 0.75rem; min-height: 2.75rem; font-size: var(--fs-small); color: var(--graphite); cursor: pointer; }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--action); }
.check a { color: var(--action); font-weight: 600; }
@media (min-width: 64em) { .kvf-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: var(--s-8); } }