/* ==========================================================================
   BILESENLER
   Sira: kahraman, referans sayfa dili (bolum basi, isik cizgisi, pencere,
   gorseller, bolumler), kapaklar, blog, vaka, hizmet detay, iletisim
   satirlari, karsilastirma, surec, SSS, blog, makale, is izgarasi,
   vaka, hizmet detay, hakkimizda, iletisim formu, 404, kucuk parcalar.
   ========================================================================== */


/* ---------- Kahraman (ana sayfa) ---------- */
.kahraman {
  position: relative; isolation: isolate;
  min-height: max(640px, 100svh);
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden;
}
.kahraman h1 em { font-style: normal; color: var(--bordo); }
/* ---------- Sinema kahramani (siyah zemin, her iki modda) ----------
   Sol ustten inen isik huzmesi, ince genis baslik, bordo vurgu ve bordo
   cerceveli cagri. Sag tarafta at basi. */
.kahraman.zemin-siyah {
  background:
    radial-gradient(ellipse 70% 55% at -6% -12%, rgba(255, 238, 226, .13) 0%, rgba(255, 238, 226, .04) 42%, rgba(255, 238, 226, 0) 70%),
    radial-gradient(ellipse 50% 60% at 88% 72%, rgba(168, 50, 74, .10) 0%, rgba(168, 50, 74, 0) 70%),
    var(--siyah);
}
.kahraman.zemin-siyah h1 {
  font-weight: 200; font-stretch: 105%;
  font-size: clamp(2.75rem, 1.2rem + 4.4vw, 5.75rem);
  letter-spacing: -.035em; line-height: 1.04; max-width: 12ch;
}
.kahraman.zemin-siyah h1 em { color: var(--kizil-acik); }

/* ---------- Amblem kahramani (varsayilan) ----------
   Birebir referans: tasarim/referans/hero-referans-amblem.webp
   Olculer referanstan (2000x1125): baslik soldan %8,5, ustten %40;
   at basi sagda tam yukseklik, sol kenari %43. Isik huzmesi sol ustten
   ~18 derece iner, en parlak yeri sol kenarda (%16). */
.kahraman.kahraman--amblem { background: #000; min-height: max(620px, 100svh); }
.kahraman--amblem::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 0; top: 0; width: 45%; aspect-ratio: 900 / 445;
  /* Referansin sol ust kosesinden kesilen isik (tools/hero-amblem-temizle.php) */
  background: url(/assets/img/ui/hero-isik.webp) 0 0 / 100% 100% no-repeat;
}
.kahraman-at-basi {
  position: absolute; z-index: -1; pointer-events: none;
  right: 0; bottom: 0;
  height: min(100%, calc(60vw * 1125 / 1140)); aspect-ratio: 1140 / 1125;
}
/* At basi gorseli ::after'da arka plan: gece ve gunduz surumu ayri, yalniz
   gorunen mod iner (adresler home.php'de surumlu degisken, head.php
   onyukler). Kod ekraninin ustunde durur. */
.kahraman-at-basi::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: var(--at-gece) 0 100% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%);
}
/* At basinin icindeki kod ekrani: at basi gorselinin ARKASINDA durur;
   gorselde aciklik saydam (tools/hero-amblem-temizle.php), seritler
   ekranin ustunden gecer, kenarlarda seridin golgesine karisir.
   Olculer ekran kutusunun genisligine bagli (cqi). */
.at-ekran {
  position: absolute; z-index: 0; left: 22%; top: 36%; width: 46%; height: 56%;
  container-type: inline-size;
  perspective: 900px;
}
/* Aciklikta hafif bordo parilti (referanstaki panelin kirmizi isigi) */
.at-ekran::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 45% 30% at 38% 18%, rgba(168, 50, 74, .28), rgba(168, 50, 74, 0) 70%);
}
.at-ekran-ic {
  position: absolute; left: 12%; top: 5%; width: 86%; height: 90%;
  opacity: .88;
  transform: rotateY(-16deg) rotateZ(9deg); transform-origin: 0 0;
  background: linear-gradient(170deg, rgba(24, 16, 19, .92), rgba(10, 7, 8, .9) 60%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
  border-radius: 1.6cqi;
  font-family: ui-monospace, 'Cascadia Code', Consolas, 'SFMono-Regular', monospace;
  color: rgba(242, 237, 228, .55);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
/* Ust kenarda bordo isik (referanstaki panelin kirmizi basligi gibi) */
.at-ekran-ic::before {
  content: ""; position: absolute; left: 4%; right: 10%; top: 0; height: 1px;
  background: linear-gradient(90deg, rgba(194, 71, 95, 0), rgba(194, 71, 95, .9) 40%, rgba(194, 71, 95, 0));
  box-shadow: 0 0 2cqi .4cqi rgba(168, 50, 74, .45);
}
.at-ekran-ust { display: flex; gap: 4cqi; padding: 3.2cqi 5cqi 2.4cqi; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 2.6cqi; color: rgba(242, 237, 228, .38); }
.at-ekran-ust .aktif { color: rgba(242, 237, 228, .8); box-shadow: 0 2.4cqi 0 -2.1cqi var(--kizil-acik); }
.at-ekran-ic pre { margin: 0; padding: 3cqi 5cqi 2cqi 3cqi; font: inherit; font-size: 3cqi; line-height: 1.75; white-space: pre; }
.at-ekran-ic pre span { display: block; }
/* Kod yaziliyor gibi gelir (main.js): hazir olana kadar gizli, sirasi
   gelmeyen satir yerini tutar ama gorunmez */
.js .at-ekran-ic pre:not(.yazim) { visibility: hidden; }
.at-ekran-ic pre > span.bekle { visibility: hidden; }
.at-ekran-ic pre em { display: inline-block; width: 5cqi; margin-right: 3cqi; text-align: right; font-style: normal; color: rgba(242, 237, 228, .2); }
.at-ekran-ic i { font-style: normal; }
.at-ekran-ic .k { color: rgba(194, 71, 95, .95); }
.at-ekran-ic .s { color: rgba(203, 170, 120, .8); }
.at-ekran-ic .f { color: rgba(242, 237, 228, .85); }
.imlec { display: inline-block; width: .55em; height: 1.1em; margin-left: .3em; vertical-align: -.2em; background: var(--kizil-acik); box-shadow: 0 0 1.2cqi rgba(194, 71, 95, .8); }
@media (prefers-reduced-motion: no-preference) {
  .imlec { animation: imlec 1.1s steps(1) infinite; }
}
@keyframes imlec { 50% { opacity: 0; } }
.at-ekran-alt { display: flex; align-items: center; gap: 4cqi; padding: 1cqi 5cqi; font-size: 2.4cqi; color: rgba(242, 237, 228, .45); }
.at-ekran-alt span::before { content: ""; display: inline-block; width: 1.4cqi; height: 1.4cqi; margin-right: 1.4cqi; border-radius: 50%; background: var(--kizil-acik); box-shadow: 0 0 1cqi rgba(194, 71, 95, .9); }

.kahraman .kahraman-ic--sinema {
  grid-row: 1 / -1; grid-column: 1;
  align-self: start;
  padding: 41svh 0 8svh 8.5vw;
  position: relative;
}
.kahraman.kahraman--amblem h1 {
  font-family: var(--yazi-serif); font-weight: 300;
  font-variation-settings: 'opsz' 72;
  font-size: min(5.3vw, 9.4svh); line-height: .94; letter-spacing: -.012em;
  color: #D9D9D9; max-width: none;
}
.kahraman.kahraman--amblem h1 span, .kahraman.kahraman--amblem h1 em { display: block; }
.kahraman.kahraman--amblem h1 em { font-style: normal; color: var(--kizil); }
/* Cerceveli, kose yuvarlaksiz dugme */
.dugme-cerceve {
  height: 56px; padding: 0 30px; gap: 30px; border-radius: 0;
  font-size: 18px; font-weight: 400; letter-spacing: 0;
  color: #EDEDED; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--kizil);
}
.dugme-cerceve .simge { width: 16px; height: 16px; }
.dugme-cerceve:hover { background: var(--kizil); color: #fff; }
.kahraman--amblem .dugme-cerceve { margin-top: 5.6svh; }
/* ---------- Gunduz: krem kagit (tasarim/referans/hero-referans-gunduz.png) ----------
   Ayni at, ayni yerlesim ve ayni kod ekrani; zemin kagit ve pencere isigi
   (hero-zemin-gunduz.webp, referanstan), yazi koyu, ekran acik. */
html:not([data-mod="gece"]) .kahraman.kahraman--amblem {
  background: #EDE4DA var(--zemin-gunduz, none) 0 0 / cover no-repeat;
  color: var(--metin);
  --z-zemin: #EFE6DD; --z-metin: var(--metin); --z-soluk: var(--metin-soluk); --z-cizgi: var(--cizgi); --z-vurgu: var(--bordo);
}
html:not([data-mod="gece"]) .kahraman--amblem::before { display: none; }
/* Gunduz at basi: kagit saydam, yalniz seritler ve golgeleri (tools/
   hero-amblem-temizle.php); zemine her ekran oraninda dikissiz oturur */
html:not([data-mod="gece"]) .kahraman-at-basi::after { background-image: var(--at-gunduz); }
@supports (background-image: image-set(url("a.avif") type("image/avif"))) {
  html:not([data-mod="gece"]) .kahraman-at-basi::after { background-image: image-set(var(--at-gunduz-avif, var(--at-gunduz)) type("image/avif")); }
}
html:not([data-mod="gece"]) .kahraman.kahraman--amblem h1 { color: #343231; }
html:not([data-mod="gece"]) .kahraman--amblem .dugme-cerceve { color: #16120F; }
html:not([data-mod="gece"]) .kahraman--amblem .dugme-cerceve:hover { color: #fff; }
/* Kagit saydam oldugu icin ekran yalniz aciklikta gorunur: maske at basi
   kutusunun tamami (ekran kutusu %46 x %56, solda %22, ustte %36) */
html:not([data-mod="gece"]) .at-ekran {
  -webkit-mask: var(--at-ekran-maske) 40.74% 81.82% / 217.39% 178.57% no-repeat;
  mask: var(--at-ekran-maske) 40.74% 81.82% / 217.39% 178.57% no-repeat;
}
html:not([data-mod="gece"]) .at-ekran::before { display: none; }
html:not([data-mod="gece"]) .at-ekran-ic {
  opacity: 1;
  background: linear-gradient(170deg, rgba(255, 252, 247, .8), rgba(251, 247, 241, .62) 60%);
  box-shadow: inset 0 0 0 1px rgba(20, 17, 18, .07), 0 1.5cqi 5cqi rgba(70, 45, 35, .10);
  color: rgba(20, 17, 18, .55);
}
html:not([data-mod="gece"]) .at-ekran-ic::before { background: linear-gradient(90deg, rgba(122, 35, 53, 0), rgba(122, 35, 53, .75) 40%, rgba(122, 35, 53, 0)); box-shadow: none; }
html:not([data-mod="gece"]) .at-ekran-ust { border-bottom-color: rgba(20, 17, 18, .07); color: rgba(20, 17, 18, .42); }
html:not([data-mod="gece"]) .at-ekran-ust .aktif { color: rgba(20, 17, 18, .82); box-shadow: 0 2.4cqi 0 -2.1cqi var(--kizil); }
html:not([data-mod="gece"]) .at-ekran-ic pre em { color: rgba(20, 17, 18, .24); }
html:not([data-mod="gece"]) .at-ekran-ic .k { color: var(--kizil); }
html:not([data-mod="gece"]) .at-ekran-ic .s { color: #8A6636; }
html:not([data-mod="gece"]) .at-ekran-ic .f { color: rgba(20, 17, 18, .86); }
html:not([data-mod="gece"]) .imlec { background: var(--kizil); box-shadow: none; }
html:not([data-mod="gece"]) .at-ekran-alt { color: rgba(20, 17, 18, .5); }
html:not([data-mod="gece"]) .at-ekran-alt span::before { background: var(--kizil); box-shadow: none; }
html:not([data-mod="gece"]) .at-ekran-alt path { stroke: var(--kizil); filter: none; }

/* Telefon (tasarim/referans mobil): yazi ustte, at basi altta, sagda
   burnu kenara degecek kadar buyuk. Kisa ekranda kahraman uzar, at
   yaziya binmez. */
@media (max-width: 860px) {
  .kahraman.kahraman--amblem { min-height: max(100svh, calc(var(--baslik-y) + 11svh + 250px + 104vw)); }
  .kahraman--amblem::before { width: 130%; }
  .kahraman-at-basi { top: auto; bottom: 0; right: auto; left: -6vw; width: 112vw; height: auto; }
  .kahraman .kahraman-ic--sinema { align-self: start; padding: calc(var(--baslik-y) + 11svh) 8vw 0 10vw; }
  .kahraman.kahraman--amblem h1 { font-size: 12.5vw; line-height: .98; }
  .kahraman--amblem .dugme-cerceve { margin-top: 32px; height: 44px; padding: 0 20px; gap: 26px; font-size: 14px; }
}

/* ---------- Ana sayfa acilisi (acilis.js; siteye disaridan her giriste) ----------
   Siyah sahnede atli video oynar; "Tasarim.", "Kontrol." ve "Performans."
   sirayla ekranin ortasinda belirip yerine kayar; video tamamen kararir
   (av), sonra sahne kalkar ve at basi karanliktan yavasca belirir (a-at);
   en son kod ekrani, isik, menu ve dugme gelir, geriye kahramanin
   kendisi kalir. Adimlar html'deki a1..a7 siniflari (tek: belir, cift:
   yerine kay, a7: son); son adimdaki degerler kahramanin normal degerleri.
   At gorseli hep boyali kalir (LCP), yalniz sahnenin altinda. */
html.acilis .ust { opacity: 0; pointer-events: none; transition: opacity .9s var(--egri); }
html.acilis.a7 .ust { opacity: 1; pointer-events: auto; }
/* Sahne: at basini ve isigi ortup siyah tutar (at basi altta cizili kalir) */
html.acilis .kahraman--amblem::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #000; transition: opacity 1.4s ease;
}
html.acilis.a-at .kahraman--amblem::after, html.acilis.a7 .kahraman--amblem::after { opacity: 0; }
/* Sahne kalkarken yalniz at gorunur: isik ve kod ekrani a7'de gelir */
html.acilis .kahraman--amblem::before, html.acilis .at-ekran { opacity: 0; transition: opacity 1s ease; }
html.acilis.a7 .kahraman--amblem::before, html.acilis.a7 .at-ekran { opacity: 1; }
/* Her kelime once ekranin ortasinda, buyuk belirir; sonra yerine kayar
   (--dx/--dy/--ox/--oy/--ds acilis.js olcer) */
html.acilis .kahraman--amblem h1 > * {
  opacity: 0; filter: blur(10px);
  transform: translate(var(--dx, 0), var(--dy, 0)) scale(var(--ds, 1.2));
  transform-origin: var(--ox, 0) var(--oy, 50%);
  transition: opacity .6s ease, filter .6s ease, transform .9s cubic-bezier(.7, 0, .2, 1);
}
html.acilis.a1 .kahraman--amblem h1 > :nth-child(1),
html.acilis.a3 .kahraman--amblem h1 > :nth-child(2),
html.acilis.a5 .kahraman--amblem h1 > :nth-child(3) { opacity: 1; filter: none; }
html.acilis.a2 .kahraman--amblem h1 > :nth-child(1),
html.acilis.a4 .kahraman--amblem h1 > :nth-child(2),
html.acilis.a6 .kahraman--amblem h1 > :nth-child(3) { transform: none; }
html.acilis .kahraman--amblem .dugme-cerceve { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s var(--egri), color 1.2s ease; }
html.acilis.a7 .kahraman--amblem .dugme-cerceve { opacity: 1; transform: none; }
/* Gunduz: sahne siyahken yazi acik; sahne kalkarken kendi rengine doner */
html.acilis:not([data-mod="gece"]) .kahraman.kahraman--amblem h1 { color: #D9D9D9; transition: color 1.2s ease; }
html.acilis:not([data-mod="gece"]) .kahraman--amblem .dugme-cerceve { color: #EDEDED; }
html.acilis.a-at:not([data-mod="gece"]) .kahraman.kahraman--amblem h1 { color: #343231; }
html.acilis.a7:not([data-mod="gece"]) .kahraman--amblem .dugme-cerceve { color: #16120F; }
/* Arkadaki video: sagda (telefonda altta), kenari karanliga eriyerek */
.acilis-video {
  position: absolute; z-index: 0; top: 0; right: 0; left: 36%; pointer-events: none;
  /* Kahraman ekrandan uzunsa video ekran yuksekliginde kalir, at kesilmez */
  height: min(100%, 100vh); height: min(100%, 100svh);
  opacity: 0; transition: opacity 1s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32%);
}
.acilis-video.oynuyor { opacity: 1; }
html.acilis.av .acilis-video { opacity: 0; transition-duration: 1s; }
.acilis-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
html.acilis-hizli * { transition-duration: .3s !important; transition-delay: 0s !important; }
@media (max-width: 860px) {
  /* Telefonda kelimeler ustteki bos siyahta belirir, video altta (acilis.js
     kelimelerin altindan ekranin dibine kadar yerlestirir) */
  .acilis-video { left: 0; top: 34%; height: 66%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%); mask-image: linear-gradient(180deg, transparent 0, #000 12%); }
  .acilis-video video { object-position: 50% 35%; }
  /* Dikey video: kutunun yuksekligine sigar, at bastan ayaga tam gorunur;
     yan kenarlari karanliga erir */
  .acilis-video.dikey { display: flex; justify-content: center; overflow: hidden; }
  .acilis-video.dikey video {
    flex: none; width: auto; max-width: none; height: 100%; aspect-ratio: 9 / 16;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}

/* At basi gorseli yoksa: isik altinda duz amblem, isik CSS'te. */
.kahraman-heykel {
  position: absolute; z-index: -1; pointer-events: none;
  right: max(-3vw, calc((100vw - var(--genislik)) / 2 - 5vw));
  top: calc(var(--baslik-y) * .5);
  height: min(116svh, 125vw); aspect-ratio: 857 / 1056;
}
.kahraman-heykel img {
  width: 100%; height: 100%;
  filter: drop-shadow(-1.4vw 1.8vw 2.4vw rgba(0, 0, 0, .9));
  -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .3) 84%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .3) 84%, transparent 100%);
}
/* Sol ustten gelen isik amblemin ust kenarlarini parlatir */
.kahraman-heykel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(140deg, rgba(255, 236, 226, .5) 0%, rgba(255, 236, 226, .08) 38%, rgba(255, 236, 226, 0) 60%);
  -webkit-mask: url(/assets/img/ui/logo-at-basi-sinema.webp) center / 100% 100% no-repeat;
  mask: url(/assets/img/ui/logo-at-basi-sinema.webp) center / 100% 100% no-repeat;
  mix-blend-mode: overlay;
}
@media (max-width: 860px) {
  .kahraman-heykel { top: calc(var(--baslik-y) - 10px); right: -22vw; height: auto; width: 86vw; opacity: .5; }
}

.kahraman-ic {
  grid-row: 1; grid-column: 1;
  align-self: end;
  padding-top: calc(var(--baslik-y) + 44px + 48px);
  padding-bottom: clamp(40px, 6vh, 72px);
  position: relative;
}
.kahraman h1 { font-size: var(--fs-h1); max-width: 13ch; letter-spacing: -.03em; line-height: 1.02; }


/* ==========================================================================
   REFERANS SAYFA DILI (tasarim/sayfalar/bordoat-page-*.png)
   Kirmizi ust yazi, aralikli buyuk harfli ince baslik, soldan gelen isik
   cizgisi, tarayici pencereleri. Gunduz krem kagit, gece ve koyu
   bolumler siyah sahne; ayni bilesen iki zeminde de ayni kurulur.
   ========================================================================== */

/* ---------- Bolum basi ---------- */
.sb-etiket {
  font-size: 13px; font-weight: 500; line-height: 1.4;
  letter-spacing: .32em; text-transform: uppercase; margin-right: -.32em;
  color: var(--z-isik);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.sb-baslik {
  font-family: var(--yazi-serif); font-weight: 300;
  font-size: var(--fs-sb); line-height: 1.2;
  letter-spacing: .3em; text-transform: uppercase;
  font-variation-settings: 'opsz' 72;
  color: var(--z-metin);
  text-wrap: balance;
}
.sb-baslik > span { display: block; }
:is(.zemin-koyu, .zemin-derin, .zemin-bordo, .zemin-bordo-koyu, .zemin-siyah) .sb-baslik,
html[data-mod="gece"] .sb-baslik { color: #DEDAD4; text-shadow: 0 0 24px rgba(242, 237, 228, .14), 0 2px 1px rgba(0, 0, 0, .6); }
.sb-giris {
  margin-top: clamp(24px, 2.6vw, 36px);
  max-width: 34rem;
  font-size: clamp(1.0625rem, .95rem + .35vw, 1.3rem); font-weight: 300; line-height: 1.65; letter-spacing: .03em;
  color: var(--z-soluk);
}
.sb .lazer + .sb-giris { margin-top: 0; }
.sb-giris a { color: var(--z-metin); transition: color .25s; }
.sb-giris a:hover { color: var(--z-isik); }
.sb-alt { margin-top: 18px; max-width: 32rem; font-size: var(--fs-ufak); color: var(--z-soluk); }

/* Buyuk harfli metin baglantisi, kirmizi ok */
.sb-bag {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 13px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--z-metin); transition: color .25s var(--egri);
}
.sb > .sb-bag, .iki-sutun-metin > .sb-bag { margin-top: clamp(28px, 3vw, 40px); }
.sb-bag .simge { color: var(--z-isik); transition: transform .35s var(--egri); }
.sb-bag:hover { color: var(--z-isik); }
.sb-bag:hover .simge { transform: translateX(4px); }
.sb-bag--dis { letter-spacing: .06em; text-transform: none; font-size: 14px; }
.sb-bag--dis:hover .simge { transform: translate(3px, -3px); }

/* Yatay: baslik solda, giris ve baglanti sagda (genis bolumler) */
.sb--yatay { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
.sb--yatay > .sb-etiket { grid-column: 1 / -1; }
.sb--yatay > .sb-baslik { grid-column: 1; grid-row: 2 / span 2; }
.sb--yatay > .sb-giris { grid-column: 2; grid-row: 2; margin-top: 0; }
.sb--yatay > .sb-bag { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 24px; }
@media (max-width: 1023px) { .sb--yatay { display: block; } .sb--yatay > .sb-giris { margin-top: clamp(24px, 2.6vw, 36px); } }
/* Dar sutundaki baslik (SSS) */
.sss-duzen .sb-baslik { font-size: clamp(1.6rem, .9rem + 1.8vw, 2.8rem); }

/* Baslik solda, baglanti sagda */
.bas-satir { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.bas-satir .sb-bag { margin-bottom: 10px; }
.bas-satir + .yazi-izgara, .bas-satir + .proje-izgara { margin-top: clamp(48px, 5vw, 80px); }

/* ---------- Isik cizgisi ----------
   Ekranin sol kenarindan cikar; sutunun sagina ve --l-uzat kadar
   otesine (yandaki gorselin kenarina) ulasir. Ucunda parlayan nokta. */
.lazer {
  display: block; position: relative; height: 1px;
  width: calc(100% + 100vw + var(--l-uzat, 0px)); margin-left: -100vw;
  margin-block: clamp(28px, 3.2vw, 46px);
  background: linear-gradient(90deg, rgba(200, 40, 58, 0) 0, rgba(200, 40, 58, .55) 38%, var(--kirmizi) 94%);
  box-shadow: 0 0 10px rgba(200, 40, 58, .45);
  pointer-events: none;
}
.lazer::after {
  content: ""; position: absolute; right: -3px; top: -2.5px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FFE9EC;
  box-shadow: 0 0 5px 2px #FF4D61, 0 0 18px 6px rgba(200, 40, 58, .55), 0 0 46px 16px rgba(200, 40, 58, .22);
}
html:not([data-mod="gece"]) :is(.zemin-kagit, .zemin-kagit-2) .lazer { box-shadow: 0 0 6px rgba(200, 40, 58, .3); }
/* Kirpma ile acilir (transform degil): kutu boyu degismez, gozcu gorur */
.js .lazer { clip-path: inset(-40px 100% -40px 0); transition: clip-path 1.6s var(--egri-sert); }
.js .lazer::after { opacity: 0; transition: opacity .5s 1.2s; }
.js .lazer.gorundu { clip-path: inset(-40px -90px -40px 0); }
.js .lazer.gorundu::after { opacity: 1; }

/* ---------- Iki sutun: metin + gorsel ---------- */
.iki-sutun {
  --iki-ara: clamp(40px, 5vw, 96px);
  --l-uzat: var(--iki-ara);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px var(--iki-ara);
  align-items: center;
}
.iki-sutun--genis-gorsel { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
.iki-sutun--ters { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (max-width: 1023px) {
  .iki-sutun, .iki-sutun--genis-gorsel, .iki-sutun--ters { grid-template-columns: minmax(0, 1fr); --l-uzat: 0px; }
}

/* ---------- Tarayici penceresi ---------- */
:is(.pencere, .gi, .gu, .gy, .gw) {
  --p-zemin: rgba(255, 252, 247, .72);
  --p-cizgi: rgba(20, 17, 18, .13);
  --p-golge: 0 30px 60px -36px rgba(20, 17, 18, .25);
}
html[data-mod="gece"] :is(.pencere, .gi, .gu, .gy, .gw),
:is(.zemin-koyu, .zemin-derin, .zemin-bordo, .zemin-bordo-koyu, .zemin-siyah) :is(.pencere, .gi, .gu, .gy, .gw) {
  --p-zemin: linear-gradient(160deg, rgba(30, 27, 28, .78), rgba(12, 11, 11, .86));
  --p-cizgi: rgba(236, 232, 226, .12);
  --p-golge: 0 30px 70px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.pencere {
  position: relative; overflow: hidden;
  background: var(--p-zemin); border: 1px solid var(--p-cizgi); border-radius: 8px;
  box-shadow: var(--p-golge);
  color: var(--z-metin);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pencere-ust {
  position: relative; display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px;
  border-bottom: 1px solid var(--p-cizgi);
}
/* Uc halka: her penceredeki cubukta bordo */
.pencere-ust i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid var(--halka); }
.pencere-ust i:first-child { margin-left: auto; }
.pencere-ust span {
  position: absolute; left: 50%; transform: translateX(-50%);
  max-width: 62%; padding: 3px 16px; border-radius: 4px;
  background: rgba(128, 120, 118, .1);
  font-size: 11px; letter-spacing: .04em; color: var(--z-soluk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- Proje penceresi: musteri logosu, canli site ---------- */
.proje-izgara { display: grid; gap: clamp(56px, 6vw, 96px) clamp(24px, 3vw, 56px); align-items: start; }
.proje-izgara--iki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.proje-izgara--iki > :nth-child(even) { margin-top: clamp(0px, 9vw, 150px); }
.proje-izgara--uc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.proje-izgara--uc { column-gap: clamp(20px, 1.8vw, 36px); row-gap: clamp(64px, 6vw, 104px); }
.proje-izgara--uc > :nth-child(3n+2) { margin-top: clamp(0px, 5.4vw, 112px); }
.lazer + .proje-izgara { margin-top: 0; }
.proje-pencere { position: relative; }
.proje-pencere[hidden] { display: none; }
.pp-cerceve { transition: border-color .4s var(--egri), transform .6s var(--egri); }
.proje-pencere:hover .pp-cerceve { border-color: rgba(200, 40, 58, .55); transform: translateY(-4px); }
.pp-cerceve .pencere-ic { aspect-ratio: 10 / 7; }
.pp-cerceve .pencere-ust i:first-child { margin-left: 0; }
/* Ekran her iki modda acik: logolar kendi renkleriyle */
.pp-git {
  position: relative; display: grid; place-items: center; height: 100%;
  background: #F4F0E9; color: #141112;
}
.pp-iskelet {
  position: absolute; left: 7%; right: 7%; top: 8%; height: 1px;
  background: rgba(20, 17, 18, .08);
}
.pp-iskelet::before, .pp-iskelet::after {
  content: ""; position: absolute; bottom: 10px; height: 2px; background: rgba(20, 17, 18, .16);
}
.pp-iskelet::before { left: 0; width: 13%; }
.pp-iskelet::after {
  right: 0; width: 30%;
  background: linear-gradient(90deg, rgba(20, 17, 18, .14) 0 22%, transparent 22% 39%, rgba(20, 17, 18, .14) 39% 61%, transparent 61% 78%, rgba(20, 17, 18, .14) 78%);
}
.pp-logo { width: auto; height: auto; max-width: 54%; max-height: 46%; object-fit: contain; transition: transform .9s var(--egri); }
.proje-pencere:hover .pp-logo { transform: scale(1.04); }
.pp-ad { font-family: var(--yazi-serif); font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); letter-spacing: .04em; }
.pp-etiket {
  margin-top: clamp(22px, 2.4vw, 34px);
  font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .24em; text-transform: uppercase;
  color: var(--z-metin);
}
.pp-etiket a { transition: color .25s; }
.pp-etiket a:hover { color: var(--z-isik); }
.pp-etiket i { font-style: normal; color: var(--z-isik); margin: 0 1.2em; letter-spacing: 0; }
.pp-etiket span { color: var(--z-soluk); }
.pp-baglar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 16px; }
.pp-baglar .sb-bag { font-size: 12.5px; letter-spacing: .24em; }
.pp-baglar .sb-bag--dis { font-size: 13px; letter-spacing: .04em; color: var(--z-soluk); }
@media (max-width: 1100px) {
  .proje-izgara--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proje-izgara--uc > :nth-child(3n+2) { margin-top: 0; }
  .proje-izgara--uc > :nth-child(even) { margin-top: clamp(0px, 9vw, 120px); }
}
@media (max-width: 700px) {
  .proje-izgara--iki, .proje-izgara--uc { grid-template-columns: minmax(0, 1fr); }
  .proje-izgara > :nth-child(n) { margin-top: 0; }
  /* Serit (ana sayfa, hizmet sayfasi): pencereler yana kayar, sayfa uzamaz */
  .proje-izgara--serit {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 0 16px;
    margin-inline: calc(-1 * var(--kenar)); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .proje-izgara--serit::-webkit-scrollbar { display: none; }
  .proje-izgara--serit > * { scroll-snap-align: start; }
  .proje-izgara--serit .pp-baglar .sb-bag--dis { display: none; }
  /* Referans sayfasi: iki sutun, kisa etiket */
  .referans-sahne .proje-izgara--uc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 14px; }
  .referans-sahne .pp-cerceve .pencere-ust span { display: none; }
  .referans-sahne .pp-etiket { margin-top: 14px; font-size: 11px; letter-spacing: .16em; }
  .referans-sahne .pp-etiket i { display: none; }
  .referans-sahne .pp-etiket span { display: block; margin-top: 4px; font-size: 10px; letter-spacing: .12em; }
  .referans-sahne .pp-baglar { margin-top: 10px; }
  .referans-sahne .pp-baglar .sb-bag { font-size: 10.5px; letter-spacing: .18em; gap: 8px; }
  .referans-sahne .pp-baglar .sb-bag--dis { display: none; }
  .referans-sahne .pp-ad { font-size: 1.05rem; text-align: center; }
  .referans-sahne .suzgec-kap { max-width: none; }
}
.serit-durum { display: none; }
@media (max-width: 700px) {
  .serit-durum { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
  .serit-cubuk { position: relative; flex: 1; height: 1px; background: var(--z-cizgi); }
  .serit-cubuk i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(200, 40, 58, .3), var(--kirmizi)); box-shadow: 0 0 8px rgba(200, 40, 58, .5); transform-origin: left; transition: transform .2s linear; }
  .serit-sayi { font-size: 11px; font-weight: 500; letter-spacing: .24em; color: var(--z-soluk); font-variant-numeric: tabular-nums; }
}

/* ---------- Referanslar (ana sayfa bolumu ve sayfa) ----------
   Baslik, tam genislikte isik cizgisi, hemen altinda pencereler. */
.isler-bolum .lazer, .referans-sahne .lazer { --l-uzat: 0px; margin-block: clamp(28px, 2.6vw, 40px) clamp(24px, 2.4vw, 36px); }
/* Referans: baslik, cizgi ve uc pencere (etiketleriyle) ilk ekranda */
.referans-sahne { position: relative; padding: calc(var(--baslik-y) + clamp(16px, 1.6vw, 24px)) 0 var(--bolum); overflow-x: clip; }
.referans-sahne .kap { position: relative; }
.referans-sahne .kirinti { margin-bottom: clamp(24px, 2.4vw, 36px); }
.referans-sahne .sb-etiket { margin-bottom: 14px; }
.referans-sahne h1.sb-baslik { font-size: clamp(2rem, .9rem + 2.2vw, 3.2rem); line-height: 1.16; }
.referans-sahne .lazer { margin-block: clamp(18px, 1.5vw, 24px); }
/* Genis ekranda kirinti sag ustte, ust yaziyla ayni hizada */
@media (min-width: 1024px) {
  .referans-sahne .kirinti { position: absolute; top: 0; right: 0; margin: 0; }
}
.referans-sahne .bas-satir { align-items: flex-end; }
/* Suzgec tek satir: sigmayan sektorler "Diger" menusunde (main.js) */
.suzgec-kap { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 36px); min-width: 0; }
.referans-sahne .suzgec-kap { max-width: 40rem; padding-bottom: 6px; }
.suzgec-kap > .suzgec { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.suzgec-kap .suzgec button { flex: none; }
.suzgec-diger { position: relative; flex: none; }
.suzgec-diger[hidden] { display: none; }
.suzgec-diger-dugme {
  display: inline-flex; align-items: center; gap: 10px; height: 40px;
  font-size: 12.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--z-soluk);
  background: linear-gradient(var(--z-isik), var(--z-isik)) 0 100% / 0 1px no-repeat;
  transition: color .2s, background-size .35s var(--egri);
}
.suzgec-diger-dugme:hover, .suzgec-diger-dugme[aria-expanded="true"] { color: var(--z-metin); }
.suzgec-diger-dugme.secili { color: var(--z-metin); background-size: 100% 1px; }
.suzgec-diger-dugme svg { fill: none; stroke: var(--z-isik); stroke-width: 1.4; transition: transform .3s var(--egri); }
.suzgec-diger-dugme[aria-expanded="true"] svg { transform: rotate(180deg); }
.suzgec-acilir {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 6; min-width: 240px;
  display: grid; padding: 6px 22px; background: var(--z-zemin, var(--sahne)); border: 1px solid var(--z-cizgi);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--egri), visibility 0s .3s;
}
.suzgec-diger.acik .suzgec-acilir { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--egri); }
.suzgec-acilir button { justify-content: flex-start; height: 46px; white-space: nowrap; }
.suzgec-acilir button + button { border-top: 1px solid var(--z-cizgi); }
.suzgec-acilir button[aria-pressed="true"] { background-size: 0 1px; color: var(--z-isik); }
@media (max-width: 700px) {
  .suzgec-kap, .suzgec-kap > .suzgec { gap: 18px; }
  .suzgec-kap .suzgec button, .suzgec-diger-dugme { letter-spacing: .18em; }
  .suzgec-acilir { min-width: 210px; }
}

/* ==========================================================================
   ANA SAYFA BOLUMLERI — birebir tasarim/ornek/bordoat-home-section-01..04.png
   (includes/bolumler.php). Gorsellerde --u bir referans pikseli:
   kapsayicinin genisligine bagli (cqi), ekran goruntusu gibi kuculur.
   Cizgiler currentColor'dan: gece ve gunduz ayni cizim.
   ========================================================================== */
:is(.gu, .gy, .gw) { --p-dolu: #FBF8F3; --p-ic: rgba(20, 17, 18, .025); }
html[data-mod="gece"] :is(.gu, .gy, .gw),
:is(.zemin-koyu, .zemin-derin, .zemin-bordo, .zemin-bordo-koyu, .zemin-siyah) :is(.gu, .gy, .gw) { --p-dolu: #131112; --p-ic: rgba(255, 255, 255, .018); }

/* Pencere ust cubugu: uc halka */
.oy-ust { display: flex; align-items: center; gap: calc(9 * var(--u)); height: calc(var(--oy-h, 44) * var(--u)); padding: 0 calc(var(--oy-p, 22) * var(--u)); border-bottom: 1px solid var(--p-cizgi); }
.oy-ust--sag { justify-content: flex-end; }
.oy-ust i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; border: 1px solid var(--halka); }
.oy-ust--renkli { border-bottom: 0; }
.oy-ust--renkli i { border: 0; opacity: 1; background: #C8283A; }
.oy-ust--renkli i:nth-child(2) { background: #8A8583; }
.oy-ust--renkli i:nth-child(3) { background: #3E9B63; }
.oy-simge { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 01: kod, site iskeleti, sistem mimarisi (referans 902x804) ---------- */
.uclu { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }
.uclu .sb-giris a { color: inherit; }
/* Referanslardaki satir araligi */
:is(.uclu, .yaklasim, .urun-bolum) .sb-baslik { line-height: 1.4; }
.gu { position: relative; container-type: inline-size; aspect-ratio: 902 / 804; --u: calc(100cqi / 902); color: var(--z-metin); }
.gu > div {
  position: absolute; overflow: hidden;
  background: var(--p-zemin); border: 1px solid var(--p-cizgi); border-radius: calc(8 * var(--u));
  box-shadow: var(--p-golge); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gu-kod { left: calc(157 * var(--u)); top: 0; width: calc(651 * var(--u)); height: calc(382 * var(--u)); z-index: 1; --oy-h: 47; --oy-p: 24; }
.gu-kod pre {
  position: relative; padding-top: calc(20 * var(--u));
  font: calc(15 * var(--u)) / calc(27 * var(--u)) ui-monospace, 'Cascadia Code', Consolas, monospace; white-space: pre;
}
.gu-kod pre::before { content: ""; position: absolute; left: calc(48 * var(--u)); top: 0; height: 100vh; border-left: 1px solid var(--p-cizgi); }
.gu-kod span { display: block; min-height: calc(27 * var(--u)); color: var(--z-metin); }
.gu-kod em { display: inline-block; width: calc(61 * var(--u)); padding-right: calc(35 * var(--u)); text-align: right; font-style: normal; font-size: .88em; opacity: .32; }
.gu-kod b { font-weight: 400; color: var(--z-isik); }
.gu-site { left: 0; top: calc(368 * var(--u)); width: calc(557 * var(--u)); height: calc(436 * var(--u)); z-index: 3; --oy-p: 21; }
.gu-mimari { left: calc(463 * var(--u)); top: calc(287 * var(--u)); width: calc(439 * var(--u)); height: calc(510 * var(--u)); z-index: 2; }
.gu svg { display: block; width: 100%; height: auto; overflow: visible; }
.gu-iskelet text { fill: currentColor; }
.gu-logo { font-family: var(--yazi-serif); font-size: 13px; letter-spacing: .42em; opacity: .9; }
.gu-slogan { font-family: var(--yazi-serif); font-weight: 300; font-size: 21px; letter-spacing: .12em; opacity: .82; }
.gu-soluk { stroke: currentColor; stroke-opacity: .2; stroke-width: 3.5; }
.gu-ince { fill: none; stroke: currentColor; stroke-opacity: .09; }
.gu-cizgi { fill: none; stroke: currentColor; stroke-opacity: .22; }
.gu-kirmizi { fill: none; stroke: var(--kirmizi); stroke-width: 1.2; }
.gu-kalin { stroke-width: 2.6; }
.gm-kutu rect { fill: var(--p-ic); stroke: currentColor; stroke-opacity: .5; }
.gm-kutu text { fill: currentColor; font-size: 10.5px; letter-spacing: .06em; text-anchor: middle; opacity: .88; }
.gm-cizgi path, .gm-kesik path { fill: none; stroke: currentColor; stroke-opacity: .45; }
.gm-kesik path { stroke-dasharray: 3 3; }
.gu marker path { fill: currentColor; fill-opacity: .6; }
.gm-simge path { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; opacity: .85; }

/* ---------- 02: ray (baslik, teknik cizim, cizimli kalemler) ---------- */
.ray-bolum { overflow-x: clip; }
.ray { position: relative; }
.ray-bas { position: relative; z-index: 1; width: 63.8%; --l-uzat: 0px; }
.ray-bas .sb-baslik { line-height: 1.34; }
.ray-plan { position: absolute; right: 0; top: -4.6vw; width: 28%; color: var(--z-metin); pointer-events: none; }
.ray-plan svg { display: block; width: 100%; height: auto; }
.ray-plan :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.pc-izgara { fill: none; stroke: currentColor; stroke-opacity: .045; }
.pc-c { fill: none; stroke: currentColor; stroke-opacity: .3; }
.pc-k { fill: none; stroke: var(--kirmizi); }
.pc-dolu { fill: var(--kirmizi); stroke: none; }
[class^="pc-arti"] { stroke: currentColor; stroke-opacity: .38; }
.pc-arti.pc-parlak { stroke-opacity: .9; }
.pc-arti.pc-kirmizi { stroke: var(--kirmizi); stroke-opacity: 1; }
.pc-parlak-c { stroke: currentColor; stroke-opacity: .9; }
.pc-yazi text { font: 10px var(--yazi); letter-spacing: .12em; fill: currentColor; opacity: .55; }
.pc-yazi .pc-secili { fill: var(--z-isik); opacity: 1; }
.pc-nokta circle { fill: currentColor; opacity: .4; }
.ray-liste {
  display: grid; grid-template-columns: 243fr 318fr 268fr 272fr 242fr;
  width: 78.7%; margin-top: clamp(64px, 6.6vw, 96px);
}
.ray-liste[style*="--adet:4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ray-liste li { border-left: 1px solid var(--z-cizgi); }
.ray-liste li:first-child { border-left: 0; }
.ray-liste li > :is(a, h3) { display: block; }
.ray-liste a { height: 100%; }
.ray-liste li > a, .ray-liste li:not(:has(> a)) { padding: clamp(28px, 3.1vw, 46px) clamp(16px, 2.85vw, 42px) 12px; }
.ray-liste li:first-child > a, .ray-liste li:first-child:not(:has(> a)) { padding-left: 0; }
.ray-liste h3 {
  font-family: var(--yazi-serif); font-weight: 400; font-size: clamp(1rem, .75rem + .6vw, 1.2rem);
  line-height: 1.4; letter-spacing: .3em; text-transform: uppercase; color: var(--z-metin);
  transition: color .25s;
}
.ray-liste a:hover h3 { color: var(--z-isik); }
.ray-cizim { display: block; height: calc(var(--h) * .05vw); width: auto; margin-top: clamp(20px, 2vw, 30px); overflow: visible; color: var(--z-metin); }
.ray-cizim :is(path, rect, circle) { vector-effect: non-scaling-stroke; }
.rc { fill: none; stroke: currentColor; stroke-opacity: .62; }
.rc-ince { stroke-opacity: .22; }
.rc-dolu { fill: currentColor; fill-opacity: .7; }
.rk { fill: none; stroke: var(--kirmizi); }
.rk-dolu { fill: var(--kirmizi); }
.ray-liste p { margin-top: 22px; max-width: 22rem; font-size: var(--fs-ufak); line-height: 1.6; color: var(--z-soluk); }
.ray-bag { position: absolute; left: 88.2%; bottom: 14px; }
.ray-bag::after { content: ""; position: absolute; left: 0; right: -10%; bottom: -16px; height: 1px; background: linear-gradient(90deg, var(--kirmizi), rgba(200, 40, 58, .25)); }
.ray-dikey { position: absolute; left: 78.7%; top: calc(-1 * var(--bolum)); bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(200, 40, 58, .35), rgba(200, 40, 58, .7)); pointer-events: none; }
@media (max-width: 1023px) {
  .ray-bas { width: 100%; }
  .ray-plan, .ray-dikey { display: none; }
  .ray-liste, .ray-liste[style*="--adet:4"] { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .ray-liste li, .ray-liste li:first-child { border-left: 0; border-top: 1px solid var(--z-cizgi); }
  .ray-liste li:nth-child(even) { border-left: 1px solid var(--z-cizgi); }
  .ray-liste li > a, .ray-liste li:not(:has(> a)) { padding: 28px 20px 28px 0; }
  .ray-liste li:nth-child(even) > a, .ray-liste li:nth-child(even):not(:has(> a)) { padding-left: 20px; }
  .ray-cizim { height: calc(var(--h) * .5px); }
  .ray-bag { position: static; margin-top: 40px; }
  .ray-bag::after { display: none; }
}
@media (max-width: 600px) {
  /* Aciklamali kalemler (Hakkimizda): cizim solda, ad ve ozet sagda; tek sutun */
  .ray--aciklamali .ray-liste { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .ray--aciklamali .ray-liste li { border-left: 0; }
  .ray--aciklamali .ray-liste li > :is(a, h3), .ray--aciklamali .ray-liste li:not(:has(> a)) { padding: 20px 0; }
  .ray--aciklamali .ray-liste li > a { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 18px; align-items: start; }
  .ray--aciklamali .ray-cizim { grid-column: 1; grid-row: 1 / span 2; width: 60px; height: 38px; margin: 2px 0 0; }
  .ray--aciklamali .ray-liste h3 { grid-column: 2; font-size: .95rem; letter-spacing: .22em; }
  .ray--aciklamali .ray-liste p { grid-column: 2; margin-top: 6px; max-width: none; font-size: 14px; line-height: 1.55; }
  .ray-liste[style*="--adet:4"] { grid-template-columns: minmax(0, 1fr); }
  .ray-liste[style*="--adet:4"] li:nth-child(even) { border-left: 0; }
  .ray-liste[style*="--adet:4"] li:nth-child(even) > a, .ray-liste[style*="--adet:4"] li:nth-child(even):not(:has(> a)) { padding-left: 0; }
}

/* ---------- 03: yaklasim — genis uygulama penceresi (referans 1078x795) ---------- */
.yaklasim-bolum { overflow-x: clip; }
.yaklasim { grid-template-columns: minmax(0, 5.1fr) minmax(0, 6.9fr); --iki-ara: clamp(20px, 1.7vw, 28px); }
.yaklasim .sb-baslik { font-size: clamp(1.6rem, .5rem + 1.8vw, 3.2rem); }
.yaklasim .sb-giris b { font-weight: inherit; color: var(--z-metin); }
/* Isik cizgisi pencerenin arkasindan gecer, sag kenarda devam eder */
.yaklasim .lazer::before { content: ""; position: absolute; left: 100%; top: 0; width: 100vw; height: 1px; background: rgba(200, 40, 58, .8); box-shadow: 0 0 10px rgba(200, 40, 58, .45); }
.js .yaklasim .lazer.gorundu { clip-path: inset(-40px -100vw -40px 0); }
.yaklasim .iki-sutun-gorsel { position: relative; z-index: 1; }
.gy { container-type: inline-size; --u: calc(100cqi / 1078); color: var(--z-metin); }
.gy-pencere {
  display: grid; grid-template-columns: calc(180 * var(--u)) calc(635 * var(--u)) minmax(0, 1fr);
  grid-template-rows: calc(40 * var(--u)) calc(57 * var(--u)) minmax(0, 1fr);
  aspect-ratio: 1078 / 795; overflow: hidden;
  background: var(--p-dolu); border: 1px solid var(--p-cizgi); border-radius: calc(12 * var(--u));
  box-shadow: var(--p-golge), 0 40px 90px -40px rgba(0, 0, 0, .7);
  font-size: calc(11.5 * var(--u)); line-height: 1.3;
}
.gy .oy-ust { grid-column: 1 / -1; --oy-h: 40; --oy-p: 18; }
.gy-ust { grid-column: 1 / -1; display: grid; grid-template-columns: calc(180 * var(--u)) minmax(0, 1fr) auto; align-items: stretch; border-bottom: 1px solid var(--p-cizgi); }
.gy-logo { display: flex; align-items: center; padding-left: calc(28 * var(--u)); border-right: 1px solid var(--p-cizgi); font-family: var(--yazi-serif); font-weight: 400; font-size: calc(13 * var(--u)); letter-spacing: .5em; text-transform: uppercase; }
.gy-ust nav { display: flex; gap: calc(42 * var(--u)); padding-left: calc(52 * var(--u)); }
.gy-ust nav span { position: relative; display: flex; align-items: center; font-size: calc(10.5 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: var(--z-soluk); }
.gy-ust nav .aktif { color: var(--z-metin); }
.gy-ust nav .aktif::after { content: ""; position: absolute; left: calc(-24 * var(--u)); right: calc(-24 * var(--u)); bottom: -1px; height: calc(2 * var(--u)); background: var(--kirmizi); }
.gy-arac { display: flex; align-items: center; gap: calc(20 * var(--u)); padding-right: calc(22 * var(--u)); font-size: calc(16 * var(--u)); color: var(--z-soluk); }
.gy-arac .oy-simge:last-child { font-size: calc(12 * var(--u)); }
.gy-avatar { display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: 50%; background: var(--p-ic); border: 1px solid var(--p-cizgi); font-style: normal; font-size: calc(10 * var(--u)); color: var(--z-metin); }
.gy-yan { display: flex; flex-direction: column; padding: calc(25 * var(--u)) 0 calc(30 * var(--u)); border-right: 1px solid var(--p-cizgi); }
.gy-yan li { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(36 * var(--u)); padding-left: calc(24 * var(--u)); color: var(--z-soluk); }
.gy-yan .oy-simge { font-size: calc(14 * var(--u)); }
.gy-yan li.aktif { color: var(--z-metin); background: var(--p-ic); }
.gy-yan li.aktif::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(2 * var(--u)); background: var(--kirmizi); }
.gy-yan-alt { margin-top: auto; }
.gy-kirmizi-nokta { width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin-left: auto; margin-right: calc(20 * var(--u)); border-radius: 50%; background: var(--kirmizi); box-shadow: 0 0 calc(6 * var(--u)) var(--kirmizi); }
.gy-orta { display: flex; flex-direction: column; gap: calc(17 * var(--u)); padding: calc(29 * var(--u)) calc(19 * var(--u)) calc(35 * var(--u)) calc(26 * var(--u)); min-width: 0; }
.gy-bas { display: flex; align-items: center; justify-content: space-between; }
.gy-bas h4 { font-weight: 400; font-size: calc(17.5 * var(--u)); }
.gy-bas h5, .gy-kutu > h5 { font-weight: 500; font-size: calc(12 * var(--u)); }
.gy-sec { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); color: var(--z-soluk); font-size: calc(10 * var(--u)); }
.gy-bas .gy-sec { height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); border: 1px solid var(--p-cizgi); }
.gy-kutu { border: 1px solid var(--p-cizgi); background: var(--p-ic); }
.gy-kartlar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(6 * var(--u)); }
.gy-kart { display: grid; align-content: space-between; height: calc(92 * var(--u)); padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--p-cizgi); background: var(--p-ic); }
.gy-kart span { font-size: calc(10 * var(--u)); color: var(--z-soluk); }
/* Olcu cubuklari (olcu_cubuk): sayi yerine */
:is(.gy-cubuk, .gw-cubuk) { display: flex; align-items: flex-end; }
:is(.gy-cubuk, .gw-cubuk) > i { flex: 1; height: 38%; background: currentColor; opacity: .14; }
:is(.gy-cubuk, .gw-cubuk) > i:nth-child(2) { height: 52%; }
:is(.gy-cubuk, .gw-cubuk) > i:nth-child(3) { height: 46%; }
:is(.gy-cubuk, .gw-cubuk) > i:nth-child(4) { height: 66%; }
:is(.gy-cubuk, .gw-cubuk) > i:nth-child(5) { height: calc(var(--c) * 100%); background: var(--kirmizi); opacity: .9; }
.gy-cubuk { gap: calc(4 * var(--u)); height: calc(30 * var(--u)); width: 72%; }
.gy-grafik { padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)); }
.gy-grafik > svg { display: block; width: 100%; height: auto; margin-top: calc(4 * var(--u)); }
.gy-eksen path { stroke: currentColor; stroke-opacity: .08; }
.gy-eksen text { fill: currentColor; opacity: .5; font-size: 10px; text-anchor: end; }
.gy-eksen .gy-x { text-anchor: middle; }
.gy-alan { fill: url(#gy-dolgu); }
.gy-egri { fill: none; stroke: #D8334A; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px rgba(200, 40, 58, .6)); }
.gy-nokta circle { fill: #E0485C; }
.gy-alt { display: grid; grid-template-columns: 297fr 280fr; gap: calc(13 * var(--u)); }
.gy-liste { padding: calc(18 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)); }
.gy-liste ul { margin-top: calc(12 * var(--u)); }
.gy-liste li { display: flex; justify-content: space-between; align-items: center; height: calc(30.5 * var(--u)); font-size: calc(10.5 * var(--u)); }
.gy-liste em { font-style: normal; font-size: calc(9.5 * var(--u)); color: var(--z-soluk); }
.gy-calisiyor { display: flex; align-items: center; gap: calc(9 * var(--u)); }
.gy-calisiyor::after { content: ""; width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #3E9B63; }
.gy-sag { display: flex; flex-direction: column; gap: calc(15 * var(--u)); padding: calc(20 * var(--u)) calc(10 * var(--u)) calc(35 * var(--u)) 0; min-width: 0; }
.gy-akis { flex: 293; padding: calc(14 * var(--u)) calc(14 * var(--u)); }
.gy-dugme { display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(26 * var(--u)); padding: 0 calc(10 * var(--u)); border: 1px solid var(--p-cizgi); font-size: calc(10 * var(--u)); }
.gy-akis ol { position: relative; margin-top: calc(16 * var(--u)); }
.gy-akis ol::before { content: ""; position: absolute; left: calc(12.5 * var(--u)); top: calc(22 * var(--u)); bottom: calc(22 * var(--u)); border-left: 1px solid var(--p-cizgi); }
.gy-akis li { position: relative; display: flex; justify-content: space-between; align-items: center; height: calc(35 * var(--u)); margin-bottom: calc(11.5 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(30 * var(--u)); border: 1px solid transparent; font-size: calc(11 * var(--u)); }
.gy-akis li::before { content: ""; position: absolute; left: calc(7 * var(--u)); top: 50%; width: calc(11 * var(--u)); height: calc(11 * var(--u)); margin-top: calc(-5.5 * var(--u)); border-radius: 50%; border: 1px solid var(--p-cizgi); background: var(--p-dolu); }
.gy-akis li.aktif { border-color: rgba(200, 40, 58, .8); background: rgba(200, 40, 58, .07); }
.gy-akis li.aktif::before { border: calc(3 * var(--u)) solid rgba(200, 40, 58, .35); background: #D8334A; }
.gy-akis em { font-style: normal; font-size: calc(10 * var(--u)); color: var(--z-soluk); }
.gy-bilesen { flex: 335; padding: calc(16 * var(--u)) calc(14 * var(--u)); }
.gy-cift { display: grid; grid-template-columns: 136fr 80fr; gap: calc(7 * var(--u)); margin-top: calc(16 * var(--u)); }
.gy-alan { display: flex; align-items: center; height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)); border: 1px solid var(--p-cizgi); font-size: calc(10.5 * var(--u)); color: var(--z-metin); }
.gy-alan.gy-sec { color: var(--z-metin); }
.gy-sekme { display: flex; justify-content: space-between; margin: calc(16 * var(--u)) calc(-14 * var(--u)) 0; padding: 0 calc(14 * var(--u)) calc(10 * var(--u)); border-bottom: 1px solid var(--p-cizgi); }
.gy-sekme span { position: relative; font-size: calc(9 * var(--u)); letter-spacing: .1em; text-transform: uppercase; color: var(--z-soluk); }
.gy-sekme .aktif { color: var(--z-metin); }
.gy-sekme .aktif::after { content: ""; position: absolute; left: calc(-12 * var(--u)); right: calc(-12 * var(--u)); bottom: calc(-11 * var(--u)); height: calc(2 * var(--u)); background: var(--kirmizi); }
.gy-bilesen dl { display: grid; grid-template-columns: calc(80 * var(--u)) minmax(0, 1fr); gap: calc(7 * var(--u)) 0; margin-top: calc(14 * var(--u)); }
.gy-bilesen dt { display: flex; align-items: center; font-size: calc(10.5 * var(--u)); color: var(--z-soluk); }
.gy-bilesen dd { display: flex; align-items: center; justify-content: space-between; height: calc(28 * var(--u)); padding: 0 calc(10 * var(--u)); border: 1px solid var(--p-cizgi); font-size: calc(10.5 * var(--u)); }
.gy-renk { grid-template-columns: 73fr 143fr; margin-top: calc(15 * var(--u)); }
.gy-renk i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); background: #B81F32; }
.gy .oy-simge { stroke-width: 1.5; }

/* ---------- 04: uc urun penceresi (referans 1570x525) ---------- */
.urun-bolum .sb-baslik { font-size: clamp(1.6rem, .5rem + 2vw, 3.4rem); }
.urun-gorsel { margin-top: clamp(4px, 1vw, 12px); }
.gw { container-type: inline-size; --u: calc(100cqi / 1570); color: var(--z-metin); }
.gw-sahne { position: relative; aspect-ratio: 1570 / 525; perspective: calc(2400 * var(--u)); perspective-origin: 30% 50%; }
.gw-pen {
  position: absolute; overflow: hidden; transform-origin: 0 50%;
  background: var(--p-dolu); border: 1px solid var(--p-cizgi); border-radius: calc(10 * var(--u));
  box-shadow: var(--p-golge), 0 40px 80px -40px rgba(0, 0, 0, .7);
  font-size: calc(9 * var(--u)); line-height: 1.35;
}
.gw-pen .oy-ust { --oy-h: 36; --oy-p: 17; }
.gw-a { left: 0; top: 0; width: calc(720 * var(--u)); height: calc(505 * var(--u)); transform: rotateY(11deg); z-index: 1; }
.gw-b { left: calc(653 * var(--u)); top: calc(35 * var(--u)); width: calc(684 * var(--u)); height: calc(489 * var(--u)); transform: rotateY(11deg); z-index: 2; }
.gw-c { left: calc(1361 * var(--u)); top: calc(74 * var(--u)); width: calc(207 * var(--u)); height: calc(440 * var(--u)); padding: calc(7 * var(--u)); border-radius: calc(28 * var(--u)); border-color: rgba(128, 120, 118, .45); transform: rotateY(5deg); z-index: 3; }
.gw-pen nav { position: absolute; left: calc(56 * var(--u)); top: calc(63 * var(--u)); display: flex; gap: calc(30 * var(--u)); font-size: calc(7.5 * var(--u)); letter-spacing: .14em; text-transform: uppercase; }
.gw-b nav { left: calc(57 * var(--u)); gap: calc(42 * var(--u)); }
.gw-metin { position: absolute; left: calc(56 * var(--u)); top: calc(166 * var(--u)); width: calc(250 * var(--u)); }
.gw-b .gw-metin { left: calc(57 * var(--u)); width: calc(240 * var(--u)); }
.gw-metin h4 { font-family: var(--yazi-serif); font-weight: 300; font-size: calc(27 * var(--u)); line-height: calc(32 * var(--u)); }
.gw-metin p { margin-top: calc(16 * var(--u)); font-size: calc(9.5 * var(--u)); line-height: 1.55; color: var(--z-soluk); }
.gw-dugmeler { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-top: calc(40 * var(--u)); }
.gw-dugme, .gw-bag { display: inline-flex; align-items: center; gap: calc(9 * var(--u)); font-size: calc(7 * var(--u)); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.gw-dugme { height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u)); border: 1px solid var(--p-cizgi); }
.gw-dugme .simge, .gw-bag .simge { width: calc(9 * var(--u)); height: calc(9 * var(--u)); color: var(--z-isik); }
.gw-kutu { position: absolute; padding: calc(13 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--p-cizgi); background: var(--p-ic); }
.gw-kutu > p { font-size: calc(9 * var(--u)); }
.gw-genel { left: calc(325 * var(--u)); top: calc(127 * var(--u)); width: calc(320 * var(--u)); height: calc(105 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: calc(9 * var(--u)); }
.gw-genel > p { grid-column: 1 / -1; }
.gw-genel > div { display: grid; align-content: center; gap: calc(7 * var(--u)); padding: 0 calc(10 * var(--u)); border: 1px solid var(--p-cizgi); }
.gw-genel span { font-size: calc(7 * var(--u)); color: var(--z-soluk); }
.gw-cubuk { gap: calc(3 * var(--u)); height: calc(24 * var(--u)); width: 70%; }
.gw-perf { left: calc(325 * var(--u)); top: calc(239 * var(--u)); width: calc(210 * var(--u)); height: calc(178 * var(--u)); }
.gw-kanal { left: calc(542 * var(--u)); top: calc(239 * var(--u)); width: calc(112 * var(--u)); height: calc(178 * var(--u)); }
.gw-kutu svg { display: block; width: 100%; height: auto; margin-top: calc(6 * var(--u)); }
.gw-eksen path { stroke: currentColor; stroke-opacity: .07; }
.gw-eksen text { fill: currentColor; opacity: .4; font-size: 6px; text-anchor: end; }
.gw-cizgi { fill: none; stroke: currentColor; stroke-opacity: .75; stroke-width: 1.2; }
.gw-ipucu { fill: var(--p-dolu); stroke: currentColor; stroke-opacity: .2; }
.gw-ipucu-y { fill: currentColor; font-size: 6px; opacity: .8; }
.gw-kare { fill: currentColor; }
.gw-kanal svg { width: 72%; margin: calc(10 * var(--u)) auto 0; }
.gw-halka { fill: none; stroke: currentColor; stroke-opacity: .16; stroke-width: 12; }
.gw-halka--koyu { stroke-opacity: .45; }
.gw-halka--kirmizi { stroke: #C8283A; stroke-opacity: 1; }
.gw-kanal ul { display: grid; grid-template-columns: 1fr 1fr; gap: calc(4 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(5.5 * var(--u)); color: var(--z-soluk); }
.gw-kanal li::before { content: ""; display: inline-block; width: calc(4 * var(--u)); height: calc(4 * var(--u)); margin-right: calc(3 * var(--u)); background: currentColor; opacity: .6; }
.gw-kanal .gw-kirmizi::before { background: #C8283A; opacity: 1; }
.gw-avatar { position: absolute; left: calc(629 * var(--u)); top: calc(77 * var(--u)); display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: 1px solid var(--p-cizgi); background: var(--p-ic); font-style: normal; font-size: calc(8 * var(--u)); }
.gw-akis { left: calc(309 * var(--u)); top: calc(117 * var(--u)); width: calc(333 * var(--u)); height: calc(330 * var(--u)); padding: 0; }
.gw-akis svg { margin: 0; }
.gw-bag-c path { fill: none; stroke: currentColor; stroke-opacity: .3; }
.gw-dal { fill: currentColor; opacity: .6; font-size: 7.5px; text-anchor: middle; }
.gw-dugum rect { fill: var(--p-dolu); stroke: currentColor; stroke-opacity: .16; }
.gw-dugum circle { fill: none; stroke: currentColor; stroke-opacity: .22; }
.gw-dugum-simge path { fill: none; stroke: currentColor; stroke-opacity: .7; stroke-width: 2.2; }
.gw-dugum text { fill: currentColor; font-size: 8px; }
.gw-dugum .gw-alt-y { font-size: 6.5px; opacity: .55; }
.gw-dugum--kirmizi rect { stroke: #D8334A; stroke-opacity: .9; fill: rgba(200, 40, 58, .08); }
.gw-dugum--kirmizi text { fill: #E0485C; }
.gw-dugum--kirmizi .gw-alt-y { opacity: .8; }
.gw-ekran { position: relative; height: 100%; padding: calc(14 * var(--u)) calc(14 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--p-ic); border: 1px solid var(--p-cizgi); overflow: hidden; }
.gw-durum { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(8 * var(--u)); font-size: calc(8 * var(--u)); }
.gw-durum i { width: calc(14 * var(--u)); height: calc(7 * var(--u)); border: 1px solid currentColor; border-radius: calc(2 * var(--u)); opacity: .8; }
.gw-tel-ust { display: flex; justify-content: space-between; margin-top: calc(14 * var(--u)); font-size: calc(11 * var(--u)); color: var(--z-soluk); }
.gw-c h4 { margin-top: calc(22 * var(--u)); font-family: var(--yazi-serif); font-weight: 300; font-size: calc(16.5 * var(--u)); line-height: calc(21 * var(--u)); }
.gw-c h4 + p { margin-top: calc(10 * var(--u)); font-size: calc(6.8 * var(--u)); line-height: 1.6; color: var(--z-soluk); }
.gw-tel-kutu { margin-top: calc(16 * var(--u)); padding: calc(10 * var(--u)); border: 1px solid var(--p-cizgi); background: var(--p-ic); font-size: calc(6.8 * var(--u)); }
.gw-ozet { display: grid; grid-template-columns: 1fr 1fr; row-gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); }
.gw-ozet > span { grid-column: 1 / -1; }
.gw-ozet b { display: block; font-weight: 300; font-size: calc(12.5 * var(--u)); }
.gw-ozet em { font-style: normal; font-size: calc(5.8 * var(--u)); color: var(--z-soluk); }
.gw-gorev ul { margin-top: calc(6 * var(--u)); }
.gw-gorev li { display: grid; grid-template-columns: 1fr auto; padding: calc(7 * var(--u)) 0; border-top: 1px solid var(--p-cizgi); }
.gw-gorev li:first-child { border-top: 0; }
.gw-gorev b { font-weight: 400; font-size: calc(7 * var(--u)); }
.gw-gorev span { grid-column: 1; font-size: calc(5.8 * var(--u)); color: var(--z-soluk); }
.gw-gorev i { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: currentColor; opacity: .45; }
.gw-gorev i.gw-yesil { background: #3E9B63; opacity: 1; }
.gw-yazilar { position: relative; height: calc(72 * var(--u)); margin-top: calc(8 * var(--u)); }
.gw-yazilar li { position: absolute; display: grid; gap: 8px; padding: 4px 0 4px 22px; border-left: 1px solid var(--kirmizi); }
.gw-yazilar b { font-size: 12px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--z-metin); }
.gw-yazilar span { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--z-soluk); }
.gw-alt-0 { left: 0; top: 0; }
.gw-alt-1 { left: calc(653 * var(--u)); top: calc(20 * var(--u)); }
.gw-alt-2 { left: calc(1355 * var(--u)); top: calc(20 * var(--u)); }
.urun-bag { margin-top: clamp(36px, 3.4vw, 52px); }
/* Dar ekran: tek sutun; tek kelimelik uzun satirlar ekrana sigar */
@media (max-width: 1023px) {
  .uclu, .yaklasim { grid-template-columns: minmax(0, 1fr); --l-uzat: 0px; }
  .yaklasim .lazer::before { display: none; }
}
@media (max-width: 600px) {
  .ray-bas .sb-baslik { font-size: min(6.2vw, 1.75rem); }
  .yaklasim .sb-baslik { font-size: min(4.6vw, 1.6rem); letter-spacing: .24em; }
}
@media (max-width: 1100px) {
  .gw-yazilar { display: grid; gap: 18px; height: auto; margin-top: 28px; }
  .gw-yazilar li { position: static; }
  .gw-yazilar b, .gw-yazilar span { font-size: 11px; }
}

/* ---------- Hakkimizda kapagi: birebir tasarim/sayfalar/bordoat-page-about.png ----------
   Genis ekranda gorsel sag kenara yaslanir (referansta ekranin %53'u);
   metin ekranin %10.2'sinden baslar; isik cizgisi ekranin solundan
   pencerenin sol kenarina (gorsel genisliginin %11.62'si) kadar uzanir. */
.hk-sahne {
  --hk-kap: max(var(--kenar), (100vw - var(--genislik)) / 2);
  --hk-sol: max(var(--hk-kap), 10.2vw);
  --hk-g: min(53.125vw, 94svh);
  position: relative; overflow: clip;
  padding: calc(var(--baslik-y) + clamp(32px, 5vw, 64px)) 0 clamp(64px, 9vw, 112px);
}
.hk-sahne .kirinti { margin-bottom: clamp(28px, 3vw, 48px); }
.hk-sahne h1.sb-baslik { font-size: clamp(2rem, 3.4vw, 5.6rem); line-height: 1.3; }
.hk-sahne .lazer { margin-block: clamp(22px, 2.4vw, 62px) 0; }
.hk-giris, .hk-alt {
  max-width: 29em;
  font-size: clamp(1rem, .45rem + .62vw, 1.6rem); font-weight: 300; line-height: 1.55; letter-spacing: .06em;
}
.hk-giris { margin-top: clamp(26px, 2.7vw, 70px); color: color-mix(in srgb, var(--z-metin) 84%, transparent); }
.hk-alt { margin-top: 1.05em; line-height: 1.6; color: var(--z-soluk); }
.hk-alt + .hk-alt { margin-top: 1.6em; }
.hk-gorsel { margin: 56px auto 0; width: min(100% - 2 * var(--kenar), 720px); }
@media (min-width: 1024px) {
  .hk-sahne { min-height: 100svh; display: flex; align-items: center; padding-block: calc(var(--baslik-y) + 24px) 96px; }
  .hk-metin { padding-left: calc(var(--hk-sol) - var(--hk-kap)); max-width: calc(100vw - var(--hk-g) * .8838 - var(--hk-kap) - 32px); }
  .hk-gorsel { position: absolute; right: 0; top: 50%; width: var(--hk-g); margin: 0; transform: translateY(-50%); }
  /* Cizgi bolume gore konumlanir; dikeyde basligin hemen altinda kalir */
  .hk-sahne .lazer { position: absolute; left: 0; right: calc(var(--hk-g) * .8838); width: auto; margin: clamp(22px, 2.4vw, 62px) 0 0; }
  .hk-sahne .lazer + .hk-giris { margin-top: calc(clamp(22px, 2.4vw, 62px) + clamp(26px, 2.7vw, 70px)); }
  .hk-sahne .kaydir { left: calc(var(--hk-sol) - 3.4vw); bottom: 7.5%; }
}

/* Tel cizim (tek SVG) */
.gi { color: var(--z-metin); }
.gi-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gi-svg :is(path, circle) { vector-effect: non-scaling-stroke; stroke: currentColor; stroke-width: 1; }
.gi-k { opacity: .13; }
.gi-kf { opacity: .06; }
.gi-kk { opacity: .16; stroke-dasharray: 5 6; }
.gi-kp { opacity: .5; stroke-dasharray: 6 6; }
.gi-c { opacity: .32; }
.gi-cp { opacity: .62; }
.gi-svg .gi-r { stroke: var(--kirmizi); stroke-width: 1.5; opacity: 1; filter: drop-shadow(0 0 5px rgba(200, 40, 58, .6)); }
.gi-svg .gi-rs { stroke: var(--kirmizi); opacity: .35; }
.gi-svg .gi-rk { stroke: var(--kirmizi); opacity: .3; stroke-dasharray: 5 7; }
.gi-svg circle.gi-r { fill: none; }
.gi-svg .gi-n { fill: currentColor; stroke: none; opacity: .75; }
.gi-svg .gi-n--orta { opacity: .45; }
.gi-svg .gi-n--soluk { opacity: .25; }
.gi-simge { opacity: .75; }
.gi-simge :is(path, circle):not(.gi-r) { stroke-width: 1.3; }
.gi-svg .gi-kart { fill: var(--z-zemin, var(--kagit)); opacity: 1; stroke-opacity: .3; }
.gi-y { fill: currentColor; opacity: .5; }
.gi-svg .gi-halka { fill: none; stroke: var(--halka); opacity: 1; }
.gi-marka { font-family: var(--yazi-serif); font-size: 13px; letter-spacing: .6em; }
.gi-kod { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 14.5px; letter-spacing: .02em; }
.gi-kod--k { fill: var(--kirmizi); opacity: .9; }

/* ---------- Hizmetler sayfasi: sekmeli tezgah ----------
   Solda cizimli sekmeler, secili sekmeden pencereye isik cizgisi; sagda
   hizmetin penceresi. Dar ekranda sekmeler ustte bes sutun. */
.sayfa-bas--kisa { padding-bottom: clamp(40px, 4vw, 64px); }
.hz-bolum { padding-top: clamp(48px, 5vw, 80px); }
.hz {
  --hz-ara: clamp(40px, 5vw, 88px);
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 var(--hz-ara); align-items: start;
  scroll-margin-top: calc(var(--baslik-y) + 16px);
}
.hz-sekmeler { position: sticky; top: calc(var(--baslik-y) + 24px); display: grid; border-top: 1px solid var(--z-cizgi); }
.hz-sekme {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 24px;
  width: 100%; padding: clamp(20px, 2vw, 28px) 0; border-bottom: 1px solid var(--z-cizgi);
  text-align: left; color: var(--z-soluk); cursor: pointer; transition: color .25s;
}
.hz-sekme .ray-cizim { width: 64px; height: 40px; margin: 0; color: inherit; opacity: .6; transition: opacity .25s; }
.hz-sekme-ad { font-family: var(--yazi-serif); font-size: clamp(1rem, .8rem + .45vw, 1.2rem); line-height: 1.4; letter-spacing: .26em; text-transform: uppercase; }
.hz-sekme-kisa { display: none; }
.hz-sekme:hover, .hz-sekme[aria-selected="true"] { color: var(--z-metin); }
.hz-sekme[aria-selected="true"] .ray-cizim { opacity: 1; }
.hz-sekme::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: var(--hz-ara); height: 1px;
  background: linear-gradient(90deg, rgba(200, 40, 58, .15), var(--kirmizi)); box-shadow: 0 0 10px rgba(200, 40, 58, .45);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--egri);
}
.hz-sekme[aria-selected="true"]::after { transform: scaleX(1); }
/* Kendiliginden gecis: cizgi --hz-sure boyunca dolar; dolunca siradaki
   sekme (main.js). Pencerenin ustundeyken ya da bolum ekranda degilken durur. */
.hz--oto .hz-sekme[aria-selected="true"]::after { animation: hz-sure var(--hz-sure, 5s) linear both; transition: none; }
.hz--dur .hz-sekme[aria-selected="true"]::after { animation-play-state: paused; }
@keyframes hz-sure { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hz-sekme:focus-visible { outline-offset: -2px; }
.hz-panel { scroll-margin-top: calc(var(--baslik-y) + 16px); }
.js .hz-pencereler { display: grid; }
.js .hz-panel { grid-area: 1 / 1; display: grid; }
.js .hz-panel[data-kapali] { visibility: hidden; pointer-events: none; }
.hz-pencere { display: flex; flex-direction: column; }
.hz-pencere .pencere-ic { flex: 1; display: flex; flex-direction: column; }
.hz-panel.acildi .pencere-ic { animation: hz-gir .55s var(--egri); }
@keyframes hz-gir { from { opacity: 0; transform: translateY(10px); } }
html:not(.js) .hz { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .hz-sekmeler { display: none; }
html:not(.js) .hz-panel + .hz-panel { margin-top: 32px; }
.hz-pencere .pencere-ic { padding: clamp(28px, 3.4vw, 56px); }
.hz-bas { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.hz-bas h2 { font-family: var(--yazi-serif); font-weight: 300; font-size: clamp(1.5rem, 1rem + 1.4vw, 2.5rem); line-height: 1.25; letter-spacing: .22em; text-transform: uppercase; }
.hz-bas a { transition: color .25s; }
.hz-bas a:hover { color: var(--z-isik); }
.hz-bas .ray-cizim { flex: none; width: auto; height: clamp(56px, 6vw, 92px); margin: 0; }
.hz-giris { margin-top: clamp(20px, 2vw, 28px); max-width: 40rem; font-size: var(--fs-giris); font-weight: 300; line-height: 1.55; }
.hz-kimin { display: flex; gap: 20px; margin-top: 28px; padding-block: 18px; border-block: 1px solid var(--p-cizgi); font-size: var(--fs-ufak); color: var(--z-soluk); }
.hz-kimin b { flex: none; padding-top: 2px; font-size: 12px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--z-isik); }
.hz-dahil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px clamp(24px, 3vw, 48px); margin-top: 30px; }
.hz-dahil li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.hz-dahil .simge { margin-top: 3px; color: var(--z-isik); }
.hz-dahil b { font-size: var(--fs-ufak); font-weight: 500; }
.hz-dahil span { grid-column: 2; font-size: var(--fs-kucuk); line-height: 1.55; color: var(--z-soluk); }
.hz-baglar { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--p-cizgi); }
.hz-dahil { margin-bottom: clamp(32px, 3vw, 44px); }
@media (max-width: 1023px) {
  .hz { grid-template-columns: minmax(0, 1fr); }
  .hz-sekmeler { position: static; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 20px; border-top: 0; border-bottom: 1px solid var(--z-cizgi); }
  .hz-sekme { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 10px; padding: 6px 2px 14px; border-bottom: 0; text-align: center; }
  .hz-sekme .ray-cizim { width: 100%; max-width: 56px; height: 30px; }
  .hz-sekme-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hz-sekme-kisa { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
  .hz-sekme::after { left: 18%; top: auto; bottom: -1px; width: 64%; background: var(--kirmizi); }
}
@media (max-width: 640px) {
  .hz-pencere .pencere-ic { padding: 22px 18px 24px; }
  .hz-bas .ray-cizim { display: none; }
  .hz-giris { font-size: 1.0625rem; }
  .hz-kimin { display: block; margin-top: 20px; padding-block: 14px; }
  .hz-kimin b { display: block; margin-bottom: 6px; }
  .hz-dahil { gap: 12px 14px; margin-top: 20px; }
  .hz-dahil li { grid-template-columns: 14px minmax(0, 1fr); gap: 2px 8px; }
  .hz-dahil span { display: none; }
  .hz-dahil b { font-size: 13.5px; line-height: 1.4; }
  .hz-baglar { padding-top: 18px; }
  .hz-dahil { margin-bottom: 24px; }
}

/* ---------- Karsilastirma: siyah sahnede ince cizgili tablo ---------- */
.kiyas { display: grid; gap: clamp(48px, 5vw, 80px); }
.kiyas-tablo { border: 1px solid var(--z-cizgi); background: rgba(242, 237, 228, .015); padding: clamp(4px, 1vw, 16px) clamp(18px, 2.4vw, 36px); }
.kiyas table { font-size: var(--fs-ufak); }
.kiyas thead th { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--z-cizgi); text-align: left; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--z-soluk); }
.kiyas thead th.kiyas-biz { font-family: var(--yazi-serif); font-weight: 400; font-size: 14px; letter-spacing: .42em; color: var(--z-metin); }
.kiyas td, .kiyas tbody th { padding: 20px 16px 20px 0; border-bottom: 1px solid var(--z-cizgi); text-align: left; vertical-align: top; }
.kiyas tbody tr:last-child > * { border-bottom: 0; }
.kiyas tbody th { width: 22%; font-weight: 500; }
.kiyas td:nth-child(2) { color: var(--z-soluk); }
.kiyas td:nth-child(2) .simge { opacity: .45; }
.kiyas td.kiyas-biz .simge { color: var(--z-isik); }
.kiyas td span { display: flex; gap: 12px; align-items: flex-start; }
.kiyas td .simge { flex: none; margin-top: 3px; }
@media (max-width: 700px) {
  .kiyas thead { display: none; }
  /* Dar ekranda satir basina: konu, bizdeki (tikli) ve hazir temadaki
     (soluk, kucuk) alt alta tam genislikte; iki dar sutun sayfayi uzatiyordu */
  .kiyas-tablo { padding-block: 4px; }
  .kiyas tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--z-cizgi); }
  .kiyas tbody tr:last-child { border-bottom: 0; }
  .kiyas td, .kiyas tbody th { border: 0; padding: 0; }
  .kiyas tbody th { width: auto; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--z-isik); }
  .kiyas td.kiyas-biz { order: 1; }
  .kiyas td:nth-child(2) { order: 2; font-size: 13px; }
  .kiyas td span { gap: 10px; }
}

/* ---------- SSS: ince cizgili akordeon, kirmizi arti ---------- */
.sss-duzen { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 40px clamp(40px, 5vw, 96px); align-items: start; }
.sss-liste { border-bottom: 1px solid var(--z-cizgi); }
.sss-liste details { border-top: 1px solid var(--z-cizgi); }
.sss-liste summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-size: var(--fs-giris); font-weight: 400; line-height: 1.35;
  transition: color .25s;
}
.sss-liste summary::-webkit-details-marker { display: none; }
.sss-liste summary .simge { flex: none; color: var(--z-isik); stroke-width: 1.3; transition: transform .35s var(--egri); }
.sss-liste details[open] summary .simge { transform: rotate(45deg); }
.sss-liste summary:hover { color: var(--z-isik); }
.sss-cevap { padding: 0 48px 28px 0; max-width: 44rem; color: var(--z-soluk); }
@media (max-width: 1023px) { .sss-duzen { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Hakkimizda: hikaye bandi ----------
   Arkada bordo at videosu, at karenin sag yarisinda (her karede %44'ten
   saga); metin soldaki bos siyah alanda, atin baslangicina degmez.
   Dar ekranda once video (atli sag yari, kare), alt kenari siyaha erir;
   metin hemen altinda. Ekrandan cikinca video durur (horse.js). */
.hikaye-bant { position: relative; overflow: hidden; }
.hikaye-bant.zemin-koyu { background: #000; }
.hikaye-video { position: absolute; inset: 0; }
.hikaye-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hikaye-video::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .4) 30%, rgba(0, 0, 0, 0) 50%),
              linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 28%);
}
.hikaye-ic { position: relative; z-index: 1; display: flex; align-items: center; min-height: clamp(620px, 52vw, 92svh); padding-block: clamp(72px, 7vw, 112px); }
.hikaye-metin { width: min(32rem, calc(42vw - max(var(--kenar), (100vw - var(--genislik)) / 2))); }
.hikaye-metin > p { margin-top: 1.1em; color: var(--z-soluk); }
/* Isima kirpma kutusunda saf siyah zeminde gri kutu gibi gorunur: burada yok */
.hikaye-bant .sb-baslik { text-shadow: none; }
.hikaye-metin .sb + p { margin-top: 1.4em; }
@media (max-width: 1023px) {
  .hikaye-video { position: relative; height: min(100vw, 62svh); }
  .hikaye-video video { object-position: 100% 50%; }
  .hikaye-video::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 40%); }
  .hikaye-ic { display: block; min-height: 0; margin-top: -48px; padding-block: 0 var(--bolum); }
  .hikaye-metin { width: auto; max-width: 36rem; }
}
/* Sayfanin ilk bolumu olunca: sabit ust basligin altindan baslar, ekrani
   doldurur; kirinti metnin ustunde, kaydir isareti sol altta. */
.hikaye-bant .kaydir { z-index: 1; }
.hikaye-bant--ilk .kirinti { margin-bottom: clamp(28px, 3vw, 48px); }
@media (min-width: 1024px) {
  .hikaye-bant--ilk .hikaye-ic { min-height: 100svh; padding-block: calc(var(--baslik-y) + 24px) 96px; }
}
@media (max-width: 1023px) {
  .hikaye-bant--ilk { padding-top: var(--baslik-y); }
  .hikaye-bant--ilk .kaydir { display: none; }
}
/* Kapak ikinci sirada: ust baslik payi gerekmez */
.hk-sahne--ikinci { padding-top: clamp(64px, 9vw, 112px); }
@media (min-width: 1024px) {
  .hk-sahne.hk-sahne--ikinci { padding-block: 96px; }
}
/* Hakkimizda: vizyon ve misyon — iki sutun, buyuk serif cumle, kart yok */
.vm-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 120px); margin-top: clamp(40px, 5vw, 72px); }
.vm-izgara > div { padding-top: clamp(24px, 2.4vw, 36px); border-top: 1px solid var(--z-cizgi); }
.vm-izgara .sb-etiket { margin-bottom: clamp(16px, 1.6vw, 24px); }
.vm-cumle { font-family: var(--yazi-serif); font-weight: 300; font-size: clamp(1.6rem, 1rem + 1.7vw, 2.9rem); line-height: 1.18; letter-spacing: -.005em; color: var(--z-metin); max-width: 18em; }
.vm-alt { margin-top: clamp(18px, 1.8vw, 28px); max-width: 32em; color: var(--z-soluk); }
@media (max-width: 760px) { .vm-izgara { grid-template-columns: 1fr; } }


/* ---------- Tipografik kapak: ekran goruntusu gelene kadar ---------- */
.kapak-yedek {
  position: absolute; inset: 0;
  display: grid; align-content: end; gap: 10px;
  padding: clamp(24px, 3vw, 44px);
  background: var(--sahne) radial-gradient(ellipse 70% 60% at 85% 0%, rgba(122, 35, 53, .35), transparent 70%); color: var(--acik);
  overflow: hidden;
}
.kapak-yedek::before {
  content: ""; position: absolute; inset: 12px;
  border: 1px solid rgba(200, 40, 58, .3); pointer-events: none;
}
.kapak-yedek > b { font-family: var(--yazi-serif); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.6rem); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; position: relative; }
.kapak-yedek > span { font-size: var(--fs-kucuk); color: var(--kirmizi-acik); position: relative; }
.kapak-yedek img.kapak-amblem { position: absolute; right: -6%; top: -8%; width: 58%; opacity: .12; }
.kapak-yedek--sade img.kapak-amblem { inset: 50% auto auto 50%; width: auto; height: 62%; transform: translate(-50%, -50%); opacity: .22; }
.kapak-yedek .yt-gorsel { position: absolute; inset: auto 12px 12px auto; width: auto; height: auto; min-height: 0; padding: 8px 12px; outline: 0; font-size: 11px; background: var(--bordo); }


/* ---------- Blog kartlari ---------- */
.yazi-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px var(--ara); }
.yazi-kart { display: grid; gap: 16px; align-content: start; }
.yazi-kart-gorsel { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sahne); border: 1px solid var(--z-cizgi); border-radius: 6px; }
.yazi-kart-gorsel img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--egri); }
.yazi-kart:hover .yazi-kart-gorsel img { transform: scale(1.04); }
.yazi-kart-gorsel .kapak-yedek > b { font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -.02em; }
.yazi-kart-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: var(--fs-kucuk); color: var(--z-soluk); }
.yazi-kart-ust b { font-weight: 500; color: var(--z-isik); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.yazi-kart h3 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: -.015em; }
.yazi-kart h3 a::after { content: ""; position: absolute; inset: 0; }
.yazi-kart { position: relative; }
.yazi-kart:hover h3 { color: var(--z-isik); }
.yazi-kart p { color: var(--z-soluk); font-size: var(--fs-ufak); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.yazi-kart--one { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 64px); align-items: center; }
.yazi-kart--one h3 { font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -.03em; }
.yazi-kart--one .yazi-kart-gorsel { grid-row: span 4; }
@media (max-width: 1023px) { .yazi-izgara { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .yazi-izgara { grid-template-columns: 1fr; }
  .yazi-kart--one { grid-template-columns: 1fr; }
  .yazi-kart--one .yazi-kart-gorsel { grid-row: auto; }
}

/* Blog araclari: kategori + arama */
/* Blog: baslik ile liste arasinda ust uste binen bosluklar yok */
.blog-bolum { padding-top: 0; padding-bottom: clamp(56px, 7vw, 120px); }
.blog-arac { display: flex; flex-wrap: wrap; gap: 16px 32px; justify-content: space-between; align-items: center; margin-bottom: clamp(32px, 4vw, 56px); padding-bottom: 16px; border-bottom: 1px solid var(--z-cizgi); }
@media (max-width: 700px) { .blog-arac .arama-kutu { flex: 1 1 100%; } }
/* Suzgec (blog kategorileri, is sektorleri): buyuk harfli yazi, secili olan kirmizi cizgili */
.suzgec { display: flex; flex-wrap: wrap; gap: 6px clamp(20px, 2.4vw, 36px); }
.suzgec a, .suzgec button {
  display: inline-flex; align-items: center; height: 40px; padding: 0;
  font-size: 12.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase;
  color: var(--z-soluk); background: linear-gradient(var(--z-isik), var(--z-isik)) 0 100% / 0 1px no-repeat;
  transition: color .2s, background-size .35s var(--egri);
}
.suzgec a:hover, .suzgec button:hover { color: var(--z-metin); }
.suzgec [aria-current="true"], .suzgec [aria-pressed="true"] { color: var(--z-metin); background-size: 100% 1px; }
.suzgec-satir { margin-bottom: clamp(48px, 5vw, 80px); padding-bottom: 16px; border-bottom: 1px solid var(--z-cizgi); }
.arama-kutu { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--murekkep); min-width: min(100%, 280px); }
.arama-kutu input { flex: 1; border: 0; background: none; height: 40px; outline: 0; font-size: var(--fs-ufak); }
.arama-kutu:focus-within { border-bottom-color: var(--bordo); }
.bos-durum { padding: 0; max-width: 36rem; }
.bos-durum h2 { font-size: var(--fs-h3); }
.bos-durum p { margin-top: 16px; color: var(--metin-soluk); }
.bos-durum .dugme { margin-top: 28px; }

.sayfalama { display: flex; justify-content: center; gap: 8px; margin-top: 72px; }
.sayfalama a, .sayfalama span { min-width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-hap); border: 1px solid var(--cizgi); padding: 0 14px; font-size: var(--fs-ufak); }
.sayfalama [aria-current] { background: var(--bordo); color: var(--kagit); border-color: var(--bordo); }


/* ---------- Makale (blog yazisi) ---------- */
.makale-bas { padding: calc(var(--baslik-y) + 44px + clamp(48px, 7vw, 104px)) 0 clamp(40px, 5vw, 72px); }
.makale-bas h1 { font-size: clamp(2.25rem, 1.5rem + 2.8vw, 4rem); max-width: 20ch; margin-top: 28px; letter-spacing: -.03em; line-height: 1.05; }
.makale-ozet { margin-top: 24px; font-size: var(--fs-giris); color: var(--z-soluk); max-width: 40rem; line-height: 1.5; }
.makale-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px; font-size: var(--fs-kucuk); color: var(--z-soluk); }
.makale-meta a { color: var(--z-vurgu); }
.makale-kapak { margin-top: calc(-1 * clamp(24px, 3vw, 48px)); position: relative; z-index: 1; }
.makale-kapak img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.makale-duzen { display: grid; grid-template-columns: 220px minmax(0, var(--metin-gen)) minmax(0, 1fr); gap: 40px clamp(32px, 4vw, 72px); padding-block: clamp(56px, 7vw, 104px); }
.makale-yan { position: sticky; top: calc(var(--baslik-y) + 32px); align-self: start; font-size: var(--fs-kucuk); }
.makale-yan h2 { font-size: var(--fs-kucuk); font-weight: 500; color: var(--metin-soluk); margin-bottom: 14px; }
.makale-yan li a { display: block; padding: 6px 0 6px 14px; border-left: 1px solid var(--cizgi); color: var(--metin-soluk); line-height: 1.4; transition: color .2s, border-color .2s; }
.makale-yan li a:hover, .makale-yan li a.aktif { color: var(--metin); border-left-color: var(--bordo); }
.makale-paylas { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.makale-paylas a, .makale-paylas button { height: 36px; padding: 0 14px; border: 1px solid var(--cizgi); border-radius: var(--r-hap); display: inline-flex; align-items: center; font-size: var(--fs-kucuk); }
.makale-paylas a:hover, .makale-paylas button:hover { border-color: var(--metin); }
.makale-hizmet {
  margin-top: 56px; padding: 32px; background: var(--bordo-koyu); color: var(--kagit);
  display: grid; gap: 14px; justify-items: start;
}
.makale-hizmet span { font-size: var(--fs-kucuk); color: var(--kirmizi-acik); }
.makale-hizmet h2 { font-size: var(--fs-h4); margin: 0; }
.makale-hizmet p { color: var(--z-soluk); margin: 0; }
@media (max-width: 1100px) {
  .makale-duzen { grid-template-columns: minmax(0, 1fr); max-width: var(--metin-gen); margin-inline: auto; }
  .makale-yan { position: static; order: -1; }
  .makale-yan nav { display: none; }
}


/* ---------- Vaka calismasi ---------- */
.vaka-ozet { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); line-height: 1.2; letter-spacing: -.02em; max-width: 30ch; margin-top: 28px; color: var(--z-soluk); }
.vaka-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px 32px; margin-top: clamp(36px, 4vw, 56px); border-top: 1px solid var(--z-cizgi); padding-top: 24px; }
.vaka-meta dt { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--z-soluk); margin-bottom: 8px; }
.vaka-meta dd { font-size: var(--fs-ufak); }
.vaka-meta dd a { color: var(--z-isik); display: inline-flex; gap: 6px; align-items: center; }
.vaka-pencere .pencere-ic { aspect-ratio: 16 / 10; }
/* Proje adi marka: Turkce buyuk harf (Orion -> ORİON) bozmasin */
.vaka-bas h1.sb-baslik { text-transform: none; letter-spacing: .04em; }
.vaka-bolum { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px clamp(32px, 5vw, 96px); padding-block: clamp(40px, 5vw, 72px); border-top: 1px solid var(--z-cizgi); }
.vaka-bolum:first-child { border-top: 0; }
.vaka-bolum h2 { font-family: var(--yazi-serif); font-weight: 300; font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2.1rem); letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; }
.vaka-bolum .metin-govde { font-size: var(--fs-giris); line-height: 1.55; }
.vaka-galeri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ara); }
.vaka-galeri img { width: 100%; height: auto; }
.vaka-galeri img:first-child,
.vaka-galeri img:last-child:nth-child(even) { grid-column: 1 / -1; } /* cift sayida gorselde sonuncu yalniz kalmasin */
.sonraki-is { display: block; padding-block: clamp(64px, 8vw, 128px); border-top: 1px solid var(--z-cizgi); }
.sonraki-is span { font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--z-soluk); }
.sonraki-is b { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-family: var(--yazi-serif); font-size: clamp(2.2rem, 1rem + 4vw, 5.4rem); font-weight: 300; letter-spacing: .03em; line-height: 1.05; margin-top: 16px; transition: color .3s; }
.sonraki-is:hover b { color: var(--z-isik); }
.sonraki-is .simge { color: var(--z-isik); }
.sonraki-is .simge { flex: none; width: clamp(40px, 5vw, 80px); height: auto; transition: transform .4s var(--egri); }
.sonraki-is:hover .simge { transform: translateX(10px); }
@media (max-width: 760px) {
  .vaka-bolum { grid-template-columns: 1fr; }
  .vaka-galeri { grid-template-columns: 1fr; }
}


/* ---------- Urunler: Referanslar ile ayni duzen (.referans-sahne, .proje-izgara) ----------
   Pencerede ekran goruntusu ekrani kaplar (sol ustten hizali); yoksa acik
   ekranda simge ve ad. Urun sayfasindaki pencere ayni katmani kullanir. */
.pp-git--ekran { display: block; overflow: hidden; }
.pp-git--ekran img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .9s var(--egri); }
.proje-pencere:hover .pp-git--ekran img { transform: scale(1.03); }
.vitrin-cerceve .pencere-ust i:first-child { margin-left: 0; }
.vitrin-cerceve .pencere-ic { position: relative; aspect-ratio: 16 / 10; }
.vitrin-kat { position: absolute; inset: 0; display: block; }
.vitrin-kat img.urun-kapak { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.urun-bos { align-content: center; justify-items: center; gap: 14px; }
.urun-bos .yt { position: absolute; bottom: 12px; font-size: 11px; }
.urun-ikon { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; }
.urun-ikon--buyuk { width: clamp(48px, 5vw, 80px); height: auto; aspect-ratio: 1; border-radius: 22%; }
/* Urun yokken: tek pencerede amblem ve "Yakinda" */
.urun-yakinda-amblem { width: clamp(44px, 4.4vw, 68px); height: auto; }
.urun-yakinda-metin { margin-top: clamp(22px, 2.4vw, 34px); max-width: 38ch; font-size: var(--fs-ufak); font-weight: 300; line-height: 1.6; letter-spacing: .02em; color: var(--z-soluk); }

/* Urun sayfasi: vaka kalibi; pencerede ekran goruntusu, ozellik maddeleri,
   telefon ekran goruntuleri yan yana (dar ekranda yana kayar) */
.urun-bas-detay .pp-baglar { margin-top: 28px; }
.urun-ozellik { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.urun-ozellik li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 !important; }
.urun-ozellik .simge { margin-top: .28em; color: var(--z-isik); }
.urun-galeri { display: flex; flex-wrap: wrap; gap: var(--ara); align-items: flex-start; }
.urun-galeri img { width: clamp(160px, 17vw, 260px); height: auto; border: 1px solid var(--z-cizgi); border-radius: 10px; }
@media (max-width: 700px) {
  .urun-galeri {
    display: grid; grid-auto-flow: column; grid-auto-columns: 64%; gap: 14px;
    margin-inline: calc(-1 * var(--kenar)); padding-inline: var(--kenar); scroll-padding-inline: var(--kenar);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .urun-galeri::-webkit-scrollbar { display: none; }
  .urun-galeri img { width: 100%; scroll-snap-align: start; }
}


/* ---------- Hizmet detay ---------- */
.hizmet-kimin { font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem); line-height: 1.2; letter-spacing: -.02em; max-width: 28ch; }
.dahil-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 96px); }
.dahil-izgara li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 16px; padding: 28px 0; border-top: 1px solid var(--z-cizgi); }
.dahil-izgara li .simge { color: var(--z-isik); margin-top: 3px; }
.dahil-izgara h3 { font-size: var(--fs-h4); font-weight: 400; letter-spacing: 0; }
.dahil-izgara p { grid-column: 2; color: var(--z-soluk); }
.dahil-izgara .sb-bag { grid-column: 2; justify-self: start; margin-top: 12px; } /* Adana sayfasi: vaka baglantisi */
.diger-hizmetler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--z-cizgi); }
.diger-hizmetler a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 28px 24px 28px 0; border-bottom: 1px solid var(--z-cizgi); font-family: var(--yazi-serif); font-size: clamp(1rem, .86rem + .42vw, 1.25rem); font-weight: 400; letter-spacing: .16em; text-transform: uppercase; transition: color .2s; }
.diger-hizmetler a:hover { color: var(--z-isik); }
.diger-hizmetler .simge { color: var(--z-isik); }
@media (max-width: 760px) { .dahil-izgara { grid-template-columns: 1fr; } }


/* ---------- Iletisim ---------- */
.iletisim-duzen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px clamp(40px, 6vw, 112px); align-items: start; }
.iletisim-yan { position: sticky; top: calc(var(--baslik-y) + 32px); display: grid; gap: 48px; }
.iletisim-kanallar li { border-top: 1px solid var(--cizgi); }
.iletisim-kanallar li:last-child { border-bottom: 1px solid var(--cizgi); }
.iletisim-kanallar a, .iletisim-kanallar div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; }
.iletisim-kanallar a:hover b { color: var(--z-isik); }
.iletisim-kanallar .simge { color: var(--z-isik); margin-top: 2px; }
.iletisim-kanallar span { font-size: var(--fs-kucuk); color: var(--metin-soluk); grid-column: 2; }
.iletisim-kanallar b { font-weight: 500; font-size: var(--fs-giris); grid-column: 2; grid-row: 1; transition: color .2s; }
.iletisim-yan h2 { font-size: 12px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--z-isik); margin-bottom: 18px; }
/* Gonderdikten sonra: gercek sira, numarali */
.surec-adimlar { counter-reset: adim; border-bottom: 1px solid var(--z-cizgi); }
.surec-adimlar li { position: relative; padding: 18px 0 18px 52px; border-top: 1px solid var(--z-cizgi); counter-increment: adim; }
.surec-adimlar li::before { content: counter(adim, decimal-leading-zero); position: absolute; left: 0; top: 21px; font-size: 12px; font-weight: 500; letter-spacing: .2em; color: var(--z-isik); }
.surec-adimlar h3 { font-size: var(--fs-govde); font-weight: 500; letter-spacing: 0; }
.surec-adimlar p { margin-top: 4px; font-size: var(--fs-ufak); color: var(--z-soluk); }
@media (max-width: 960px) { .iletisim-duzen { grid-template-columns: 1fr; } .iletisim-yan { position: static; } }

/* Form */
.form { display: grid; gap: 36px; }
.form-satir { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; }
.alan { display: grid; gap: 8px; position: relative; }
.alan label, .alan legend { font-size: var(--fs-kucuk); font-weight: 500; color: var(--metin-soluk); }
.alan label i, .alan legend i { font-style: normal; font-weight: 400; opacity: .8; }
.alan input, .alan textarea {
  width: 100%; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--metin) 35%, transparent); background: none; border-radius: 0;
  padding: 8px 0 12px; font-size: var(--fs-giris); outline: 0; transition: border-color .2s;
}
.alan textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.alan input:focus, .alan textarea:focus { border-bottom-color: var(--bordo); box-shadow: 0 1px 0 var(--bordo); }
.alan input::placeholder, .alan textarea::placeholder { color: color-mix(in srgb, var(--metin) 38%, transparent); }
.alan-sayac { position: absolute; right: 0; bottom: -22px; font-size: 12px; color: var(--metin-soluk); }
.alan [aria-invalid="true"] { border-bottom-color: #A2233B; }
.alan-hata { font-size: var(--fs-kucuk); color: #A2233B; }
fieldset.alan { border: 0; }
.cip-secim { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.cip-secim label { position: relative; cursor: pointer; }
.cip-secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cip-secim span {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border: 1px solid color-mix(in srgb, var(--metin) 25%, transparent); border-radius: var(--r-hap);
  font-size: var(--fs-ufak); color: var(--metin); transition: background-color .2s, color .2s, border-color .2s;
}
.cip-secim label:hover span { border-color: var(--murekkep); }
.cip-secim input:checked + span { background: var(--bordo); color: var(--kagit); border-color: var(--bordo); }
.cip-secim input:focus-visible + span { outline: 2px solid var(--bordo); outline-offset: 3px; }
.onay { display: flex; gap: 14px; align-items: flex-start; font-size: var(--fs-ufak); color: var(--metin-soluk); cursor: pointer; }
.onay input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bordo); }
.onay a { color: var(--bordo); text-decoration: underline; text-underline-offset: 3px; }
.form-alt { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--cizgi); padding-top: 28px; }
.form-alt p { font-size: var(--fs-ufak); color: var(--metin-soluk); }
.form-alt p a { color: var(--metin); text-decoration: underline; text-underline-offset: 3px; }
.form-bal { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-sonuc { padding: 20px 24px; font-size: var(--fs-ufak); border-left: 3px solid var(--bordo); background: var(--kagit-2); }
.form-sonuc--tamam { border-left-color: #2F6B45; }
.form-sonuc[hidden] { display: none; }
.dugme[aria-busy="true"] { opacity: .7; pointer-events: none; }
@media (max-width: 640px) { .form-satir { grid-template-columns: 1fr; } }


/* ---------- Yasal sayfalar ---------- */
.yasal-guncel { font-size: var(--fs-kucuk); color: var(--metin-soluk); margin-bottom: 40px; }


/* ---------- 404: birebir tasarim/sayfalar/bordoat-404-desktop.png / -mobile.png ----------
   Her zaman siyah sahne. Genis ekranda metin ekranin %6.7'sinden baslar;
   isik cizgisi ekranin solundan pencerenin sol kenarina (%75) uzanir;
   pencere sagdan ve alttan tasar. Dar ekranda her sey ortada, pencere
   yok; bolum ekrani doldurur, dugmenin altindaki cizgi bolumun sonuna
   iner. Olculer referansin genisligine gore (--u, en fazla 540 px). */
.kayip {
  position: relative; overflow: clip;
  min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--baslik-y) + 24px) 0 clamp(96px, 13vh, 150px);
  background: radial-gradient(90% 70% at 32% 48%, #0F0E0E 0%, #0A0A0A 55%, #070707 100%);
}
.kayip-ic { width: 100%; padding: 0 calc(25% + 48px) 0 max(var(--kenar), 6.7vw); }
.kayip-etiket {
  font-size: clamp(12px, 1vw, 20px); font-weight: 500; line-height: 1.4;
  letter-spacing: .32em; text-transform: uppercase; color: var(--kirmizi-acik);
}
.kayip h1 {
  margin-top: 2.7vw;
  font-family: var(--yazi-serif); font-weight: 400; font-variation-settings: 'opsz' 72;
  font-size: clamp(2.4rem, 4.75vw, 9rem); line-height: 1.12; letter-spacing: .16em; text-transform: uppercase;
}
/* Gumus harf: ustten alta acilan gri, hafif isima */
.kayip h1 > span {
  background: linear-gradient(180deg, #F6F3EE 0%, #CFCBC5 45%, #8C8883 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  filter: drop-shadow(0 0 16px rgba(242, 237, 228, .14)) drop-shadow(0 2px 1px rgba(0, 0, 0, .7));
}
.kayip-kod { display: none; }
.kayip-metin { margin-top: 1.9vw; font-size: clamp(15px, 1.2vw, 24px); font-weight: 300; line-height: 1.5; letter-spacing: .1em; color: rgba(242, 237, 228, .58); }
.kayip-yol, .kayip-dikey { display: none; }
/* Cizgi bolume gore konumlanir: soldan pencerenin kenarina; dikeyde metnin altinda */
.kayip .lazer { position: absolute; left: 0; right: 25%; width: auto; margin: 2.6vw 0 0; }
.kayip-don {
  margin-top: calc(2.6vw + 3.2vw);
  height: clamp(46px, 2.8vw, 64px); padding: 0 clamp(22px, 1.5vw, 32px);
  gap: clamp(18px, 1.6vw, 30px);
  font-size: clamp(12px, .85vw, 17px); font-weight: 500; letter-spacing: .32em; text-transform: uppercase;
}
.kayip-pencere { position: absolute; left: 75%; top: 22%; width: 28vw; color: var(--acik); }
.gi-svg .k4-zemin { fill: rgba(242, 237, 228, .018); stroke: none; }
.k4-ust { opacity: .46; }
.gi-svg .k4-izgara { opacity: .035; }
.k4-marka { font-size: 12px; opacity: .78; }
.k4-koord { font-size: 12.5px; opacity: .2; }
.kayip .kaydir { left: max(var(--kenar), 6.7vw); bottom: 8.5%; }

@media (max-width: 1023px) {
  .kayip {
    --u: min(1vw, 5.4px);
    display: flex; flex-direction: column; min-height: 100svh; padding: 0; text-align: center;
  }
  .kayip-ic { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 var(--kenar); }
  .kayip-dikey { display: block; position: relative; width: 1px; margin-inline: auto; background: rgba(200, 40, 58, .75); box-shadow: 0 0 6px rgba(200, 40, 58, .45); }
  .kayip-dikey--ust { height: calc(61.3 * var(--u)); background: linear-gradient(180deg, rgba(200, 40, 58, .5), rgba(200, 40, 58, .85) 80%, rgba(200, 40, 58, .6)); }
  /* Parlayan nokta: ustte referanstaki gibi genisligin yarisi kadar
     asagida; alttaki cizgide ortasinda */
  .kayip-dikey::after {
    content: ""; position: absolute; left: -2px; top: calc(50% - 2.5px);
    width: 5px; height: 5px; border-radius: 50%; background: #FFE9EC;
    box-shadow: 0 0 5px 2px #FF4D61, 0 0 18px 6px rgba(200, 40, 58, .55), 0 0 46px 16px rgba(200, 40, 58, .22);
  }
  .kayip-etiket { margin-top: calc(1.4 * var(--u)); font-size: max(12px, calc(2.9 * var(--u))); margin-right: -.32em; }
  .kayip h1 { margin-top: calc(2.4 * var(--u)); font-size: calc(25 * var(--u)); line-height: 1; letter-spacing: .08em; margin-right: -.08em; font-weight: 300; }
  .kayip-kod { display: inline; }
  .kayip-baslik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .kayip-metin, .kayip .lazer, .kayip-pencere { display: none; }
  .kayip-yol {
    display: block; margin-top: calc(3.6 * var(--u));
    font-size: max(12px, calc(3.1 * var(--u))); line-height: 1.5; letter-spacing: .3em; margin-right: -.3em;
    text-transform: uppercase; color: rgba(242, 237, 228, .62);
  }
  .kayip-yol span { display: block; }
  .kayip-yol span:first-child { color: rgba(242, 237, 228, .84); }
  .kayip-don {
    margin-top: calc(7.6 * var(--u)); justify-content: center;
    width: max(220px, calc(43 * var(--u))); height: max(44px, calc(8.4 * var(--u)));
    font-size: max(12px, calc(2.9 * var(--u))); color: var(--kirmizi-acik);
  }
  .kayip-don .simge { display: none; }
  .kayip-dikey--ust::after { top: calc(50 * var(--u) - 2.5px); }
  .kayip-dikey--alt { flex: 1 0 calc(24 * var(--u)); background: linear-gradient(180deg, rgba(200, 40, 58, .75), rgba(200, 40, 58, .35)); }
}



/* ---------- WhatsApp: sabit, nabiz atan ---------- */
.wp-yuzen {
  position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bordo); color: var(--kagit);
  box-shadow: 0 6px 18px rgba(20,17,18,.28);
  transition: transform .3s var(--egri), background-color .2s;
}
.wp-yuzen::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--bordo); animation: nabiz 2.4s ease-out infinite;
}
.wp-yuzen:hover { transform: scale(1.06); background: var(--bordo-parlak); }