/* =========================================================================
   insaat-akis "Akış" — inşaat firması + yapı malzemesi satış mağazası + Bayiliklerimiz (2026-10-02)
   Kaynak: prototip wwwroot/prototip/insaat-mavi (stil.css — dil, ölçüler ve hareketler birebir; yalnız gerçek işaretlemeye uyum:
   .cip → .ak-cip, .kunye → .one-kunye, .harita → .k-harita (çekirdek sınıflarıyla çakışmasın), menü düğmesi grupları, body overflow-x: clip
   (yapışkan malzeme önizlemesi çalışsın), .kap çekirdeğin max-inline-size değerini de ezer) + GERÇEK TEMA EKLERİ (panel verisi durumları,
   iç sayfalar, çekirdek ve ortak parça giysisi, sağdan sola).
   Renk: tek ana renk (--ana, panelden; _TemaRengi --ana / --ana-ust / --ana-yazi'yi ezer). Bütün tonlar ondan türer (OKLCH göreli renk +
   color-mix). Koyu yalnız açılış perdesi ve alt bilgi (ana renk tonlu, siyah değil). Mesleki süs (aletler, şeritler, siluetler) yok.
   ========================================================================= */

/* ---------- 1 · Yazı tipleri (yerel, OFL) ---------- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 100% 125%; font-display: swap;
  src: url(yazi/archivo-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+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 100% 125%; font-display: swap;
  src: url(yazi/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(yazi/figtree-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+1E00-1E9F, U+20A0-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap;
  src: url(yazi/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }

/* ---------- 2 · Belirteçler ---------- */
:root {
  color-scheme: light;
  --ana: #0B57D0;                       /* panelden gelen tek renk */
  /* yedekler (göreli renk sözdizimi olmayan tarayıcılar için mavi değerleri) */
  --ana-ust: #fff;                      /* ana dolgu üstündeki yazı */
  --ana-yazi: #0B57D0;                  /* beyaz üstünde ana renkli yazı */
  --ana-isik: #8DB8FF;                  /* koyu zeminde açık vurgu */
  --ana-sis: #DCE8FF;                   /* koyu zeminde çok açık vurgu */
  --ana-derin: color-mix(in oklab, var(--ana), #020817 34%);
  --ana-parlak: color-mix(in oklab, var(--ana), #fff 16%);
  --ana-tint: color-mix(in oklab, var(--ana) 7%, #fff);
  --ana-tint2: color-mix(in oklab, var(--ana) 13%, #fff);
  --ana-cizgi: color-mix(in oklab, var(--ana) 28%, #fff);

  --murekkep: #0E1726;                  /* başlık yazısı */
  --metin: #3A4556;
  --soluk: #5A6678;                     /* ikincil yazı: --sis kartlarda da 4,5:1 (denetim 2026-10-02; prototip #667386) */
  --cizgi: #E4E9F0;
  --sis: color-mix(in oklab, var(--ana) 3%, #F5F7FA);
  --gece: color-mix(in oklab, var(--ana) 22%, #060C18);   /* yalnız alt bilgi */
  --perde: color-mix(in oklab, var(--ana) 16%, #040A16);  /* açılış karartması */

  --f-bas: "Archivo", "Segoe UI", system-ui, sans-serif;
  --f-govde: "Figtree", "Segoe UI", system-ui, sans-serif;
  --kap: 1640px;
  --kenar: clamp(20px, 5.2vw, 140px);
  --r: 22px;
  --yay: cubic-bezier(.2, .7, .15, 1);
  --hh: 100svh;
}
@supports (color: oklch(from red l c h)) {
  :root {
    /* ana renk açıksa (OKLCH L > 0,6) koyu mürekkep, değilse beyaz */
    --ana-ust: oklch(from var(--ana) clamp(0.2, (0.6 - l) * 100, 1) clamp(0, (l - 0.6) * 100, 0.03) h);
    --ana-yazi: oklch(from var(--ana) min(l, 0.5) c h);
    --ana-isik: oklch(from var(--ana) max(l, 0.8) min(c, 0.13) h);
    --ana-sis: oklch(from var(--ana) max(l, 0.94) min(c, 0.035) h);
  }
}

/* ---------- 3 · Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: #fff; color: var(--metin); font: 400 17px/1.65 var(--f-govde); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--f-bas); color: var(--murekkep); font-weight: 800; font-stretch: 108%; letter-spacing: -.026em; text-wrap: balance; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--ana); outline-offset: 3px; border-radius: 8px; }
.acilis :focus-visible, .ust:not(.dolu) :focus-visible, .cagri :focus-visible, .magaza :focus-visible, .alt :focus-visible, .vk :focus-visible, .vk:focus-visible { outline-color: #fff; }
.atla { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ana); color: var(--ana-ust); padding: 10px 16px; border-radius: 10px; font-weight: 700; }
.atla:focus { top: 12px; }
.kap { max-width: var(--kap); max-inline-size: var(--kap); margin: 0 auto; padding: 0 var(--kenar); box-sizing: content-box; }
@media (min-width: 1920px) { .kap { padding: 0 140px; } }
.ok { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .35s var(--yay); }
.ikon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* yer tutucu (görselsiz hâl ve görsel gelene dek) */
.medya { background:
  radial-gradient(120% 90% at 78% 12%, color-mix(in oklab, var(--ana-isik) 70%, transparent) 0, transparent 55%),
  radial-gradient(90% 80% at 10% 100%, color-mix(in oklab, var(--ana) 70%, transparent) 0, transparent 60%),
  linear-gradient(150deg, color-mix(in oklab, var(--ana) 60%, #0b1630), var(--ana-derin)); }
.yer .medya img, .yer .medya video { visibility: hidden; }

/* ---------- 4 · Düğmeler, etiketler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 14px;
  font: 700 15.5px/1 var(--f-govde); letter-spacing: -.005em; white-space: nowrap; transition: background .3s, color .3s, box-shadow .35s, transform .35s var(--yay), border-color .3s; }
.dugme.buyuk { height: 56px; padding: 0 26px; font-size: 16.5px; border-radius: 16px; }
.dugme.dolu { background: linear-gradient(180deg, var(--ana-parlak), var(--ana)); color: var(--ana-ust);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px -10px color-mix(in oklab, var(--ana) 75%, transparent); }
.dugme.dolu:hover { background: var(--ana-derin); transform: translateY(-1px); box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--ana) 80%, transparent); }
.dugme.cam { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.32); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.dugme.cam:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.55); }
.dugme.beyaz { background: #fff; color: var(--ana-yazi); box-shadow: 0 10px 26px -12px rgba(4,12,30,.45); }
.dugme.beyaz:hover { transform: translateY(-1px); background: var(--ana-sis); }
.dugme.cam-mavi { background: color-mix(in oklab, var(--ana-ust) 12%, transparent); color: var(--ana-ust); border: 1px solid color-mix(in oklab, var(--ana-ust) 30%, transparent); }
.dugme.cam-mavi:hover { background: color-mix(in oklab, var(--ana-ust) 20%, transparent); }
.dugme:hover .ok, .bag:hover .ok { transform: translateX(3px); }

.etiket { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; font: 700 13px/1 var(--f-govde); letter-spacing: .14em; text-transform: uppercase; color: var(--ana-yazi); }
.etiket::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ana); box-shadow: 0 0 0 4px var(--ana-tint2); }
.etiket.acik { color: color-mix(in oklab, var(--ana-ust) 86%, transparent); }
.etiket.acik::before { background: var(--ana-ust); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ana-ust) 22%, transparent); }
.h2 { font-size: clamp(32px, 3.3vw, 58px); line-height: 1.04; }
.h3 { font-size: clamp(28px, 2.4vw, 42px); line-height: 1.06; }
.h4 { font-size: 21px; line-height: 1.22; letter-spacing: -.018em; }
.h5 { font-size: 20px; line-height: 1.2; letter-spacing: -.015em; }
.bag { display: inline-flex; align-items: center; gap: 8px; font: 700 15.5px/1.2 var(--f-govde); color: var(--ana-yazi); }
.bag:hover { color: var(--murekkep); }
.durum { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 6px 11px 6px 9px; border-radius: 99px; font: 700 12px/1 var(--f-govde); letter-spacing: .01em; }
.durum::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.durum.devam { background: var(--ana-tint2); color: var(--ana-yazi); }
.durum.devam::before { box-shadow: 0 0 0 0 currentColor; animation: nabiz 2.4s infinite; }
.durum.bitti { background: #E9F6EF; color: #146C43; }
.durum.malzeme { background: #F1F3F6; color: #475467; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.ornek-not { margin-top: 14px; font-size: 13px; color: var(--soluk); }

/* ---------- 5 · Başlık çubuğu ---------- */
.ust { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; transition: background .45s, box-shadow .45s, color .35s, transform .45s var(--yay); }
.ust-ic { max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); box-sizing: content-box; height: 92px; display: flex; align-items: center; gap: 28px; transition: height .4s var(--yay); }
@media (min-width: 1920px) { .ust-ic { padding: 0 140px; } }
.ust::before { content: ""; position: absolute; inset: 0 0 -40px; background: linear-gradient(180deg, rgba(3,9,22,.5), transparent); pointer-events: none; transition: opacity .4s; }
.ust.dolu, .dolu-zorla .ust { background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); color: var(--murekkep); box-shadow: 0 1px 0 rgba(14,23,38,.06), 0 12px 32px -18px rgba(14,23,38,.25); }
.ust.dolu::before, .dolu-zorla .ust::before { opacity: 0; }
.ust.dolu .ust-ic, .dolu-zorla .ust .ust-ic { height: 76px; }
.logo { position: relative; display: flex; align-items: center; gap: 12px; flex: none; }
.logo-im { width: 42px; height: 42px; filter: drop-shadow(0 6px 14px color-mix(in oklab, var(--ana) 45%, transparent)); }
.lg-a { stop-color: var(--ana-parlak); } .lg-b { stop-color: var(--ana-derin); }
.logo-yazi { display: flex; flex-direction: column; gap: 4px; }
.logo-yazi b { font: 800 21px/1 var(--f-bas); font-stretch: 110%; letter-spacing: -.02em; }
.logo-yazi small { font: 600 11.5px/1 var(--f-govde); letter-spacing: .06em; text-transform: uppercase; opacity: .72; }
.menu { margin-left: auto; position: relative; }
.menu ul { display: flex; align-items: center; gap: 4px; }
.menu li { position: relative; }
.menu li > :is(a, button) { position: relative; display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 12px; border-radius: 11px; font: 650 15.5px/1 var(--f-govde); white-space: nowrap; transition: background .25s; }
.menu li > :is(a, button):hover { background: rgba(255,255,255,.12); }
.ust.dolu .menu li > :is(a, button):hover, .dolu-zorla .menu li > :is(a, button):hover { background: var(--ana-tint); }
.menu > ul > li > a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ana-isik); }
.ust.dolu .menu > ul > li > a[aria-current="page"]::after, .dolu-zorla .menu > ul > li > a[aria-current="page"]::after { background: var(--ana); }
.ok-a { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.acilir-pano { position: absolute; left: 0; top: calc(100% + 8px); min-width: 230px; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 24px 48px -18px rgba(8,18,40,.35), 0 0 0 1px rgba(14,23,38,.06);
  display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .3s var(--yay), visibility .25s; }
.acilir-pano.genis { grid-template-columns: 1fr 1fr; min-width: 440px; }
.acilir-pano a { padding: 11px 14px; border-radius: 10px; color: var(--murekkep); font: 600 15px/1.25 var(--f-govde); }
.acilir-pano a:hover { background: var(--ana-tint); color: var(--ana-yazi); }
.acilir:hover .acilir-pano, .acilir:focus-within .acilir-pano { opacity: 1; visibility: visible; transform: none; }
.menu-mobil-alt { display: none; }
.ust-sag { display: flex; align-items: center; gap: 18px; flex: none; }
.dil { display: flex; align-items: center; gap: 6px; font: 700 13.5px/1 var(--f-govde); letter-spacing: .04em; }
.dil a { padding: 6px 2px; opacity: .6; }
.dil a[aria-current="true"] { opacity: 1; }
.dil a:hover { opacity: 1; }
.dil span { opacity: .35; }
.tel { display: flex; align-items: center; gap: 10px; }
.tel-ikon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); transition: background .25s, border-color .25s; }
.tel-ikon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.ust.dolu .tel-ikon, .dolu-zorla .tel-ikon { border-color: var(--cizgi); color: var(--ana-yazi); }
.tel:hover .tel-ikon { background: rgba(255,255,255,.14); }
.tel-yazi { display: flex; flex-direction: column; gap: 4px; }
.tel-yazi small { font: 600 11.5px/1 var(--f-govde); opacity: .72; }
.tel-yazi b { font: 750 16px/1 var(--f-govde); letter-spacing: .005em; white-space: nowrap; }
.ust-cagri { height: 46px; }
.menu-ac { display: none; }
@media (max-width: 1599px) { .tel-yazi { display: none; } .ust-ic { gap: 20px; } .ust-sag { gap: 14px; } }
@media (max-width: 1360px) { .menu li > :is(a, button) { padding: 0 9px; font-size: 15px; } .logo-yazi small { display: none; } }

/* ---------- 6 · Açılış ---------- */
.acilis { position: relative; height: var(--hh); min-height: 760px; max-height: 1240px; overflow: hidden; color: #fff; background: var(--perde); isolation: isolate; }
.acilis-medya { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.acilis-video { width: 100%; height: 100%; object-fit: cover; transform-origin: 46% 50%; animation: yakinlas 26s ease-in-out infinite alternate; }
@keyframes yakinlas { from { transform: scale(1.03); } to { transform: scale(1.12); } }
.acilis-perde { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(36% 62% at 76% 52%, color-mix(in oklab, var(--ana-derin) 66%, transparent) 0, transparent 80%),
  radial-gradient(30% 40% at 92% 16%, color-mix(in oklab, var(--ana) 30%, transparent) 0, transparent 75%),
  linear-gradient(90deg, color-mix(in oklab, var(--perde) 86%, transparent) 0%, color-mix(in oklab, var(--perde) 60%, transparent) 34%, color-mix(in oklab, var(--perde) 26%, transparent) 50%, color-mix(in oklab, var(--perde) 44%, transparent) 72%, color-mix(in oklab, var(--perde) 52%, transparent) 100%),
  linear-gradient(180deg, color-mix(in oklab, var(--perde) 40%, transparent) 0%, transparent 24%, transparent 62%, color-mix(in oklab, var(--perde) 72%, transparent) 100%); }
.acilis-perde::after { content: ""; position: absolute; left: -10%; bottom: -30%; width: 70%; height: 80%; background: radial-gradient(closest-side, color-mix(in oklab, var(--ana) 34%, transparent), transparent); filter: blur(10px); }
.acilis-ic { position: static; height: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); box-sizing: content-box;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
@media (min-width: 1920px) { .acilis-ic { padding: 0 140px; } }
.acilis-metin { position: relative; z-index: 2; align-self: end; padding: 0 0 clamp(96px, 12.5vh, 150px); max-width: 880px; }
.ak-cip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 650 14.5px/1 var(--f-govde); letter-spacing: .01em; }
.cip-nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--ana-isik); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ana-isik) 28%, transparent), 0 0 14px var(--ana-isik); }
.h1 { margin: 28px 0 28px; color: #fff; font-size: clamp(36px, 4.7vw, 92px); line-height: .99; letter-spacing: -.035em; font-stretch: 108%; font-weight: 820; text-wrap: initial; }
.h1 .satir { display: block; white-space: nowrap; }
/* vurgu satırı: açık mavi yazının üstünden, duvardaki parıltıyla aynı ritimde beyaz bir ışık geçer */
.h1 .vurgu { background: linear-gradient(100deg, var(--ana-isik) 0%, var(--ana-isik) 36%, var(--ana-sis) 46%, #fff 50%, var(--ana-sis) 54%, var(--ana-isik) 64%, var(--ana-isik) 100%);
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.js .h1 .vurgu.gir { animation: gir 1.1s var(--yay) .58s forwards, vurgu-isik 12s cubic-bezier(.45,.05,.25,1) 1.4s infinite; }
@keyframes vurgu-isik { 0% { background-position: 100% 0; } 42%, 100% { background-position: 0% 0; } }
.acilis-giris { max-width: 600px; font-size: clamp(17px, 1.15vw, 20px); line-height: 1.6; color: rgba(255,255,255,.86); }
.acilis-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
/* kısa masaüstü / laptop ekranı (1366 × 657, %125-150 yakınlaştırma; ≥ 800 px yükseklikte görünüm aynen):
   metin bloğu başlık çubuğunun altından başlar, başlık yüksekliğe göre de küçülür; sığmazsa açılış içeriğe göre uzar (düğmeler alt satıra binmez) */
@media (min-width: 900px) and (min-height: 521px) and (max-height: 799px) {
  .acilis { height: auto; min-height: 560px; }
  .acilis-ic { height: auto; min-height: max(var(--hh), 560px); }
  .acilis .acilis-metin { align-self: safe end; margin-top: calc(92px + clamp(16px, 3vh, 26px)); }
  .acilis .h1 { font-size: clamp(36px, min(4.7vw, 9vh), 92px); margin: clamp(14px, 2.6vh, 24px) 0; }
  .acilis .acilis-giris { font-size: 16.5px; line-height: 1.55; }
  .acilis-dugmeler { margin-top: clamp(18px, 3.4vh, 30px); }
}
/* 700-799 px: aşağıdaki dikey ortalama (A8) korunur; metin üstte başlık çubuğuna, altta "Görseller temsilidir / Akışı durdur" satırına binmez */
@media (min-width: 1100px) and (min-height: 700px) and (max-height: 799px) {
  .acilis .acilis-metin { align-self: safe center; margin-top: 0; padding: calc(92px + clamp(16px, 3vh, 26px)) 0 calc(clamp(48px, 7vh, 96px) + 56px); }
}
/* platformun demo rozeti varken alt satır 64 px'e çıkar (aşağıdaki kural): kısa ekranda metin onun da üstünde biter */
@media (min-width: 901px) and (min-height: 521px) and (max-height: 699px) {
  html:has(tk-ornek-rozet:not([hidden])) .acilis .acilis-metin { padding-bottom: 120px; }
}

/* giriş hareketi */
.js .gir { opacity: 0; transform: translateY(26px); filter: blur(6px); animation: gir 1.1s var(--yay) forwards; animation-delay: calc(.25s + var(--g, 0) * .11s); }
@keyframes gir { to { opacity: 1; transform: none; filter: none; } }

/* ---- İMZA: akan vitrin — derinlikte duran kart duvarı ----
   Duvar ekranın sağ yarısını taşarak doldurur; sol kenarı uzağa, sağ kenarı izleyiciye döner.
   Üç sütun ters yönlerde çok yavaş süzülür; duvarın sol kenarı videoya karışarak kaybolur. */
.vitrin { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--duvar-x, max(50%, 760px)); right: 0; perspective: 1500px; perspective-origin: 0% 42%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 6%, #000 15%), linear-gradient(180deg, transparent 0, transparent 110px, rgba(0,0,0,.28) 205px, #000 300px, #000 calc(100% - 210px), transparent calc(100% - 76px));
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 6%, #000 15%), linear-gradient(180deg, transparent 0, transparent 110px, rgba(0,0,0,.28) 205px, #000 300px, #000 calc(100% - 210px), transparent calc(100% - 76px));
  -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.duvar { position: absolute; top: -34%; bottom: -34%; left: 4%; width: 76%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px;
  transform-origin: 0% 50%; transform: translate3d(0, calc(var(--kay, 0) * -.22px), 0) rotateY(var(--ry, -17deg)) rotateX(var(--rx, 8deg)) rotateZ(var(--rz, -5deg)); }
.vs { position: relative; min-height: 0; overflow: hidden; overflow: clip; overflow-clip-margin: 48px; }
.vs-ray { --ara: 26px; display: flex; flex-direction: column; gap: var(--ara); will-change: transform; }
.js .vitrin.hazir .vs-a .vs-ray { animation: akis-yukari 80s linear infinite; }
.js .vitrin.hazir .vs-b .vs-ray { animation: akis-asagi 92s linear -30s infinite; }
@keyframes akis-yukari { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--ara) / 2)); } }
@keyframes akis-asagi { from { transform: translateY(calc(-50% - var(--ara) / 2)); } to { transform: translateY(0); } }
.vitrin:hover .vs-ray, .akis-dur .vs-ray, .dur .vs-ray { animation-play-state: paused !important; }
.js .vitrin { animation: vitrin-gir 1.8s var(--yay) .45s both; }
@keyframes vitrin-gir { from { opacity: 0; translate: 90px 40px; } to { opacity: 1; translate: 0 0; } }

.vk { position: relative; display: block; height: var(--h, 320px); border-radius: var(--r); overflow: hidden; flex: none; isolation: isolate;
  box-shadow: 0 30px 60px -28px rgba(2,8,22,.75), 0 0 0 1px rgba(255,255,255,.1); transition: transform .9s var(--yay), box-shadow .9s var(--yay); }
.vk::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.12);
  background: linear-gradient(160deg, rgba(255,255,255,.1) 0%, transparent 20%); }
.vk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--yay); }
/* odak: duvarın ortasına gelen görsel kart aydınlanır, hafifçe öne çıkar ve künyesini gösterir; ötekiler yalnız görseldir */
.vk-gorsel::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .9s var(--yay);
  background: linear-gradient(180deg, color-mix(in oklab, var(--perde) 10%, transparent), color-mix(in oklab, var(--perde) 38%, transparent)); }
.vk-gorsel.odakta, .vk-gorsel:hover, .vk-gorsel:focus-visible { transform: scale(1.035); z-index: 2;
  box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--ana-isik) 80%, transparent), 0 0 54px -8px color-mix(in oklab, var(--ana-isik) 60%, transparent), 0 40px 80px -30px rgba(2,8,22,.9); }
.vk-gorsel.odakta::before, .vk-gorsel:hover::before, .vk-gorsel:focus-visible::before { opacity: 0; }
.vk-gorsel.odakta img, .vk-gorsel:hover img { transform: scale(1.05); }
.vk-gorsel .vk-alt { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--yay), transform .9s var(--yay); }
.vk-gorsel.odakta .vk-alt, .vk-gorsel:hover .vk-alt, .vk-gorsel:focus-visible .vk-alt { opacity: 1; transform: none; transition-delay: .12s; }
.vk-alt { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3; display: grid; gap: 6px; padding: 14px 16px 15px; border-radius: 15px;
  background: color-mix(in oklab, var(--perde) 72%, transparent); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); color: #fff; }
.vk-alt b { font: 750 18px/1.15 var(--f-bas); font-stretch: 106%; letter-spacing: -.015em; text-wrap: balance; }
.vk-alt small { font: 500 13.5px/1.3 var(--f-govde); color: rgba(255,255,255,.82); text-wrap: balance; }
.vk-alt .durum { padding: 5px 9px 5px 8px; font-size: 11.5px; }
.vk-alt .durum.devam { background: color-mix(in oklab, var(--ana) 78%, transparent); color: var(--ana-ust); }
.vk-alt .durum.bitti { background: rgba(255,255,255,.92); color: #146C43; }
.vk-alt .durum.malzeme { background: rgba(255,255,255,.18); color: #fff; }
.vk-mavi, .vk-beyaz, .vk-cam { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 24px 24px 24px; }
.vk-mavi { color: var(--ana-ust); background:
  radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--ana-isik) 55%, transparent) 0, transparent 55%),
  linear-gradient(155deg, var(--ana-parlak), var(--ana) 48%, var(--ana-derin)); }
.vk-beyaz { background: rgba(255,255,255,.94); color: var(--murekkep); }
.vk-cam { color: #fff;
  background: radial-gradient(110% 80% at 0% 0%, rgba(255,255,255,.16), transparent 55%), radial-gradient(90% 70% at 100% 100%, color-mix(in oklab, var(--ana) 40%, transparent), transparent 65%), linear-gradient(160deg, color-mix(in oklab, var(--ana-derin) 70%, var(--perde)), var(--perde)); }
.vk-cam .vk-ust { margin-bottom: auto; color: var(--ana-sis); opacity: .9; }
.vk-ust { font: 700 12px/1 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.vk-mavi .vk-ust { margin-bottom: auto; }
.vk-beyaz .vk-ust { margin-bottom: auto; color: var(--ana-yazi); opacity: 1; }
.vk-sayi { font: 800 clamp(30px, 2.05vw, 42px)/1 var(--f-bas); font-stretch: 108%; letter-spacing: -.035em; white-space: nowrap; }
.vk-not { font: 500 14.5px/1.35 var(--f-govde); opacity: .86; }
.vk-isaretler { display: flex; gap: 8px; margin-top: 10px; }
.vk-isaretler .im { width: 34px; height: 34px; border-radius: 10px; background: var(--sis); border: 1px solid var(--cizgi); position: relative; }
.vk-isaretler .im::after { content: ""; position: absolute; inset: 9px; border-radius: 4px; background: #9AA5B5; }
.vk-isaretler .im2::after { border-radius: 50%; background: #8C98AA; }
.vk-isaretler .im3::after { inset: 10px 8px; border-radius: 2px; transform: skewX(-14deg); background: #A3ADBB; }
.vk-isaretler .im4::after { clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; background: #95A1B2; }
/* odağa gelen kartın camından bir kez ışık geçer (yalnız odaktaki kart; ötekiler sakin kalır) */
.vk-parilti { position: absolute; inset: 0; z-index: 4; overflow: hidden; border-radius: inherit; pointer-events: none; display: none; }
.vk-mavi .vk-parilti, .vk-beyaz .vk-parilti, .vk-cam .vk-parilti, .odakta .vk-parilti { display: block; }
.vk-parilti::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: -60%; width: 46%; transform: translateX(0) skewX(-14deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 30%, rgba(255,255,255,.26) 50%, rgba(255,255,255,.08) 70%, transparent); animation: parilti-gec 14s cubic-bezier(.45,.05,.25,1) infinite; animation-delay: var(--pd, 0s); }
.odakta .vk-parilti::before { animation: parilti-odak 1.5s cubic-bezier(.3,.1,.2,1) .25s both; }
@keyframes parilti-gec { 0%, 64% { transform: translateX(0) skewX(-14deg); } 100% { transform: translateX(440%) skewX(-14deg); } }
@keyframes parilti-odak { from { transform: translateX(0) skewX(-14deg); } to { transform: translateX(440%) skewX(-14deg); } }
.dur .vk-parilti, .anlik .vk-parilti, .akis-dur .vk-parilti { display: none !important; }

.acilis-alt { position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2; max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar); box-sizing: content-box;
  display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
@media (min-width: 1920px) { .acilis-alt { padding: 0 140px; } }
.acilis-alt > * { pointer-events: auto; }
.temsili { font: 600 12.5px/1 var(--f-govde); color: rgba(255,255,255,.62); letter-spacing: .02em; }
.akis-dugme { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 8px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: #fff; font: 650 13.5px/1 var(--f-govde); transition: background .25s; }
.akis-dugme:hover { background: rgba(255,255,255,.2); }
.akis-ikon { position: relative; width: 26px; height: 26px; border-radius: 50%; background: #fff; }
.akis-ikon::before, .akis-ikon::after { content: ""; position: absolute; top: 8px; width: 3px; height: 10px; border-radius: 2px; background: var(--ana); }
.akis-ikon::before { left: 9px; } .akis-ikon::after { left: 14px; }
.akis-dur .akis-ikon::before { left: 10px; top: 7px; width: 0; height: 0; border-radius: 0; background: none; border-left: 9px solid var(--ana); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.akis-dur .akis-ikon::after { display: none; }

/* ---------- 7 · Bölüm iskeleti ---------- */
.bolum { position: relative; padding: clamp(84px, 9vw, 150px) 0; }
.bolum-bas { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px 64px; margin-bottom: clamp(36px, 4vw, 60px); }
.bolum-bas .h2 { max-width: 760px; }
.bolum-ozet { max-width: 560px; color: var(--metin); }
.bolum-ozet b, .kisaca b { color: var(--murekkep); }
.js .gor { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--yay), transform 1s var(--yay); transition-delay: calc(var(--g, 0) * .09s); }
.js .gor.gorundu, .anlik .gor { opacity: 1; transform: none; }

/* ---------- 8 · Kurumsal ---------- */
.kurumsal { background: #fff; padding-bottom: clamp(60px, 5.5vw, 96px); }
.kurumsal-ic { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.kurumsal-sol .h2 { max-width: 640px; }
.kisaca { margin-top: 28px; font-size: 18.5px; line-height: 1.65; color: var(--metin); max-width: 620px; }
.kurumsal-ek { margin-top: 16px; max-width: 620px; }
.kurumsal-baglar { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 30px; }
.olgular { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.olgu { position: relative; display: flex; flex-direction: column; min-height: 210px; padding: 26px 28px; border-radius: 24px; background: var(--sis); border: 1px solid var(--cizgi); overflow: hidden; isolation: isolate; }
.olgu::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--ana) 14%, transparent), transparent 70%); }
.olgu:hover::before { opacity: 1; }
.olgu dt { order: 2; font: 700 16px/1.3 var(--f-govde); color: var(--murekkep); margin-top: 10px; }
.olgu dd { order: 1; margin-top: auto; font: 800 clamp(52px, 4.6vw, 80px)/.95 var(--f-bas); font-stretch: 108%; letter-spacing: -.045em; color: var(--murekkep); font-variant-numeric: tabular-nums; }
.olgu-not { order: 3; font-size: 14.5px; color: var(--soluk); margin-top: 2px; }
.olgu-mavi { background: radial-gradient(120% 100% at 100% 0%, color-mix(in oklab, var(--ana-isik) 50%, transparent) 0, transparent 55%), linear-gradient(155deg, var(--ana-parlak), var(--ana) 50%, var(--ana-derin)); border-color: transparent; color: var(--ana-ust); box-shadow: 0 24px 50px -24px color-mix(in oklab, var(--ana) 70%, transparent); }
.olgu-mavi dt, .olgu-mavi dd { color: var(--ana-ust); }
.olgu-mavi .olgu-not { color: color-mix(in oklab, var(--ana-ust) 78%, transparent); }
.olgu-mavi::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 70%); }
.belgeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.belgeler li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--cizgi); font: 650 14px/1 var(--f-govde); color: var(--murekkep); background: #fff; }
.belgeler li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--ana-tint2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%230B57D0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

/* ---------- 9 · Projeler ---------- */
.projeler { background: var(--sis); }
.projeler::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--cizgi); }
.sekme { position: relative; display: inline-flex; padding: 5px; border-radius: 16px; background: #fff; border: 1px solid var(--cizgi); box-shadow: 0 8px 22px -16px rgba(14,23,38,.3); flex: none; }
.sekme button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 12px; font: 700 15px/1 var(--f-govde); color: var(--metin); transition: color .3s; }
.sekme button span { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--sis); font-size: 12.5px; color: var(--soluk); transition: background .3s, color .3s; }
.sekme button[aria-selected="true"] { color: var(--ana-ust); }
.sekme button[aria-selected="true"] span { background: color-mix(in oklab, var(--ana-ust) 20%, transparent); color: var(--ana-ust); }
.sekme-isik { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: var(--sx, 5px); width: var(--sw, 150px); border-radius: 12px; background: linear-gradient(180deg, var(--ana-parlak), var(--ana)); box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--ana) 70%, transparent); transition: left .45s var(--yay), width .45s var(--yay); }
.sp { animation: sp-gir .7s var(--yay); }
@keyframes sp-gir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.one { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); border-radius: 30px; background: #fff; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(14,23,38,.35), 0 0 0 1px var(--cizgi); }
.one-gorsel { position: relative; display: block; min-height: 520px; overflow: hidden; }
.one-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--yay); }
.one:hover .one-gorsel img { transform: scale(1.045); }
.one-kunye { display: flex; flex-direction: column; gap: 18px; padding: clamp(30px, 3.4vw, 56px); }
.one-kunye > p { color: var(--metin); }
.kunye-liste { display: grid; margin: 4px 0 10px; border-top: 1px solid var(--cizgi); }
.kunye-liste div { display: flex; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--cizgi); }
.kunye-liste dt { color: var(--soluk); font-size: 15.5px; }
.kunye-liste dd { color: var(--murekkep); font: 700 15.5px/1.4 var(--f-govde); text-align: right; }
.one-kunye .dugme { align-self: flex-start; }
.kucukler { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; margin-top: 18px; }
.kucukler.uc { grid-template-columns: 1fr 1fr 1fr; }
.kucuk { display: flex; align-items: center; gap: 20px; padding: 12px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi); transition: box-shadow .4s, transform .45s var(--yay); }
.kucuk:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ana-cizgi), 0 22px 40px -26px rgba(14,23,38,.35); }
.kucuk-gorsel { position: relative; width: 150px; height: 108px; border-radius: 14px; overflow: hidden; flex: none; }
.kucuk-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--yay); }
.kucuk:hover .kucuk-gorsel img { transform: scale(1.07); }
.kucuk-metin { display: grid; gap: 6px; min-width: 0; }
.kucuk-metin b { font: 750 18.5px/1.2 var(--f-bas); font-stretch: 106%; color: var(--murekkep); letter-spacing: -.015em; }
.kucuk-metin small { font-size: 14px; color: var(--soluk); line-height: 1.35; text-wrap: balance; }
.kucuk-tumu { padding: 12px 22px 12px 14px; }
.kucuk-tumu .ok { margin-left: auto; color: var(--ana-yazi); }
.tumu-sayi { display: grid; place-items: center; width: 108px; height: 108px; border-radius: 14px; flex: none; background: linear-gradient(155deg, var(--ana-parlak), var(--ana) 50%, var(--ana-derin)); color: var(--ana-ust); font: 800 40px/1 var(--f-bas); font-stretch: 108%; letter-spacing: -.04em; }

/* ---------- 10 · Yapı malzemeleri ---------- */
.malzemeler { background: #fff; }
.mz { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 4.4vw, 84px); align-items: start; }
.mz-liste { border-top: 1px solid var(--cizgi); counter-reset: none; }
.mz-satir { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto 22px; align-items: center; gap: 18px; padding: 24px 8px 24px 0; border-bottom: 1px solid var(--cizgi); transition: padding .45s var(--yay), color .3s; }
.mz-satir::before { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--ana); transition: width .6s var(--yay); }
.mz-no { font: 700 14px/1 var(--f-govde); color: var(--soluk); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.mz-ad { display: grid; gap: 7px; min-width: 0; }
.mz-ad b { font: 780 clamp(23px, 1.75vw, 31px)/1.08 var(--f-bas); font-stretch: 106%; letter-spacing: -.022em; color: var(--murekkep); transition: color .3s; }
.mz-ad small { font-size: 15px; color: var(--soluk); }
.mz-sayi { font: 650 14px/1 var(--f-govde); color: var(--soluk); padding: 8px 12px; border-radius: 10px; background: var(--sis); white-space: nowrap; transition: background .3s, color .3s; }
.mz-satir .ok { color: var(--soluk); }
.mz-satir.etkin, .mz-satir:hover { padding-left: 14px; }
.mz-satir.etkin::before, .mz-satir:hover::before { width: 100%; }
.mz-satir.etkin .mz-ad b, .mz-satir:hover .mz-ad b { color: var(--ana-yazi); }
.mz-satir.etkin .mz-sayi { background: var(--ana-tint2); color: var(--ana-yazi); }
.mz-satir.etkin .ok, .mz-satir:hover .ok { color: var(--ana-yazi); transform: translateX(3px); }
.mz-sag { position: sticky; top: 104px; display: grid; gap: 18px; }
.mz-onizleme { position: relative; margin: 0; aspect-ratio: 16 / 10.5; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 70px -44px rgba(14,23,38,.5); }
.mz-onizleme img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform 1.2s var(--yay); }
.mz-onizleme img.giden { opacity: 0; transform: scale(1.05); }
.mz-onizleme::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, transparent, rgba(3,10,26,.5)); pointer-events: none; }
.mz-baslik { position: absolute; left: 16px; bottom: 16px; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: rgba(10,20,40,.36); border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); color: #fff; }
.mz-baslik b { font: 750 19px/1 var(--f-bas); font-stretch: 106%; letter-spacing: -.015em; }
.mz-baslik span { font: 650 13px/1 var(--f-govde); padding: 6px 9px; border-radius: 8px; background: rgba(255,255,255,.16); }
.magaza { position: relative; padding: 28px 30px; border-radius: 28px; color: var(--ana-ust); overflow: hidden; isolation: isolate;
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--ana-isik) 50%, transparent) 0, transparent 55%), linear-gradient(155deg, var(--ana-parlak), var(--ana) 50%, var(--ana-derin));
  box-shadow: 0 34px 60px -34px color-mix(in oklab, var(--ana) 75%, transparent); }
.magaza-ust { display: grid; gap: 10px; }
.magaza-ad { font: 800 30px/1.05 var(--f-bas); font-stretch: 108%; letter-spacing: -.03em; }
.magaza-bilgi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 24px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--ana-ust) 24%, transparent); }
.magaza-bilgi dt { font-size: 13.5px; color: color-mix(in oklab, var(--ana-ust) 72%, transparent); }
.magaza-bilgi dd { font: 750 18px/1.25 var(--f-bas); font-stretch: 104%; margin-top: 4px; white-space: nowrap; }
.magaza-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 11 · Bayiliklerimiz ---------- */
.bayilikler { background: #fff; }
.malzemeler + .bayilikler { padding-top: 0; }
.bayi-pano { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 4.4vw, 80px); align-items: center; padding: clamp(36px, 4.4vw, 72px); border-radius: 34px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 90% at 0% 0%, var(--ana-tint2), transparent 60%), radial-gradient(60% 80% at 100% 100%, color-mix(in oklab, var(--ana) 9%, #fff), transparent 60%), var(--sis); border: 1px solid var(--cizgi); }
.bayi-bas p:not(.etiket) { margin-top: 20px; }
.bayi-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.bayi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 128px; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi), 0 14px 30px -26px rgba(14,23,38,.4); }
.marka-ad { font: 750 15px/1.15 var(--f-bas); font-stretch: 104%; letter-spacing: -.01em; color: #4A5568; text-align: center; }
.marka-im { position: relative; width: 40px; height: 40px; }
.marka-im::before, .marka-im::after { content: ""; position: absolute; background: #9AA6B6; }
.m1::before { inset: 4px; border-radius: 50%; } .m1::after { inset: 13px; border-radius: 50%; background: #fff; }
.m2::before { inset: 6px 4px; border-radius: 4px; transform: skewX(-16deg); } .m2::after { inset: 17px 12px; background: #fff; transform: skewX(-16deg); }
.m3::before { inset: 4px 4px 22px; border-radius: 4px; } .m3::after { inset: 22px 4px 4px 14px; border-radius: 4px; }
.m4::before { inset: 4px; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .m4::after { display: none; }
.m5::before { inset: 4px; border-radius: 10px; } .m5::after { inset: 4px 19px 4px 4px; border-radius: 10px 0 0 10px; background: #C4CCD7; }
.m6::before { inset: 6px; border-radius: 50% 50% 50% 4px; } .m6::after { display: none; }
.m7::before { left: 4px; right: 4px; top: 8px; height: 8px; border-radius: 4px; } .m7::after { left: 4px; right: 14px; top: 22px; height: 8px; border-radius: 4px; }
.m8::before { inset: 4px; border-radius: 50%; clip-path: inset(0 0 50% 0); } .m8::after { inset: 4px; border-radius: 50%; clip-path: inset(50% 0 0 0); background: #C4CCD7; }
.m9::before { inset: 5px; transform: rotate(45deg); border-radius: 5px; } .m9::after { inset: 15px; transform: rotate(45deg); border-radius: 2px; background: #fff; }
.m10::before { left: 4px; top: 4px; width: 15px; height: 15px; border-radius: 50%; } .m10::after { right: 4px; bottom: 4px; width: 20px; height: 20px; border-radius: 6px; }
.m11::before { inset: 6px 3px; clip-path: polygon(0 100%, 50% 0, 100% 100%, 78% 100%, 50% 42%, 22% 100%); } .m11::after { display: none; }
.m12::before { inset: 4px; border-radius: 3px; background: repeating-linear-gradient(90deg, #9AA6B6 0 7px, #C4CCD7 7px 14px); } .m12::after { display: none; }
.bayi-pano .ornek-not { position: absolute; right: clamp(36px, 4.4vw, 72px); bottom: 18px; margin: 0; }

/* ---------- 12 · Haberler ---------- */
.haberler { background: #fff; padding-top: 0; }
.haber-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
.haber { display: flex; flex-direction: column; border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--cizgi); transition: transform .45s var(--yay), box-shadow .45s; }
.haber:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ana-cizgi), 0 30px 60px -38px rgba(14,23,38,.45); }
.haber-gorsel { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.haber-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--yay); }
.haber:hover .haber-gorsel img { transform: scale(1.06); }
.haber-metin { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px 30px; }
.haber-ust { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--soluk); }
.haber-tur { padding: 6px 10px; border-radius: 8px; background: var(--ana-tint); color: var(--ana-yazi); font: 700 12.5px/1 var(--f-govde); }
.haber h3 a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .5s var(--yay); }
.haber:hover h3 a { background-size: 100% 1.5px; }
.haber-metin > p:last-child { font-size: 15.5px; line-height: 1.6; }

/* ---------- 13 · İletişim ---------- */
.iletisim { background: var(--sis); }
.iletisim::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--cizgi); }
.cagri { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 96px); align-items: center; padding: clamp(36px, 4.6vw, 80px); border-radius: 36px; overflow: hidden; isolation: isolate; color: var(--ana-ust);
  background: radial-gradient(70% 110% at 100% 0%, color-mix(in oklab, var(--ana-isik) 55%, transparent) 0, transparent 60%), radial-gradient(60% 90% at 0% 100%, color-mix(in oklab, var(--ana-derin) 80%, transparent) 0, transparent 60%), linear-gradient(150deg, var(--ana-parlak), var(--ana) 45%, var(--ana-derin));
  box-shadow: 0 50px 90px -50px color-mix(in oklab, var(--ana) 80%, transparent); }
.cagri::after { content: ""; position: absolute; z-index: -1; right: -12%; top: -40%; width: 60%; height: 160%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%); animation: parilti 9s ease-in-out infinite; }
@keyframes parilti { 0%, 100% { transform: translateX(-30%); opacity: .4; } 50% { transform: translateX(10%); opacity: 1; } }
.cagri .h2 { color: var(--ana-ust); max-width: 780px; }
.cagri-sol > p:not(.etiket) { margin-top: 20px; max-width: 620px; font-size: 18px; color: color-mix(in oklab, var(--ana-ust) 86%, transparent); }
.cagri-dugmeler { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.cagri .dugme.cam { color: var(--ana-ust); border-color: color-mix(in oklab, var(--ana-ust) 35%, transparent); background: color-mix(in oklab, var(--ana-ust) 10%, transparent); }
.cagri-sag { display: grid; border-radius: 22px; padding: 6px 24px; background: color-mix(in oklab, var(--ana-ust) 10%, transparent); border: 1px solid color-mix(in oklab, var(--ana-ust) 22%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.cagri-sag li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid color-mix(in oklab, var(--ana-ust) 18%, transparent); }
.cagri-sag li:last-child { border-bottom: 0; }
.cagri-sag span { font-size: 13.5px; color: color-mix(in oklab, var(--ana-ust) 72%, transparent); }
.cagri-sag b { font: 750 19px/1.2 var(--f-bas); font-stretch: 104%; letter-spacing: -.01em; overflow-wrap: anywhere; }
.konum-bas { margin: clamp(56px, 6vw, 96px) 0 26px; font-size: clamp(24px, 1.9vw, 32px); letter-spacing: -.022em; }
.konumlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px); }
.konum { border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--cizgi); }
.k-harita { position: relative; height: 190px; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at 50% 46%, color-mix(in oklab, var(--ana) 16%, transparent) 0, transparent 34%), linear-gradient(160deg, #EEF3FA, #E2EAF5); }
.k-harita::before { content: ""; position: absolute; inset: -20%; opacity: .55; background:
  linear-gradient(28deg, transparent 47%, #fff 47.5% 52.5%, transparent 53%), linear-gradient(-62deg, transparent 47%, #fff 47.5% 51%, transparent 51.5%), linear-gradient(-12deg, transparent 63%, #fff 63.5% 65.5%, transparent 66%); }
.harita-isaret { position: absolute; left: 50%; top: 40%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--ana); box-shadow: 0 0 0 6px color-mix(in oklab, var(--ana) 22%, transparent), 0 0 0 14px color-mix(in oklab, var(--ana) 10%, transparent); }
.harita-ac { position: relative; margin-top: 78px; height: 38px; padding: 0 16px; border-radius: 11px; background: #fff; color: var(--ana-yazi); font: 700 14px/1 var(--f-govde); box-shadow: 0 8px 20px -10px rgba(14,23,38,.35); }
.harita-ac:hover { background: var(--ana-tint); }
.konum-metin { display: grid; gap: 8px; padding: 22px 24px 26px; font-size: 15.5px; }
.konum-metin h4 { margin-bottom: 4px; }
.konum-metin a:not(.bag) { color: var(--murekkep); font-weight: 600; }
.konum-metin a:not(.bag):hover { color: var(--ana-yazi); }
.konum-saat { color: var(--soluk); font-size: 14.5px; }
.kucuk-bag { margin-top: 6px; font-size: 14.5px; }

/* ---------- 14 · Alt bilgi ---------- */
.alt { background: var(--gece); color: rgba(255,255,255,.7); padding: clamp(64px, 6vw, 96px) 0 0; font-size: 15.5px; }
/* Alt bilgi ızgarası (B1, 2026-10-30): marka + menü sütunları (--alt-sutun: Kurumsal, Projeler, Bağlantılar ×n) + İletişim (en az numarayı alacak genişlikte: min-content); eski s2/s3 sınıfları kalktı */
.alt-ust { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(var(--alt-sutun, 2), minmax(0, 1fr)) minmax(min-content, 1.15fr); gap: 48px; padding-bottom: 56px; }
.alt .logo { color: #fff; }
.alt-marka p { margin-top: 22px; max-width: 420px; line-height: 1.65; }
.alt-sutun { display: flex; flex-direction: column; gap: 12px; }
.alt-bas { font: 700 13px/1 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 8px; font-stretch: 100%; }
.alt-sutun a:hover { color: #fff; }
.alt-alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; padding: 26px 0 30px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.alt-yasal a:hover { color: #fff; }

/* ---------- 15 · Duyarlı ---------- */
@media (max-width: 1279px) {
  .vitrin { --duvar-x: 58%; }
  .duvar { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 80%; gap: 18px; }
  .vk-alt { padding: 12px 13px 13px; }
  .vk-alt b { font-size: 16px; }
  .vk-alt small { font-size: 12.5px; }
  .acilis-giris { max-width: 480px; }
  .vs-ray { --ara: 18px; }
  .h1 { font-size: clamp(36px, 5.2vw, 72px); }
  .kurumsal-ic { grid-template-columns: 1fr; }
  .bayi-pano { grid-template-columns: 1fr; }
  .mz-satir { padding-top: 20px; padding-bottom: 20px; }
}
@media (max-width: 1100px) {
  .menu { display: none; position: fixed; inset: 0; margin: 0; padding: 104px var(--kenar) 32px; background: #fff; color: var(--murekkep); overflow-y: auto; z-index: -1; }
  .menu.acik { display: flex; flex-direction: column; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu li > :is(a, button) { height: auto; padding: 18px 4px; border-radius: 0; border-bottom: 1px solid var(--cizgi); font: 750 22px/1.2 var(--f-bas); font-stretch: 106%; }
  .menu > ul > li > a[aria-current="page"]::after { display: none; }
  .menu > ul > li > a[aria-current="page"] { color: var(--ana-yazi); }
  .acilir-pano { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 4px 0 10px; background: none; min-width: 0; }
  .acilir-pano.genis { grid-template-columns: 1fr 1fr; min-width: 0; }
  .acilir-pano a { padding: 9px 4px; font-size: 15.5px; color: var(--metin); }
  .ok-a { display: none; }
  .menu-mobil-alt { display: grid; gap: 12px; margin-top: 28px; }
  .menu-mobil-alt .dugme { height: 54px; }
  .menu-tel { text-align: center; font: 750 17px/1 var(--f-govde); padding: 12px; color: var(--ana-yazi); }
  .menu-ac { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,.3); }
  .menu-ac span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--yay); }
  .ust.dolu .menu-ac, .dolu-zorla .menu-ac, .menu-acik .menu-ac { border-color: var(--cizgi); }
  .menu-acik .ust { color: var(--murekkep); background: #fff; }
  .menu-acik .ust::before { opacity: 0; }
  .menu-acik .menu-ac span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-acik .menu-ac span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu-acik { overflow: hidden; }
  .ust-cagri { display: none; }
  .ust-sag { margin-left: auto; }
  .dil { display: none; }
  .menu-acik .dil { display: flex; }
}
@media (max-width: 899px) {
  :root { --r: 18px; }
  .acilis { height: auto; min-height: var(--hh); max-height: none; display: flex; flex-direction: column; }
  .acilis-ic { display: flex; flex-direction: column; justify-content: flex-end; height: auto; flex: 1; padding-top: 120px; margin: 0; align-self: stretch; min-width: 0; }
  .acilis-metin { padding-bottom: 28px; align-self: stretch; }
  .h1 { margin: 22px 0; font-size: clamp(32px, 8.6vw, 60px); line-height: 1.02; }
  .acilis-perde { background: linear-gradient(180deg, color-mix(in oklab, var(--perde) 45%, transparent) 0%, color-mix(in oklab, var(--perde) 30%, transparent) 24%, color-mix(in oklab, var(--perde) 74%, transparent) 52%, color-mix(in oklab, var(--perde) 92%, transparent) 100%); }
  /* vitrin: yatay akan şerit */
  .vitrin { position: relative; z-index: 1; inset: auto; height: auto; display: block; margin: 0 calc(var(--kenar) * -1) 76px; perspective: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
  .js .vitrin { animation-name: vitrin-gir-m; }
  @keyframes vitrin-gir-m { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  .duvar { position: static; display: block; width: auto; transform: none; }
  .vs-b { display: none; }
  .vs-a .vs-ray { flex-direction: row; gap: 12px; width: max-content; }
  .js .vitrin.hazir .vs-a .vs-ray { animation: akis-yatay var(--sure-m, 46s) linear infinite; }
  @keyframes akis-yatay { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
  .vk { height: 168px !important; width: 214px; }
  .vk-mavi, .vk-beyaz { padding: 16px; }
  .vk-sayi { font-size: 32px; }
  .vk-not { font-size: 13px; }
  .vk-isaretler { display: none; }
  .vk-alt { left: 7px; right: 7px; bottom: 7px; padding: 10px 11px; gap: 4px; border-radius: 12px; }
  .vk-alt b { font-size: 15px; }
  .vk-alt small { font-size: 12px; }
  .vk-alt .durum { display: none; }
  .vk-gorsel .vk-alt { opacity: 1; transform: none; }
  .vk-gorsel::before { opacity: 0; }
  .vk-gorsel.odakta, .vk-gorsel:hover { transform: none; box-shadow: 0 30px 60px -28px rgba(2,8,22,.75), 0 0 0 1px rgba(255,255,255,.1); }
  .acilis-alt { bottom: 22px; padding: 0 var(--kenar); }
  .bolum-bas { flex-direction: column; align-items: flex-start; }
  .one { grid-template-columns: 1fr; }
  .one-gorsel { min-height: 0; aspect-ratio: 16 / 10; }
  .kucukler, .kucukler.uc { grid-template-columns: 1fr; }
  .mz { grid-template-columns: 1fr; }
  .mz-sag { position: static; order: -1; }
  .magaza-bilgi { grid-template-columns: 1fr 1fr; }
  .bayi-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .haber-izgara, .konumlar { grid-template-columns: 1fr; }
  .cagri { grid-template-columns: 1fr; }
  .alt-ust { grid-template-columns: 1fr 1fr; }
  .alt-marka { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .ust-ic { height: 76px; gap: 12px; }
  .logo-im { width: 38px; height: 38px; }
  .logo-yazi b { font-size: 19px; }
  .tel-ikon { width: 44px; height: 44px; }
  .ak-cip { font-size: 13.5px; }
  .acilis-giris { font-size: 16.5px; }
  .acilis-dugmeler { margin-top: 26px; gap: 10px; }
  .acilis-dugmeler .dugme { flex: 1 1 auto; height: 52px; padding: 0 18px; font-size: 15.5px; }
  .olgular { gap: 10px; }
  .olgu { min-height: 168px; padding: 20px; border-radius: 20px; }
  .olgu dd { font-size: 38px; letter-spacing: -.05em; }
  .olgu dt { font-size: 14.5px; }
  .olgu-not { font-size: 13px; }
  .sekme { width: 100%; }
  .sekme button { flex: 1; justify-content: center; padding: 0 10px; }
  .one-kunye { padding: 24px 22px 28px; }
  .kunye-liste dt, .kunye-liste dd { font-size: 14.5px; }
  .kucuk-gorsel, .tumu-sayi { width: 104px; height: 84px; }
  .tumu-sayi { font-size: 32px; }
  .mz-satir { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 12px; }
  .mz-sayi { display: none; }
  .mz-ad b { font-size: 21px; }
  .mz-ad small { font-size: 14px; }
  .magaza { padding: 24px 22px; }
  .magaza-dugmeler .dugme { flex: 1 1 auto; }
  .bayi-izgara { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bayi { height: 112px; }
  .bayi-pano { padding: 28px 18px 44px; border-radius: 26px; }
  .bayi-pano .ornek-not { left: 20px; right: auto; }
  .cagri { padding: 30px 22px; border-radius: 28px; }
  .cagri-dugmeler .dugme { flex: 1 1 auto; }
  .alt-ust { grid-template-columns: 1fr; gap: 34px; }
}

/* hareket azaltma / anlık görüntü */
.dur *, .dur *::before, .dur *::after, .anlik *, .anlik *::before, .anlik *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
.dur .gir, .anlik .gir { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
.dur .vitrin, .anlik .vitrin { animation: none !important; }
.dur .acilis-video { animation: none; }
.anlik .vs-ray { animation-play-state: paused !important; }
.anlik .vitrin.hazir .vs-a .vs-ray { animation-delay: -4s !important; }
.anlik .vitrin.hazir .vs-b .vs-ray { animation-delay: -40s !important; }
.anlik .acilis-video { animation: none; transform: scale(1.04); }
.dur .cagri::after, .anlik .cagri::after { animation: none; }

/* ---------- 16 · Kurumsal şeridi (imzanın yankısı) ---------- */
.serit { position: relative; margin-top: clamp(64px, 7vw, 120px); padding-bottom: 40px; --sh: clamp(210px, 17vw, 330px); }
.serit-pencere { overflow: hidden; padding: 6px 0 64px; margin-bottom: -34px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.serit-ray { display: flex; align-items: flex-start; gap: 18px; width: max-content; will-change: transform; }
.js .serit.hazir .serit-ray { animation: serit-akis 96s linear infinite; }
@keyframes serit-akis { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }
.serit-pencere:hover .serit-ray, .akis-dur .serit-ray, .dur .serit-ray { animation-play-state: paused !important; }
.anlik .serit.hazir .serit-ray { animation-play-state: paused !important; animation-delay: -30s !important; }
.serit-kart { position: relative; margin: 0; flex: none; height: var(--sh); width: calc(var(--sh) * 1.42); border-radius: 26px; overflow: hidden; isolation: isolate;
  box-shadow: 0 26px 50px -34px rgba(14,23,38,.55); }
.serit-kart:nth-child(3n+2) { width: calc(var(--sh) * .84); margin-top: 28px; }
.serit-kart:nth-child(3n) { margin-top: 10px; }
.serit-kart img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--yay); }
.serit-kart:hover img { transform: scale(1.06); }
.serit-kart figcaption { position: absolute; left: 14px; bottom: 14px; padding: 9px 13px; border-radius: 12px; background: rgba(255,255,255,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--murekkep); font: 700 14px/1.1 var(--f-govde); box-shadow: 0 8px 20px -12px rgba(14,23,38,.4); }
.serit-dugme { position: absolute; right: var(--kenar); bottom: 0; background: #fff; color: var(--murekkep); border-color: var(--cizgi); -webkit-backdrop-filter: none; backdrop-filter: none; }
.serit-dugme .akis-ikon { background: var(--ana); }
.serit-dugme .akis-ikon::before, .serit-dugme .akis-ikon::after { background: var(--ana-ust); }
.akis-dur .serit-dugme .akis-ikon::before { background: none; border-left-color: var(--ana-ust); }
@media (min-width: 1920px) { .serit-dugme { right: calc((100% - 1640px) / 2); } }

/* çağrı kartı: mavi tek ton görsel */
.cagri-gorsel { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 25%, #000 75%); mask-image: linear-gradient(100deg, transparent 25%, #000 75%); }
.cagri-gorsel img { width: 100%; height: 100%; object-fit: cover; opacity: .3; mix-blend-mode: luminosity; }
.yer .cagri-gorsel { display: none; }
@media (max-width: 899px) { .serit { --sh: 190px; } .serit-dugme { bottom: 0; } }
.olgu dd .arti { font-size: .62em; vertical-align: .42em; margin-left: .04em; }
.serit-dugme:hover { background: var(--ana-tint); }
.akis-odak .vs-ray, .akis-odak .serit-ray { animation-play-state: paused !important; }

/* ---------- 17 · Sahne: kaydırdıkça sayfa genişliğine açılan video penceresi ----------
   --k: 1 → pencere sayfa ızgarasına oturmuş yuvarlak köşeli kart; 0 → kenardan kenara sahne. */
.sahne { position: relative; background: var(--sis); }
.projeler:has(+ .sahne) { padding-bottom: clamp(56px, 5.5vw, 96px); }
.sahne + .malzemeler { padding-top: clamp(76px, 7.5vw, 128px); }
.sahne-pencere { --k: 1; position: relative; height: clamp(560px, 84vh, 900px); overflow: hidden; isolation: isolate; color: #fff;
  clip-path: inset(calc(var(--k) * 7%) calc(var(--k) * var(--kenar)) round calc(var(--k) * 36px + 2px));
  will-change: clip-path; }
.sahne-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(calc(1 + var(--k) * .14)); transform-origin: 50% 60%; }
.sahne-pencere::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  linear-gradient(180deg, transparent 35%, color-mix(in oklab, var(--perde) 80%, transparent) 100%),
  linear-gradient(90deg, color-mix(in oklab, var(--perde) 76%, transparent) 0%, color-mix(in oklab, var(--perde) 40%, transparent) 42%, transparent 70%); }
.sahne-ic { position: absolute; left: 0; right: 0; bottom: 0; max-width: var(--kap); margin: 0 auto; padding: 0 var(--kenar) calc(7% + clamp(40px, 5vw, 84px)); box-sizing: content-box;
  display: grid; justify-items: start; gap: 26px; transform: translateY(calc(var(--k) * 40px)); opacity: calc(1.25 - var(--k)); }
@media (min-width: 1920px) { .sahne-ic { padding-left: 140px; padding-right: 140px; } }
.sahne-etiket { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/1 var(--f-govde); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.9); }
.sahne-etiket::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--ana-isik); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ana-isik) 28%, transparent); }
.sahne-soz { max-width: 980px; color: #fff; font-size: clamp(32px, 3.7vw, 68px); line-height: 1.04; letter-spacing: -.032em; }
.sahne-temsili { position: absolute; right: calc(var(--kenar) + var(--k) * var(--kenar)); top: calc(7% * var(--k) + 22px); font: 600 12.5px/1 var(--f-govde); color: rgba(255,255,255,.7); }
.anlik .sahne-pencere, .dur .sahne-pencere { --k: 0 !important; }
@media (max-width: 899px) {
  .sahne-pencere { height: clamp(480px, 78svh, 680px); }
  .sahne-ic { gap: 20px; }
  .sahne-ic .dugme { height: 52px; font-size: 15.5px; }
}

/* =========================================================================
   GERÇEK TEMA EKLERİ (2026-10-02) — prototipin dili korunur; panel verisi, çekirdek parçalar, iç sayfalar
   ========================================================================= */

/* ---------- Belirteç eşlemeleri: çekirdek, işçilik katmanı, ortak parçalar (op-) ---------- */
:root {
  --vurgu: var(--ana); --zemin: var(--sis); --zemin-acik: var(--sis); --yaricap: 18px;
  --ik-vurgu: var(--ana); --ik-murekkep: 14 23 38; --ik-zemin-yumusak: var(--sis); --ik-r: 22px;
  --golge-1: 0 1px 2px rgba(14,23,38,.05), 0 10px 26px -18px rgba(14,23,38,.35);
  --golge-2: 0 24px 48px -30px rgba(14,23,38,.4);
  --golge-3: 0 40px 80px -40px rgba(14,23,38,.5);
  --op-ana: var(--ana); --op-ana-uzeri: var(--ana-ust); --op-ana-metin: var(--ana-yazi); --op-ana-acik: var(--ana-tint);
  --op-metin: var(--metin); --op-ikincil: var(--soluk); --op-cizgi: var(--cizgi); --op-zemin: var(--sis); --op-kart: #fff;
  --op-yaricap: 22px; --op-yaricap-kucuk: 14px; --op-golge: var(--golge-2);
  --op-baslik-font: var(--f-bas); --op-baslik-agirlik: 800; --op-yan-genislik: 320px; --baslik-yukseklik: 96px;
}

/* çekirdek tabanını nötrle (cekirdek.css önce yüklenir) */
main:focus { outline: none; }
.bolum + .bolum { border-block-start: 0; }
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gizli-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.ik { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.medya > img, .medya > picture > img { display: block; }

/* ---------- Logo: panel logosu ya da ana renk karo + baş harf ---------- */
.logo-im { display: grid; place-items: center; flex: none; border-radius: 11px; color: #fff; font: 820 22px/1 var(--f-bas); font-stretch: 108%;
  background: linear-gradient(135deg, var(--ana-parlak), var(--ana-derin)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.logo-gorsel { width: auto; height: 46px; max-width: 220px; object-fit: contain; }
.logo-dolu { display: none; }
.logo-seffaf.plakali { height: 38px; padding: 5px 10px; box-sizing: content-box; border-radius: 10px; background: #fff; }
.ust.dolu .logo-seffaf { display: none; }
.ust.dolu .logo-dolu { display: block; height: 42px; }
.logo-plaka { display: inline-flex; padding: 10px 14px; border-radius: 14px; background: #fff; }
.alt .logo-gorsel { height: 50px; }
.alt .logo-im { width: 42px; height: 42px; }

/* ---------- Başlık çubuğu: gerçek menü ---------- */
.menu li > button { font: 650 15.5px/1 var(--f-govde); }
.menu > ul > li > .aktif::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--ana-isik); }
.ust.dolu .menu > ul > li > .aktif::after { background: var(--ana); }
.acilir.acik .acilir-pano { opacity: 1; visibility: visible; transform: none; }
.acilir-pano a { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acilir-pano a small { padding: 4px 7px; border-radius: 7px; background: var(--sis); font: 650 12px/1 var(--f-govde); color: var(--soluk); }
.acilir-pano a[aria-current] { background: var(--ana-tint); color: var(--ana-yazi); }
.acilir-pano .ayrik { grid-column: 1 / -1; margin-top: 4px; border-top: 1px solid var(--cizgi); border-radius: 0 0 10px 10px; color: var(--ana-yazi); }
.acilir-pano .ayrik + .ayrik { margin-top: 0; border-top: 0; }
.acilir-pano .ok { width: 16px; height: 16px; }
.tel-ikon svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ust.dolu { color: var(--murekkep); }
/* betik gelmeden koyu başı olmayan sayfa: çubuk baştan dolu (sınıf sunucuda) */
.no-js .ust:not(.dolu) { background: rgba(14,23,38,.35); }

/* dil: dörtten çok dilde kısa açılır liste */
.dil-acilir { position: relative; }
.dil-acilir > summary { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 10px 0 12px; border-radius: 10px; list-style: none; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); font: 700 13px/1 var(--f-govde); letter-spacing: .04em; }
.ust.dolu .dil-acilir > summary { border-color: var(--cizgi); }
.dil-acilir > summary::-webkit-details-marker { display: none; }
.dil-liste { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 70; display: grid; gap: 2px; min-width: 210px; padding: 8px; border-radius: 16px; background: #fff;
  box-shadow: 0 24px 48px -18px rgba(8,18,40,.35), 0 0 0 1px rgba(14,23,38,.06); }
.dil-liste a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font: 600 14.5px/1.2 var(--f-govde); color: var(--metin); }
.dil-liste a b { min-width: 26px; font: 800 12px/1.2 var(--f-govde); letter-spacing: .06em; color: var(--soluk); }
.dil-liste a:hover, .dil-liste a[aria-current] { background: var(--sis); color: var(--murekkep); }
.dil-liste a[aria-current] b { color: var(--ana-yazi); }
.menu-dil { display: none; }

/* ---------- Açılış: panel slaytı (görsel / video) ---------- */
.acilis-medya > picture, .acilis-medya > img, .acilis-medya > .medya, .acilis-medya picture img, .acilis-medya .slayt-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acilis-medya > picture, .acilis-medya > img, .acilis-medya > .medya { transform-origin: 46% 50%; animation: yakinlas 26s ease-in-out infinite alternate; }
.acilis-medya .slayt-video { opacity: 0; transition: opacity 1s; }
.acilis-medya .slayt-video.oynuyor { opacity: 1; }
@media (max-width: 720px) { .acilis-medya picture img, .acilis-medya .slayt-video { object-position: var(--odak-x-tel, 50%) 50%; } }
.dur .acilis-medya > *, .anlik .acilis-medya > * { animation: none !important; }
.anlik .acilis-medya > * { transform: scale(1.04); }
/* başlık: panelden gelen tek metin — gövde satırları dengeli kırılır, vurgu satırı açık mavi */
.h1 .satir:not(.vurgu) { white-space: normal; text-wrap: balance; }
.acilis.vitrinsiz .acilis-metin { max-width: 1040px; }
.ak-cip { color: #fff; }
.temsili:empty { display: none; }
.acilis-alt { justify-content: space-between; }
.vk-isaretler .im.logolu { display: grid; place-items: center; background: #fff; overflow: hidden; }
.vk-isaretler .im.logolu::after { display: none; }
.vk-isaretler .im.logolu img { max-width: 80%; max-height: 70%; object-fit: contain; }
.vk-alt small { display: block; }
.vk-mavi .vk-sayi, .vk-beyaz .vk-sayi, .vk-cam .vk-sayi { overflow: hidden; text-overflow: ellipsis; }
.vk-cam .vk-not { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Kurumsal: veri durumları ---------- */
.kurumsal-ic.olgusuz { grid-template-columns: minmax(0, 1fr); }
.olgular.n1 { grid-template-columns: 1fr; }
.olgular.n3 .olgu:first-child { grid-row: span 2; }
.olgu dd { display: flex; align-items: baseline; }
.olgu-not { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.belgeler li::before { background: var(--ana-tint2); -webkit-mask: none; }
.belgeler li { position: relative; }
.belgeler li::after { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: var(--ana-yazi);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.serit-kart figcaption { max-width: calc(100% - 28px); }

/* ---------- Projeler: veri durumları ---------- */
.one-kunye h3 a:hover { color: var(--ana-yazi); }
.kucukler.n0 { grid-template-columns: 1fr; }
.kucukler.n1 { grid-template-columns: 2fr 1fr; }
.kucukler.n2 { grid-template-columns: 1fr 1fr 1fr; }
.tumu-sayi .ok { width: 40px; height: 40px; stroke-width: 1.6; }
.kucuk-tumu > .ok { flex: none; }
.kucuk-tumu .kucuk-metin small { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sekme button { white-space: nowrap; }
.bolum-bas { flex-wrap: nowrap; }
.kucuk-tumu .tumu-sayi .ok { margin: 0; color: var(--ana-ust); }
.anlik .sp, .dur .sp { animation: none; }
.magaza-bilgi dd a { white-space: nowrap; }
@media (max-width: 560px) { .magaza-bilgi .tel-satir { grid-column: 1 / -1; } }

/* ---------- Sahne: 2. slayt ---------- */
.sahne-gorsel, .sahne-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(calc(1 + var(--k) * .14)); transform-origin: 50% 60%; }
.sahne-video { opacity: 0; transition: opacity .9s; }
.sahne-video.oynuyor { opacity: 1; }
.sahne-metin { max-width: 620px; font-size: 18px; color: rgba(255,255,255,.86); }

/* ---------- Yapı malzemeleri: veri durumları ---------- */
.mz.onizlemesiz .mz-sag { position: static; }
.mz-tumu { margin-top: 26px; }
.magaza-bilgi.n1 { grid-template-columns: 1fr; }
.magaza-bilgi.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.magaza-bilgi.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.magaza-bilgi dd { white-space: normal; }
.magaza-bilgi a { color: inherit; }
.magaza-bilgi a:hover { text-decoration: underline; }
.magaza .vk-ust { opacity: .86; }
.mz-satir[data-gorsel=""] { --x: 0; }

/* ---------- Bayiliklerimiz: logolar ---------- */
.marka-logo { display: grid; place-items: center; width: 100%; height: 52px; }
.marka-logo img { max-width: 78%; max-height: 52px; width: auto; height: auto; object-fit: contain; }
.bayi-bas .bag { margin-top: 22px; }
.bayi-pano .ornek-not { max-width: 46%; text-align: right; }
.bayi-pano.tam { grid-template-columns: 1fr; }
.bayi-pano.tam .bayi-izgara { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.bayi-pano.tam .ornek-not { position: static; max-width: none; text-align: left; }

/* ---------- Haberler: veri durumları ---------- */
.haber-izgara.n1 { grid-template-columns: minmax(0, 520px); }
.haber-izgara.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.haber h3 a, .haber h2 a { color: inherit; }

/* ---------- İletişim: çağrı listesi ve konum kartları ---------- */
.cagri-sag a { color: inherit; }
.cagri-sag a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.konumlar.n1 { grid-template-columns: minmax(0, 560px); }
.konumlar.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.konumlar.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-harita iframe { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; }
.k-harita.yuklu .harita-ac, .k-harita.yuklu .harita-isaret { display: none; }
.konum-saat { white-space: pre-line; }
.konum-metin p { overflow-wrap: anywhere; }

/* ---------- İç sayfaların kapanışı: kısa çağrı kartı ---------- */
.ic-kapanis { background: #fff; padding: clamp(56px, 6vw, 96px) 0; }
.ic-kapanis .cagri { grid-template-columns: minmax(0, 1fr) auto; }
.ic-kapanis .cagri-dugmeler { margin-top: 0; }

/* ---------- Alt bilgi ---------- */
.alt address { display: flex; flex-direction: column; gap: 12px; font-style: normal; }
.alt address a:hover { color: #fff; }
.alt-saat { white-space: pre-line; font-size: 14.5px; }
.alt .sosyal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.alt .sosyal a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); color: #fff; }
.alt .sosyal a:hover { background: rgba(255,255,255,.1); }
.alt-telif { display: grid; gap: 4px; }
.alt-telif p { margin: 0; }
.alt .tk-imza { margin: 0; color: rgba(255,255,255,.7); }
.alt-yasal span { color: rgba(255,255,255,.6); }
.alt-yasal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.3); }
.alt-dil { color: #fff; }
.alt-yasal:empty { display: none; }

/* ---------- Duyuru penceresi + çerez bildirimi ---------- */
.site-duyuru { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(6,12,24,.6); }
.site-duyuru-kutu { position: relative; width: 100%; max-width: 560px; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--golge-3); }
.site-duyuru-kutu img { width: 100%; height: auto; }
.site-duyuru-kutu strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; font: 800 19px/1.3 var(--f-bas); color: var(--murekkep); }
.site-duyuru-kapat { position: absolute; z-index: 2; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--murekkep); box-shadow: var(--golge-1); }
.dugme-kucuk { height: 42px; padding: 0 18px; font-size: 14px; }

/* =========================================================================
   İÇ SAYFALAR
   ========================================================================= */
.ic-bas { position: relative; display: flex; align-items: flex-end; min-height: clamp(440px, 58vh, 620px); overflow: hidden; isolation: isolate; color: #fff; background: var(--perde); }
.ic-bas-gorsel { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.ic-bas-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 45%; animation: yakinlas 30s ease-in-out infinite alternate; }
.ic-bas-perde { position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(40% 70% at 86% 20%, color-mix(in oklab, var(--ana) 30%, transparent) 0, transparent 75%),
  linear-gradient(90deg, color-mix(in oklab, var(--perde) 88%, transparent) 0%, color-mix(in oklab, var(--perde) 58%, transparent) 45%, color-mix(in oklab, var(--perde) 36%, transparent) 100%),
  linear-gradient(180deg, color-mix(in oklab, var(--perde) 50%, transparent) 0%, transparent 32%, color-mix(in oklab, var(--perde) 70%, transparent) 100%); }
.ic-bas-ic { position: relative; width: 100%; padding-top: 140px; padding-bottom: clamp(48px, 6vw, 84px); }
.yol-izi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; padding: 9px 16px; border-radius: 99px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 600 14px/1.3 var(--f-govde); }
.yol-izi li { display: inline-flex; align-items: center; color: rgba(255,255,255,.78); }
.yol-izi li + li::before { content: ""; width: 5px; height: 5px; margin: 0 10px; border-radius: 50%; background: var(--ana-isik); }
.yol-izi a:hover { color: #fff; }
.yol-izi [aria-current] { color: #fff; }
.ic-h1 { max-width: 1040px; margin: 26px 0 0; color: #fff; font-size: clamp(36px, 4.2vw, 76px); line-height: 1.02; letter-spacing: -.035em; font-weight: 820; font-stretch: 108%; }
.ic-baslik { margin: 22px 0 0; font: 800 clamp(28px, 2.6vw, 44px)/1.05 var(--f-bas); font-stretch: 108%; letter-spacing: -.03em; }
.ic-giris { max-width: 680px; margin-top: 20px; font-size: clamp(17px, 1.1vw, 19.5px); line-height: 1.6; color: rgba(255,255,255,.86); }
.ic-cipler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ic-cipler li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); font: 650 14px/1 var(--f-govde); }
.ic-cipler .ik { width: 17px; height: 17px; color: var(--ana-isik); }
.ic-bas.kompakt { min-height: 0; }
.ic-bas.kompakt .ic-bas-ic { padding-top: 128px; padding-bottom: 40px; }
.dur .ic-bas-gorsel img, .anlik .ic-bas-gorsel img { animation: none; }
.ic-govde, .sayfa-govde { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.bolum-ic { position: relative; padding: clamp(56px, 6.5vw, 104px) 0; }
.bolum-ic.bolum-gri { background: var(--sis); }
.bos-durum { padding: 36px 24px; border-radius: 22px; border: 1.5px dashed var(--ana-cizgi); background: var(--sis); color: var(--soluk); text-align: center; }
.liste-not { margin-top: 26px; font-size: 13.5px; color: var(--soluk); }

/* zengin metin */
.icerik, .metin { max-width: 820px; font-size: 17.5px; line-height: 1.75; color: var(--metin); overflow-wrap: anywhere; }
.icerik > * + *, .metin > * + * { margin-top: 1.05em; }
.icerik h2, .metin h2 { font-size: clamp(26px, 2.3vw, 38px); line-height: 1.1; margin-top: 1.6em; }
.icerik h3, .metin h3 { font-size: 21px; line-height: 1.3; margin-top: 1.5em; }
.icerik h2:first-child, .metin h2:first-child { margin-top: 0; }
.icerik a, .metin a { color: var(--ana-yazi); text-decoration: underline; text-decoration-color: var(--ana-cizgi); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.icerik a:hover, .metin a:hover { text-decoration-color: var(--ana); }
.icerik ul, .metin ul { display: grid; gap: 10px; padding: 0; }
.icerik ul li, .metin ul li { position: relative; padding-inline-start: 26px; }
.icerik ul li::before, .metin ul li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .58em; width: 9px; height: 9px; border-radius: 3px; background: var(--ana); box-shadow: 0 0 0 3px var(--ana-tint2); }
.icerik ol, .metin ol { list-style: decimal; padding-inline-start: 1.4em; display: grid; gap: 8px; }
.icerik ol li::marker, .metin ol li::marker { font-weight: 800; color: var(--ana-yazi); }
.icerik blockquote, .metin blockquote { margin: 1.4em 0; padding: 20px 24px; border-inline-start: 4px solid var(--ana); background: var(--sis); border-radius: 0 16px 16px 0; font-size: 18px; color: var(--murekkep); }
.icerik img, .metin img { height: auto; border-radius: 18px; }
.icerik figure, .metin figure { margin: 1.6em 0; }
.icerik figcaption, .metin figcaption { margin-top: 8px; font-size: 14px; color: var(--soluk); }
.icerik table, .metin table { width: 100%; border-collapse: collapse; font-size: 15.5px; display: block; overflow-x: auto; }
.icerik th, .icerik td, .metin th, .metin td { padding: 11px 14px; border-bottom: 1px solid var(--cizgi); text-align: start; }
.icerik th, .metin th { background: var(--sis); font-weight: 800; color: var(--murekkep); }
.icerik strong, .metin strong { color: var(--murekkep); }
.icerik > p:first-child:not(:only-child) { font-size: 20px; line-height: 1.6; color: var(--murekkep); }
.zaman { display: grid; gap: 0; margin: 1.6em 0; }
.zaman li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; padding: 18px 0 !important; border-top: 1px solid var(--cizgi); }
.zaman li::before { display: none; }
.zaman b { font: 800 26px/1.1 var(--f-bas); letter-spacing: -.02em; color: var(--ana-yazi); }
.zaman h3 { margin: 0 0 4px; font-size: 18px; }
.deger-izgara { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px !important; margin: 1.6em 0; }
.deger-izgara li { padding: 22px !important; border-radius: 22px; background: var(--sis); border: 1px solid var(--cizgi); }
.deger-izgara li::before { display: none; }
.deger-izgara h3 { margin: 12px 0 6px; font-size: 18px; }
.ikon-kutu { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(155deg, var(--ana-parlak), var(--ana) 50%, var(--ana-derin)); color: var(--ana-ust); }
.ikon-kutu .ik { fill: none; stroke: currentColor; stroke-width: 1.8; }
.icerik-gorsel { border-radius: 22px; overflow: hidden; }
.sonraki { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--cizgi); }
.sonraki-bag { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 4px 18px; padding: 16px 16px 16px 22px; border-radius: 18px; background: var(--sis); text-decoration: none !important; }
.sonraki-bag small { grid-column: 1; font: 700 12px/1 var(--f-govde); letter-spacing: .14em; text-transform: uppercase; color: var(--soluk); }
.sonraki-bag b { grid-column: 1; font: 780 20px/1.25 var(--f-bas); color: var(--murekkep); }
.sonraki-bag .ok { grid-column: 2; grid-row: 1 / 3; width: 44px; height: 44px; padding: 12px; border-radius: 14px; color: var(--ana-ust); background: linear-gradient(180deg, var(--ana-parlak), var(--ana)); }
.iletisim-giris { margin-bottom: 36px; }
.sss-baslik { font-size: clamp(28px, 2.8vw, 44px); margin-bottom: 26px; }

/* liste sayfaları: başlık satırı */
.liste-bolum + .liste-bolum { margin-top: clamp(48px, 5vw, 72px); }
.liste-bas { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 24px; }
.liste-bas h2 { font-size: clamp(26px, 2.3vw, 38px); }
.liste-bas p { color: var(--soluk); font-size: 15px; }
.liste-bolum .mz-liste .mz-satir { padding-top: 20px; padding-bottom: 20px; }

/* ürün kartları */
.uk-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.uk > a { display: flex; flex-direction: column; height: 100%; border-radius: 24px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--cizgi); transition: transform .45s var(--yay), box-shadow .45s; }
.uk > a:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ana-cizgi), 0 30px 60px -38px rgba(14,23,38,.45); }
.uk-gorsel { position: relative; display: grid; place-items: end start; aspect-ratio: 1; overflow: hidden; }
.uk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--yay); }
.uk > a:hover .uk-gorsel img { transform: scale(1.06); }
.uk-bos-ad { position: relative; margin: 14px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #fff; font: 700 13.5px/1.2 var(--f-govde);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.uk-govde { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 16px; flex: 1; }
.uk-govde h3 { font-size: 19px; line-height: 1.22; letter-spacing: -.015em; }
.uk .birim { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.3 var(--f-govde); color: var(--murekkep); }
.uk .birim .ik { width: 16px; height: 16px; color: var(--ana-yazi); }
.uk-ozet { font-size: 14.5px; line-height: 1.5; color: var(--soluk); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uk-alt { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 22px; padding: 14px 0 18px; border-top: 1px solid var(--cizgi); font: 700 14.5px/1 var(--f-govde); color: var(--ana-yazi); }
.uk > a:hover .uk-alt .ok { transform: translateX(3px); }

/* ürün sayfası (EMA düzeni; ortak parçalar) */
.op-urun { padding-top: clamp(36px, 4vw, 60px); padding-bottom: clamp(56px, 6vw, 96px); }
.op-galeri-ana { border-radius: 26px; }
.ak-galeri-bos { position: relative; isolation: isolate; display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: var(--golge-2); }
.ak-galeri-plaka { position: absolute; left: 22px; right: 22px; bottom: 22px; display: grid; gap: 6px; padding: 20px 24px; border-radius: 18px; color: #fff;
  background: color-mix(in oklab, var(--perde) 52%, transparent); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.ak-galeri-plaka small { font: 700 12px/1.25 var(--f-govde); letter-spacing: .14em; text-transform: uppercase; color: var(--ana-sis); }
.ak-galeri-plaka b { font: 800 clamp(24px, 2.4vw, 38px)/1.05 var(--f-bas); font-stretch: 108%; letter-spacing: -.03em; overflow-wrap: anywhere; }
.ak-galeri-plaka em { font-style: normal; font-size: 14.5px; color: rgba(255,255,255,.84); }
.op-rozet { border-radius: 99px; background: var(--ana-tint2); color: var(--ana-yazi); font-weight: 700; }
.op-ozet-baslik { font-family: var(--f-bas); font-size: clamp(30px, 3vw, 48px); line-height: 1.04; letter-spacing: -.03em; font-stretch: 108%; text-wrap: balance; }
.op-dugme { border-radius: 14px; font-weight: 700; }
.op-dugme--ana { background: linear-gradient(180deg, var(--ana-parlak), var(--ana)); border-color: transparent; color: var(--ana-ust);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px -10px color-mix(in oklab, var(--ana) 75%, transparent); }
.op-dugme--ana:hover { background: var(--ana-derin); }
.op-bolum-baslik { font-family: var(--f-bas); font-weight: 800; letter-spacing: -.02em; font-stretch: 106%; }
.op-tablo th { background: var(--sis); }
.op-kart { border-radius: 22px; }
.op-benzer .uk-izgara { margin-top: 6px; }

/* projeler listesi: sekme dili + kartlar */
.proje-suzgec { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 34px; }
.sekme-bag a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; font: 700 15px/1 var(--f-govde); color: var(--metin); transition: background .3s, color .3s; }
.sekme-bag a span { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; background: var(--sis); font-size: 12.5px; color: var(--soluk); }
.sekme-bag a:hover { color: var(--murekkep); }
.sekme-bag a[aria-current] { background: linear-gradient(180deg, var(--ana-parlak), var(--ana)); color: var(--ana-ust); box-shadow: 0 8px 18px -8px color-mix(in oklab, var(--ana) 70%, transparent); }
.sekme-bag a[aria-current] span { background: color-mix(in oklab, var(--ana-ust) 20%, transparent); color: var(--ana-ust); }
.tur-cipler { display: flex; flex-wrap: wrap; gap: 8px; }
.tur-cipler a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi); font: 650 14px/1 var(--f-govde); color: var(--metin); }
.tur-cipler a span { color: var(--soluk); }
.tur-cipler a:hover { box-shadow: 0 0 0 1px var(--ana-cizgi); color: var(--ana-yazi); }
.tur-cipler a[aria-current] { background: var(--ana-tint); box-shadow: 0 0 0 1.5px var(--ana); color: var(--ana-yazi); }
.pk-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 30px); }
.pk { display: flex; flex-direction: column; border-radius: 26px; background: #fff; overflow: hidden; box-shadow: 0 0 0 1px var(--cizgi); transition: transform .45s var(--yay), box-shadow .45s; }
.pk:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ana-cizgi), 0 30px 60px -38px rgba(14,23,38,.45); }
.pk-gorsel { position: relative; display: block; aspect-ratio: 16 / 10.5; overflow: hidden; }
.pk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--yay); }
.pk:hover .pk-gorsel img { transform: scale(1.05); }
.pk-metin { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; flex: 1; }
.pk-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pk-tur { font: 650 13px/1 var(--f-govde); color: var(--soluk); }
.pk h2 a:hover { color: var(--ana-yazi); }
.pk-ozet { font-size: 15.5px; line-height: 1.6; }
.pk-olgu { display: grid; margin-top: auto; border-top: 1px solid var(--cizgi); }
.pk-olgu div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cizgi); font-size: 14.5px; }
.pk-olgu dt { color: var(--soluk); }
.pk-olgu dd { color: var(--murekkep); font-weight: 700; text-align: end; }
.pk-guncel { font-size: 13px; color: var(--soluk); }

/* proje ayrıntısı: büyük görsel + cam künye */
.pd-sahne { position: relative; border-radius: 30px; overflow: hidden; box-shadow: 0 40px 80px -48px rgba(14,23,38,.45), 0 0 0 1px var(--cizgi); }
.pd-gorsel { position: relative; aspect-ratio: 16 / 9; }
.pd-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-not { position: absolute; top: 18px; right: 18px; z-index: 2; padding: 7px 11px; border-radius: 10px; background: rgba(10,20,40,.45); color: rgba(255,255,255,.85); font: 600 12.5px/1 var(--f-govde); }
.pd-kunye { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: grid; gap: 14px; padding: 18px 22px; border-radius: 20px; color: #fff;
  background: color-mix(in oklab, var(--perde) 62%, transparent); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%); }
.pd-kunye .durum.devam { background: color-mix(in oklab, var(--ana) 78%, transparent); color: var(--ana-ust); }
.pd-kunye .durum.bitti { background: rgba(255,255,255,.92); }
.pd-kunye dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 22px; }
.pd-kunye dt { font-size: 13px; color: rgba(255,255,255,.72); }
.pd-kunye dd { font: 750 16.5px/1.3 var(--f-bas); font-stretch: 104%; }
.pd-rozetler { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 22px 0 0; }
.pd-ilerleme { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; font: 650 14.5px/1.3 var(--f-govde); color: var(--murekkep); }
.pd-ilerleme .cubuk { position: relative; flex: 1 1 240px; height: 10px; border-radius: 99px; background: var(--sis); box-shadow: inset 0 0 0 1px var(--cizgi); overflow: hidden; }
.pd-ilerleme .cubuk > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--ana-parlak), var(--ana)); }
.ia-rozet { border-radius: 99px; background: var(--ana-tint2); color: var(--ana-yazi); }
.alt-bolum h2, .ia-kunye h2 { font-family: var(--f-bas); font-stretch: 106%; letter-spacing: -.02em; }

/* bayiliklerimiz sayfası */
.bayi-pano.tam .bayi-bas { max-width: 820px; }
.bayi-pano.tam .kisaca { margin-top: 20px; }

/* 404 / durum */
.durum-sahne { min-height: max(620px, 86svh); }
.durum-no { font: 820 clamp(96px, 14vw, 220px)/.85 var(--f-bas); font-stretch: 112%; letter-spacing: -.05em; color: transparent;
  background: linear-gradient(100deg, var(--ana-isik), var(--ana-sis) 50%, var(--ana-isik)); -webkit-background-clip: text; background-clip: text; }
.durum-sahne .acilis-dugmeler { margin-top: 32px; }

/* çekirdek görünümlerin giysisi (SSS, belgeler, kariyer, hizmetler, referanslar, e-katalog, formlar) */
.izgara { gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.kart { overflow: hidden; border: 0; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi); transition: box-shadow .45s, transform .45s var(--yay); }
.kart:has(.kart-bag):hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ana-cizgi), 0 30px 60px -38px rgba(14,23,38,.45); }
.kart-bag { color: inherit; text-decoration: none; }
.kart-gorsel { position: relative; background: var(--sis); }
.kart-gorsel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.kart-govde { gap: 6px; padding: 20px 22px 22px; }
.kart-baslik { font: 780 19px/1.25 var(--f-bas); font-stretch: 104%; letter-spacing: -.015em; color: var(--murekkep); }
.kart:has(.kart-bag):hover .kart-baslik { color: var(--ana-yazi); }
.kart-ozet, .kart-ust, .kart-kod { font-size: 15px; color: var(--soluk); }
.kart-ust { font: 700 12px/1.3 var(--f-govde); letter-spacing: .12em; text-transform: uppercase; color: var(--ana-yazi); }
.bas-harf { font: 800 40px/1 var(--f-bas); color: var(--ana-yazi); }
.cip, .cipler a { padding: 8px 14px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi); font: 650 14px/1.2 var(--f-govde); color: var(--metin); }
a.cip:hover, .cip[aria-current], .cip.secili, .cipler a[aria-current] { box-shadow: 0 0 0 1.5px var(--ana); background: var(--ana-tint); color: var(--ana-yazi); }
.akordeon { max-inline-size: 900px; gap: 0; border-top: 1px solid var(--cizgi); }
.akordeon details { border: 0; border-bottom: 1px solid var(--cizgi); border-radius: 0; background: none; }
.akordeon summary { position: relative; padding: 22px 0; padding-inline-end: 60px; list-style: none; cursor: pointer; font: 700 18.5px/1.35 var(--f-govde); color: var(--murekkep); }
.akordeon summary::-webkit-details-marker { display: none; }
.akordeon summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; margin-top: -19px; border-radius: 12px;
  background: var(--sis); color: var(--ana-yazi); font: 500 22px/1 var(--f-govde); transition: transform .3s, background-color .25s, color .25s; }
.akordeon details[open] summary::after { transform: rotate(45deg); background: var(--ana); color: var(--ana-ust); }
.akordeon summary:hover { color: var(--ana-yazi); }
.akordeon details > :not(summary) { margin: 0 0 22px; color: var(--metin); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, var(--ana-parlak), var(--ana)); color: var(--ana-ust); font: 700 15.5px/1.2 var(--f-govde); text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px -10px color-mix(in oklab, var(--ana) 75%, transparent); }
.btn:hover { background: var(--ana-derin); color: var(--ana-ust); filter: none; }
.btn-ikincil { background: #fff; color: var(--murekkep); box-shadow: 0 0 0 1px var(--cizgi); }
.btn-ikincil:hover { background: var(--ana-tint); color: var(--ana-yazi); }
.form { gap: 16px; }
.form-izgara { gap: 14px 16px; }
.alan label, .secenek-grubu legend { font: 700 14.5px/1.3 var(--f-govde); color: var(--murekkep); }
.alan input, .alan select, .alan textarea { min-height: 50px; padding: 12px 16px; border: 1px solid var(--cizgi); border-radius: 14px; background: #fff; font: 400 16px/1.4 var(--f-govde); color: var(--murekkep); }
.alan textarea { min-height: 130px; }
.alan input:focus, .alan select:focus, .alan textarea:focus { outline: none; border-color: var(--ana); box-shadow: 0 0 0 4px var(--ana-tint2); }
.form .btn, .form button[type=submit] { min-height: 54px; }
.form-not { font-size: 13.5px; color: var(--soluk); }
.sayfalama { margin-top: 36px; }
.sayfalama a, .sayfalama span { border-radius: 12px; font-weight: 700; }
.sayfalama span[aria-current] { background: var(--ana); border-color: var(--ana); color: var(--ana-ust); }
.yan-kutu { border: 0; border-radius: 22px; background: var(--sis); }
.yan-baslik { font-family: var(--f-bas); font-weight: 800; }
.yan-panel .yan-kutu { padding: 22px; }
.yan-panel .yan-kutu ul { display: grid; gap: 8px; }
.yan-panel .yan-kutu a:not(.btn) { color: var(--murekkep); font-weight: 600; }
.yan-panel .yan-kutu a:not(.btn):hover { color: var(--ana-yazi); }
.cta-kutu { background: linear-gradient(150deg, var(--ana-parlak), var(--ana) 45%, var(--ana-derin)); color: color-mix(in oklab, var(--ana-ust) 86%, transparent); }
.cta-kutu .yan-baslik { color: var(--ana-ust); }
.cta-kutu .btn { background: #fff; color: var(--ana-yazi); box-shadow: none; }
.yan-yerlesim { gap: clamp(28px, 4vw, 56px); }
.geri-bag { margin-top: 40px; }
.bilgi-listesi dt { color: var(--soluk); }
.bilgi-listesi dd { font-weight: 700; color: var(--murekkep); }
.kunye { border: 0; border-radius: 20px; background: var(--sis); }
.belge-kart { border-radius: 24px; }
.belge-kart .btn { min-height: 44px; }
.ia-suzgec a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi); font: 650 14px/1 var(--f-govde); color: var(--metin); text-decoration: none; }
.ia-suzgec a:hover { box-shadow: 0 0 0 1px var(--ana); color: var(--ana-yazi); }
.ia-suzgec a[aria-current] { background: var(--ana); box-shadow: none; color: var(--ana-ust); }
.kv-izin { border-color: var(--cizgi); border-radius: 16px; background: var(--sis); }
.kv-kutu input, .alan input[type=checkbox], .alan input[type=radio] { accent-color: var(--ana); min-height: 0; }
.form-sonuc-ok { border-radius: 14px; }
.sayfa-basi, .kirinti { color: var(--soluk); }

/* ortak parçalar (op-*): bölüm yan menüsü + iletişim */
.op-yan-nav { position: relative; overflow: hidden; border: 0; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px var(--cizgi), var(--golge-1); }
.op-yan-baslik, .op-yan h2.op-yan-baslik { margin: 6px 10px 10px; font: 700 12.5px/1.3 var(--f-govde); letter-spacing: .14em; text-transform: uppercase; color: var(--ana-yazi); }
.op-yan-liste a { border-inline-start: 0; border-radius: 12px; padding: 11px 12px; font: 650 15px/1.3 var(--f-govde); color: var(--murekkep); }
.op-yan-liste a:hover { background: var(--sis); color: var(--ana-yazi); }
.op-yan-liste a[aria-current] { background: var(--ana-tint); color: var(--ana-yazi); box-shadow: inset 3px 0 0 var(--ana); }
.op-yan-sayi { border-radius: 8px; background: var(--sis); font-weight: 700; color: var(--soluk); }
.op-yan-kutu { border-radius: 22px; }
.op-yan .op-yan-kutu h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.op-yan-kutu--teklif { position: relative; overflow: hidden; isolation: isolate; border: 0; color: color-mix(in oklab, var(--ana-ust) 86%, transparent);
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--ana-isik) 50%, transparent) 0, transparent 55%), linear-gradient(155deg, var(--ana-parlak), var(--ana) 50%, var(--ana-derin)); }
.op-yan-kutu--teklif h2, .op-yan-kutu--teklif .op-yan-tel, .op-yan-kutu--teklif .op-yan-tel svg { color: var(--ana-ust); }
.op-yan-kutu--teklif p { color: color-mix(in oklab, var(--ana-ust) 82%, transparent); }
.op-yan-kutu--teklif .op-dugme--ana { background: #fff; color: var(--ana-yazi); box-shadow: none; }
.op-kanal { border-radius: 22px; box-shadow: 0 0 0 1px var(--cizgi); }
.op-lokasyon { border-radius: 22px; }
.op-iletisim-form { border-radius: 26px; box-shadow: 0 0 0 1px var(--cizgi), var(--golge-2); }

/* =========================================================================
   DUYARLI (ekler)
   ========================================================================= */
@media (max-width: 1279px) {
  .pk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .konumlar.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ic-kapanis .cagri { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
  .menu-dil { display: flex; justify-content: center; margin-top: 6px; color: var(--murekkep); }
  .ust-dil { display: none !important; }
  .menu li > button { width: 100%; text-align: start; font: 750 22px/1.2 var(--f-bas); font-stretch: 106%; color: inherit; }
  .menu > ul > li > .aktif::after { display: none; }
  .acilir-pano a small { margin-inline-start: auto; }
  .acilir-pano .ayrik { border-top: 0; margin-top: 0; }
  .menu-acik .ust { color: var(--murekkep); }
  .menu-acik .ust .logo-seffaf { display: none; }
  .menu-acik .ust .logo-dolu { display: block; }
  .dil-acilir.menu-dil > summary { border-color: var(--cizgi); }
}
@media (max-width: 899px) {
  .pk-izgara { grid-template-columns: 1fr; }
  .kucukler.n1, .kucukler.n2 { grid-template-columns: 1fr; }
  .haber-izgara.n1, .haber-izgara.n2 { grid-template-columns: 1fr; }
  .konumlar.n1, .konumlar.n2, .konumlar.n4 { grid-template-columns: 1fr; }
  .bayi-pano .ornek-not { position: static; max-width: none; text-align: left; margin-top: 16px; }
  .magaza-bilgi.n3 { grid-template-columns: 1fr 1fr; }
  .ic-bas { min-height: 420px; }
  .ic-bas-ic { padding-top: 116px; }
  .pd-kunye { position: static; margin: -2px 0 0; border-radius: 0; background: var(--perde); }
  .pd-sahne { border-radius: 24px; }
  .durum-sahne { min-height: 560px; }
}
@media (max-width: 560px) {
  .yol-izi { font-size: 13px; padding: 8px 13px; }
  .ic-h1 { font-size: clamp(32px, 9vw, 44px); }
  .uk-izgara { grid-template-columns: 1fr; }
  .vk-mavi, .vk-beyaz, .vk-cam { padding: 16px; }
}

/* =========================================================================
   SAĞDAN SOLA (ar, fa) — yön mantıksal özelliklerle; eğik duvar ve oklar aynalanır
   ========================================================================= */
[dir="rtl"] .ok, [dir="rtl"] .sonraki-bag .ok { transform: scaleX(-1); }
[dir="rtl"] .dugme:hover .ok, [dir="rtl"] .bag:hover .ok, [dir="rtl"] .mz-satir:hover .ok, [dir="rtl"] .mz-satir.etkin .ok { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .menu { margin-left: 0; margin-right: auto; }
[dir="rtl"] .acilir-pano { left: auto; right: 0; }
[dir="rtl"] .vitrin { left: 0; right: var(--duvar-x, max(50%, 760px)); perspective-origin: 100% 42%;
  -webkit-mask-image: linear-gradient(270deg, transparent 0, rgba(0,0,0,.5) 6%, #000 15%), linear-gradient(180deg, transparent 0, transparent 110px, rgba(0,0,0,.28) 205px, #000 300px, #000 calc(100% - 210px), transparent calc(100% - 76px));
          mask-image: linear-gradient(270deg, transparent 0, rgba(0,0,0,.5) 6%, #000 15%), linear-gradient(180deg, transparent 0, transparent 110px, rgba(0,0,0,.28) 205px, #000 300px, #000 calc(100% - 210px), transparent calc(100% - 76px)); }
[dir="rtl"] .duvar { left: auto; right: 4%; transform-origin: 100% 50%; transform: translate3d(0, calc(var(--kay, 0) * -.22px), 0) rotateY(calc(var(--ry, -17deg) * -1)) rotateX(var(--rx, 8deg)) rotateZ(calc(var(--rz, -5deg) * -1)); }
[dir="rtl"] .acilis-perde { transform: scaleX(-1); }
[dir="rtl"] .ic-bas-perde { transform: scaleX(-1); }
[dir="rtl"] .mz-satir { padding: 24px 0 24px 8px; }
[dir="rtl"] .mz-satir.etkin, [dir="rtl"] .mz-satir:hover { padding-left: 8px; padding-right: 14px; }
[dir="rtl"] .mz-satir::before { left: auto; right: 0; }
[dir="rtl"] .kunye-liste dd, [dir="rtl"] .pk-olgu dd { text-align: left; }
[dir="rtl"] .mz-baslik { left: auto; right: 16px; }
[dir="rtl"] .serit-kart figcaption { left: auto; right: 14px; }
[dir="rtl"] .serit-dugme { right: auto; left: var(--kenar); }
[dir="rtl"] .bayi-pano .ornek-not { right: auto; left: clamp(36px, 4.4vw, 72px); text-align: left; }
[dir="rtl"] .icerik blockquote, [dir="rtl"] .metin blockquote { border-radius: 16px 0 0 16px; }
[dir="rtl"] .op-yan-liste a[aria-current] { box-shadow: inset -3px 0 0 var(--ana); }
[dir="rtl"] .harita-isaret { margin: -9px -9px 0 0; }
@media (max-width: 899px) {
  [dir="rtl"] .vitrin { right: auto; }
  [dir="rtl"] .duvar { transform: none; }
  .js[dir="rtl"] .vitrin.hazir .vs-a .vs-ray { animation-name: akis-yatay-rtl; }
  @keyframes akis-yatay-rtl { from { transform: translateX(0); } to { transform: translateX(calc(50% + 6px)); } }
}
@media (min-width: 1920px) { [dir="rtl"] .serit-dugme { left: calc((100% - 1640px) / 2); right: auto; } }

/* proje ayrıntısı: çekirdeğin künye / yapı bilgisi listeleri ana sayfanın künye listesi diliyle */
.ia-kunye-kap { margin-top: 40px; gap: 28px clamp(28px, 4vw, 56px); }
.ia-kunye h2, .alt-bolum > h2 { margin: 0 0 14px; font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; }
.ia-kunye .bilgi-listesi { display: grid; gap: 0; border-top: 1px solid var(--cizgi); }
.ia-kunye .bilgi-listesi > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--cizgi); }
.ia-kunye .bilgi-listesi dt { font-size: 15px; }
.ia-kunye .bilgi-listesi dd { margin: 0; font: 700 15px/1.4 var(--f-govde); text-align: end; }
.alt-bolum { margin-top: clamp(40px, 4.5vw, 64px); }
.ia-maddeler li::marker { color: var(--ana); }
.uk-bos-ad { font: 800 clamp(20px, 1.6vw, 26px)/1 var(--f-bas); font-stretch: 108%; letter-spacing: -.02em; padding: 10px 14px; }

/* sıkışık menü (tema.js): 1100 px üstünde menü çubuğa sığmazsa (uzun dil — ör. RU) html.cekmeceli → telefonun tam ekran menüsü.
   Aşağıdaki kurallar yukarıdaki iki "@media (max-width: 1100px)" bloğunun aynısıdır (önekli kopya). */
.cekmeceli .menu { display: none; position: fixed; inset: 0; margin: 0; padding: 104px var(--kenar) 32px; background: #fff; color: var(--murekkep); overflow-y: auto; z-index: -1; }
.cekmeceli .menu.acik { display: flex; flex-direction: column; }
.cekmeceli .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
.cekmeceli .menu li > :is(a, button) { height: auto; padding: 18px 4px; border-radius: 0; border-bottom: 1px solid var(--cizgi); font: 750 22px/1.2 var(--f-bas); font-stretch: 106%; }
.cekmeceli .menu > ul > li > a[aria-current="page"]::after { display: none; }
.cekmeceli .menu > ul > li > a[aria-current="page"] { color: var(--ana-yazi); }
.cekmeceli .acilir-pano { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 4px 0 10px; background: none; min-width: 0; }
.cekmeceli .acilir-pano.genis { grid-template-columns: 1fr 1fr; min-width: 0; }
.cekmeceli .acilir-pano a { padding: 9px 4px; font-size: 15.5px; color: var(--metin); }
.cekmeceli .ok-a { display: none; }
.cekmeceli .menu-mobil-alt { display: grid; gap: 12px; margin-top: 28px; }
.cekmeceli .menu-mobil-alt .dugme { height: 54px; }
.cekmeceli .menu-tel { text-align: center; font: 750 17px/1 var(--f-govde); padding: 12px; color: var(--ana-yazi); }
.cekmeceli .menu-ac { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 46px; height: 46px; border-radius: 13px; border: 1px solid rgba(255,255,255,.3); }
.cekmeceli .menu-ac span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .35s var(--yay); }
.cekmeceli .ust.dolu .menu-ac, .cekmeceli .dolu-zorla .menu-ac, .cekmeceli.menu-acik .menu-ac { border-color: var(--cizgi); }
.cekmeceli.menu-acik .ust { color: var(--murekkep); background: #fff; }
.cekmeceli.menu-acik .ust::before { opacity: 0; }
.cekmeceli.menu-acik .menu-ac span:first-child { transform: translateY(4px) rotate(45deg); }
.cekmeceli.menu-acik .menu-ac span:last-child { transform: translateY(-4px) rotate(-45deg); }
.cekmeceli.menu-acik { overflow: hidden; }
.cekmeceli .ust-cagri { display: none; }
.cekmeceli .ust-sag { margin-left: auto; }
.cekmeceli .dil { display: none; }
.cekmeceli.menu-acik .dil { display: flex; }
.cekmeceli .menu-dil { display: flex; justify-content: center; margin-top: 6px; color: var(--murekkep); }
.cekmeceli .ust-dil { display: none !important; }
.cekmeceli .menu li > button { width: 100%; text-align: start; font: 750 22px/1.2 var(--f-bas); font-stretch: 106%; color: inherit; }
.cekmeceli .menu > ul > li > .aktif::after { display: none; }
.cekmeceli .acilir-pano a small { margin-inline-start: auto; }
.cekmeceli .acilir-pano .ayrik { border-top: 0; margin-top: 0; }
.cekmeceli.menu-acik .ust { color: var(--murekkep); }
.cekmeceli.menu-acik .ust .logo-seffaf { display: none; }
.cekmeceli.menu-acik .ust .logo-dolu { display: block; }
.cekmeceli .dil-acilir.menu-dil > summary { border-color: var(--cizgi); }

/* açılış başlığı: vurgu satırı uzun dilde (RU, DE) duvara taşmasın — metin sütunu duvarın başladığı yerde biter, satır gerekirse kırılır */
.h1 .satir.vurgu { white-space: normal; }
.acilis:not(.vitrinsiz) .acilis-metin { max-width: min(880px, calc(max(50vw, 760px) - var(--kenar) - 24px)); }
@media (max-width: 1279px) { .acilis:not(.vitrinsiz) .acilis-metin { max-width: min(880px, calc(58vw - var(--kenar) - 24px)); } }
@media (max-width: 899px) { .acilis:not(.vitrinsiz) .acilis-metin { max-width: none; } }
@media (min-width: 1920px) { .acilis:not(.vitrinsiz) .acilis-metin { max-width: min(880px, calc(max(50vw, 760px) - 164px)); } }
/* sıkıştırılmış menü (tema.js — menü çubuğa ancak böyle sığıyorsa): logo alt satırı gizli, menü aralıkları dar */
.sikisik .logo-yazi small { display: none; }
.sikisik .ust-ic { gap: 16px; }
.sikisik .ust-sag { gap: 12px; }
.sikisik .menu li > :is(a, button) { padding: 0 8px; font-size: 15px; }
/* tam ekran menü açıkken başlık kapsayıcı olmasın: dolu çubuğun backdrop-filter'ı sabit menüyü çubuğun kutusuna hapseder */
.menu-acik .ust { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* sağdan solda saat aralıkları ve panelden gelen soldan sağa metinler ters dönmesin ("08.00–14.00" → "14.00–08.00" olmasın) */
[dir="rtl"] :is(.konum-saat, .alt-saat, .magaza-bilgi dd, .cagri-sag b, .kunye-liste dd, .pk-olgu dd, .olgu-not, .vk-not) { unicode-bidi: plaintext; }

/* ---------- Bağımsız denetim düzeltmeleri (2026-10-02) ---------- */
/* Kurumsal yalnız metinse (sayaç dayanaksız / kapalı, belge yok — yeni müşteri sitesinin ilk hâli) sağ yarı boş kalmasın: başlık solda,
   Kısaca + paragraf + bağlantılar sağda (aynı ızgara oranı) */
@media (min-width: 900px) {
  .kurumsal-ic.yalin .kurumsal-sol { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 6vw, 120px); align-items: start; }
  .kurumsal-ic.yalin .kurumsal-sol > .etiket { grid-column: 1 / -1; grid-row: 1; }
  .kurumsal-ic.yalin .kurumsal-sol > .h2 { grid-column: 1; grid-row: 2 / span 3; }
  .kurumsal-ic.yalin .kurumsal-sol > .kisaca { grid-column: 2; grid-row: 2; margin-top: 4px; }
  .kurumsal-ic.yalin .kurumsal-sol > .kurumsal-ek { grid-column: 2; grid-row: 3; }
  .kurumsal-ic.yalin .kurumsal-sol > .kurumsal-baglar { grid-column: 2; grid-row: 4; }
}
/* akan vitrin kartının rakam satırı sığmıyorsa (uzun dil: "Товаров: 23", "23 Produkte") kesilmesin — tema.js ölçüp .uzun verir:
   iki satıra kadar kırılır, yazı küçülür (sayı her zaman görünür) */
.vk-sayi.uzun { white-space: normal; text-wrap: balance; font-size: clamp(20px, 1.5vw, 30px); line-height: 1.08;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; }
/* platformun demo rozeti ("Örnek site", sol / sağdan solda sağ alt köşe) açılışın alt satırını (görseller temsilidir + Akışı durdur) örtmesin */
@media (min-width: 901px) { html:has(tk-ornek-rozet:not([hidden])) .acilis-alt { bottom: 64px; } }
/* odak halkası: açık ana renkte de (sarı, açık turuncu) beyaz zeminde seçilsin — beyaz üstü yazı tonu (4,5:1); koyu zeminlerde beyaz */
:focus-visible { outline-color: var(--ana-yazi); }
.acilis :focus-visible, .ust:not(.dolu) :focus-visible, .cagri :focus-visible, .magaza :focus-visible, .alt :focus-visible, .vk :focus-visible, .vk:focus-visible,
.sahne :focus-visible, .ic-bas :focus-visible { outline-color: #fff; }
/* proje ayrıntısı "Özellikler / İş kapsamı" maddeleri: ürün sayfasındaki madde dili (ana renk küçük kare) */
.ia-maddeler { list-style: none; padding-inline-start: 0; column-gap: 40px; }
.ia-maddeler li { position: relative; padding-inline-start: 22px; margin: 0 0 12px; break-inside: avoid; line-height: 1.6; }
.ia-maddeler li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--ana); }
/* beyaz açılır panolar (menü, dil listesi) ve tam ekran menü: şeffaf çubukta da odak halkası beyaz üstünde görünsün */
.dil-liste :focus-visible, .ust .dil-liste :focus-visible, .ust .acilir-pano :focus-visible, .menu-acik .ust :focus-visible { outline-color: var(--ana-yazi); }

/* ---------- 99 · Açılış hızı (mobil düzeltme 2026-10-04) ----------
   Açılışın ve iç sayfa başının giriş hareketi (bulanıklıktan yükselen etiket, başlık satırları, metin, düğmeler) en geç ~650 ms'de biter
   — eskisi kademeli gecikmeyle ~2,2 sn sürüyordu (telefonda 1 sn'de başlık bulanık, düğmeler yoktu). Aynı hareket, kısa süre (bir kez
   oynar). Akan vitrinin girişi de kısaldı; vurgu ışığı ve akış döngüleri süs olarak sürer. */
html.js .gir { animation-duration: .4s; animation-delay: calc(.02s + var(--g, 0) * .02s); }
html.js .h1 .vurgu.gir { animation-duration: .4s, 12s; animation-delay: .08s, 1.4s; }
html.js .vitrin { animation-duration: .8s; animation-delay: .15s; }

/* Telefon menüsünün tema görünümü; hareket ve odak ortak katmandadır. */
html.tk-menu-dar .tk-mobil-menu { --tk-menu-yazi: 19px; --tk-menu-kalinlik: 700; }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px){
  .sayfa-bas h1 { font-size: clamp(28px, 8vw, 32px); }
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 520px){
  .ust .ust-ic, .ust.dolu .ust-ic, .dolu-zorla .ust .ust-ic { height: 64px; }
  .acilis-metin .acilis-giris { line-height: 1.45; margin-top: 16px; }
  .acilis .acilis-dugmeler { margin-top: 16px; flex-wrap: nowrap; }
  .acilis .acilis-dugmeler a { flex: 1 1 0; min-width: 0; height: 48px; padding-inline: 8px; font-size: 15px; }
  .acilis .akis-dugme { min-height: 44px; }
  .acilis .vitrin { height: 96px; }
  .acilis .vs-ray { height: 96px; }
  .acilis .vk { height: 90px; }
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 520px){
  .ust-ic { box-sizing: border-box; width: 100%; gap: 10px; }
  .ust-sag { flex: none; gap: 8px; }
}

/* Telefon: açılış dışındaki gövde metni. */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px){
  .kisaca { font-size: 16.5px; }
}

/* Telefon panelinin geniş ekran yedeği. */
html:not(.tk-menu-dar) #t5-tm-menu { display: none; }

/* ---------- A8 · Açılış metni büyük ekranda dikey ortada (2026-10-30) ----------
   Metin grubu (çip + başlık + giriş + düğmeler) başlık çubuğunun altı (92 px) ile açılışın alt kenarı arasında ortalanır; 2560×1440'ta
   açılış ekranı doldurur (1240 px tavanı kalkar). "Akışı durdur" zaten sağ alt köşede ve içerik kenarına hizalı: yalnız alt uzaklığı
   ortak ölçüye (48-96 px) çekilir. Telefon ve tablet değişmez. */
@media (min-width: 1100px) and (min-height: 700px) {
  .acilis { max-height: none; }
  .acilis-metin { align-self: center; padding: 92px 0 0; }
  #acilis .acilis-alt { bottom: clamp(48px, 7vh, 96px); }
  /* kontrast: alttaki koyulaşma metinle birlikte yukarı alınır (giriş metni eski konumundaki perde gücünü korur) */
  .acilis-perde { background:
    radial-gradient(36% 62% at 76% 52%, color-mix(in oklab, var(--ana-derin) 66%, transparent) 0, transparent 80%),
    radial-gradient(30% 40% at 92% 16%, color-mix(in oklab, var(--ana) 30%, transparent) 0, transparent 75%),
    linear-gradient(90deg, color-mix(in oklab, var(--perde) 86%, transparent) 0%, color-mix(in oklab, var(--perde) 60%, transparent) 34%, color-mix(in oklab, var(--perde) 26%, transparent) 50%, color-mix(in oklab, var(--perde) 44%, transparent) 72%, color-mix(in oklab, var(--perde) 52%, transparent) 100%),
    linear-gradient(180deg, color-mix(in oklab, var(--perde) 40%, transparent) 0%, transparent 24%, transparent 40%, color-mix(in oklab, var(--perde) 72%, transparent) 100%); }
}

/* ---------- tg A1 · Proje ve haber listesi yan düzeni (2026-10-30) ----------
   Süzgeç (durumlar / türler) ve teklif kutusu sağdaki yan menüde (_BolumMenusu); yan düzende proje ve haber kartları iki sütun. 960 px
   ve altında ortak düzen tek sütundur (gezinme içeriğin üstünde, kutu altında) — temanın kendi kırılımları geçerli. */
@media (min-width: 961px) {
  .op-duzen--yan .pk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-duzen--yan .haber-izgara.liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* tg6b: B4 · Haber detayında makale ile yan menü arasındaki boş şerit (2026-10-31) ----------
   Kapak bandın yanında makalenin başında da basılır (BlogDetay; çekirdekteki gibi — .kapak-gorsel, hizmet sayfasıyla aynı görünüş). Yan
   düzende galeri satırı doldurur (auto-fit: 2 ya da 5 fotoğrafta sağda boş sütun kalmaz); tek fotoğraf geniş ekranda yarım genişlikte
   (telefonda tam genişlik — yarım genişlik orada boşluk bırakır). 75 karakterlik metin satırına dokunulmaz. */
.op-duzen--yan .tk-hg ul.tk-hg-izgara { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
@media (min-width: 641px) { .tk-hg-izgara > li:only-child { max-inline-size: calc(50% - 5px); } }

/* tg6b: B5 · Hizmet detayında bant ile içerik arası (2026-10-31) ----------
   Çekirdek görünümle basılan sayfaların (hizmet detayı) içerik kabı .kap'ın "padding: 0 kenar" kuralıyla banda yapışıyordu; proje, haber
   ve SSS sayfalarıyla aynı üst / alt boşluk (.sayfa-govde ölçüsü). */
main > .kap:is(.op-duzen, .yan-yerlesim):not(.ic-govde, .sayfa-govde) { padding-top: clamp(56px, 6vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }

/* tg6b: B6 · Bayiliklerimiz bölümünün üstü (2026-10-31) ----------
   Boşluksuz yalnız beyaz ürün gruplarının (.malzemeler) ardından (11. bölümdeki kural); sahne penceresinin ardından ürün gruplarıyla aynı
   açıklık. Öteki bölümlerin ardından ortak bölüm boşluğu (.bolum). */
.sahne + .bayilikler { padding-top: clamp(76px, 7.5vw, 128px); }