/*
 * Europa Group holding sitesi — yeni panelin (europa-sistem/apps/web, yonetim.css + bolumler.css) görsel dili:
 * ferah buzlu cam kartlar, pastel ikon daireleri, renkli alt şeritler, lacivert #03438B / amber #EA9C00, Inter.
 * Değişken adları paneldeki adlarla aynı tutuldu (--cam, --golge, --p-mavi-bg …) ki iki ürün birlikte bakımlı kalsın.
 */

@font-face { font-family: 'Inter'; src: url('../fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('../fonts/inter-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --zemin-1: #f4f8fe;
  --zemin-2: #e2ebf8;
  --cam: rgb(255 255 255 / 0.7);
  --cam-guclu: rgb(255 255 255 / 0.9);
  --cam-kenar: rgb(255 255 255 / 0.95);
  --cam-ic: inset 0 1px 0 rgb(255 255 255 / 0.9);
  --cizgi: rgb(3 67 139 / 0.08);
  --golge: 0 22px 50px -24px rgb(3 67 139 / 0.28), 0 2px 10px rgb(3 67 139 / 0.05);
  --golge-yuksek: 0 32px 64px -24px rgb(3 67 139 / 0.4), 0 4px 14px rgb(3 67 139 / 0.08);
  --lacivert: #03438b;
  --lacivert-koyu: #062a5c;
  --mavi: #1e6fd9;
  --mavi-acik: #4c97f0;
  --amber: #ea9c00;
  --amber-acik: #f6b52e;
  --metin: #0e1a30;
  --soluk: #5b6a86;
  --ipucu: #8997b0;
  --orta: #3d4c68;
  --girdi: rgb(255 255 255 / 0.85);

  --p-mavi-bg: #e1edff;   --p-mavi: #2563c9;
  --p-yesil-bg: #d9f5e7;  --p-yesil: #12905a;
  --p-mor-bg: #ebe5ff;    --p-mor: #6a4fd6;
  --p-amber-bg: #ffefcf;  --p-amber: #b4730a;
  --p-turkuaz-bg: #d8f1f6; --p-turkuaz: #17788f;
  --p-pembe-bg: #ffe3ee;  --p-pembe: #b83366;
  --pi-ust: #fff;

  --r-kart: 26px;
  --r-orta: 20px;
  --kap: 1240px;
  --yan: clamp(16px, 4vw, 32px);
  --ust-y: 76px;
  --hiz: cubic-bezier(0.2, 0.8, 0.2, 1);
  --zemin-desen:
    radial-gradient(900px 620px at 4% -8%, rgb(106 163 238 / 0.32), transparent 62%),
    radial-gradient(760px 560px at 100% 18%, rgb(150 190 245 / 0.28), transparent 60%),
    radial-gradient(820px 520px at 70% 108%, rgb(246 181 46 / 0.16), transparent 62%),
    linear-gradient(180deg, var(--zemin-1), var(--zemin-2));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --zemin-1: #0b1424;
    --zemin-2: #070d19;
    --cam: rgb(24 36 62 / 0.72);
    --cam-guclu: rgb(32 48 82 / 0.92);
    --cam-kenar: rgb(130 160 215 / 0.2);
    --cam-ic: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --cizgi: rgb(150 180 235 / 0.13);
    --golge: 0 22px 50px -24px rgb(0 0 0 / 0.65), 0 2px 10px rgb(0 0 0 / 0.25);
    --golge-yuksek: 0 32px 64px -24px rgb(0 0 0 / 0.75), 0 4px 14px rgb(0 0 0 / 0.3);
    --lacivert: #8db8f2;
    --mavi: #6aa3ee;
    --metin: #e7edf8;
    --soluk: #9aa9c6;
    --ipucu: #7f90b1;
    --orta: #b7c6e4;
    --girdi: rgb(14 22 40 / 0.7);
    --p-mavi-bg: #1b2e52;  --p-mavi: #8db8f2;
    --p-yesil-bg: #12311f; --p-yesil: #5fd39a;
    --p-mor-bg: #2a2150;   --p-mor: #b9a4f5;
    --p-amber-bg: #3a2d0c; --p-amber: #f2c76b;
    --p-turkuaz-bg: #10343c; --p-turkuaz: #6fd0e4;
    --p-pembe-bg: #3d1a29; --p-pembe: #f39abd;
    --pi-ust: rgb(255 255 255 / 0.08);
    --zemin-desen:
      radial-gradient(900px 620px at 4% -8%, rgb(74 134 214 / 0.2), transparent 62%),
      radial-gradient(820px 520px at 70% 108%, rgb(242 176 46 / 0.08), transparent 62%),
      linear-gradient(180deg, var(--zemin-1), var(--zemin-2));
  }
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ust-y) + 16px); background: var(--zemin-1); }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--metin);
  background: var(--zemin-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--zemin-desen); pointer-events: none; }
img, video { display: block; max-width: 100%; }
h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 10px; }
.atla { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--lacivert-koyu); color: #fff; font-weight: 600; transition: top 0.2s; }
.atla:focus { top: 12px; }

.kap { width: 100%; max-width: calc(var(--kap) + 2 * var(--yan)); margin-inline: auto; padding-inline: var(--yan); }

.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buzlu cam ---------- */
.cam {
  background: var(--cam);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--cam-kenar);
  box-shadow: var(--golge), var(--cam-ic);
  border-radius: var(--r-kart);
}

/* ---------- Pastel ikon daireleri (paneldeki .pi) ---------- */
.pi {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7), 0 6px 14px -8px rgb(3 67 139 / 0.35);
}
.pi-k { width: 32px; height: 32px; }
.pi-k .ik { width: 16px; height: 16px; }
.pi-yk { border-radius: 14px; }
.pi.mavi    { background: linear-gradient(145deg, var(--pi-ust), var(--p-mavi-bg)); color: var(--p-mavi); }
.pi.yesil   { background: linear-gradient(145deg, var(--pi-ust), var(--p-yesil-bg)); color: var(--p-yesil); }
.pi.mor     { background: linear-gradient(145deg, var(--pi-ust), var(--p-mor-bg)); color: var(--p-mor); }
.pi.amber   { background: linear-gradient(145deg, var(--pi-ust), var(--p-amber-bg)); color: var(--p-amber); }
.pi.turkuaz { background: linear-gradient(145deg, var(--pi-ust), var(--p-turkuaz-bg)); color: var(--p-turkuaz); }
.pi.pembe   { background: linear-gradient(145deg, var(--pi-ust), var(--p-pembe-bg)); color: var(--p-pembe); }
@media (prefers-color-scheme: dark) {
  .pi { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
}

/* Kartın kendi rengi (alt şerit ve vurgu) */
[data-renk='mavi']    { --renk: var(--p-mavi); --renk-bg: var(--p-mavi-bg); }
[data-renk='amber']   { --renk: var(--amber); --renk-bg: var(--p-amber-bg); --renk-yazi: var(--p-amber); }
[data-renk='turkuaz'] { --renk: #1b8aa6; --renk-bg: var(--p-turkuaz-bg); --renk-yazi: var(--p-turkuaz); }
[data-renk='mor']     { --renk: var(--p-mor); --renk-bg: var(--p-mor-bg); }
[data-renk='yesil']   { --renk: var(--p-yesil); --renk-bg: var(--p-yesil-bg); }
[data-renk='pembe']   { --renk: var(--p-pembe); --renk-bg: var(--p-pembe-bg); }
.serit {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--renk, var(--mavi)), color-mix(in srgb, var(--renk, var(--mavi)) 50%, #fff));
}

/* ---------- Hap düğmeler ---------- */
.hap {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; font-weight: 650; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.2s var(--hiz), box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.hap .ik { width: 18px; height: 18px; }
.hap:hover { transform: translateY(-2px); }
.hap:active { transform: translateY(0); }
.hap-k { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.hap-k .ik { width: 16px; height: 16px; }
.hap-ana {
  color: #fff;
  background: linear-gradient(135deg, #1e6fd9, #03438b);
  box-shadow: 0 14px 26px -14px rgb(3 67 139 / 0.85), inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.hap-ana:hover { box-shadow: 0 18px 30px -14px rgb(3 67 139 / 0.95), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.hap-cam {
  color: var(--orta);
  background: var(--girdi);
  border: 1px solid var(--cam-kenar);
  box-shadow: 0 10px 22px -16px rgb(3 67 139 / 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.hap-cam:hover { color: var(--lacivert); background: var(--cam-guclu); }
.hap-amber {
  color: #1a1200;
  background: linear-gradient(135deg, var(--amber-acik), var(--amber));
  box-shadow: 0 14px 26px -14px rgb(234 156 0 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.4);
}

/* ---------- Üst çubuk ---------- */
.ust { position: fixed; inset: 0 0 auto 0; z-index: 50; padding: 12px var(--yan) 0; pointer-events: none; }
.ust-ic {
  pointer-events: auto;
  max-width: var(--kap); margin-inline: auto;
  height: 64px; padding: 0 10px 0 18px;
  display: flex; align-items: center; gap: 16px;
  border-radius: 22px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.ust:not(.kaydi) .ust-ic { background: rgb(255 255 255 / 0.62); }
.marka-logo { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.logo-plaka { display: inline-flex; align-items: center; }
.logo-plaka img { width: 164px; height: auto; }
.ana-menu { margin-left: auto; display: flex; align-items: center; }
.ana-menu ul { display: flex; gap: 4px; }
.ana-menu a {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 14px; border-radius: 14px;
  font-size: 14.5px; font-weight: 600; color: var(--orta);
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ana-menu a .ik { width: 17px; height: 17px; color: var(--ipucu); transition: color 0.18s; }
.ana-menu a:hover, .ana-menu a[aria-current='true'] { background: var(--p-mavi-bg); color: var(--lacivert); }
.ana-menu a:hover .ik, .ana-menu a[aria-current='true'] .ik { color: var(--p-mavi); }
.menu-personel { display: none !important; }
.personel { min-height: 44px; padding: 0 16px 0 6px; font-size: 14px; }
.personel .pi { width: 32px; height: 32px; box-shadow: none; }
.personel .pi .ik { width: 16px; height: 16px; }
.menu-dugme { display: none; width: 44px; height: 44px; border-radius: 14px; place-items: center; color: var(--lacivert); background: var(--girdi); border: 1px solid var(--cam-kenar); }
.menu-dugme .kapa { display: none; }
.menu-dugme[aria-expanded='true'] .ac { display: none; }
.menu-dugme[aria-expanded='true'] .kapa { display: block; }

@media (prefers-color-scheme: dark) {
  .ust:not(.kaydi) .ust-ic { background: rgb(14 24 44 / 0.6); }
  .logo-plaka { background: #fff; padding: 5px 9px; border-radius: 10px; }
  .logo-plaka img { width: 140px; }
}

/* ---------- Kahraman ---------- */
.kahraman {
  position: relative;
  min-height: clamp(600px, 94svh, 920px);
  display: flex; align-items: flex-end;
  padding: calc(var(--ust-y) + 40px) 0 170px;
  isolation: isolate;
  overflow: hidden;
}
.kahraman-medya { position: absolute; inset: 0; z-index: -1; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.kahraman-poster, .kahraman-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.kahraman-video { opacity: 0; transition: opacity 1.2s ease; }
.kahraman-video.oynuyor { opacity: 1; }
.kahraman-perde {
  position: absolute; inset: 0;
  background:
    /* Salih Bey: yazının arkası kutu değil, soldan sağa beyazdan saydama geçiş */
    linear-gradient(90deg, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.88) 36%, rgb(255 255 255 / 0.5) 54%, transparent 72%),
    linear-gradient(180deg, rgb(6 26 60 / 0.22), transparent 18%);
}
.kahraman-kap { position: relative; }
.kahraman-panel {
  max-width: 620px;
  padding: clamp(24px, 3.4vw, 40px);
  border-radius: 30px;
  background: none;
}
/* Kutu görünümü kaldırıldı: cam efekti, kenar ve gölge yok; zemin .kahraman-perde geçişinden gelir */
.kahraman-panel.cam { max-width: 580px; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; }
@media (prefers-color-scheme: dark) {
  .kahraman-perde { background: linear-gradient(90deg, rgb(10 18 34 / 0.92) 0%, rgb(10 18 34 / 0.78) 30%, rgb(10 18 34 / 0.4) 50%, transparent 68%); }
}
.ust-baslik {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.04em; color: var(--lacivert);
  background: var(--p-mavi-bg);
}
.nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgb(234 156 0 / 0.2); animation: nabiz 2.4s ease-in-out infinite; }
.kahraman h1 {
  margin-top: 18px;
  font-size: clamp(40px, 6.2vw, 74px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  background: linear-gradient(120deg, #062a5c 10%, #1e6fd9 70%, #4c97f0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-color-scheme: dark) { .kahraman h1 { background-image: linear-gradient(120deg, #fff 20%, #8db8f2); } }
.kahraman h1 span {
  display: block; margin-top: 12px;
  font-size: clamp(19px, 2.1vw, 24px); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3;
  -webkit-text-fill-color: var(--metin); color: var(--metin);
}
.kahraman-metin { margin-top: 14px; max-width: 520px; font-size: clamp(15.5px, 1.4vw, 17px); color: var(--soluk); }
.dugmeler { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.video-dugme {
  position: absolute; right: var(--yan); bottom: 150px; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgb(6 26 60 / 0.35); border: 1px solid rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.video-dugme .ik { width: 16px; height: 16px; fill: none; stroke-width: 2.2; }
.video-dugme .oynat { display: none; fill: currentColor; stroke: none; }
.video-dugme[aria-pressed='true'] .oynat { display: block; }
.video-dugme[aria-pressed='true'] .durdur { display: none; }

/* ---------- Karşılama bandı ---------- */
.hos-kap { position: relative; z-index: 3; margin-top: -120px; }
.hos { position: relative; padding: 32px 32px 28px; border-radius: 30px; }
.hos-ust { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: center; }
.hos h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; }
.hos .el { display: inline-block; transform-origin: 70% 70%; animation: salla 2.6s ease-in-out 1s 2; }
.hos .alt { margin-top: 10px; max-width: 560px; font-size: 15.5px; line-height: 1.6; color: var(--soluk); }
.hos .alt b { color: var(--lacivert); font-weight: 650; }
.cipler { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.cip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px 0 6px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--orta);
  background: var(--girdi); border: 1px solid var(--cam-kenar);
  box-shadow: 0 8px 18px -14px rgb(3 67 139 / 0.5);
}
.cip .pi { width: 28px; height: 28px; box-shadow: none; }
.cip .pi .ik { width: 14px; height: 14px; }
.hos-gorsel { position: relative; margin: -70px -6px -10px 0; pointer-events: none; }
.hos-gorsel::before {
  content: ''; position: absolute; left: 6%; right: -4%; bottom: 14px; top: 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(150 195 250 / 0.75), rgb(190 215 250 / 0.25) 70%, transparent);
  filter: blur(10px);
}
.hos-gorsel::after {
  content: ''; position: absolute; left: 8%; right: 0; bottom: 4px; height: 26px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(3 67 139 / 0.38), transparent); filter: blur(7px);
}
.hos-gorsel img { position: relative; z-index: 1; width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgb(3 67 139 / 0.2)); animation: nefes 7s ease-in-out infinite; }
.hos-gorsel .bulut { position: absolute; right: 4%; top: 22%; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgb(246 181 46 / 0.35), transparent); filter: blur(8px); }

.istatistikler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 26px; position: relative; z-index: 2; }
.ist {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px 18px; border-radius: 22px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.92), rgb(236 243 253 / 0.75));
  border: 1px solid var(--cam-kenar);
  box-shadow: 0 16px 30px -22px rgb(3 67 139 / 0.5), inset 0 1px 0 #fff;
  transition: transform 0.25s var(--hiz), box-shadow 0.25s ease;
}
@media (prefers-color-scheme: dark) {
  .ist { background: linear-gradient(160deg, rgb(34 50 86 / 0.9), rgb(26 40 72 / 0.75)); box-shadow: 0 16px 30px -22px rgb(0 0 0 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.06); }
}
.ist:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek), var(--cam-ic); }
.ist::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--serit), color-mix(in srgb, var(--serit) 55%, #fff)); }
.ist:has(.pi.mavi) { --serit: var(--p-mavi); }
.ist:has(.pi.amber) { --serit: var(--amber); }
.ist:has(.pi.yesil) { --serit: var(--p-yesil); }
.ist:has(.pi.mor) { --serit: var(--p-mor); }
.ist .pi { width: 48px; height: 48px; }
.ist > div { min-width: 0; }
.ist small { display: block; font-size: 12.5px; font-weight: 500; color: var(--soluk); }
.ist b { display: block; font-size: 27px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ist em { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--p-yesil); }
.ist em.n { color: var(--soluk); font-weight: 500; }

/* ---------- Bölümler ---------- */
.bolum { padding-top: clamp(80px, 10vw, 128px); }
.bolum-bas { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.etiket {
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 16px 0 4px; border-radius: 999px;
  font-size: 13px; font-weight: 650; color: var(--orta);
  background: var(--girdi); border: 1px solid var(--cam-kenar);
  box-shadow: 0 10px 22px -18px rgb(3 67 139 / 0.5);
}
.bolum h2, .hakkimizda h2 { margin-top: 16px; font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.bolum-giris { margin-top: 14px; font-size: clamp(16px, 1.5vw, 18px); color: var(--soluk); text-wrap: pretty; }
.bolum-giris a { color: var(--lacivert); font-weight: 650; white-space: nowrap; }

/* ---------- Grup şirketleri ---------- */
.markalar-one { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.markalar-diger { margin-top: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.marka {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s var(--hiz), box-shadow 0.3s ease;
}
.marka:hover { transform: translateY(-6px); box-shadow: var(--golge-yuksek), var(--cam-ic); }
.marka-foto { position: relative; margin: 10px 10px 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--p-mavi-bg); }
.marka-k .marka-foto { aspect-ratio: 4 / 3; }
.marka-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--hiz); }
.marka:hover .marka-foto img { transform: scale(1.05); }
.marka-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgb(6 26 60 / 0.35)); pointer-events: none; }
.logo-cam {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 16px;
  background: rgb(255 255 255 / 0.86); border: 1px solid rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 12px 24px -14px rgb(3 67 139 / 0.6);
}
.logo-cam img { height: 30px; width: auto; }
.rozet {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 10px; border-radius: 999px;
  font-size: 12px; font-weight: 650; color: var(--metin);
  background: rgb(255 255 255 / 0.82); border: 1px solid rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.rozet .ik { width: 14px; height: 14px; color: var(--renk); }
@media (prefers-color-scheme: dark) { .rozet { background: rgb(14 24 44 / 0.75); border-color: rgb(255 255 255 / 0.12); } }
.marka-govde { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 26px; }
.marka h3 { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; }
.marka-k h3 { font-size: 17px; }
.marka-govde > p { margin-top: 8px; font-size: 15px; color: var(--soluk); }
.marka-k .marka-govde { padding: 16px 18px 22px; }
.marka-k .marka-govde > p { font-size: 14px; }
.marka-ad { margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi, var(--renk)); }
.marka-k .logo-cam { left: 10px; bottom: 10px; padding: 7px 12px; border-radius: 14px; }
.marka-k .logo-cam img { height: 22px; }
.nobr { white-space: nowrap; }
.etiketler { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.etiketler li { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--renk-yazi, var(--renk)); background: var(--renk-bg); }
.marka-alt { margin-top: auto; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.alan { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--soluk); overflow-wrap: anywhere; }
.alan .ik { width: 15px; height: 15px; color: var(--ipucu); }
.git { position: static; }
.git::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.git, .git:hover, .marka:hover .git { transform: none; }
.marka:has(.git:focus-visible) { outline: 3px solid var(--amber); outline-offset: 3px; }
.git:focus-visible { outline: none; }
.ok-dugme {
  width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  color: var(--renk-yazi, var(--renk)); background: var(--renk-bg);
  transition: background-color 0.2s, color 0.2s;
}
.ok-dugme .ik { width: 18px; height: 18px; }
.ok-dugme .ik { transition: transform 0.3s var(--hiz); }
.marka:hover .ok-dugme { background: var(--renk); color: #fff; }
.marka:hover .ok-dugme .ik { transform: rotate(45deg); }
.marka[data-renk='amber'] .hap-ana { color: #1a1200; background: linear-gradient(135deg, var(--amber-acik), var(--amber)); box-shadow: 0 14px 26px -14px rgb(234 156 0 / 0.9), inset 0 1px 0 rgb(255 255 255 / 0.4); }

/* ---------- Hizmet alanları ---------- */
.hizmetler { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hizmet { position: relative; isolation: isolate; display: flex; flex-direction: column; transition: transform 0.3s var(--hiz); }
.hizmet-foto { position: relative; overflow: hidden; border-radius: var(--r-kart); aspect-ratio: 1 / 1; box-shadow: var(--golge); }
.hizmet-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--hiz); }
.hizmet-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(6 26 60 / 0.35)); }
.hizmet:hover { transform: translateY(-6px); }
.hizmet:hover .hizmet-foto img { transform: scale(1.06); }
.hizmet-cam { position: relative; z-index: 1; flex: 1; margin: -64px 10px 0; padding: 18px 18px 16px; border-radius: 22px; background: rgb(255 255 255 / 0.82); overflow: hidden; }
@media (prefers-color-scheme: dark) { .hizmet-cam { background: rgb(14 24 44 / 0.78); } }
.hizmet-cam .pi { width: 46px; height: 46px; }
.hizmet-cam .serit { height: 3px; }
.hizmet h3 { margin-top: 10px; font-size: 18px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.25; }
.hizmet p { margin-top: 6px; font-size: 14px; color: var(--soluk); line-height: 1.5; }
.baglantilar { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.baglantilar a {
  display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; color: var(--renk-yazi, var(--renk)); background: var(--renk-bg);
  transition: background-color 0.2s, color 0.2s;
}
.baglantilar a .ik { width: 14px; height: 14px; }
.baglantilar a:hover { background: var(--renk); color: #fff; }

.surec { margin-top: 22px; padding: 24px 26px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; }
.surec-bas h3 { font-size: 18px; font-weight: 750; letter-spacing: -0.015em; }
.surec-bas p { margin-top: 4px; font-size: 13.5px; color: var(--soluk); }
.adimlar { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; counter-reset: adim; }
.adimlar li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; background: var(--girdi); border: 1px solid var(--cam-kenar); counter-increment: adim; }
.adimlar li::before { content: counter(adim, decimal-leading-zero); position: absolute; top: 14px; right: 14px; font-size: 11.5px; font-weight: 700; color: var(--ipucu); font-variant-numeric: tabular-nums; }
.adimlar b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.adimlar small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--soluk); line-height: 1.45; }

/* ---------- Hakkımızda ---------- */
.hakkimizda { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.vurgu-metin { margin-top: 16px; font-size: 19px; font-weight: 650; color: var(--lacivert); letter-spacing: -0.01em; }
.hakkimizda-yazi > p:not(.etiket):not(.vurgu-metin) { margin-top: 12px; color: var(--soluk); font-size: 16px; }
.vm { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vm-kart { padding: 18px; border-radius: 20px; background: var(--girdi); border: 1px solid var(--cam-kenar); box-shadow: 0 14px 28px -22px rgb(3 67 139 / 0.5); }
.vm-kart h3 { margin-top: 12px; font-size: 16px; font-weight: 750; }
.vm-kart p { margin-top: 6px; font-size: 14px; color: var(--soluk); }
.mozaik { position: relative; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; aspect-ratio: 1 / 1.02; }
.mozaik figure { overflow: hidden; border-radius: 24px; box-shadow: var(--golge); border: 4px solid var(--cam-guclu); }
.mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--hiz); }
.mozaik figure:hover img { transform: scale(1.05); }
.m-buyuk { grid-row: span 2; }
.mozaik-rozet { position: absolute; left: -18px; bottom: 28px; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 20px; }
.mozaik-rozet b { display: block; font-size: 16px; font-weight: 750; }
.mozaik-rozet small { display: block; font-size: 12.5px; color: var(--soluk); }

.degerler { margin-top: clamp(40px, 6vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.deger { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: 22px; transition: transform 0.25s var(--hiz), box-shadow 0.25s; }
.deger:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek), var(--cam-ic); }
.deger h3 { font-size: 16px; font-weight: 750; }
.deger p { margin-top: 4px; font-size: 14px; color: var(--soluk); }

/* ---------- Kalite ---------- */
.ilkeler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ilke { overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s var(--hiz), box-shadow 0.25s; }
.ilke:hover { transform: translateY(-5px); box-shadow: var(--golge-yuksek), var(--cam-ic); }
.ilke-foto { margin: 10px 10px 0; border-radius: 18px; overflow: hidden; background: #fff; aspect-ratio: 16 / 9; }
.ilke-foto img { width: 100%; height: 100%; object-fit: contain; padding: 10px; transition: transform 0.6s var(--hiz); }
.ilke:hover .ilke-foto img { transform: scale(1.06); }
.ilke-govde { position: relative; padding: 16px 20px 22px; }
.ilke .no { display: inline-grid; place-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--p-amber); background: var(--p-amber-bg); font-variant-numeric: tabular-nums; }
.ilke h3 { margin-top: 10px; font-size: 17px; font-weight: 750; letter-spacing: -0.01em; }
.ilke p { margin-top: 4px; font-size: 14px; color: var(--soluk); }

.kalite-alt { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px; }
.belgeler { padding: 26px; }
.kart-bas { display: flex; gap: 14px; align-items: flex-start; }
.kart-bas h3 { font-size: 18px; font-weight: 750; }
.kart-bas p { margin-top: 4px; font-size: 14px; color: var(--soluk); }
.belge-liste { margin-top: 18px; display: grid; gap: 10px; }
.belge-liste div { padding: 14px 16px; border-radius: 16px; background: var(--girdi); border: 1px solid var(--cam-kenar); }
.belge-liste dt { font-size: 14.5px; font-weight: 700; }
.belge-liste dd { margin-top: 2px; font-size: 13px; color: var(--soluk); overflow-wrap: anywhere; }
.kart-eylem { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.baglanti { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 650; color: var(--p-mavi); }
.baglanti .ik { width: 16px; height: 16px; transition: transform 0.2s var(--hiz); }
.baglanti:hover { color: var(--lacivert); }
.baglanti:hover .ik { transform: translate(2px, -2px); }

/* Koyu lacivert degrade kart (paneldeki koyu vurgu kartı) */
.dijital, .hat {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 28px; border-radius: var(--r-kart);
  color: #e8f0fc;
  background: linear-gradient(150deg, #0b4a97, #062a5c 70%);
  box-shadow: 0 30px 60px -30px rgb(6 42 92 / 0.8), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.dijital-isik, .hat-isik { position: absolute; z-index: -1; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgb(246 181 46 / 0.35), transparent); }
.hat-isik { right: auto; left: -100px; top: auto; bottom: -120px; background: radial-gradient(closest-side, rgb(76 151 240 / 0.45), transparent); }
.dijital-etiket { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.16); }
.dijital-etiket .ik { width: 15px; height: 15px; color: var(--amber-acik); }
.dijital h3 { margin-top: 14px; font-size: 22px; font-weight: 750; letter-spacing: -0.02em; color: #fff; line-height: 1.25; }
.dijital > p { margin-top: 8px; font-size: 14.5px; color: #bfd0ea; }
.dijital-liste { margin: 16px 0 22px; display: grid; gap: 8px; }
.dijital-liste li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.dijital-liste .ik { width: 30px; height: 30px; padding: 7px; border-radius: 10px; background: rgb(255 255 255 / 0.1); color: #8db8f2; }

/* ---------- İletişim ---------- */
.iletisim { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 22px; align-items: stretch; }
.hat { display: flex; flex-direction: column; padding: 30px; }
.hat-etiket { font-size: 13px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb6da; }
.hat-no { margin-top: 6px; font-size: clamp(38px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.03em; color: #fff; line-height: 1.05; }
.hat-no:hover { color: var(--amber-acik); }
.hat-liste { margin-top: 22px; display: grid; gap: 14px; }
.hat-liste li { display: flex; align-items: center; gap: 12px; }
.hat-liste .pi { width: 38px; height: 38px; background: rgb(255 255 255 / 0.1); color: #8db8f2; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.hat-liste small { display: block; font-size: 12px; color: #9fb6da; }
.hat-liste a, .hat-liste span:not(.pi) { font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.hat-liste a:hover { color: var(--amber-acik); }
.hat-eylem { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.hap-beyaz { color: #fff; background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.22); }
.hap-beyaz:hover { background: rgb(255 255 255 / 0.2); }
.sosyal { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.sosyal a { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.14); color: #dbe6f7; transition: background-color 0.2s, transform 0.2s var(--hiz), color 0.2s; }
.sosyal a:hover { background: var(--amber); color: #1a1200; transform: translateY(-3px); }
.sosyal .ik { width: 18px; height: 18px; }
.ofisler { display: grid; gap: 16px; }
.ofis { position: relative; overflow: hidden; display: flex; gap: 16px; align-items: flex-start; padding: 22px 22px 24px; border-radius: 24px; transition: transform 0.25s var(--hiz), box-shadow 0.25s; }
.ofis:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek), var(--cam-ic); }
.ofis .pi { width: 48px; height: 48px; }
.ofis-govde { min-width: 0; flex: 1; }
.ofis-tur { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--renk-yazi, var(--renk)); }
.ofis h3 { margin-top: 2px; font-size: 17px; font-weight: 750; }
.ofis address { margin-top: 4px; font-size: 14px; color: var(--soluk); }
.ofis-eylem { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Alt bilgi ---------- */
.alt-bilgi { padding: clamp(80px, 10vw, 120px) 0 28px; }
.alt-ic { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 32px; padding: 34px; }
.alt-marka p { margin: 16px 0 18px; max-width: 340px; font-size: 14px; color: var(--soluk); }
.alt-sutun h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ipucu); }
.alt-sutun ul { margin-top: 14px; display: grid; gap: 8px; }
.alt-sutun a { font-size: 14.5px; font-weight: 550; color: var(--orta); }
.alt-sutun a:hover { color: var(--lacivert); }
.alt-sutun address, .alt-sutun p { margin-top: 14px; font-size: 14px; color: var(--soluk); }
.alt-sutun p { margin-top: 8px; }
.alt-son { margin-top: 18px; padding: 0 6px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--soluk); }
.personel-alt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--orta); }
.personel-alt .ik { width: 16px; height: 16px; }
.personel-alt:hover { color: var(--lacivert); }

/* ---------- Belirme (kaydırınca) ---------- */
.js .belir { opacity: 0; transform: translateY(22px); }
.js .belir.gorundu { animation: belir 0.7s var(--hiz) both; animation-delay: var(--g, 0ms); }
@keyframes belir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes nefes { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes nabiz { 0%, 100% { box-shadow: 0 0 0 4px rgb(234 156 0 / 0.2); } 50% { box-shadow: 0 0 0 7px rgb(234 156 0 / 0.08); } }
@keyframes salla { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-8deg); } }

/* ---------- Duyarlı yerleşim ---------- */
@media (max-width: 1180px) {
  .ana-menu a { padding: 0 10px; }
  .ana-menu a .ik { display: none; }
  .markalar-one, .markalar-diger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .markalar-one .marka:nth-child(3) { grid-column: span 2; }
  .markalar-one .marka:nth-child(3) .marka-foto { aspect-ratio: 16 / 7; }
  .hizmetler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .surec { grid-template-columns: 1fr; }
  .adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alt-ic { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  :root { --ust-y: 68px; }
  .ust-ic { height: 58px; padding: 0 8px 0 14px; gap: 10px; border-radius: 20px; }
  .menu-dugme { display: grid; margin-left: auto; }
  .ust-personel { display: none; }
  .ana-menu {
    position: fixed; left: var(--yan); right: var(--yan); top: 80px;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px; border-radius: 24px;
    background: var(--cam-guclu); border: 1px solid var(--cam-kenar); box-shadow: var(--golge-yuksek);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    opacity: 0; transform: translateY(-10px) scale(0.98); visibility: hidden; pointer-events: none;
    transition: opacity 0.22s ease, transform 0.28s var(--hiz), visibility 0s 0.28s;
  }
  .ana-menu.acik { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: opacity 0.22s ease, transform 0.28s var(--hiz); }
  .ana-menu ul { flex-direction: column; gap: 2px; }
  .ana-menu a { height: 50px; padding: 0 14px; font-size: 16px; }
  .ana-menu a .ik { display: block; width: 19px; height: 19px; }
  .menu-personel { display: inline-flex !important; height: 50px; padding: 0 18px; justify-content: center; margin-top: 4px; }

  .hos-ust { grid-template-columns: 1fr; }
  .hos-gorsel { order: -1; margin: -60px auto -14px; width: min(360px, 82%); }
  .kahraman { padding-bottom: 110px; }
  .hos-kap { margin-top: -60px; }
  .istatistikler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .markalar-one { gap: 16px; }
  .marka h3 { font-size: 19px; }
  .hakkimizda { grid-template-columns: 1fr; }
  .mozaik { max-width: 620px; aspect-ratio: 1 / 0.9; }
  .mozaik-rozet { left: 12px; bottom: 12px; }
  .degerler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ilkeler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kalite-alt { grid-template-columns: 1fr; }
  .iletisim { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .logo-plaka img { width: 136px; }
  .kahraman { min-height: 0; padding: calc(var(--ust-y) + 30svh) 0 64px; }
  .kahraman-medya { -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, transparent 100%); }
  .kahraman-poster, .kahraman-video { object-position: 32% 60%; }
  .kahraman-perde { background: linear-gradient(180deg, rgb(6 26 60 / 0.25) 0%, transparent 22%, transparent 34%, rgb(255 255 255 / 0.7) 52%, rgb(255 255 255 / 0.95) 72%); }
  .kahraman-panel { padding: 8px 0 0; }
  .kahraman h1 { margin-top: 14px; }
  .kahraman h1 span { font-size: 18px; margin-top: 8px; }
  .dugmeler { margin-top: 20px; }
  .dugmeler .hap { flex: 1 1 auto; }
  .video-dugme { top: calc(var(--ust-y) + 14px); bottom: auto; width: 38px; height: 38px; }
  .hos-kap { margin-top: -24px; }
  .hos-gorsel { margin: -12px auto -14px; width: min(320px, 88%); }
  .hos { padding: 22px 16px 16px; border-radius: 24px; }
  .hos h2 { font-size: 24px; }
  .hos .alt { font-size: 15px; }
  .cip { height: 34px; font-size: 12.5px; }
  .istatistikler { gap: 10px; margin-top: 20px; }
  .ist { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 14px 16px; border-radius: 18px; }
  .ist .pi { width: 40px; height: 40px; }
  .ist b { font-size: 23px; }
  .ist small { font-size: 12px; }
  .ist em { font-size: 11.5px; }
  .markalar-one, .markalar-diger, .hizmetler { grid-template-columns: 1fr; }
  .markalar-one .marka:nth-child(3) { grid-column: auto; }
  .markalar-one .marka:nth-child(3) .marka-foto { aspect-ratio: 16 / 10; }
  .marka-govde { padding: 16px 18px 22px; }
  .marka h3 { font-size: 19px; }
  .marka-alt { flex-wrap: wrap; }
  .logo-cam { padding: 8px 12px; }
  .logo-cam img { height: 24px; }
  .hizmet-foto { aspect-ratio: 4 / 3; }
  .surec { padding: 18px 16px; }
  .adimlar { grid-template-columns: 1fr; }
  .adimlar li { flex-direction: row; align-items: center; padding: 12px; }
  .vm, .degerler { grid-template-columns: 1fr; }
  .mozaik { gap: 10px; }
  .mozaik figure { border-radius: 18px; border-width: 3px; }
  .ilkeler {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--yan)); padding: 4px var(--yan) 24px; scrollbar-width: none;
  }
  .ilkeler::-webkit-scrollbar { display: none; }
  .ilke { flex: 0 0 78%; scroll-snap-align: start; }
  .belgeler, .dijital, .hat { padding: 22px 18px; }
  .ofis { padding: 18px 16px 20px; gap: 12px; }
  .ofis .pi { width: 40px; height: 40px; }
  .alt-ic { grid-template-columns: 1fr; gap: 26px; padding: 24px 20px; }
}

@media (max-width: 360px) {
  .istatistikler { grid-template-columns: 1fr; }
  .ist { flex-direction: row; align-items: center; }
  .hap { padding: 0 16px; }
}

/* Hareket azaltma: her şey yerinde ve görünür; video oynatılmaz (site.js) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .belir { opacity: 1; transform: none; }
}

/* Amber zeminde beyaz yazı yetersiz kontrast verir */
[data-renk='amber'] .baglantilar a:hover, .marka[data-renk='amber']:hover .ok-dugme { color: #1a1200; }