/* 4 Kas gece: kubbe yerine kurumsal çerçeve, açılış perdesi, kayan hizmet şeridi, değerler. premium.css'ten sonra yüklenir. */

/* görsel çerçevesi: dikdörtgen fotoğraf + kayık altın çerçeve + arkada lacivert gravür blok */
.kemer { isolation: isolate; }
.js .kemer { animation: none; opacity: 1; transform: none; }
.kemer picture { border-radius: 3px; box-shadow: 0 50px 90px -50px rgba(11,23,54,.6); }
.kemer picture img { border-radius: 3px; aspect-ratio: 4 / 5; box-shadow: none; }
.kemer::before { inset: 26px -26px -26px 26px; border: 1px solid var(--altin); border-radius: 2px; opacity: .85; z-index: -1; }
.js .kemer::before { animation: none; opacity: .85; }
.kemer::after { content: ""; position: absolute; left: -42px; top: -42px; width: 58%; height: 46%; z-index: -2; border-radius: 2px;
  background: var(--laci) url("img/dalga.svg"); box-shadow: inset 0 0 0 1px rgba(184,151,90,.35); }
.kemer .kose { position: absolute; z-index: 2; width: 46px; height: 46px; pointer-events: none; border-color: var(--altin); border-style: solid; border-width: 0; }
.kemer .kose.k1 { right: -10px; top: -10px; border-top-width: 1px; border-right-width: 1px; }
.kemer .kose.k2 { left: -10px; bottom: -10px; border-bottom-width: 1px; border-left-width: 1px; }

/* açılış perdesi: fotoğraf soldan sağa açılır, içinden yavaşça yerine oturur */
.js .kemer picture { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s cubic-bezier(.77,0,.18,1); }
.js .kemer picture img { transform: scale(1.22); transition: transform 2.4s cubic-bezier(.2,.7,.2,1); }
.js .kemer.acildi picture { clip-path: inset(0 0 0 0); }
.js .kemer.acildi picture img { transform: translateY(var(--py, 0px)) scale(1.06); }
.js .kemer::before, .js .kemer::after, .kemer .kose { transition: opacity 1s .6s, transform 1.2s .5s var(--hiz); }
.js .kemer:not(.acildi)::before { opacity: 0; transform: translate(-16px, -16px); }
.js .kemer:not(.acildi)::after { opacity: 0; transform: translate(16px, 16px); }
.js .kemer:not(.acildi) .kose { opacity: 0; }
.kemer.acildi:hover picture img { transform: translateY(var(--py, 0px)) scale(1.1); }

/* mühür hafifçe süzülür */
.muhur { animation: suzul 7s ease-in-out infinite; }
.js .muhur { animation: muhur-bas .9s 1.3s cubic-bezier(.3,1.5,.5,1) forwards, suzul 7s 2.4s ease-in-out infinite; }
@keyframes suzul { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* kayan hizmet şeridi */
.serit { position: relative; overflow: hidden; background: var(--laci-koyu); color: #dbe4f6; border-block: 1px solid rgba(184,151,90,.35); padding: 22px 0; }
.serit::before, .serit::after { content: ""; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.serit::before { left: 0; background: linear-gradient(90deg, var(--laci-koyu), transparent); }
.serit::after { right: 0; background: linear-gradient(-90deg, var(--laci-koyu), transparent); }
.serit-ic { display: flex; width: max-content; animation: serit 48s linear infinite; }
.serit:hover .serit-ic { animation-play-state: paused; }
.serit-ic a { display: inline-flex; align-items: center; gap: 34px; padding-right: 34px; font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.55rem); color: #fff; white-space: nowrap; transition: color .3s; }
.serit-ic a::after { content: ""; width: 7px; height: 7px; background: var(--altin); transform: rotate(45deg); }
.serit-ic a:hover { color: var(--altin); }
@keyframes serit { to { transform: translateX(-50%); } }

/* değerler (Hakkımızda) */
.degerler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--laci); }
.deger { position: relative; padding: 46px 38px 40px; border-right: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); overflow: hidden; }
.deger:last-child { border-right: 0; }
.deger::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--altin); transition: width .8s var(--hiz); }
.deger:hover::before { width: 100%; }
.deger .sira { font-family: var(--serif); font-size: 4.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(184,151,90,.6); display: block; margin-bottom: 22px; transition: transform .8s var(--hiz); }
.deger:hover .sira { transform: translateX(8px); }
.deger h3 { font-size: 1.35rem; margin-bottom: 10px; }
.deger p { color: var(--metin-2); margin: 0; line-height: 1.75; }
@media (max-width: 860px) { .degerler { grid-template-columns: 1fr; } .deger { border-right: 0; } }

/* başlık kelimeleri: aşağıdan maske ile yükselir */
.js .bolum-ust h2, .js .bolum-giris h2 { clip-path: inset(0 0 0 0); }

@media (max-width: 760px) {
  .kemer::before { inset: 16px -12px -16px 16px; }
  .kemer::after { left: -14px; top: -14px; }
  .kemer .kose { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .kemer picture { clip-path: none; transition: none; }
  .js .kemer picture img { transform: none; transition: none; }
  .muhur, .js .muhur { animation: none; opacity: 1; transform: none; }
  .serit-ic { animation: none; }
}
.hak-kemer picture img { object-position: 50% center; }