/* ============================================================================
   quartbilisim.net — tasarim sistemi v3

   Yon: konu bir yazilim/ag altyapisi firmasi; sitenin omurgasi kutulanmis bir
   sema degil, sayfanin icinden gecen CANLI bir ag. Palet sektorun kendi
   standardindan: fiber optik jaket renk kodlari (OS2 sari, OM4 aqua, OM2
   turuncu). Cesaret tek yerde harcanir: kahraman bolumundeki orkestre edilmis
   yuklenme sekansi ve akan paketler. Geri kalan her sey disiplinli tutulur.

   Tipografi: Archivo Exp (wdth 125) buyuk baslikta — genisletilmis eksen
   muhendislik/altyapi hissi verir ve nadir kullanilir. Govde IBM Plex Sans,
   teknik veri IBM Plex Mono. Hepsi kendi sunucumuzda.
   ========================================================================== */

@import url('/assets/css/fontlar.css');

:root {
  --os2:       #F0C000;
  --os2-koyu:  #C39D00;
  --om4:       #24C3C7;
  --om4-koyu:  #0F8E92;
  --om2:       #E8763A;

  --gece:      #080C10;
  --kasa:      #0E1520;
  --kasa-2:    #161F2C;
  --kasa-3:    #22303F;
  --hat:       #2C3D4F;

  --kagit:     #F4F5F3;
  --kagit-2:   #E9EBE7;
  --murekkep:  #0B1016;
  --soluk:     #58666F;
  --cizgi:     #D9DDD8;

  --ak:        #E8EDF2;   /* koyu zeminde govde metni */
  --ak-soluk:  #93A6B5;

  --hata:      #C2352A;
  --basari:    #12724A;

  --display: 'Archivo Exp', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --govde:   'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --en: 1300px;
  --r: 2px;
  --gecis: 260ms cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--govde);
  font-size: 17px;
  line-height: 1.62;
  color: var(--murekkep);
  background: var(--kagit);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;   /* kahraman arka plan cizgileri tasarken yatay kaydirma olmasin */
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--om4-koyu); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.02; font-weight: 700; }
h1, h2 { font-family: var(--display); letter-spacing: -.02em; text-transform: uppercase; }
/* Archivo Exp genisletilmis oldugu icin ayni punto normal bir gorseklten
   cok daha genis yer kaplar; ust sinir buna gore dusuruldu. */
h1 { font-size: clamp(2.2rem, 4.9vw, 4.4rem); overflow-wrap: normal; word-break: keep-all; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); overflow-wrap: break-word; }
h3 { font-family: var(--govde); font-size: 1.28rem; letter-spacing: -.015em; line-height: 1.25; }
h4 { font-family: var(--govde); font-size: 1.05rem; }
p { margin: 0 0 1.1em; }

:focus-visible { outline: 3px solid var(--om4); outline-offset: 3px; }

.kapsayici { width: 100%; max-width: var(--en); margin: 0 auto; padding: 0 28px; }

.etiket {
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--soluk);
}
.koyu-alan .etiket, .kahraman .etiket { color: var(--os2); }

.atla-baglantisi { position: absolute; left: -9999px; background: var(--os2); color: var(--gece);
  padding: 12px 20px; font-family: var(--mono); font-size: .85rem; z-index: 300; }
.atla-baglantisi:focus { left: 0; top: 0; }

/* ============================== ustbar / baslik ========================== */
.ustbar { background: var(--gece); border-bottom: 1px solid var(--kasa-3); }
.ustbar .kapsayici { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center;
  min-height: 38px; font-family: var(--mono); font-size: .76rem; color: var(--ak-soluk); }
.ustbar a { color: var(--ak-soluk); }
.ustbar a:hover { color: var(--os2); text-decoration: none; }
.ustbar .ayirici { color: var(--kasa-3); }

.site-baslik { background: var(--gece); position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent; transition: border-color var(--gecis), background var(--gecis); }
.site-baslik.kaydi { border-bottom-color: var(--kasa-3); background: rgba(8,12,16,.92);
  backdrop-filter: blur(10px) saturate(140%); }
.site-baslik .kapsayici { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px; }

.logo { display: flex; align-items: baseline; gap: 10px; }
.logo:hover { text-decoration: none; }
.logo-ad { font-family: var(--display); font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; letter-spacing: -.01em; color: #fff; }
.logo-alt { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--os2); }
.logo img { max-height: 38px; }

.gezinti ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.gezinti a { display: block; padding: 9px 14px; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ak-soluk); position: relative; }
.gezinti a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--os2); transform: scaleX(0); transform-origin: left;
  transition: transform var(--gecis); }
.gezinti a:hover { color: #fff; text-decoration: none; }
.gezinti a:hover::after { transform: scaleX(1); }
.gezinti a[aria-current="page"] { color: var(--os2); }
.gezinti a[aria-current="page"]::after { transform: scaleX(1); }

.menu-dugme { display: none; background: none; border: 1px solid var(--kasa-3);
  padding: 10px 12px; cursor: pointer; border-radius: var(--r); }
.menu-dugme span { display: block; width: 20px; height: 2px; background: var(--ak-soluk); margin: 4px 0; }

/* ================================= dugme ================================= */
.dugme {
  display: inline-flex; align-items: center; gap: 10px; position: relative;
  padding: 15px 28px; border: 2px solid var(--om4-koyu); border-radius: var(--r);
  background: var(--om4-koyu); color: #fff; overflow: hidden;
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  transition: color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme::before { content: ""; position: absolute; inset: 0; background: var(--om4);
  transform: translateY(101%); transition: transform var(--gecis); z-index: 0; }
.dugme > * , .dugme { position: relative; }
.dugme span, .dugme svg { position: relative; z-index: 1; }
.dugme:hover { text-decoration: none; color: #fff; border-color: var(--om4); transform: translateY(-2px); }
.dugme:hover::before { transform: translateY(0); }

.dugme.imza { background: var(--os2); border-color: var(--os2); color: var(--gece); }
.dugme.imza::before { background: #FFD426; }
.dugme.imza:hover { color: var(--gece); border-color: #FFD426; }

.dugme.hat { background: transparent; color: var(--om4-koyu); }
.dugme.hat::before { background: var(--om4-koyu); }
.dugme.hat:hover { color: #fff; }

.dugme.hat-acik { background: transparent; border-color: var(--kasa-3); color: var(--ak); }
.dugme.hat-acik::before { background: var(--kasa-2); }
.dugme.hat-acik:hover { color: #fff; border-color: var(--os2); }

/* ============================== kahraman ================================= */
.kahraman { position: relative; background: var(--gece); color: #fff; overflow: hidden;
  padding: 96px 0 104px; }

/* arka plan: ince grid + iki radyal isik. Dekoratif ama sakin; asil olay sema. */
.kahraman::before {
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(44,61,79,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,61,79,.30) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 78%);
  pointer-events: none;
}
.kahraman::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(46rem 26rem at 82% 8%,  rgba(36,195,199,.13), transparent 70%),
    radial-gradient(38rem 22rem at 6% 92%, rgba(240,192,0,.09),  transparent 70%);
}
.kahraman .kapsayici { position: relative; z-index: 2; }

.kahraman-izgara { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 60px; align-items: center; }
.kahraman h1 { color: #fff; margin: 18px 0 26px; }
.kahraman h1 em { font-style: normal; color: var(--os2); }
.kahraman .giris { font-size: 1.16rem; color: var(--ak-soluk); max-width: 52ch; margin-bottom: 34px; }
.kahraman .dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- canli topoloji ---- */
.ag { position: relative; }
.ag-cerceve { border: 1px solid var(--hat); background: rgba(8,12,16,.62);
  border-radius: var(--r); padding: 20px 20px 16px; backdrop-filter: blur(4px); }
.ag-ust { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--hat); }
.ag-nokta { display: inline-flex; align-items: center; gap: 7px; }
.ag-nokta i { width: 7px; height: 7px; border-radius: 50%; background: var(--om4);
  animation: nabiz 2.4s ease-out infinite; }
@keyframes nabiz {
  0%   { box-shadow: 0 0 0 0 rgba(36,195,199,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(36,195,199,0); }
  100% { box-shadow: 0 0 0 0 rgba(36,195,199,0); }
}
.ag-kaydir { overflow-x: auto; width: 100%; }
.ag svg { width: 100%; height: auto; }

/* yuklenme sekansi: hatlar cizilir, kutular belirir, sonra paketler akar */
.ag .hat-yol { stroke-dasharray: 300; stroke-dashoffset: 300; animation: ciz 1.05s ease-out forwards; }
@keyframes ciz { to { stroke-dashoffset: 0; } }
.ag .dugum { opacity: 0; animation: bel .5s ease-out forwards; }
@keyframes bel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ag .paket { opacity: 0; animation: paket-gor .4s ease-out forwards; }
@keyframes paket-gor { to { opacity: 1; } }

/* asama secimi */
.ag-asamalar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--hat); }
.ag-asama {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border: 1px solid var(--hat); border-radius: var(--r);
  background: transparent; color: var(--ak-soluk); cursor: pointer;
  transition: color var(--gecis), border-color var(--gecis), background var(--gecis);
}
.ag-asama:hover { color: #fff; border-color: var(--kasa-3); }
.ag-asama[aria-selected="true"] { color: var(--gece); background: var(--os2); border-color: var(--os2); }
.ag-aciklama { margin-top: 12px; font-size: .93rem; color: var(--ak-soluk); min-height: 3.1em; }
.ag-aciklama strong { color: #fff; font-weight: 600; }

/* sema vurgusu */
.ag svg .vurgu-dis { transition: opacity var(--gecis); }
.ag[data-asama] svg .vurgu-dis { opacity: .22; }
.ag[data-asama] svg .vurgu-dis[data-a~="hepsi"] { opacity: 1; }
.ag[data-asama="kimlik"]  svg .vurgu-dis[data-a~="kimlik"]  { opacity: 1; }
.ag[data-asama="fatura"]  svg .vurgu-dis[data-a~="fatura"]  { opacity: 1; }
.ag[data-asama="log"]     svg .vurgu-dis[data-a~="log"]     { opacity: 1; }
.ag[data-asama="hotspot"] svg .vurgu-dis[data-a~="hotspot"] { opacity: 1; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono);
  font-size: .68rem; letter-spacing: .06em; color: var(--soluk); }
.koyu-alan .legend span, .kahraman .legend span { color: var(--ak-soluk); }
.legend i { width: 13px; height: 3px; border-radius: 2px; flex: none; }

/* ================================ bolum ================================= */
.bolum { padding: 96px 0; }
.bolum.ikinci { background: var(--kagit-2); }
.bolum.koyu-alan { background: var(--kasa); color: var(--ak); }
.bolum.koyu-alan h2, .bolum.koyu-alan h3 { color: #fff; }
.bolum.koyu-alan p { color: var(--ak-soluk); }

.bolum-baslik { max-width: 64ch; margin-bottom: 52px; }
.bolum-baslik h2 { margin: 14px 0 .35em; }
.bolum-baslik p { color: var(--soluk); margin: 0; font-size: 1.05rem; }
.bolum-baslik.genis { max-width: none; display: flex; flex-wrap: wrap; gap: 24px;
  align-items: flex-end; justify-content: space-between; }

/* kaydirmada ortaya cikma */
.gir { opacity: 0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s ease-out; }
.gir.gorunur { opacity: 1; transform: none; }

/* ============================ proje vitrini ============================== */
/* Bir yazilim firmasinin sitesinde en ikna edici bolum portfolyodur; bu yuzden
   projeler tam genislikte ve en buyuk gorsel agirlikta sunulur. */
.proje-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.proje-izgara.tekli { grid-template-columns: 1fr; }

.proje {
  position: relative; display: block; overflow: hidden;
  background: var(--kasa); border: 1px solid var(--hat); border-radius: var(--r);
  color: #fff; min-height: 340px;
  transition: transform var(--gecis), border-color var(--gecis);
}
.proje:hover { text-decoration: none; transform: translateY(-4px); border-color: var(--om4); }
.proje-gorsel { position: absolute; inset: 0; z-index: 1; background: center/cover no-repeat;
  opacity: .40; transition: opacity var(--gecis), transform 700ms cubic-bezier(.2,.7,.3,1); }
.proje:hover .proje-gorsel { opacity: .58; transform: scale(1.05); }

/* Kartlarda metin altta duruyor. Kapaklar acik renkli urun ekran goruntusu
   oldugu icin tek gradyan yetmiyordu: metnin durdugu alt bolge maskeli
   bulaniklikla ayristirilir (slider'daki ayni teknik). */
.proje::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  backdrop-filter: blur(7px) saturate(112%);
  -webkit-backdrop-filter: blur(7px) saturate(112%);
  mask-image: linear-gradient(to top, #000 0%, #000 52%, transparent 76%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 52%, transparent 76%);
}
.proje::after { content: ""; position: absolute; inset: 0;
  /* ust kenarda da koyulasma: kategori/yil etiketleri hareketli gorsellerin
     uzerinde okunabilir kalsin */
  z-index: 3;
  background:
    linear-gradient(to top,
      rgba(8,12,16,.99) 0%, rgba(8,12,16,.955) 44%, rgba(8,12,16,.64) 70%, rgba(8,12,16,.34) 100%),
    linear-gradient(to bottom, rgba(8,12,16,.80) 0%, rgba(8,12,16,0) 24%); }
.proje-govde { position: relative; z-index: 4; display: flex; flex-direction: column;
  height: 100%; min-height: 340px; padding: 28px; justify-content: flex-end; }
.proje-ust { position: absolute; z-index: 4; top: 24px; left: 28px; right: 28px; display: flex;
  flex-wrap: wrap; gap: 8px 16px; }
.proje-ust .etiket { color: var(--os2); }
.proje h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.6rem;
  letter-spacing: -.01em; color: #fff; margin-bottom: 10px; }
.proje p { color: var(--ak-soluk); font-size: .96rem; margin: 0 0 16px; max-width: 54ch; }
.proje-tek { display: flex; flex-wrap: wrap; gap: 6px; }
.proje-tek span { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ak-soluk);
  border: 1px solid var(--kasa-3); border-radius: var(--r); padding: 4px 9px; }
/* Acik zeminde (proje detay yan kolonu) cip renkleri */
.koyu-cip { margin-top: 4px; }
.koyu-cip span { color: var(--soluk); border-color: var(--cizgi); background: var(--kagit-2); }

.proje-devam { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--os2); margin-top: 4px; }

/* ============================ urun panelleri ============================= */
.urun-liste { display: grid; gap: 2px; background: var(--hat); border: 1px solid var(--hat); }
.urun-oge {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 30px;
  align-items: center; padding: 28px 28px 28px 24px; background: var(--kasa);
  border-left: 4px solid transparent; transition: background var(--gecis), border-left-color var(--gecis);
}
.urun-oge:nth-child(3n+1) { border-left-color: var(--os2); }
.urun-oge:nth-child(3n+2) { border-left-color: var(--om4); }
.urun-oge:nth-child(3n+3) { border-left-color: var(--om2); }
.urun-oge:hover { background: var(--kasa-2); }
.urun-gorsel { width: 180px; aspect-ratio: 16/10; background: var(--kasa-2) center/cover no-repeat;
  border: 1px solid var(--hat); border-radius: var(--r); }
.urun-oge h3 { color: #fff; margin-bottom: 8px; font-size: 1.24rem; }
.urun-oge h3 a { color: #fff; }
.urun-oge h3 a:hover { color: var(--os2); text-decoration: none; }
.urun-oge p { color: var(--ak-soluk); font-size: .96rem; margin: 8px 0 0; max-width: 66ch; }
.urun-nitelik { display: flex; flex-wrap: wrap; gap: 6px 14px; }

/* ============================== hizmetler ================================ */
.hizmet-izgara { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; }
.hizmet-oge { padding: 30px 0; border-top: 1px solid var(--cizgi); }
.hizmet-oge h3 { margin-bottom: 8px; }
.hizmet-oge h3 a { color: var(--murekkep); }
.hizmet-oge h3 a:hover { color: var(--om4-koyu); text-decoration: none; }
.hizmet-oge p { color: var(--soluk); font-size: .97rem; margin: 0 0 12px; }
.hizmet-oge .devam { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }

/* ================================ deger ================================== */
.deger-izgara { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hat); }
.deger { background: var(--kasa); padding: 30px 26px; }
.deger .isaret { display: block; width: 20px; height: 3px; background: var(--os2); margin-bottom: 18px; }
.deger h3 { color: #fff; font-size: 1.06rem; margin-bottom: 8px; }
.deger p { color: var(--ak-soluk); font-size: .93rem; margin: 0; }

/* ================================= blog ================================== */
.yazi-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.yazi { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--cizgi);
  border-radius: var(--r); overflow: hidden; transition: transform var(--gecis), border-color var(--gecis); }
.yazi:hover { transform: translateY(-3px); border-color: var(--om4); }
.yazi .gorsel { aspect-ratio: 16/9; background: var(--kagit-2) center/cover no-repeat; }
.yazi .govde { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.yazi h3 { font-size: 1.1rem; margin-bottom: 10px; }
.yazi h3 a { color: var(--murekkep); }
.yazi h3 a:hover { color: var(--om4-koyu); text-decoration: none; }
.yazi p { color: var(--soluk); font-size: .94rem; margin: 0 0 16px; }
.yazi .devam { margin-top: auto; font-family: var(--mono); font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase; }
.yazi time { display: block; margin-bottom: 8px; }

/* ================================= cagri ================================= */
.cagri { position: relative; overflow: hidden; background: var(--gece); color: #fff;
  border-radius: var(--r); border-left: 4px solid var(--os2); padding: 56px 48px;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.cagri::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(30rem 18rem at 88% 20%, rgba(36,195,199,.15), transparent 70%); }
.cagri > * { position: relative; z-index: 1; }
.cagri h2 { color: #fff; margin: 10px 0 .25em; font-size: clamp(1.7rem, 3vw, 2.5rem); }
.cagri p { color: var(--ak-soluk); margin: 0; max-width: 48ch; }

/* =============================== sayfa ust =============================== */
.sayfa-ust { position: relative; background: var(--gece); color: #fff; padding: 72px 0 76px; overflow: hidden; }
.sayfa-ust::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(44,61,79,.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,61,79,.26) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(110% 100% at 20% 0%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(110% 100% at 20% 0%, #000 35%, transparent 80%); }
.sayfa-ust .kapsayici { position: relative; z-index: 2; }
.sayfa-ust h1 { color: #fff; margin: 16px 0 0; font-size: clamp(2rem, 4.2vw, 3.6rem); }
.kirinti { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.kirinti li { color: var(--soluk); }
.kirinti a { color: var(--ak-soluk); }
.kirinti a:hover { color: var(--os2); text-decoration: none; }
.kirinti li + li::before { content: "/"; margin-right: 10px; color: var(--kasa-3); }

/* ================================ makale ================================= */
.makale-duzen { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 60px; align-items: start; }
.makale { font-size: 1.06rem; max-width: 72ch; }
.makale > :first-child { margin-top: 0; }
.makale h2 { font-family: var(--govde); text-transform: none; letter-spacing: -.015em;
  font-size: 1.6rem; margin-top: 1.8em; }
.makale h3 { font-size: 1.24rem; margin-top: 1.6em; }
.makale img { border-radius: var(--r); margin: 28px 0; border: 1px solid var(--cizgi); }
.makale ul, .makale ol { padding-left: 1.25em; }
.makale li { margin-bottom: .45em; }
.makale a { text-decoration: underline; text-underline-offset: 3px; }
.makale table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: .95rem; }
.makale th, .makale td { border: 1px solid var(--cizgi); padding: 11px 13px; text-align: left; }
.makale th { background: var(--kagit-2); font-family: var(--mono); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; }
.makale blockquote { margin: 26px 0; padding: 2px 0 2px 22px; border-left: 3px solid var(--os2); color: var(--soluk); }

.yan { position: sticky; top: 96px; }
.yan h4 { font-family: var(--mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: 14px; padding-bottom: 10px;
  border-bottom: 1px solid var(--cizgi); }
.yan ul { list-style: none; margin: 0 0 26px; padding: 0; }
.yan li { border-bottom: 1px solid var(--cizgi); }
.yan li a { display: block; padding: 11px 0; color: var(--murekkep); font-size: .95rem; }
.yan li a:hover { color: var(--om4-koyu); text-decoration: none; }
.kunye-satir { display: flex; flex-direction: column; gap: 2px; padding: 11px 0;
  border-bottom: 1px solid var(--cizgi); }
.kunye-satir .etiket { font-size: .66rem; }

.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 28px 0; }
.galeri img { border-radius: var(--r); aspect-ratio: 4/3; object-fit: cover; margin: 0; }

/* ================================= form ================================== */
.form-satir { margin-bottom: 20px; }
.form-satir label { display: block; font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase; color: var(--soluk); margin-bottom: 7px; }
.form-satir .ipucu { text-transform: none; letter-spacing: 0; font-weight: 400; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], input[type=url], select, textarea {
  width: 100%; padding: 14px 15px; font-family: var(--govde); font-size: 1rem;
  color: var(--murekkep); background: #fff; border: 1px solid #BBC4BC; border-radius: var(--r);
  transition: border-color var(--gecis), box-shadow var(--gecis); }
textarea { min-height: 158px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--om4);
  box-shadow: 0 0 0 3px rgba(36,195,199,.16); outline: none; }
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.uyari { padding: 15px 18px; border-radius: var(--r); margin-bottom: 24px; font-size: .96rem;
  border-left: 3px solid; }
.uyari.basari { background: #E8F4EE; color: var(--basari); border-color: var(--basari); }
.uyari.hata   { background: #FBEAE8; color: var(--hata);   border-color: var(--hata); }
.uyari.bilgi  { background: #E4F6F6; color: var(--om4-koyu); border-color: var(--om4); }

/* =============================== iletisim ================================ */
.iletisim-duzen { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 60px; align-items: start; }
.kunye { background: var(--gece); color: #fff; border-radius: var(--r);
  border-top: 3px solid var(--os2); padding: 32px 30px; }
.kunye dl { margin: 0; }
.kunye dt { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--os2); margin-top: 26px; }
.kunye dt:first-of-type { margin-top: 0; }
.kunye dd { margin: 7px 0 0; font-size: 1rem; color: var(--ak); }
.kunye a { color: var(--ak); }
.kunye a:hover { color: var(--os2); }
.harita { margin-top: 26px; border: 1px solid var(--cizgi); border-radius: var(--r); overflow: hidden; }
.harita iframe { display: block; width: 100%; height: 290px; border: 0; }

/* ================================ altlik ================================= */
.site-altlik { background: var(--gece); color: var(--ak-soluk); padding: 72px 0 0; margin-top: 0; font-size: .95rem; }
.site-altlik h4 { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .15em;
  text-transform: uppercase; color: var(--os2); margin-bottom: 18px; }
.site-altlik a { color: var(--ak-soluk); }
.site-altlik a:hover { color: #fff; }
.altlik-izgara { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 56px; }
.site-altlik ul { list-style: none; margin: 0; padding: 0; }
.site-altlik li + li { margin-top: 10px; }
.altlik-alt { border-top: 1px solid var(--kasa-3); padding: 24px 0; display: flex; flex-wrap: wrap;
  gap: 12px; justify-content: space-between; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .06em; color: var(--soluk); }
.sosyal { display: flex; gap: 8px; margin-top: 20px; }
.sosyal a { padding: 6px 11px; border: 1px solid var(--kasa-3); border-radius: var(--r);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.sosyal a:hover { border-color: var(--os2); color: var(--os2); text-decoration: none; }

/* ================================ yardimci =============================== */
.bos-durum { padding: 60px 26px; text-align: center; color: var(--soluk); background: #fff;
  border: 1px dashed var(--cizgi); border-radius: var(--r); font-family: var(--mono); font-size: .9rem; }
.koyu-alan .bos-durum { background: var(--kasa-2); border-color: var(--hat); color: var(--ak-soluk); }
.merkez { text-align: center; }

/* ================================= mobil ================================= */
@media (max-width: 1080px) {
  .kahraman-izgara { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .makale-duzen, .iletisim-duzen { grid-template-columns: minmax(0, 1fr); }
  .yan { position: static; }
  .yazi-izgara { grid-template-columns: repeat(2, 1fr); }
  .deger-izgara { grid-template-columns: repeat(2, 1fr); }
  .altlik-izgara { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 820px) {
  body { font-size: 16px; }
  .menu-dugme { display: block; }
  .site-baslik .kapsayici { position: relative; min-height: 66px; }
  .gezinti { position: absolute; left: 0; right: 0; top: 100%; background: var(--kasa);
    border-top: 1px solid var(--kasa-3); padding: 8px 28px 18px; display: none; z-index: 60; }
  .gezinti.acik { display: block; }
  .gezinti ul { flex-direction: column; }
  .gezinti a { padding: 13px 4px; border-bottom: 1px solid var(--kasa-3); }
  .gezinti a::after { display: none; }

  .kahraman { padding: 60px 0 70px; }
  .bolum { padding: 62px 0; }
  .proje-izgara, .hizmet-izgara, .yazi-izgara, .deger-izgara { grid-template-columns: minmax(0, 1fr); }
  .urun-oge { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
  .urun-gorsel { width: 100%; max-width: 280px; }
  .cagri { padding: 36px 26px; }
  .form-ikili { grid-template-columns: 1fr; }
  .altlik-izgara { grid-template-columns: 1fr; gap: 32px; }
  .proje, .proje-govde { min-height: 300px; }
}

@media (max-width: 620px) {
  .ag svg { min-width: 430px; }
  .ag-kaydir { margin: 0 -4px; padding: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .001ms !important; }
  .gir { opacity: 1; transform: none; }
  .ag .hat-yol { stroke-dashoffset: 0; }
  .ag .dugum, .ag .paket { opacity: 1; }
}

@media print {
  .ustbar, .site-baslik, .site-altlik, .cagri, .menu-dugme, .yan, .ag-asamalar { display: none; }
  body { background: #fff; font-size: 11pt; overflow: visible; }
  .kahraman, .sayfa-ust, .bolum.koyu-alan { background: #fff; color: #000; }
  .kahraman h1, .sayfa-ust h1, .bolum.koyu-alan h2, .bolum.koyu-alan h3 { color: #000; }
  .kahraman::before, .kahraman::after, .sayfa-ust::before { display: none; }
}

/* ============================================================================
   v4 — konumlandirma: tek urun degil, yetkinlik. Kahraman tam genislikte
   buyuk beyan + hareketli alan seridi; hemen altinda rakam bandi.
   ========================================================================== */

/* --------------------------- kahraman (tam genislik) --------------------- */
.kahraman.genis { padding: 104px 0 0; }
.kahraman.genis .kahraman-izgara { display: block; }
/* max-width: ch KULLANMA — ch kapsayicinin fontuna gore cozulur, icindeki
   Archivo Exp basligin genisligiyle ilgisi yoktur ve basligi harf harf
   alt alta dusurur. Satirlar zaten .satir span'leriyle kuruluyor. */
.kahraman-beyan { max-width: none; }
.kahraman.genis h1 { font-size: clamp(2.4rem, 6.2vw, 5.6rem); line-height: .95;
  margin: 22px 0 0; overflow-wrap: normal; word-break: keep-all; }
.kahraman.genis h1 .satir { display: block; }
.kahraman.genis h1 .vurgulu { color: var(--os2); }
.kahraman-alt {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 56px; align-items: end; margin-top: 40px;
}
.kahraman-alt .giris { font-size: 1.2rem; color: var(--ak-soluk); max-width: 46ch; margin: 0 0 26px; }

/* alan seridi (marquee): ne yaptigimizi tek bakista genis gosterir */
.serit-akis {
  margin-top: 64px; border-top: 1px solid var(--kasa-3); border-bottom: 1px solid var(--kasa-3);
  overflow: hidden; position: relative;
}
.serit-akis-ic { display: flex; width: max-content; animation: kay 38s linear infinite; }
.serit-akis:hover .serit-akis-ic { animation-play-state: paused; }
@keyframes kay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.serit-akis span {
  display: inline-flex; align-items: center; gap: 26px;
  padding: 18px 26px; white-space: nowrap;
  font-family: var(--display); font-size: clamp(1rem, 1.7vw, 1.5rem);
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ak);
}
.serit-akis span i { width: 6px; height: 6px; border-radius: 50%; background: var(--os2); flex: none; }
.serit-akis::before, .serit-akis::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.serit-akis::before { left: 0;  background: linear-gradient(to right, var(--gece), transparent); }
.serit-akis::after  { right: 0; background: linear-gradient(to left,  var(--gece), transparent); }

/* ------------------------------ rakam bandi ----------------------------- */
.rakam-bandi { background: var(--kasa); border-bottom: 1px solid var(--hat); }
.rakam-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--hat); }
.rakam { background: var(--kasa); padding: 34px 26px; }
.rakam b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1; color: var(--os2);
  letter-spacing: -.02em;
}
.rakam .ad { display: block; margin-top: 10px; font-weight: 600; color: #fff; font-size: 1rem; }
.rakam .not { display: block; margin-top: 4px; font-size: .88rem; color: var(--ak-soluk); }

/* ---------------------------- yetkinlik alanlari ------------------------- */
.alan-izgara { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--cizgi); }
.alan {
  position: relative; background: #fff; padding: 34px 30px 30px; overflow: hidden;
  transition: background var(--gecis);
}
.alan::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--om4); transform: scaleY(0); transform-origin: top;
  transition: transform var(--gecis);
}
.alan:hover { background: #FBFCFB; }
.alan:hover::before { transform: scaleY(1); }
.alan h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.15rem;
  letter-spacing: -.005em; margin-bottom: 12px; }
.alan p { color: var(--soluk); font-size: .96rem; margin: 0 0 16px; }
.alan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.alan li {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--soluk); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 4px 9px;
}

/* --------------------------- urun bolumu (kendi urunler) ---------------- */
.urun-ust-not { color: var(--ak-soluk); font-size: .96rem; margin: -30px 0 34px; }

@media (max-width: 1080px) {
  .kahraman-alt { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
  .alan-izgara { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .kahraman.genis { padding: 60px 0 0; }
  .kahraman.genis h1 { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .kahraman-beyan { max-width: none; }
  .alan-izgara { grid-template-columns: minmax(0, 1fr); }
  .serit-akis { margin-top: 40px; }
  .rakam { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .serit-akis-ic { animation: none; }
}

/* Topoloji semasi acik zeminli urun detay sayfasinda da kullanilir:
   cerceve kendi koyu zeminini tasir, cevresindeki metinden ayrisir. */
.makale .ag { margin: 0; }
.makale .ag-cerceve { background: var(--gece); border-color: var(--hat); }
.makale .ag-aciklama, .makale .legend span { color: var(--ak-soluk); }
.makale .ag-asama { color: var(--ak-soluk); border-color: var(--hat); }
.makale .ag-asama:hover { color: #fff; }

/* Panelde kullanilan ikincil dugme (v3 paletine gore) */
.dugme.ikincil { background: transparent; border-color: #B9C2BB; color: var(--murekkep); }
.dugme.ikincil::before { background: var(--kagit-2); }
.dugme.ikincil:hover { color: var(--murekkep); border-color: var(--om4); }

/* ============================================================================
   v5 — hareketli bilesenler: tam ekran urun slider'i, sayac animasyonu,
   proje karuseli, sekmeli uzmanlik bolumu.
   Tamami vanilla; harici kutuphane yok. JS kapaliysa her bilesen statik ve
   eksiksiz calisir (slider ilk slaydi gosterir, karusel yatay kaydirilir,
   sekmelerin hepsi alt alta gorunur). prefers-reduced-motion'da hareket durur.
   ========================================================================== */

/* ------------------------------ HERO SLIDER ----------------------------- */
.vitrin { position: relative; background: var(--gece); overflow: hidden;
  min-height: min(88vh, 820px); display: flex; align-items: stretch; }

.vitrin-raf { position: absolute; inset: 0; }
.vitrin-slayt {
  position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms;
}
.vitrin-slayt.etkin { opacity: 1; visibility: visible; }
.vitrin-gorsel {
  position: absolute; inset: 0; z-index: 1;
  background: 78% center/cover no-repeat; transform: scale(1.04);
}

/* Metnin durdugu sol tarafta arka plani bulaniklastirir. Slaytlarin her biri
   farkli kompozisyonda bir urun ekran goruntusu; sabit bir gradyan hepsinde
   yetmiyor, ekranin kendi yazilari basligin arkasindan siziyordu. Maskeli
   bulaniklik sagi net birakir, urun gorunur kalir. */
.vitrin-slayt::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  backdrop-filter: blur(9px) saturate(115%);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 66%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 44%, transparent 66%);
}
.vitrin-slayt.etkin .vitrin-gorsel { animation: kenburns 11s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.16); } }
.vitrin-slayt::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    /* Sol tarafta metin var: acik renkli urun ekranlarinin kendi yazilari
       sizmasin diye %52'ye kadar neredeyse opak. */
    linear-gradient(84deg,
      rgba(8,12,16,.995) 0%,
      rgba(8,12,16,.975) 34%,
      rgba(8,12,16,.90)  52%,
      rgba(8,12,16,.58)  70%,
      rgba(8,12,16,.34) 100%),
    linear-gradient(to top, rgba(8,12,16,.94) 0%, rgba(8,12,16,0) 38%),
    linear-gradient(to bottom, rgba(8,12,16,.55) 0%, rgba(8,12,16,0) 18%);
}

.vitrin-ic { position: relative; z-index: 4; width: 100%; display: flex; align-items: center;
  padding: 96px 0 130px; }
.vitrin-metin { max-width: 44rem; }
.vitrin-metin .etiket { color: var(--os2); }
.vitrin-metin h1 {
  color: #fff; margin: 18px 0 20px;
  font-size: clamp(2.3rem, 5.6vw, 5rem); line-height: .96;
  overflow-wrap: normal; word-break: keep-all;
}
.vitrin-metin p { color: var(--ak); font-size: 1.12rem; max-width: 46ch; margin: 0 0 30px; }
.vitrin-tek { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 30px; }
.vitrin-tek span {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ak); background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16); border-radius: var(--r); padding: 5px 10px;
}
.vitrin-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

/* slayt icerigi girerken kayarak gelsin */
.vitrin-slayt.etkin .vitrin-metin > * { animation: slaytGir 780ms cubic-bezier(.2,.7,.3,1) both; }
.vitrin-slayt.etkin .vitrin-metin > *:nth-child(1) { animation-delay: 80ms; }
.vitrin-slayt.etkin .vitrin-metin > *:nth-child(2) { animation-delay: 170ms; }
.vitrin-slayt.etkin .vitrin-metin > *:nth-child(3) { animation-delay: 250ms; }
.vitrin-slayt.etkin .vitrin-metin > *:nth-child(4) { animation-delay: 330ms; }
.vitrin-slayt.etkin .vitrin-metin > *:nth-child(5) { animation-delay: 410ms; }
@keyframes slaytGir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* alt kontrol seridi */
.vitrin-kontrol {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  border-top: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(to top, rgba(8,12,16,.86), rgba(8,12,16,.25));
  backdrop-filter: blur(6px);
}
.vitrin-kontrol .kapsayici { display: flex; align-items: stretch; gap: 0; }
.vitrin-sekme {
  flex: 1; min-width: 0; position: relative; text-align: left;
  background: none; border: 0; border-right: 1px solid rgba(255,255,255,.1);
  padding: 18px 20px 20px; cursor: pointer; color: var(--ak-soluk);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .09em; text-transform: uppercase;
  transition: color var(--gecis), background var(--gecis);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vitrin-sekme:last-child { border-right: 0; }
.vitrin-sekme:hover { color: #fff; background: rgba(255,255,255,.05); }
.vitrin-sekme[aria-selected="true"] { color: #fff; }
.vitrin-sekme .no { display: block; color: var(--os2); font-size: .66rem; margin-bottom: 6px; }
.vitrin-sekme .cubuk { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: var(--os2); transform: scaleX(0); transform-origin: left; }
.vitrin-sekme[aria-selected="true"] .cubuk { animation: doldur var(--sure, 7s) linear forwards; }
.vitrin:not(.oynuyor) .vitrin-sekme[aria-selected="true"] .cubuk { animation: none; transform: scaleX(1); }
@keyframes doldur { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.vitrin-ok {
  position: absolute; top: 50%; z-index: 6; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  background: rgba(8,12,16,.55); border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%; color: #fff; cursor: pointer; font-size: 1.1rem;
  transition: background var(--gecis), border-color var(--gecis);
}
.vitrin-ok:hover { background: var(--os2); border-color: var(--os2); color: var(--gece); }
.vitrin-ok.geri { left: 18px; }
.vitrin-ok.ileri { right: 18px; }

/* JS yoksa: ilk slayt gorunur, kontroller gizli */
.vitrin:not(.hazir) .vitrin-slayt:first-child { opacity: 1; visibility: visible; }
.vitrin:not(.hazir) .vitrin-ok { display: none; }

/* ------------------------------ SAYAC ----------------------------------- */
.rakam b { font-variant-numeric: tabular-nums; }

/* --------------------------- PROJE KARUSELI ----------------------------- */
.karusel-sarici { position: relative; }
.karusel {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(340px, 34%);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 14px;
  scrollbar-width: thin; scrollbar-color: var(--kasa-3) transparent;
}
.karusel > * { scroll-snap-align: start; }
.karusel::-webkit-scrollbar { height: 8px; }
.karusel::-webkit-scrollbar-track { background: var(--kasa-2); border-radius: 99px; }
.karusel::-webkit-scrollbar-thumb { background: var(--kasa-3); border-radius: 99px; }
.karusel::-webkit-scrollbar-thumb:hover { background: var(--om4-koyu); }

.karusel-ok {
  position: absolute; top: calc(50% - 14px); z-index: 4; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--kasa); border: 1px solid var(--hat); border-radius: 50%;
  color: #fff; cursor: pointer; font-size: 1.05rem;
  transition: background var(--gecis), border-color var(--gecis), opacity var(--gecis);
}
.karusel-ok:hover { background: var(--om4-koyu); border-color: var(--om4); }
.karusel-ok[disabled] { opacity: .28; cursor: default; }
.karusel-ok.geri { left: -20px; }
.karusel-ok.ileri { right: -20px; }
.karusel-yok .karusel-ok { display: none; }

/* --------------------------- SEKMELI UZMANLIK --------------------------- */
.sekme-duzen { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 0;
  border: 1px solid var(--cizgi); background: #fff; }
.sekme-liste { display: flex; flex-direction: column; border-right: 1px solid var(--cizgi); }
.sekme-dugme {
  position: relative; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--cizgi); padding: 20px 22px; cursor: pointer;
  font-family: var(--display); font-size: .98rem; text-transform: uppercase;
  letter-spacing: -.005em; color: var(--soluk);
  transition: color var(--gecis), background var(--gecis);
}
.sekme-dugme:last-child { border-bottom: 0; }
.sekme-dugme::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--om4); transform: scaleY(0); transition: transform var(--gecis); }
.sekme-dugme:hover { color: var(--murekkep); background: var(--kagit); }
.sekme-dugme[aria-selected="true"] { color: var(--murekkep); background: var(--kagit); }
.sekme-dugme[aria-selected="true"]::before { transform: scaleY(1); }

.sekme-panel { padding: 40px 42px; }
.sekme-panel[hidden] { display: none; }
.sekme-panel h3 { font-family: var(--display); text-transform: uppercase; font-size: 1.5rem; margin-bottom: 14px; }
.sekme-panel p { color: var(--soluk); font-size: 1.04rem; max-width: 60ch; }
.sekme-panel ul { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sekme-panel li {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--om4-koyu); background: var(--om4-soluk);
  border: 1px solid #BEE3E4; border-radius: var(--r); padding: 6px 11px;
}
.sekme-panel.gir-panel { animation: panelGir 420ms cubic-bezier(.2,.7,.3,1) both; }
@keyframes panelGir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* JS yoksa tum paneller gorunur, sekme listesi gizlenir */
.sekme-kutu:not(.hazir) .sekme-liste { display: none; }
.sekme-kutu:not(.hazir) { grid-template-columns: minmax(0, 1fr); }
.sekme-kutu:not(.hazir) .sekme-panel[hidden] { display: block; }
.sekme-kutu:not(.hazir) .sekme-panel + .sekme-panel { border-top: 1px solid var(--cizgi); }

@media (max-width: 1080px) {
  .karusel { grid-auto-columns: minmax(300px, 48%); }
  .karusel-ok.geri { left: 4px; } .karusel-ok.ileri { right: 4px; }
  .sekme-duzen { grid-template-columns: 250px minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .vitrin { min-height: auto; }
  .vitrin-ic { padding: 62px 0 132px; }
  .vitrin-ok { display: none; }
  .vitrin-kontrol .kapsayici { overflow-x: auto; }
  .vitrin-sekme { flex: 0 0 46%; }
  .karusel { grid-auto-columns: minmax(272px, 84%); }
  .sekme-duzen { grid-template-columns: minmax(0, 1fr); }
  .sekme-liste { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--cizgi); }
  .sekme-dugme { flex: 0 0 auto; border-bottom: 0; border-right: 1px solid var(--cizgi); padding: 15px 18px; }
  .sekme-dugme::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px;
    transform: scaleX(0); }
  .sekme-dugme[aria-selected="true"]::before { transform: scaleX(1); }
  .sekme-panel { padding: 28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .vitrin-slayt.etkin .vitrin-gorsel { animation: none; transform: none; }
  .vitrin-slayt.etkin .vitrin-metin > * { animation: none; }
  .vitrin-sekme[aria-selected="true"] .cubuk { animation: none; transform: scaleX(1); }
  .sekme-panel.gir-panel { animation: none; }
  .karusel { scroll-behavior: auto; }
}

/* ---------------------- kapaksiz proje kartlari -------------------------
   Canli adresi/ekran goruntusu olmayan urunler (ic araclar, API'ler) bos
   gorunmesin: grid dokusu + basliktan uretilen buyuk hayalet monogram.  */
.proje.kapaksiz { background: var(--gece); }
.proje.kapaksiz::before {
  /* gorsel olmadigi icin bulaniklik yerine doku katmani */
  backdrop-filter: none; -webkit-backdrop-filter: none;
  mask-image: none; -webkit-mask-image: none;
  background-image:
    linear-gradient(rgba(44,61,79,.36) 1px, transparent 1px),
    linear-gradient(90deg, rgba(44,61,79,.36) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: .9;
}
.proje.kapaksiz::after {
  background:
    linear-gradient(to top, rgba(8,12,16,.96) 0%, rgba(8,12,16,.72) 58%, rgba(8,12,16,.42) 100%);
}
.proje-mono {
  position: absolute; z-index: 2; right: 18px; top: -14px;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 11rem; line-height: 1; letter-spacing: -.05em;
  color: rgba(240,192,0,.10);
  pointer-events: none; user-select: none;
  transition: color var(--gecis), transform 700ms cubic-bezier(.2,.7,.3,1);
}
.proje.kapaksiz:hover .proje-mono { color: rgba(240,192,0,.17); transform: translateY(6px); }
.proje.kapaksiz { border-left: 3px solid var(--om4-koyu); }
.proje.kapaksiz:hover { border-color: var(--om4); border-left-color: var(--om4); }

@media (max-width: 820px) {
  .proje-mono { font-size: 8rem; right: 12px; }
}