/* 4 Kas gece: giriş görselinin arkasında pirinç gravür levha, sütunlu hizmet sahnesi, hareketli çalışma şekli. hareket.css'ten sonra yüklenir. */

/* giriş görseli arkası: düz lacivert yerine gravürlü pirinç levha */
.h2-hero .kemer::after { background: #1a2540 url("img/lux_levha_900.webp") center / cover; width: 62%; height: 52%;
  box-shadow: 0 30px 60px -30px rgba(11,23,54,.55), inset 0 0 0 1px rgba(184,151,90,.55); }
.h2-hero .kemer::after { animation: levha-isik 9s ease-in-out infinite; }
@keyframes levha-isik { 0%, 100% { filter: brightness(.95) saturate(1); } 50% { filter: brightness(1.12) saturate(1.08); } }

/* çalışma alanlarımız: klasik sütunlu revak sahnesi, lacivert ve altın */
.sutunlu { position: relative; overflow: hidden; color: #dbe4f6; isolation: isolate;
  background: var(--laci-koyu) url("img/lux_sutun_1920.webp") center 40% / cover fixed; }
.sutunlu::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,23,54,.86) 0%, rgba(11,23,54,.4) 42%, rgba(11,23,54,.88) 100%); }
.sutunlu::after { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 90px; background: linear-gradient(var(--altin), transparent); }
.sutunlu .ust-baslik { color: var(--altin); }
.sutunlu h2 { color: #fff; }
.sutunlu .bolum-ust p { color: #b9c6e2; }
.sutunlu .h-izgara { border-top: 1px solid rgba(184,151,90,.6); border-left: 1px solid rgba(255,255,255,.12); }
.sutunlu .h-kart { border-color: rgba(255,255,255,.12); background: rgba(11,23,54,.5); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); color: #dbe4f6; }
.sutunlu .h-kart::before { background: linear-gradient(160deg, rgba(184,151,90,.95), rgba(125,100,48,.95)); }
.sutunlu .h-kart h3 { color: #fff; }
.sutunlu .h-kart p { color: #b9c6e2; }
.sutunlu .h-kart .no { color: var(--altin); }
.sutunlu .h-kart .ok { color: var(--altin); }
.sutunlu .h-kart:hover h3, .sutunlu .h-kart:hover .no { color: var(--laci-koyu); }
.sutunlu .h-kart:hover p { color: #1d2a45; }
.sutunlu .h-kart:hover .ok { color: var(--laci-koyu); }
/* kartın üstünde ince sütun başlığı (kapitel) süsü */
.sutunlu .h-kart::after { content: ""; position: absolute; left: 38px; right: 38px; top: 0; height: 6px; z-index: 1;
  border-top: 1px solid rgba(184,151,90,.7); border-bottom: 1px solid rgba(184,151,90,.35); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--hiz); }
.sutunlu .h-kart.gorundu::after, .sutunlu .h-kart:hover::after { transform: scaleX(1); }
@media (max-width: 1024px) { .sutunlu { background-attachment: scroll; } }

/* çalışma şekli: çizgi soldan çizilir, adımlar sırayla gelir, noktalar nabız atar */
.zaman::before { transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.8s cubic-bezier(.65,0,.25,1); opacity: .8; }
.zaman.cizildi::before { transform: scaleX(1); }
.js .zaman .adim2 { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--hiz), transform .8s var(--hiz); }
.zaman.cizildi .adim2 { opacity: 1; transform: none; }
.zaman.cizildi .adim2:nth-child(1) { transition-delay: .2s; }
.zaman.cizildi .adim2:nth-child(2) { transition-delay: .55s; }
.zaman.cizildi .adim2:nth-child(3) { transition-delay: .9s; }
.zaman.cizildi .adim2:nth-child(4) { transition-delay: 1.25s; }
.adim2 .nokta { transition: transform .5s var(--hiz), box-shadow .5s; }
.zaman.cizildi .adim2 .nokta { animation: nabiz 3.2s ease-out infinite; }
.zaman.cizildi .adim2:nth-child(2) .nokta { animation-delay: .8s; }
.zaman.cizildi .adim2:nth-child(3) .nokta { animation-delay: 1.6s; }
.zaman.cizildi .adim2:nth-child(4) .nokta { animation-delay: 2.4s; }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(184,151,90,.55); } 60%, 100% { box-shadow: 0 0 0 12px rgba(184,151,90,0); } }
.adim2 { transition: transform .5s var(--hiz); }
.adim2:hover .nokta { transform: scale(1.35); }
.adim2 .sira { transition: opacity .5s, transform .6s var(--hiz); }
.adim2:hover .sira { opacity: .4; transform: translateX(6px); }
.adim2 h3 { position: relative; display: inline-block; }
.adim2 h3::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: var(--altin); transition: width .6s var(--hiz); }
.adim2:hover h3::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .h2-hero .kemer::after, .zaman.cizildi .adim2 .nokta { animation: none; }
  .zaman::before { transform: none; transition: none; }
  .js .zaman .adim2 { opacity: 1; transform: none; }
}
@media (max-width: 760px) { .sutunlu { background-image: url("img/lux_sutun_768.webp"); } }