/* ============================================================
   Cahit Vuruş Yapı — site stili
   Kimlik: lacivert + altın, bol beyaz alan, serif başlıklar
   ============================================================ */

:root {
  --lacivert: #0f2138;
  --lacivert-koyu: #0a1727;
  --lacivert-acik: #1b3a5e;
  --altin: #bd9a5f;
  --altin-acik: #d8bd8a;
  --krem: #f7f4ee;
  --beyaz: #ffffff;
  --metin: #2b3646;
  --metin-yumusak: #5d6a7c;
  --cizgi: #e5e0d6;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Arial, sans-serif;
  --golge: 0 18px 45px rgba(15, 33, 56, .12);
  --gecis: .35s cubic-bezier(.25, .7, .3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--metin);
  background: var(--beyaz);
  -webkit-font-smoothing: antialiased;
}

/* height:auto şart: img etiketlerinde width/height öznitelikleri var (CLS için).
   Genişlik kapsayıcıya sığdırıldığında yükseklik de oranla küçülsün, yoksa
   görsel öznitelikteki piksel yüksekliğine gerilir. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.kapsayici {
  width: min(1180px, 92%);
  margin-inline: auto;
}

/* ---------- Üst çubuk + başlık ---------- */

.ust-cubuk {
  background: var(--lacivert-koyu);
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
  letter-spacing: .04em;
}

.ust-cubuk .kapsayici {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block: 8px;
  gap: 16px;
  flex-wrap: wrap;
}

.ust-cubuk a:hover { color: var(--altin-acik); }

.ust-cubuk .ayrac { display: flex; gap: 22px; flex-wrap: wrap; }

.baslik {
  position: sticky;
  top: 0;
  z-index: 90;
  /* backdrop-filter kullanmıyoruz: filtreli bir ata öğe, içindeki
     position:fixed mobil menüyü ekrana değil kendine sabitliyor. */
  background: #fff;
  border-bottom: 1px solid var(--cizgi);
  transition: box-shadow var(--gecis);
}

.baslik.kaydi { box-shadow: 0 10px 30px rgba(15, 33, 56, .08); }

.baslik .kapsayici {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 16px;
}

.marka { line-height: 1.15; display: block; }

.marka img {
  height: 46px;
  width: auto;
  max-width: 100%;
}

.alt-bilgi .marka img { height: 52px; }

.gezinme { display: flex; align-items: center; gap: 26px; }

.gezinme a {
  font-size: 15px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lacivert);
  padding-block: 6px;
  position: relative;
}

.gezinme a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--altin);
  transition: right var(--gecis);
}

.gezinme a:hover::after,
.gezinme a.aktif::after { right: 0; }

.gezinme a.aktif { color: var(--altin); }

.tel-dugme {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--lacivert);
  color: #fff !important;
  padding: 11px 22px;
  font-size: 15px;
  letter-spacing: .05em;
  border-radius: 3px;
  transition: background var(--gecis), transform var(--gecis);
}

.tel-dugme:hover { background: var(--altin); transform: translateY(-2px); }

.menu-dugmesi {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.menu-dugmesi span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--lacivert);
  margin: 6px 0;
  transition: transform var(--gecis), opacity var(--gecis);
}

/* ---------- Kahraman (hero) ---------- */

.kahraman {
  position: relative;
  /* üst çubuk + başlık yüksekliği JS ile --ust değişkenine yazılır;
     böylece kapak tam olarak ekranın kalanını doldurur, oklar ve
     noktalar katlamanın altında kalmaz */
  min-height: calc(100vh - var(--ust, 120px));
  min-height: calc(100svh - var(--ust, 120px));
  display: grid;
  align-items: center;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

/* Arka plan görselleri gerçek <img> olarak konur: hem erken yüklenir
   (LCP), hem de göreli yol her klasör derinliğinde doğru çözülür. */
.ortu-gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.kahraman .ortu-gorsel { animation: yavas-yaklas 18s ease-out forwards; }

.ortu-gorsel.soluk { opacity: .25; }

@keyframes yavas-yaklas {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

.kahraman::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(10, 23, 39, .88) 20%, rgba(10, 23, 39, .55) 55%, rgba(10, 23, 39, .25));
  z-index: -1;
}

.kahraman .kapsayici { padding-block: clamp(44px, 6vh, 92px) clamp(92px, 12vh, 140px); }

/* ---------- Kapak slaytı ---------- */

.slaytlar {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.slayt {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 1.1s;
}

.slayt.etkin { opacity: 1; visibility: visible; }

.slayt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  transition: transform 1.2s ease;
}

/* etkin slaytta yavaş yakınlaşma (ken burns) */
.slayt.etkin img { animation: slayt-yaklas 9s ease-out forwards; }

@keyframes slayt-yaklas {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

/* metin katmanı: slaytlar üst üste durur, etkin olan görünür */
.slayt-metinleri { display: grid; }

.slayt-metin {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility .5s;
}

.slayt-metin.etkin {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* satırlar aşağıdan perde gibi açılır */
.slayt-metin .ust-not,
.slayt-metin h1,
.slayt-metin h2,
.slayt-metin p { overflow: hidden; }

.slayt-metin .satir {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
}

.slayt-metin.etkin .satir {
  animation: satir-ac .9s cubic-bezier(.22, .8, .3, 1) forwards;
}

.slayt-metin.etkin .ust-not .satir { animation-delay: .10s; }
.slayt-metin.etkin h1 .satir,
.slayt-metin.etkin h2 .satir { animation-delay: .22s; }
.slayt-metin.etkin p .satir { animation-delay: .38s; }

@keyframes satir-ac {
  to { transform: translateY(0); opacity: 1; }
}

.slayt-dugmeler {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(20px);
}

.slayt-metin.etkin .slayt-dugmeler {
  animation: dugme-ac .8s cubic-bezier(.22, .8, .3, 1) .52s forwards;
}

@keyframes dugme-ac {
  to { opacity: 1; transform: none; }
}

/* slaytta h2 de h1 gibi görünsün */
.slayt-metin h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.12;
  font-weight: 700;
  max-width: 15ch;
  margin-bottom: 24px;
  color: #fff;
}

.slayt-metin h2 em { font-style: italic; color: var(--altin-acik); }

/* oklar */
.slayt-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(10, 23, 39, .28);
  backdrop-filter: blur(4px);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--gecis), border-color var(--gecis), transform var(--gecis);
  z-index: 3;
}

.slayt-ok:hover {
  background: var(--altin);
  border-color: var(--altin);
  color: var(--lacivert-koyu);
}

.slayt-ok.onceki { left: 26px; }
.slayt-ok.sonraki { right: 26px; }
.slayt-ok.onceki:hover { transform: translateY(-50%) translateX(-3px); }
.slayt-ok.sonraki:hover { transform: translateY(-50%) translateX(3px); }

/* noktalar — otomatik geçiş süresi çubukla gösterilir */
.slayt-noktalari {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 3;
}

.slayt-noktalari button {
  width: 46px;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  overflow: hidden;
  transition: width var(--gecis);
}

.slayt-noktalari button.etkin { width: 84px; }

.slayt-noktalari button i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--altin);
}

.slayt-noktalari button.etkin i { animation: nokta-dol var(--slayt-sure, 7s) linear forwards; }

.kahraman.duraklat .slayt-noktalari button.etkin i,
.kahraman.duraklat .slayt.etkin img { animation-play-state: paused; }

@keyframes nokta-dol {
  from { width: 0; }
  to   { width: 100%; }
}

/* aşağı kaydır ipucu */
.kaydir-ipucu {
  position: absolute;
  left: 50%;
  bottom: 62px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 14px;
  z-index: 3;
  display: none;
}

.kaydir-ipucu span {
  position: absolute;
  left: 50%;
  top: 9px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--altin-acik);
  animation: kaydir 1.8s ease-in-out infinite;
}

@keyframes kaydir {
  0%, 100% { transform: translateY(0); opacity: 1; }
  55%      { transform: translateY(14px); opacity: .2; }
}

@media (min-width: 1061px) and (min-height: 720px) {
  .kaydir-ipucu { display: block; }
}

.kahraman .ust-not {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--altin-acik);
  margin-bottom: clamp(14px, 2.4vh, 26px);
}

.kahraman .ust-not::before {
  content: "";
  width: 46px;
  height: 1px;
  background: var(--altin);
}

.kahraman h1 {
  font-family: var(--serif);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.12;
  font-weight: 700;
  max-width: 15ch;
  margin-bottom: 24px;
}

.kahraman h1 em {
  font-style: italic;
  color: var(--altin-acik);
}

.kahraman p {
  max-width: 54ch;
  font-size: 19px;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 38px;
}

.dugme-grubu { display: flex; gap: 16px; flex-wrap: wrap; }

.dugme {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 32px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--gecis);
}

.dugme.dolu { background: var(--altin); color: var(--lacivert-koyu); }
.dugme.dolu:hover { background: var(--altin-acik); transform: translateY(-2px); }

/* <button> öğesinde tarayıcının gri varsayılan zemini beyaz yazıyı yutuyor;
   bu yüzden zemin açıkça saydam yapılır. */
.dugme.cerceve { border-color: rgba(255, 255, 255, .5); color: #fff; background: transparent; }
.dugme.cerceve:hover { border-color: var(--altin); color: var(--altin-acik); }

.dugme.koyu { background: var(--lacivert); color: #fff; }
.dugme.koyu:hover { background: var(--altin); color: var(--lacivert-koyu); }

/* hero istatistik şeridi */
.rakamlar {
  border-top: 1px solid rgba(255, 255, 255, .18);
  margin-top: clamp(30px, 5vh, 70px);
  padding-top: clamp(22px, 3vh, 34px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  max-width: 720px;
}

.rakamlar strong {
  font-family: var(--serif);
  font-size: 38px;
  color: var(--altin-acik);
  display: block;
  line-height: 1.2;
}

.rakamlar span {
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
}

/* ---------- Bölüm iskeleti ---------- */

.bolum { padding-block: 96px; }
.bolum.krem { background: var(--krem); }
.bolum.koyu { background: var(--lacivert); color: #fff; }

.bolum-baslik { max-width: 640px; margin-bottom: 56px; }

.bolum-baslik.ortala {
  margin-inline: auto;
  text-align: center;
}

.bolum-etiket {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 14px;
}

.bolum-etiket::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--altin);
}

.bolum-baslik.ortala .bolum-etiket::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--altin);
}

.bolum-baslik h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.2;
  color: var(--lacivert);
  font-weight: 700;
}

.bolum.koyu .bolum-baslik h2 { color: #fff; }

.bolum-baslik p { margin-top: 16px; color: var(--metin-yumusak); }
.bolum.koyu .bolum-baslik p { color: rgba(255, 255, 255, .75); }

/* ---------- Hakkımızda önizleme ---------- */

.iki-sutun {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.gorsel-cerceve { position: relative; }

.gorsel-cerceve img {
  border-radius: 4px;
  box-shadow: var(--golge);
}

.gorsel-cerceve::before {
  content: "";
  position: absolute;
  inset: 28px -28px -28px 28px;
  border: 1px solid var(--altin);
  border-radius: 4px;
  z-index: -1;
}

.deneyim-rozeti {
  position: absolute;
  right: -20px;
  bottom: 36px;
  background: var(--lacivert);
  color: #fff;
  padding: 22px 26px;
  border-radius: 4px;
  text-align: center;
  box-shadow: var(--golge);
}

.deneyim-rozeti strong {
  font-family: var(--serif);
  font-size: 34px;
  color: var(--altin-acik);
  display: block;
  line-height: 1.1;
}

.deneyim-rozeti span { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

.madde-listesi { list-style: none; margin: 26px 0 34px; display: grid; gap: 14px; }

.madde-listesi li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-weight: 500;
  color: var(--lacivert);
}

.madde-listesi li::before {
  content: "◆";
  color: var(--altin);
  font-size: 11px;
  flex-shrink: 0;
}

/* ---------- Özellik kartları ---------- */

.kart-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}

.ozellik-karti {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 38px 30px;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.ozellik-karti:hover {
  transform: translateY(-6px);
  box-shadow: var(--golge);
  border-color: var(--altin);
}

.ozellik-karti .simge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--krem);
  display: grid;
  place-items: center;
  font-size: 26px;
  margin-bottom: 22px;
  color: var(--altin);
}

.ozellik-karti h3 {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--lacivert);
  margin-bottom: 10px;
}

.ozellik-karti p { font-size: 15.5px; color: var(--metin-yumusak); }

/* ---------- Fotoğraflı, imleçle eğilen kartlar ---------- */

.kart-izgara.egilir {
  /* derinlik algısı için ızgaraya perspektif verilir */
  perspective: 850px;
  gap: 22px;
}

.kart-izgara.egilir .ozellik-karti {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  min-height: 340px;
  border: none;
  border-radius: 6px;
  background: var(--lacivert-koyu);
  color: #fff;
  transform-style: preserve-3d;
  /* eğim JS'ten gelen değişkenlerle kurulur */
  transform:
    rotateX(var(--egimX, 0deg))
    rotateY(var(--egimY, 0deg))
    translateY(var(--kalkma, 0px))
    scale(var(--buyume, 1));
  transition: transform .5s cubic-bezier(.22, .8, .3, 1), box-shadow .5s ease;
  will-change: transform;
}

/* imleç üzerindeyken yumuşama kısalır, hareket imleci anında takip eder */
.kart-izgara.egilir .ozellik-karti.egiliyor {
  transition: transform .12s ease-out, box-shadow .4s ease;
  box-shadow: 0 18px 38px rgba(15, 33, 56, .24);
}

.kart-fon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  /* imleç yokken görsel geride durur, yazı önde kalır */
  opacity: .48;
  transform: scale(1.06);
  transition: opacity .55s ease, transform .8s ease;
}

.kart-izgara.egilir .ozellik-karti:hover .kart-fon {
  opacity: .72;
  transform: scale(1.08);
}

/* okunabilirlik perdesi */
.kart-izgara.egilir .ozellik-karti::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 18, 32, .94) 12%, rgba(8, 18, 32, .66) 52%, rgba(8, 18, 32, .42));
  transition: background .55s ease;
}

.kart-izgara.egilir .ozellik-karti:hover::after {
  background: linear-gradient(to top, rgba(8, 18, 32, .9) 8%, rgba(8, 18, 32, .5) 55%, rgba(8, 18, 32, .22));
}

/* imlecin bulunduğu noktada beliren yumuşak ışık */
.kart-izgara.egilir .ozellik-karti::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease;
  background: radial-gradient(
    240px circle at var(--isikX, 50%) var(--isikY, 50%),
    rgba(216, 189, 138, .18),
    transparent 62%
  );
}

.kart-izgara.egilir .ozellik-karti:hover::before { opacity: 1; }

.kart-ic {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 28px 30px;
  /* içerik kartın bir tık önünde durur: eğilince katman hissi verir */
  transform: translateZ(38px);
}

.kart-izgara.egilir .ozellik-karti .simge {
  background: rgba(216, 189, 138, .16);
  color: var(--altin-acik);
  backdrop-filter: blur(2px);
  margin-bottom: 18px;
  transition: transform var(--gecis), background var(--gecis);
}

.kart-izgara.egilir .ozellik-karti:hover .simge {
  transform: translateY(-4px) scale(1.06);
  background: rgba(216, 189, 138, .26);
}

.kart-izgara.egilir .ozellik-karti h3 {
  color: #fff;
  font-size: 22px;
  margin-bottom: 10px;
  text-shadow: 0 2px 14px rgba(6, 14, 26, .75);
}

.kart-izgara.egilir .ozellik-karti p {
  color: rgba(255, 255, 255, .82);
  font-size: 15.5px;
  text-shadow: 0 1px 10px rgba(6, 14, 26, .8);
  /* imleç yokken kısmen gizlenir, üzerine gelince tamamen açılır */
  opacity: .85;
  transition: opacity var(--gecis);
}

.kart-izgara.egilir .ozellik-karti:hover p { opacity: 1; }

/* dokunmatik ekranlarda eğim yok; sade ve okunur kalsın */
@media (hover: none) {
  .kart-izgara.egilir .ozellik-karti { transform: none !important; }
  .kart-fon { opacity: .5; }
}

/* ---------- Proje kartları ---------- */

.proje-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.proje-karti {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  display: block;
  isolation: isolate;
}

.proje-karti img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.proje-karti:hover img { transform: scale(1.06); }

.proje-karti::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 23, 39, .92) 0%, rgba(10, 23, 39, .25) 45%, transparent 70%);
}

.proje-karti .bilgi {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 28px;
  color: #fff;
  z-index: 1;
}

.proje-karti .durum {
  display: inline-block;
  background: var(--altin);
  color: var(--lacivert-koyu);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.proje-karti h3 {
  font-family: var(--serif);
  font-size: 26px;
  margin-bottom: 6px;
}

.proje-karti .konum {
  font-size: 14.5px;
  color: rgba(255, 255, 255, .8);
  letter-spacing: .04em;
}

.proje-karti .incele {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--altin-acik);
}

.proje-karti .incele::after { content: "→"; transition: transform var(--gecis); }
.proje-karti:hover .incele::after { transform: translateX(6px); }

/* ---------- Hakkımızda (ana sayfa) ---------- */

.hakkinda-duzen {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}

.hakkinda-gorseller {
  position: relative;
  padding-bottom: 60px;
  padding-left: 46px;
}

.hg-buyuk img {
  width: 100%;
  border-radius: 5px;
  box-shadow: var(--golge);
}

/* küçük görsel büyüğün üstüne taşar */
.hg-kucuk {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  border: 7px solid var(--beyaz);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 20px 44px rgba(15, 33, 56, .22);
}

.hg-kucuk img { width: 100%; }

/* altın çerçeve dokunuşu */
.hakkinda-gorseller::before {
  content: "";
  position: absolute;
  right: -26px;
  top: 34px;
  bottom: 94px;
  width: 58%;
  border: 1px solid var(--altin);
  border-radius: 5px;
  z-index: -1;
}

.hg-rozet {
  position: absolute;
  right: -16px;
  bottom: 74px;
  background: var(--lacivert);
  color: #fff;
  padding: 18px 24px;
  border-radius: 4px;
  text-align: center;
  box-shadow: var(--golge);
}

.hg-rozet strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--altin-acik);
  line-height: 1.1;
}

.hg-rozet span {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.hakkinda-metin h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.18;
  color: var(--lacivert);
  margin-bottom: 18px;
}

.hakkinda-metin h2 em { font-style: italic; color: var(--altin); }

.hakkinda-metin .giris { color: var(--metin-yumusak); max-width: 52ch; }

/* rakam satırı */
.olcut-satiri {
  display: flex;
  gap: 46px;
  flex-wrap: wrap;
  margin: 32px 0 30px;
  padding: 24px 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
}

.olcut-satiri strong {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.1;
  color: var(--lacivert);
}

.olcut-satiri span {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--altin);
}

/* ---------- Hizmetler şeridi (ana sayfa) ---------- */

.hizmet-duzen {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}

.hizmet-sol h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  margin-bottom: 16px;
}

.hizmet-sol p {
  color: rgba(255, 255, 255, .76);
  margin-bottom: 30px;
  max-width: 40ch;
}

.hizmet-liste { list-style: none; }

.hizmet-liste li { border-top: 1px solid rgba(255, 255, 255, .16); }
.hizmet-liste li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }

.hizmet-liste a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 26px;
  align-items: baseline;
  padding: 26px 20px 26px 8px;
  position: relative;
  transition: padding-left var(--gecis), background var(--gecis);
}

.hizmet-liste a::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  color: var(--altin-acik);
  opacity: 0;
  transition: opacity var(--gecis), transform var(--gecis);
}

.hizmet-liste a:hover {
  padding-left: 22px;
  background: rgba(255, 255, 255, .045);
}

.hizmet-liste a:hover::after { opacity: 1; transform: translateY(-50%); }

.hl-no {
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .14em;
  color: var(--altin);
}

.hl-govde strong {
  display: block;
  font-family: var(--serif);
  font-size: 21px;
  color: #fff;
  margin-bottom: 5px;
}

.hl-govde span {
  font-size: 15px;
  color: rgba(255, 255, 255, .68);
}

/* ---------- Galeri mozaiği ---------- */

.galeri-mozaik {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 16px;
}

.galeri-mozaik a {
  border-radius: 5px;
  overflow: hidden;
  display: block;
  position: relative;
}

/* ilk kare iki sütun iki satır, kuşbakışı kare iki sütun */
.galeri-mozaik .mz-buyuk { grid-column: span 2; grid-row: span 2; }
.galeri-mozaik .mz-genis { grid-column: span 2; }

.galeri-mozaik img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease, filter .6s ease;
}

.galeri-mozaik a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 23, 39, .18);
  opacity: 0;
  transition: opacity var(--gecis);
}

.galeri-mozaik a:hover img { transform: scale(1.06); }
.galeri-mozaik a:hover::after { opacity: 1; }

.ortala-dugme { display: flex; justify-content: center; margin-top: 44px; }

/* ---------- Blog vitrini (ana sayfa) ---------- */

.blog-vitrin {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  align-items: stretch;
}

.bv-one-cikan a {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: 5px;
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.bv-one-cikan a:hover {
  transform: translateY(-6px);
  box-shadow: var(--golge);
  border-color: var(--altin);
}

.bv-one-cikan .bv-gorsel { aspect-ratio: 16 / 9; overflow: hidden; }

.bv-gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.bv-one-cikan a:hover .bv-gorsel img,
.bv-kucuk a:hover .bv-gorsel img { transform: scale(1.05); }

.bv-one-cikan .bv-icerik { padding: 30px 30px 32px; }

.bv-etiket {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 12px;
}

.bv-one-cikan h3 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--lacivert);
  line-height: 1.25;
  margin-bottom: 12px;
}

.bv-one-cikan p { color: var(--metin-yumusak); font-size: 16px; }

.bv-one-cikan .incele {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lacivert);
}

.bv-one-cikan .incele::after { content: "→"; transition: transform var(--gecis); }
.bv-one-cikan a:hover .incele::after { transform: translateX(6px); }

.bv-yan { display: grid; grid-template-rows: 1fr 1fr; gap: 26px; }

.bv-kucuk a {
  display: grid;
  grid-template-columns: 40% 1fr;
  height: 100%;
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: 5px;
  overflow: hidden;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.bv-kucuk a:hover {
  transform: translateY(-5px);
  box-shadow: var(--golge);
  border-color: var(--altin);
}

.bv-kucuk .bv-gorsel { height: 100%; }
.bv-kucuk .bv-icerik { padding: 24px 24px 24px 22px; align-self: center; }

.bv-kucuk h3 {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--lacivert);
  line-height: 1.28;
  margin-bottom: 8px;
}

.bv-kucuk p { font-size: 14.5px; color: var(--metin-yumusak); }
.bv-kucuk .bv-etiket { margin-bottom: 8px; }

/* ---------- İletişim şeridi ---------- */

.iletisim-serit {
  display: grid;
  grid-template-columns: 45% 55%;
  background: var(--lacivert);
  color: #fff;
}

.is-gorsel { position: relative; min-height: 480px; }

.is-gorsel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.is-icerik {
  display: flex;
  align-items: center;
  padding: 86px clamp(28px, 6vw, 96px);
}

.is-kutu { max-width: 56ch; }

.is-kutu h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.2;
  margin-bottom: 16px;
}

.is-kutu p { color: rgba(255, 255, 255, .78); margin-bottom: 30px; }

.is-telefon {
  display: inline-block;
  padding-bottom: 14px;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  transition: border-color var(--gecis);
}

.is-telefon span {
  display: block;
  font-size: 12.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--altin);
  margin-bottom: 6px;
}

.is-telefon strong {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 38px);
  color: #fff;
  transition: color var(--gecis);
}

.is-telefon:hover { border-color: var(--altin); }
.is-telefon:hover strong { color: var(--altin-acik); }

/* ---------- Genişleyen proje şeridi ---------- */

.proje-serit {
  display: flex;
  gap: 14px;
  height: clamp(440px, 62vh, 580px);
}

.serit-panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
  display: block;
  color: #fff;
  transition: flex 0.75s cubic-bezier(.22, .8, .28, 1);
}

/* açılan panel: varsayılan olarak ilki, imleç gelince o panel */
.serit-panel.acik { flex: 2.9; }
.proje-serit:hover .serit-panel.acik:not(:hover) { flex: 1; }
.proje-serit:hover .serit-panel:hover,
.proje-serit:focus-within .serit-panel:focus-visible { flex: 2.9; }

.serit-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 1s ease, filter .6s ease;
}

.serit-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 18, 32, .92) 14%, rgba(8, 18, 32, .45) 55%, rgba(8, 18, 32, .18));
  transition: background .6s ease;
}

/* daralmış panellerde görsel biraz geri çekilir, açılanda öne çıkar */
.proje-serit:hover .serit-panel:not(:hover) img { filter: grayscale(.35) brightness(.8); }
.serit-panel:hover img { transform: scale(1.05); }

/* sıra numarası */
.serit-no {
  position: absolute;
  top: 24px;
  left: 26px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: .18em;
  color: var(--altin-acik);
  z-index: 2;
}

/* daralmışken görünen dikey başlık */
.serit-dikey {
  position: absolute;
  left: 26px;
  bottom: 28px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 1;
  transition: opacity .35s ease;
}

/* açılınca dikey başlık gider, künye gelir */
.serit-panel.acik .serit-dikey,
.serit-panel:hover .serit-dikey { opacity: 0; }
.proje-serit:hover .serit-panel.acik:not(:hover) .serit-dikey { opacity: 1; }

.serit-icerik {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 34px 32px 32px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .45s ease .1s, transform .45s ease .1s;
  pointer-events: none;
}

.serit-panel.acik .serit-icerik,
.serit-panel:hover .serit-icerik {
  opacity: 1;
  transform: none;
}

.proje-serit:hover .serit-panel.acik:not(:hover) .serit-icerik {
  opacity: 0;
  transform: translateY(18px);
  transition-delay: 0s;
}

.serit-icerik .durum {
  display: inline-block;
  background: var(--altin);
  color: var(--lacivert-koyu);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 14px;
}

.serit-icerik h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 31px);
  margin-bottom: 6px;
  white-space: nowrap;
}

.serit-icerik .konum {
  font-size: 15px;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}

/* künye rakamları */
.serit-veri {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 20px 0 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .22);
}

.serit-veri strong {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
  color: var(--altin-acik);
}

.serit-veri span {
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  white-space: nowrap;
}

.serit-icerik .incele {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--altin-acik);
}

.serit-icerik .incele::after { content: "→"; transition: transform var(--gecis); }
.serit-panel:hover .incele::after { transform: translateX(6px); }

/* dar ekran: şerit yerine üst üste kartlar */
@media (max-width: 900px) {
  .proje-serit {
    flex-direction: column;
    height: auto;
    gap: 20px;
  }

  .serit-panel,
  .proje-serit:hover .serit-panel.acik:not(:hover),
  .proje-serit:hover .serit-panel:hover { flex: none; }

  .serit-panel { aspect-ratio: 4 / 5; }
  .serit-dikey { display: none; }

  .serit-icerik,
  .proje-serit:hover .serit-panel.acik:not(:hover) .serit-icerik {
    opacity: 1;
    transform: none;
  }

  .proje-serit:hover .serit-panel:not(:hover) img { filter: none; }
  .serit-veri { gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .serit-panel,
  .serit-panel img,
  .serit-icerik { transition: none; }
}

/* ---------- Galeri ---------- */

.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

.galeri-izgara a {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
}

.galeri-izgara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease, filter .7s ease;
}

.galeri-izgara a:hover img { transform: scale(1.07); filter: brightness(1.06); }

/* ışık kutusu */
.isik-kutusu {
  position: fixed;
  inset: 0;
  background: rgba(8, 17, 30, .94);
  display: none;
  place-items: center;
  z-index: 200;
  padding: 4vh 4vw;
}

.isik-kutusu.acik { display: grid; }

.isik-kutusu img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.isik-kutusu .kapat,
.isik-kutusu .onceki,
.isik-kutusu .sonraki {
  position: absolute;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--gecis);
}

.isik-kutusu .kapat:hover,
.isik-kutusu .onceki:hover,
.isik-kutusu .sonraki:hover { background: var(--altin); color: var(--lacivert-koyu); }

.isik-kutusu .kapat { top: 24px; right: 24px; }
.isik-kutusu .onceki { left: 24px; top: 50%; transform: translateY(-50%); }
.isik-kutusu .sonraki { right: 24px; top: 50%; transform: translateY(-50%); }

/* ---------- CTA şeridi ---------- */

.cta-serit {
  position: relative;
  isolation: isolate;
  color: #fff;
  text-align: center;
  padding-block: 90px;
  background: var(--lacivert);
  overflow: hidden;
}

.cta-serit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/galeri-08-800.webp") center / cover no-repeat;
  opacity: .18;
  z-index: -1;
}

.cta-serit h2 {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 42px);
  max-width: 22ch;
  margin: 0 auto 18px;
}

.cta-serit p { color: rgba(255, 255, 255, .8); max-width: 60ch; margin: 0 auto 34px; }

/* ---------- Sayfa başı (iç sayfalar) ---------- */

.sayfa-basi {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: 110px 70px;
  background: var(--lacivert);
  overflow: hidden;
}

.sayfa-basi .ortu-gorsel { z-index: -1; }

.sayfa-basi h1 {
  font-family: var(--serif);
  font-size: clamp(34px, 5vw, 52px);
  margin-bottom: 12px;
}

.kirinti {
  font-size: 14px;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .7);
}

.kirinti a:hover { color: var(--altin-acik); }
.kirinti span { color: var(--altin-acik); }

/* ---------- Proje detay ---------- */

.detay-duzen {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 50px;
  align-items: start;
}

.detay-metin h2 {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--lacivert);
  margin-bottom: 18px;
}

.detay-metin h3 {
  font-family: var(--serif);
  font-size: 23px;
  color: var(--lacivert);
  margin: 34px 0 12px;
}

.detay-metin p + p { margin-top: 14px; }

.ozet-kutu {
  background: var(--krem);
  border: 1px solid var(--cizgi);
  border-radius: 4px;
  padding: 34px 30px;
  position: sticky;
  top: 110px;
}

.ozet-kutu h3 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--lacivert);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cizgi);
}

.ozet-kutu dl { display: grid; gap: 13px; }

.ozet-kutu .satir {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 15.5px;
}

.ozet-kutu dt { color: var(--metin-yumusak); }
.ozet-kutu dd { font-weight: 600; color: var(--lacivert); text-align: right; }

.ozet-kutu .dugme { width: 100%; justify-content: center; margin-top: 26px; }

/* ---------- Hizmet kartları ---------- */

.hizmet-karti {
  background: var(--beyaz);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--cizgi);
  transition: transform var(--gecis), box-shadow var(--gecis);
}

.hizmet-karti:hover { transform: translateY(-6px); box-shadow: var(--golge); }

.hizmet-karti img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

.hizmet-karti .icerik { padding: 26px 26px 30px; }

.hizmet-karti h3 {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--lacivert);
  margin-bottom: 10px;
}

.hizmet-karti p { font-size: 15.5px; color: var(--metin-yumusak); }

/* ---------- İletişim ---------- */

.iletisim-duzen {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  align-items: start;
}

.iletisim-kart {
  background: var(--lacivert);
  color: #fff;
  border-radius: 4px;
  padding: 42px 36px;
}

.iletisim-kart h3 {
  font-family: var(--serif);
  font-size: 24px;
  margin-bottom: 26px;
}

.iletisim-kart .kalem { display: flex; gap: 16px; margin-bottom: 24px; }

.iletisim-kart .kalem .simge {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(189, 154, 95, .18);
  color: var(--altin-acik);
  display: grid;
  place-items: center;
  font-size: 18px;
}

.iletisim-kart .kalem strong { display: block; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--altin-acik); margin-bottom: 3px; }
.iletisim-kart .kalem a:hover { color: var(--altin-acik); }

.form-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.form-alan { display: grid; gap: 7px; }
.form-alan.genis { grid-column: 1 / -1; }

.form-alan label { font-size: 14px; font-weight: 500; letter-spacing: .06em; color: var(--lacivert); }

.form-alan input,
.form-alan textarea {
  font: inherit;
  padding: 13px 16px;
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  background: var(--krem);
  transition: border-color var(--gecis);
  resize: vertical;
}

.form-alan input:focus,
.form-alan textarea:focus { outline: none; border-color: var(--altin); background: #fff; }

.form-alan .dugme { justify-self: start; }

.harita-kutu {
  margin-top: 60px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--golge);
}

.harita-kutu iframe { display: block; width: 100%; height: 420px; border: 0; }

/* ---------- Alt bilgi ---------- */

.alt-bilgi {
  background: var(--lacivert-koyu);
  color: rgba(255, 255, 255, .78);
  padding-top: 70px;
  font-size: 15.5px;
}

.alt-bilgi .izgara {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 44px;
  padding-bottom: 50px;
}

.alt-bilgi h4 {
  font-size: 15px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--altin-acik);
  margin-bottom: 20px;
}

.alt-bilgi ul { list-style: none; display: grid; gap: 11px; }
.alt-bilgi a:hover { color: var(--altin-acik); }

.alt-bilgi .telif {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-block: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: rgba(255, 255, 255, .55);
}

/* ---------- Görünüm animasyonu ---------- */

.belir {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}

.belir.gorundu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .belir { opacity: 1; transform: none; transition: none; }
  .kahraman::before { animation: none; }
}

/* ---------- Duyarlılık ---------- */

@media (max-width: 1180px) {
  .gezinme { gap: 18px; }
  .gezinme a { font-size: 14px; }
  .iki-sutun, .detay-duzen, .iletisim-duzen { grid-template-columns: 1fr; gap: 48px; }
  .ozet-kutu { position: static; }
  .alt-bilgi .izgara { grid-template-columns: 1fr 1fr; }
  .gorsel-cerceve::before { inset: 18px -14px -14px 18px; }
  .deneyim-rozeti { right: 10px; }

  .hakkinda-duzen { grid-template-columns: 1fr; gap: 62px; }
  .hakkinda-gorseller { max-width: 620px; }
  .hizmet-duzen { grid-template-columns: 1fr; gap: 44px; }
}

@media (max-width: 980px) {
  .blog-vitrin { grid-template-columns: 1fr; }
  .bv-yan { grid-template-rows: auto auto; }

  .iletisim-serit { grid-template-columns: 1fr; }
  .is-gorsel { min-height: 300px; }
  .is-icerik { padding-block: 62px; }
}

@media (max-width: 800px) {
  /* mozaik dar ekranda iki sütuna iner, büyük kare tam genişlik olur */
  .galeri-mozaik {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 12px;
  }
  .galeri-mozaik .mz-buyuk { grid-column: span 2; grid-row: span 2; }
  .galeri-mozaik .mz-genis { grid-column: span 2; }
}

@media (max-width: 1060px) {
  .marka img { height: 38px; }

  /* küçük ekranda oklar içeriğin üstüne biner; kaydırma ve noktalar yeterli */
  .slayt-ok { display: none; }
  .slayt-noktalari { bottom: 22px; }

  .gezinme {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 85vw);
    background: var(--lacivert-koyu);
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 40px;
    gap: 26px;
    transform: translateX(100%);
    transition: transform var(--gecis);
    z-index: 100;
  }

  .gezinme.acik { transform: none; }
  .gezinme a { color: #fff; font-size: 18px; }
  .gezinme .tel-dugme { background: var(--altin); color: var(--lacivert-koyu) !important; }

  .menu-dugmesi { display: block; z-index: 110; }

  .menu-dugmesi.acik span:nth-child(1) { transform: translateY(8px) rotate(45deg); background: #fff; }
  .menu-dugmesi.acik span:nth-child(2) { opacity: 0; }
  .menu-dugmesi.acik span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background: #fff; }

  .ust-cubuk { display: none; }
  .bolum { padding-block: 68px; }
  .kahraman .kapsayici { padding-block: 90px 60px; }
  .form-izgara { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .olcut-satiri { gap: 26px; }
  .hakkinda-gorseller { padding-left: 30px; }
  .hg-rozet { right: 0; padding: 14px 18px; }
  .bv-kucuk a { grid-template-columns: 1fr; }
  .bv-kucuk .bv-gorsel { aspect-ratio: 16 / 9; }
  .blog-vitrin, .bv-yan { gap: 18px; }
  .alt-bilgi .izgara { grid-template-columns: 1fr; gap: 34px; }
  .rakamlar { grid-template-columns: 1fr 1fr; }
}

/* ---------- Çizgi ikonlar ---------- */

.ikon {
  display: inline-block;
  vertical-align: -0.28em;
  flex-shrink: 0;
}

/* üst çubuktaki küçük ikonlar metinle aynı hizada dursun */
.ust-cubuk .ikon {
  width: 15px;
  height: 15px;
  vertical-align: -0.22em;
  margin-right: 3px;
  opacity: .85;
}

/* kart ve iletişim kutusundaki ikon çemberleri */
.ozellik-karti .simge,
.iletisim-kart .kalem .simge {
  display: grid;
  place-items: center;
}

.iletisim-kart .kalem .simge .ikon { width: 19px; height: 19px; }

/* form gönderim durumu */
.form-durum { margin-top: 10px; font-size: 14.5px; min-height: 1.2em; }
.form-durum[data-tur="basari"] { color: #1f7a4d; }
.form-durum[data-tur="hata"] { color: #b3372f; }

/* ---------- Yasal metin sayfaları ---------- */

.yasal-metin { max-width: 78ch; }

.yasal-metin h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--lacivert);
  margin: 40px 0 14px;
  padding-top: 26px;
  border-top: 1px solid var(--cizgi);
}

.yasal-metin h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.yasal-metin p { margin-bottom: 14px; color: var(--metin); }
.yasal-metin a { color: var(--altin); text-decoration: underline; text-underline-offset: 3px; }
.yasal-metin .madde-listesi { margin: 16px 0 20px; }
.yasal-metin .madde-listesi li { color: var(--metin); font-weight: 400; }

.yasal-tarih {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--cizgi);
  color: var(--metin-yumusak);
  font-size: 14.5px;
}

/* çerez tablosu — dar ekranda yatay kayar */
.tablo-kutu { overflow-x: auto; margin: 18px 0 24px; }

.yasal-tablo {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  border: 1px solid var(--cizgi);
  font-size: 15px;
}

.yasal-tablo th, .yasal-tablo td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cizgi);
  vertical-align: top;
}

.yasal-tablo th {
  background: var(--krem);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lacivert);
}

.yasal-tablo tr:last-child td { border-bottom: none; }
.yasal-tablo code { font-size: 13.5px; background: var(--krem); padding: 2px 6px; border-radius: 3px; }

/* ---------- Alt bilgideki yasal satır ---------- */

.yasal-satir {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}

.yasal-satir a, .yasal-satir button {
  color: rgba(255, 255, 255, .72);
  background: none;
  border: none;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.yasal-satir a:hover, .yasal-satir button:hover { color: var(--altin-acik); }

/* ---------- Çerez bildirimi ---------- */

.cerez-bildirimi {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 32px));
  background: var(--lacivert);
  color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  box-shadow: 0 24px 60px rgba(6, 14, 26, .45);
  z-index: 300;
  animation: cerez-gir .45s cubic-bezier(.22, .8, .3, 1);
}

.cerez-bildirimi[hidden] { display: none; }

@keyframes cerez-gir {
  from { opacity: 0; transform: translateX(-50%) translateY(18px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.cb-govde {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 22px 26px;
  flex-wrap: wrap;
}

.cb-metin { flex: 1 1 380px; }

.cb-metin strong {
  display: block;
  font-family: var(--serif);
  font-size: 19px;
  color: #fff;
  margin-bottom: 5px;
}

.cb-metin p { font-size: 14.5px; line-height: 1.6; }
.cb-metin a { color: var(--altin-acik); text-decoration: underline; text-underline-offset: 3px; }

.cb-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; }
.cb-dugmeler .dugme { padding: 11px 20px; font-size: 13.5px; letter-spacing: .08em; }

@media (max-width: 620px) {
  .cerez-bildirimi { bottom: 12px; }
  .cb-govde { padding: 18px 18px 20px; gap: 16px; }
  .cb-dugmeler { width: 100%; }
  .cb-dugmeler .dugme { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cerez-bildirimi { animation: none; }
}

/* ---------- Formda KVKK onayı ---------- */

.onay-alani {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14.5px;
  color: var(--metin-yumusak);
  line-height: 1.55;
}

.onay-alani input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--altin);
}

.onay-alani a { color: var(--altin); text-decoration: underline; text-underline-offset: 3px; }