/* =====================================================================
   PERSPEKTİF BİLİMSEL ARAŞTIRMALAR
   Tasarım yönü: "Katalog" — kütüphane fiş kataloğu / letterpress
   Renkler markanın kendi görsellerinden örneklenmiştir.
   ===================================================================== */

/* --- 1. Tokenlar ------------------------------------------------------ */
:root {
  /* ---- MARKANIN 3 ANA RENGİ ---- */
  --lacivert:        #032442;   /* ana lacivert */
  --altin:           #B58C49;   /* ana altın   */
  --kagit:           #EDEFF2;   /* ana zemin   */

  /* Ana renklerden türetilenler */
  --lacivert-koyu:   #021728;
  --lacivert-orta:   #0A4272;
  --lacivert-sis:    #DCE2EA;
  --altin-koyu:      #8E6C34;
  --altin-acik:      #CBA669;
  --altin-soluk:     #EFE6D5;

  --kagit-koyu:      #E1E5EB;
  --kagit-golge:     #CFD5DE;
  --kart:            #F7F8FA;
  --kart-ust:        #FFFFFF;

  --murekkep:        #10161F;
  --metin:           #454C57;
  --soluk:           #79808C;
  --cizgi:           #D2D8E0;
  --cizgi-ince:      #E2E6EC;

  --serif:    "Spectral", "Palatino Linotype", Georgia, serif;
  --kondens:  "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --mono:     "IBM Plex Mono", "Courier New", monospace;

  --en: 1300px;        /* logo ortada, menü iki yanda — daha geniş kap gerekir */
  --baslik-h: 128px;   /* başlık çubuğu yüksekliği (18+92+18) */
  --yumusak: cubic-bezier(.4, 0, .2, 1);

  --golge-kart: 0 1px 2px rgba(3,36,66,.05), 0 8px 24px rgba(3,36,66,.07);
  --golge-kalk: 0 4px 8px rgba(3,36,66,.07), 0 18px 44px rgba(3,36,66,.13);
}

/* --- 2. Sıfırlama ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.72;
  color: var(--metin);
  background-color: var(--kagit);
  /* Tamamen düz zemin: degrade/doku bölümler arasında ton farkı yaratıyordu. */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--lacivert); text-decoration: none; transition: color .2s var(--yumusak); }
a:hover { color: var(--altin-koyu); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
ul, ol { margin: 0; padding: 0; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  color: var(--lacivert);
  line-height: 1.2;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--altin-soluk); color: var(--lacivert-koyu); }
:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }

/* --- 3. Yerleşim ------------------------------------------------------ */
.kap { width: min(100% - 40px, var(--en)); margin-inline: auto; }
.kap-dar { width: min(100% - 40px, 840px); margin-inline: auto; }

.bolum        { padding: clamp(34px, 3.8vw, 58px) 0; }
.bolum--sik   { padding: clamp(28px, 3.2vw, 44px) 0; }
.bolum--kart  { background: var(--kart); }
.bolum--koyu  { background: var(--lacivert); color: rgba(255,255,255,.8); }
.bolum--koyu h2, .bolum--koyu h3 { color: #fff; }

/* --- 4. Tipografik parçalar ------------------------------------------ */
/* Katalog etiketi: küçük, aralıklı, kondens */
.etiket {
  display: inline-block;
  font-family: var(--kondens);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--altin-koyu);
  margin-bottom: 14px;
}
.bolum--koyu .etiket { color: var(--altin-acik); }

/* Yer numarası (fiş kataloğu künyesi) */
.yer-no {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--soluk);
  text-transform: uppercase;
}

/* Altın kural + elmas süs — bölüm ayracı */
.ayrac {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(34px, 4vw, 52px);
}
.ayrac::before,
.ayrac::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cizgi);
}
.ayrac span {
  width: 7px; height: 7px;
  transform: rotate(45deg);
  background: var(--altin);
  flex: none;
}
.ayrac--sol::before { display: none; }

/* Bölüm başlığı bloğu */
.bolum-bas { max-width: 720px; margin-bottom: clamp(20px, 2.4vw, 32px); }
.bolum-bas--orta { margin-inline: auto; text-align: center; }
.bolum-bas p { margin-top: 14px; color: var(--metin); font-size: 1.05rem; }
.bolum--koyu .bolum-bas p { color: rgba(255,255,255,.76); }

/* Letterpress kabartma — sadece büyük başlıklarda */
.kabartma { text-shadow: 0 1px 0 rgba(255,255,255,.85); }

.italik { font-style: italic; }
.altin  { color: var(--altin-koyu); }

/* --- 5. Butonlar ------------------------------------------------------ */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--kondens);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all .25s var(--yumusak);
  cursor: pointer;
}
.dugme svg { width: 17px; height: 17px; flex: none; }

.dugme--dolu { background: var(--lacivert); color: #fff; }
.dugme--dolu:hover { background: var(--lacivert-koyu); color: #fff; transform: translateY(-2px); box-shadow: var(--golge-kart); }

.dugme--altin { background: var(--altin); color: var(--lacivert-koyu); }
.dugme--altin:hover { background: var(--altin-acik); color: var(--lacivert-koyu); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(181,140,73,.32); }

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

.dugme--acik { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.dugme--acik:hover { background: #fff; color: var(--lacivert); border-color: #fff; transform: translateY(-2px); }

.dugme-sira { display: flex; flex-wrap: wrap; gap: 14px; }
.dugme-sira--orta { justify-content: center; }

/* --- 6. Başlık — akademik dergi künyesi (masthead) -------------------- */
.baslik-cubugu {
  position: sticky; top: 0; z-index: 900;
  background: var(--kagit);
  border-bottom: 1px solid var(--cizgi);
  transition: background-color .35s var(--yumusak), box-shadow .35s var(--yumusak),
              border-color .35s var(--yumusak);
}
.baslik-cubugu.yapisti { box-shadow: 0 4px 20px rgba(3, 36, 66, .09); }

/* Ana sayfada çubuk vitrinin üzerine biner — görsel tepeden başlar.
   ÖNEMLİ: Çubuğa degrade VERİLMEZ. Degradenin bittiği yer görselin üzerinde
   keskin bir kenar çizgisi bırakıyordu. Okunurluk, hero perdesindeki uzun ve
   yumuşak üst geçişten gelir; böylece hiçbir yerde kenar oluşmaz. */
.baslik-cubugu--seffaf {
  background: transparent;
  border-bottom-color: transparent;
}
.baslik-cubugu--seffaf.yapisti {
  background: var(--kagit);
  border-bottom-color: var(--cizgi);
}

/* Tek satır: menü solda ve sağda, logo tam ortada */
.baslik-cubugu__satir {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(20px, 3vw, 46px);
  padding: 18px 0;
  transition: padding .3s var(--yumusak);
}

.marka { display: inline-flex; align-items: center; justify-self: center; }
.marka img {
  height: 92px; width: auto;
  transition: height .3s var(--yumusak);
}

.menu--sol { justify-content: flex-end; }
.menu--sag { justify-content: flex-start; }

/* Kaydırınca toplanır (JS histerezisle açar/kapatır, titreme olmaz) */
.baslik-cubugu.toplu .baslik-cubugu__satir { padding: 8px 0; }
.baslik-cubugu.toplu .marka img { height: 48px; }

/* Menü */
.menu { display: flex; align-items: center; justify-content: center; gap: 2px; }
.menu__ol { position: relative; }
/* Okunaklılık: tümü büyük harf + geniş harf aralığı yerine normal yazım.
   Büyük harf Türkçede (İ/ı) hem yorucu hem daha zor taranıyor. */
.menu__bag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px;
  font-family: var(--kondens);
  font-size: 1.04rem; font-weight: 600; letter-spacing: .005em;
  color: var(--lacivert);
  white-space: nowrap;
  position: relative;
}
.menu__bag:hover { color: var(--altin-koyu); }
.menu__bag.acik { color: var(--altin-koyu); }
.menu__bag.acik::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 3px;
  height: 2px; background: var(--altin);
}
.menu__bag svg { width: 11px; height: 11px; transition: transform .25s var(--yumusak); }
.menu__ol:hover .menu__bag svg { transform: rotate(180deg); }

/* Açılır menü — fiş kartı sekmesi gibi */
.acilir {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 296px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi);
  border-top: 3px solid var(--altin);
  box-shadow: var(--golge-kalk);
  padding: 8px;
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .22s var(--yumusak);
}
.menu__ol:hover .acilir { opacity: 1; visibility: visible; transform: translateY(0); }
.acilir a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 14px;
  font-size: .95rem;
  color: var(--lacivert);
  border-bottom: 1px dotted var(--cizgi-ince);
}
.acilir li:last-child a { border-bottom: 0; }
.acilir a:hover { background: var(--altin-soluk); color: var(--lacivert-koyu); }
.acilir .dot { width: 5px; height: 5px; background: var(--altin); transform: rotate(45deg); flex: none; }


/* Hamburger */
.hamburger {
  display: none; width: 46px; height: 46px;
  border: 1px solid var(--cizgi); background: var(--kart);
  border-radius: 2px; padding: 0; place-items: center; flex: none;
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
}
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--lacivert); transition: all .25s var(--yumusak); }
.hamburger span + span { margin-top: 5px; }
.hamburger.acik span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.acik span:nth-child(2) { opacity: 0; }
.hamburger.acik span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobil menü */
.mobil-menu {
  position: fixed; inset: 0 0 0 auto; width: min(87vw, 370px); z-index: 950;
  background: var(--kart);
  border-left: 3px solid var(--altin);
  box-shadow: -16px 0 50px rgba(3,36,66,.2);
  transform: translateX(102%);
  transition: transform .34s var(--yumusak);
  display: flex; flex-direction: column; overflow-y: auto; padding: 22px;
}
.mobil-menu.acik { transform: translateX(0); }
.mobil-menu__ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mobil-menu__ust img { height: 42px; }
.mobil-menu a {
  display: block; padding: 13px 4px;
  font-family: var(--kondens); font-size: 1rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--lacivert);
  border-bottom: 1px solid var(--cizgi-ince);
}
.mobil-menu a.acik-sayfa { color: var(--altin-koyu); }
.mobil-menu .alt { padding-left: 14px; }
.mobil-menu .alt a {
  font-family: var(--serif); font-size: .94rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--metin);
  border-bottom: 1px dotted var(--cizgi-ince);
}
.mobil-menu .alt a::before { content: "—"; color: var(--altin); margin-right: 8px; }
.mobil-menu .dugme { margin-top: 20px; width: 100%; }

.perde {
  position: fixed; inset: 0; background: rgba(2,23,40,.5); z-index: 940;
  opacity: 0; visibility: hidden; transition: all .3s var(--yumusak);
}
.perde.acik { opacity: 1; visibility: visible; }

/* --- 7. Vitrin (hero) — tam ekran görsel + açık perde ----------------- */
.vitrin {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(92dvh, 820px);
  /* Başlık çubuğunun altına uzanır, görsel tepeden başlar */
  margin-top: calc(-1 * var(--baslik-h));
  padding-top: calc(var(--baslik-h) + clamp(40px, 5vw, 76px));
  padding-bottom: clamp(96px, 11vw, 168px);   /* dalga için pay */
  overflow: clip;
}

/* Arka plan görseli: background-image yerine <img> — LCP önceliklendirilebilsin.
   Katmanlar pozitif z-index ile sıralanır; negatif z-index bazı tarayıcılarda
   ana öğenin arkasına düşüp hiç boyanmıyor. */
.vitrin__zemin { position: absolute; inset: 0; z-index: 0; }
.vitrin__zemin img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 74% center;
}

/* Perde: soldan kağıt rengine doğru açılır, üstte başlık için hafif yumuşama */
.vitrin::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  /* Düz yatay degrade: açılı degradede durak yüzdeleri kutunun köşegenine
     göre izdüşüyor ve perde beklenenden çok daha geniş alanı kaplıyor. */
  background:
    /* Menü şeridi için uzun ve yumuşak üst geçiş — kenar çizgisi bırakmaz */
    linear-gradient(180deg,
      rgba(237, 239, 242, .93) 0%,
      rgba(237, 239, 242, .82) 8%,
      rgba(237, 239, 242, .52) 17%,
      rgba(237, 239, 242, .22) 26%,
      rgba(237, 239, 242, 0) 36%),
    /* Metin sütunu için yatay perde */
    linear-gradient(to right,
      var(--kagit) 0%,
      rgba(237, 239, 242, .96) 26%,
      rgba(237, 239, 242, .74) 40%,
      rgba(237, 239, 242, .26) 55%,
      rgba(237, 239, 242, 0) 68%);
}

.vitrin__ic { position: relative; z-index: 2; }

/* Dalga ayraç — bölümlerin alt kenarına oturur.
   Dolgu rengi bir sonraki bölümün zeminiyle aynıdır; böylece geçişte
   altta ince bir renk şeridi görünmez. */
.dalga {
  position: absolute; left: 0; right: 0; bottom: -1px;
  z-index: 3; line-height: 0; pointer-events: none;
}
.dalga svg { display: block; width: 100%; height: clamp(48px, 5.6vw, 92px); }
.dalga__dolgu { fill: var(--dalga-renk, var(--kagit)); }
.dalga__cizgi {
  fill: none; stroke: var(--altin); stroke-width: 2;
  vector-effect: non-scaling-stroke;   /* esnerken kalınlık sabit kalır */
  opacity: .85;
}

/* Dalgası olan bölüm: taşmayı kes ve alta pay bırak */
.dalgali { position: relative; overflow: clip; }
.dalgali > .kap { position: relative; z-index: 1; }
.bolum.dalgali { padding-bottom: clamp(70px, 6.8vw, 98px); }

/* Dalgalı bir bölümün ardından gelen bölümde üst boşluk kısılır:
   dalganın bıraktığı alan zaten görsel bir ayrım oluşturuyor. */
.dalgali + .bolum,
.dalgali + .katalog,
.dalgali + section > .kap:first-child { padding-top: clamp(16px, 1.8vw, 28px); }
.vitrin__metin { max-width: 640px; }

.vitrin h1 {
  font-size: clamp(2.35rem, 5.1vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  margin-bottom: 24px;
  text-wrap: balance;
}
.vitrin h1 .satir-2 {
  display: block;
  color: var(--altin-koyu);
  font-style: italic;
  font-weight: 500;
}

.vitrin__giris {
  font-size: 1.1rem;
  line-height: 1.68;
  color: var(--metin);
  max-width: 56ch;
  text-wrap: pretty;
}
.vitrin__giris--ikincil { margin-top: 12px; font-size: 1.02rem; color: var(--soluk); }

.vitrin__motto {
  margin-top: 28px;
  padding-left: 20px;
  border-left: 2px solid var(--altin);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--lacivert);
  max-width: 46ch;
}

.vitrin__eylem {
  margin-top: 36px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
/* İkincil eylem düğme değil, metin bağlantısı — iki düğme klişesinden kaçınılır */
.vitrin__ikincil {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--kondens); font-size: .92rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lacivert);
  padding-bottom: 3px;
  border-bottom: 1px solid var(--cizgi);
  transition: color .22s var(--yumusak), border-color .22s var(--yumusak);
}
.vitrin__ikincil svg { width: 15px; height: 15px; transition: transform .25s var(--yumusak); }
.vitrin__ikincil:hover { color: var(--altin-koyu); border-color: var(--altin); }
.vitrin__ikincil:hover svg { transform: translateX(4px); }

/* --- 8. Künye şeridi --------------------------------------------------
   Ortak çizgilerle birleşmiş tek yükseltilmiş blok; hero dalgasının üzerine
   biner. Hücreler dikey/ortalı: açıklama metni tüm hücre genişliğini kullanır. */
.kunye {
  position: relative; z-index: 5;
  margin-top: clamp(-92px, -6vw, -52px);
  padding: 0 0 clamp(30px, 3.5vw, 50px);
}
.kunye__izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cizgi-ince);
  border: 1px solid var(--cizgi-ince);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--golge-kalk);
}

.kunye-kart {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 20px 18px 18px;
  background: var(--kart-ust);
  color: inherit;
  transition: background .3s var(--yumusak);
}
.kunye-kart:hover { background: #FCFAF6; }

.kunye-kart__ikon {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--altin-soluk);
  border: 1px solid rgba(181, 140, 73, .32);
  color: var(--altin-koyu);
  margin-bottom: 12px;
  transition: background .3s var(--yumusak), color .3s var(--yumusak),
              border-color .3s var(--yumusak);
}
.kunye-kart__ikon svg { width: 20px; height: 20px; }
.kunye-kart:hover .kunye-kart__ikon {
  background: var(--altin); border-color: var(--altin); color: #fff;
}

.kunye-kart__govde { display: contents; }
.kunye-kart h3 {
  font-family: var(--kondens);
  font-size: .86rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lacivert);
  margin: 0 0 9px;
  padding-bottom: 8px;
  position: relative;
}
.kunye-kart h3::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 24px; height: 2px; background: var(--altin); border-radius: 2px;
}
.kunye-kart p {
  font-size: .88rem; line-height: 1.48; color: var(--soluk);
  margin: 0 0 12px;
}
.kunye-kart__ok {
  width: 17px; height: 17px; flex: none; margin-top: auto;
  color: var(--cizgi);
  transition: color .3s var(--yumusak), transform .3s var(--yumusak);
}
.kunye-kart:hover .kunye-kart__ok { color: var(--altin); transform: translateX(3px); }

/* --- 8b. KATALOG BÖLÜMÜ (Hizmetlerimiz) ------------------------------ */
.katalog {
  position: relative;
  background: transparent;           /* künye şeridiyle aynı zemin — ton farkı olmaz */
  padding: clamp(10px, 1.4vw, 18px) 0 clamp(72px, 7vw, 104px);
  overflow: clip;
}
/* Zeminde çok soluk kemer/sütun izleri */
.katalog::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: none;
}
.katalog > .kap { position: relative; z-index: 1; }

/* Başlık ortalı, iki yanında çelenk dalı */
.katalog__bas {
  margin-bottom: clamp(22px, 2.6vw, 34px);
  text-align: center;
}
.katalog__bas .etiket { margin-bottom: 6px; }
.katalog__baslik {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2vw, 28px);
}
.katalog__baslik h2 { line-height: 1.1; }
.celenk {
  height: clamp(46px, 4.6vw, 68px);
  width: auto;
  flex: none;
  opacity: .9;
}
/* Kaynak görsel sağ dal biçiminde; sol taraf aynalanır */
.celenk--sol { transform: scaleX(-1); }
.katalog__kural {
  display: block; width: 96px; height: 2px;
  background: var(--altin); border-radius: 2px;
  margin: 16px auto 0;
}

/* 3 + 2 düzeni */
.katalog__izgara {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
}
.katalog__izgara > :nth-child(-n+3) { grid-column: span 4; }
.katalog__izgara > :nth-child(4)    { grid-column: span 5; }
.katalog__izgara > :nth-child(5)    { grid-column: span 7; }

/* --- Hizmet kartı ---------------------------------------------------- */
.hkart {
  position: relative;
  isolation: isolate;
  display: block;
  min-height: 320px;
  padding: 30px 30px 26px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 18px;
  box-shadow: var(--golge-kart);
  color: inherit;
  overflow: hidden;
  transition: transform .32s var(--yumusak), box-shadow .32s var(--yumusak),
              border-color .32s var(--yumusak);
}
.hkart:hover {
  transform: translateY(-6px);
  box-shadow: var(--golge-kalk);
  border-color: var(--altin-soluk);
}

/* Sağda tam kanayan ürün görseli — metin tarafı beyaza doğru eritilir */
.hkart__gorsel {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  width: 62%; height: 100%;
  object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
          mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}

/* Arka planda soluk marka mührü */
.hkart__muhur {
  position: absolute; z-index: 0;
  top: 16px; left: 46%;
  width: 128px; height: 128px;
  opacity: .05; pointer-events: none;
}
.hkart__muhur img { width: 100%; height: 100%; object-fit: contain; }

/* Sağ üst köşedeki gidiş rozeti */
.hkart__git {
  position: absolute; z-index: 2;
  top: 22px; right: 22px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lacivert-sis);
  color: var(--lacivert);
  transition: background .3s var(--yumusak), color .3s var(--yumusak), transform .3s var(--yumusak);
}
.hkart__git svg { width: 18px; height: 18px; }
.hkart:hover .hkart__git { background: var(--lacivert); color: #fff; transform: rotate(45deg); }

.hkart__ic { position: relative; z-index: 1; max-width: 27ch; }

.hkart__ust { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.hkart__no {
  font-family: var(--serif); font-size: 1.28rem; font-weight: 500;
  color: var(--kagit-golge); line-height: 1;
}
.hkart__etiket {
  font-family: var(--kondens); font-size: .74rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--soluk);
}

.hkart h3 {
  font-size: clamp(1.32rem, 1.9vw, 1.72rem);
  line-height: 1.18; letter-spacing: -.012em;
  margin-bottom: 16px;
  text-wrap: balance;
}
.hkart__kural {
  display: block; width: 42px; height: 1.5px;
  background: var(--altin); opacity: .55; margin-bottom: 16px;
}
.hkart p {
  font-size: .96rem; line-height: 1.6; color: var(--metin);
  margin: 0 0 26px;
}

.hkart__eylem {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--kondens); font-size: .84rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--lacivert);
}
/* Mühür benzeri yuvarlak buton */
.hkart__pul {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lacivert-sis);
  color: var(--lacivert);
  box-shadow: inset 0 0 0 1px rgba(3, 36, 66, .14);
  transition: background .3s var(--yumusak), color .3s var(--yumusak), transform .3s var(--yumusak);
}
.hkart__pul svg { width: 16px; height: 16px; }
.hkart:hover .hkart__pul { background: var(--altin); color: #fff; transform: translateX(3px); }
.hkart:hover .hkart__eylem { color: var(--altin-koyu); }

/* --- 9. FİŞ KARTI — imza öğesi --------------------------------------- */
.izgara { display: grid; gap: 26px; }
.izgara--2 { grid-template-columns: repeat(2, 1fr); }
.izgara--3 { grid-template-columns: repeat(3, 1fr); }
.izgara--4 { grid-template-columns: repeat(4, 1fr); }

.fis {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  padding: 34px 28px 30px;
  transition: transform .3s var(--yumusak), box-shadow .3s var(--yumusak), border-color .3s var(--yumusak);
  /* Fiş kartı çizgileri */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 30px,
    var(--cizgi-ince) 30px 31px
  );
  background-position: 0 74px;
  background-repeat: repeat;
}
/* Altın sekme — kartın üstünde */
.fis::before {
  content: "";
  position: absolute; top: -1px; left: 28px;
  width: 62px; height: 4px;
  background: var(--altin);
  transition: width .3s var(--yumusak);
}
.fis:hover {
  transform: translateY(-6px);
  box-shadow: var(--golge-kalk);
  border-color: var(--altin-soluk);
}
.fis:hover::before { width: 106px; }

.fis__ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.fis__kod { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--altin-koyu); }
.fis__no  { font-family: var(--mono); font-size: .7rem; color: var(--soluk); }

.fis h3 { margin-bottom: 12px; font-size: 1.16rem; line-height: 1.3; }
.fis p  { font-size: .96rem; color: var(--metin); }

.fis__bag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: auto; padding-top: 20px;
  font-family: var(--kondens); font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--altin-koyu);
}
.fis__bag svg { width: 15px; height: 15px; transition: transform .25s var(--yumusak); }
.fis:hover .fis__bag svg { transform: translateX(5px); }

a.fis { color: inherit; }
a.fis:hover h3 { color: var(--lacivert-koyu); }

/* Delikli fiş varyantı (hizmet kartları) */
.fis--delik { padding-bottom: 44px; }
.fis--delik::after {
  content: "";
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--cizgi);
  background: var(--kagit);
}

/* Sade kart (fiş çizgisi yok) */
.kutu {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  padding: 30px 28px;
  transition: all .3s var(--yumusak);
}
.kutu:hover { border-color: var(--altin-soluk); box-shadow: var(--golge-kart); transform: translateY(-4px); }
.kutu__no {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  color: var(--altin-koyu); display: block; margin-bottom: 12px;
}
.kutu h3 { font-size: 1.1rem; margin-bottom: 10px; }
.kutu p  { font-size: .95rem; margin: 0; }

/* --- 9. YAN ÇAĞRI KARTI (hizmet detayında yapışkan) ------------------ */
/* Hizmet detayındaki yan sütun: geniş ekranda yapışkan, dar ekranda akışa
   girer (bkz. 980px kırılımı). Satır içi stil yerine sınıf kullanılıyor,
   yoksa medya sorgusu satır içini ezemiyor. */
.hizmet-yan { position: sticky; top: calc(var(--baslik-h) + 12px); }

.yan-cagri {
  position: relative;
  margin-top: 22px;
  padding: 28px 26px 26px;
  background: var(--lacivert);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--golge-kalk);
}
/* Köşede soluk marka amblemi */
.yan-cagri::after {
  content: "";
  position: absolute; right: -26px; bottom: -26px;
  width: 130px; height: 130px;
  background: url("../img/logo-amblem-web.png") no-repeat center/contain;
  opacity: .07;
  pointer-events: none;
}
.yan-cagri__etiket {
  display: inline-block;
  font-family: var(--kondens); font-size: .72rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--altin-acik);
  margin-bottom: 12px;
}
.yan-cagri h3 {
  color: #fff; font-size: 1.22rem; line-height: 1.3;
  margin-bottom: 10px;
}
.yan-cagri p {
  font-size: .95rem; line-height: 1.62;
  color: rgba(255, 255, 255, .74);
  margin: 0 0 22px;
}
.yan-cagri__dugme { width: 100%; }
.yan-cagri__tel {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: #fff;
}
.yan-cagri__tel svg { width: 18px; height: 18px; color: var(--altin-acik); flex: none; }
.yan-cagri__tel:hover { color: var(--altin-acik); }

/* --- 9a. MİNİ HİZMET KARTI (ilgili hizmetler) ------------------------
   Katalog kartlarının kompakt hâli: görsel sağda kanar, metin solda. */
.mini-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}

.mini-kart {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 128px;
  padding: 18px 20px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 12px;
  box-shadow: var(--golge-kart);
  color: inherit;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s var(--yumusak), box-shadow .28s var(--yumusak),
              border-color .28s var(--yumusak);
}
.mini-kart:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-kalk);
  border-color: var(--altin-soluk);
}

.mini-kart__gorsel {
  position: absolute; inset: 0 0 0 auto; z-index: 0;
  width: 58%; height: 100%;
  object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
          mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  opacity: .85;
}

.mini-kart__ic {
  position: relative; z-index: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start;
}
.mini-kart__etiket {
  display: block;
  font-family: var(--kondens); font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--soluk);
  margin-bottom: 6px;
}
.mini-kart h3 {
  font-size: 1.06rem; line-height: 1.26; margin: 0;
  text-wrap: balance;
}

/* Ok solda, metnin altında — görselin üzerine binmiyor */
.mini-kart__ok {
  width: 32px; height: 32px; padding: 7px;
  margin-top: 12px;
  border-radius: 50%;
  background: var(--lacivert-sis);
  color: var(--lacivert);
  box-sizing: border-box; flex: none;
  transition: background .28s var(--yumusak), color .28s var(--yumusak),
              transform .28s var(--yumusak);
}
.mini-kart:hover .mini-kart__ok {
  background: var(--altin); color: #fff; transform: rotate(45deg);
}

/* --- 9b. DEĞERLER BLOĞU (Neden Perspektif) ---------------------------
   Ayrı ayrı yüzen kartlar yerine ortak çizgilerle birleşmiş tek blok;
   sayfadaki diğer kart ızgaralarından ayrışır. */
.degerler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;                        /* aradaki 1px, alttaki çizgi rengini gösterir */
  background: var(--cizgi-ince);
  border: 1px solid var(--cizgi-ince);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--golge-kart);
}

.deger {
  position: relative;
  background: var(--kart-ust);
  padding: 36px 30px 32px;
  transition: background .3s var(--yumusak);
}
.deger:hover { background: #FCFAF6; }

.deger__no {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--kagit-golge);
}
.deger__ikon {
  width: clamp(72px, 6.5vw, 88px);
  height: auto;
  margin-bottom: 20px;
}
.deger h3 {
  font-family: var(--kondens);
  font-size: 1.02rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--lacivert);
  margin-bottom: 14px;
  padding-bottom: 14px;
  position: relative;
  text-wrap: balance;
}
.deger h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px; background: var(--altin); border-radius: 2px;
  transition: width .3s var(--yumusak);
}
.deger:hover h3::after { width: 56px; }
.deger p {
  font-size: .96rem; line-height: 1.64; color: var(--metin);
  margin: 0;
}

/* --- 10. Çalışma süreci (açık tema) ---------------------------------- */
.surec {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 34px);
  counter-reset: adim;
}
.surec__adim {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px 22px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 12px;
  box-shadow: var(--golge-kart);
  transition: transform .28s var(--yumusak), box-shadow .28s var(--yumusak),
              border-color .28s var(--yumusak);
}
.surec__adim:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-kalk);
  border-color: var(--altin-soluk);
}
.surec__no {
  flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--altin-soluk);
  border: 1px solid rgba(181, 140, 73, .35);
  font-family: var(--serif); font-size: 1.02rem; font-weight: 600;
  color: var(--altin-koyu);
}
.surec__adim h3 { font-size: 1.08rem; margin-bottom: 8px; }
.surec__adim p  { font-size: .95rem; line-height: 1.58; margin: 0; }

/* --- 10b. Eski koyu adım ızgarası ------------------------------------ */
.adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.adim { padding: 32px 28px; background: var(--lacivert); transition: background .3s var(--yumusak); }
.adim:hover { background: var(--lacivert-orta); }
.adim__no {
  font-family: var(--serif); font-size: 2.7rem; font-weight: 600; line-height: 1;
  color: rgba(181,140,73,.5); display: block; margin-bottom: 14px;
}
.adim h3 { font-size: 1.13rem; margin-bottom: 9px; color: #fff; }
.adim p  { font-size: .94rem; color: rgba(255,255,255,.72); margin: 0; }

/* --- 11. Kimler için --------------------------------------------------- */
.kitle { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }
.kitle li {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 22px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  font-size: .96rem; color: var(--lacivert);
  transition: all .25s var(--yumusak);
}
.kitle li:hover { border-color: var(--altin); background: var(--altin-soluk); transform: translateY(-3px); }
.kitle li i { width: 6px; height: 6px; background: var(--altin); transform: rotate(45deg); flex: none; display: block; }

/* --- 12. Madde listesi ------------------------------------------------- */
.maddeler { list-style: none; display: grid; gap: 0; }
.maddeler li {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px dotted var(--cizgi);
  font-size: 1.01rem;
  color: var(--metin);
}
.maddeler li:first-child { border-top: 1px dotted var(--cizgi); }
.maddeler__no {
  font-family: var(--mono); font-size: .74rem; color: var(--altin-koyu);
  flex: none; padding-top: 5px; min-width: 30px;
}

/* Özellik satırı (başlık + açıklama) */
.ozellikler { list-style: none; display: grid; gap: 0; }
.ozellikler li {
  display: grid; grid-template-columns: 34px 1fr; gap: 18px;
  padding: 24px 0;
  border-bottom: 1px dotted var(--cizgi);
}
.ozellikler li:first-child { border-top: 1px dotted var(--cizgi); }
.ozellikler__no { font-family: var(--mono); font-size: .74rem; color: var(--altin-koyu); padding-top: 4px; }
.ozellikler h3 {
  font-family: var(--kondens); font-size: 1rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--lacivert); margin-bottom: 6px;
}
.ozellikler p { font-size: .97rem; margin: 0; }

/* --- 13. Görüş kartı --------------------------------------------------- */
.gorusler-ray { position: relative; }
.gorusler-hat {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 4px 22px;
  scrollbar-width: none;
}
.gorusler-hat::-webkit-scrollbar { display: none; }
.goruс, .gorus {
  flex: 0 0 min(400px, 82vw);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  padding: 32px 28px;
  position: relative;
}
.gorus::before {
  content: ""; position: absolute; top: -1px; left: 28px;
  width: 48px; height: 3px; background: var(--altin);
}
.gorus__tirnak {
  font-family: var(--serif); font-size: 3rem; line-height: .7;
  color: var(--altin-soluk); margin-bottom: 10px;
}
.gorus h3 { font-size: 1.06rem; line-height: 1.42; margin-bottom: 13px; font-style: italic; }
.gorus p  { font-size: .95rem; flex: 1; }
/* Görüş sahibi: fotoğraf yoksa unvanın baş harfinden rozet üretilir */
.gorus__kisi {
  display: flex; align-items: center; gap: 12px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px dotted var(--cizgi);
}
.gorus__foto {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  object-fit: cover;
  border: 1px solid var(--cizgi);
}
.gorus__foto--harf {
  display: grid; place-items: center;
  background: var(--altin-soluk);
  border-color: rgba(181, 140, 73, .35);
  font-family: var(--serif); font-size: 1.16rem; font-weight: 600;
  color: var(--altin-koyu);
}
.gorus__kim { min-width: 0; }
.gorus__kim strong {
  display: block; font-family: var(--serif); font-size: .98rem;
  font-weight: 600; color: var(--lacivert);
}
.gorus__kim small {
  display: block;
  font-family: var(--kondens); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--altin-koyu);
  margin-top: 2px;
}
.gorusler-nav { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }
.gorusler-nav button {
  width: 46px; height: 46px; border: 1px solid var(--cizgi);
  background: var(--kart); color: var(--lacivert);
  display: grid; place-items: center; transition: all .25s var(--yumusak);
}
.gorusler-nav button:hover { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.gorusler-nav svg { width: 19px; height: 19px; }

/* Görüş paylaşım çağrısı — görüş şeridinin altında, altın kırıklı kâğıt */
.paylas {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(24px, 2.8vw, 34px) clamp(24px, 3vw, 38px);
  background: var(--altin-soluk);
  border: 1px solid rgba(181, 140, 73, .3);
  border-radius: 16px;
}
.paylas__ic { min-width: 0; flex: 1 1 380px; }
.paylas h3 {
  font-family: var(--kondens); font-size: .96rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--lacivert); margin: 0 0 10px;
}
.paylas p { margin: 0; font-size: .97rem; line-height: 1.62; color: var(--murekkep); }
.paylas__not {
  margin-top: 10px !important;
  font-size: .89rem !important; color: var(--soluk) !important;
  padding-top: 10px; border-top: 1px dotted rgba(181, 140, 73, .4);
}
.paylas .dugme { flex: none; }

/* --- 14. Sayfa başlığı (iç sayfalar) ---------------------------------- */
.sayfa-bas {
  position: relative;
  background: var(--lacivert);
  color: #fff;
  overflow: hidden;
}
.sayfa-bas::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 88% 18%, rgba(181,140,73,.26), transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%);
}
.sayfa-bas__ic { position: relative; z-index: 2; padding: clamp(52px, 6.5vw, 88px) 0; max-width: 840px; }
.sayfa-bas h1 { color: #fff; }
.sayfa-bas p  { margin-top: 16px; font-size: 1.06rem; color: rgba(255,255,255,.8); max-width: 690px; }
.sayfa-bas .etiket { color: var(--altin-acik); }

/* Varsayılan: açık zemin (sayfaların çoğu açık temada) */
.iz {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  font-family: var(--kondens); font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--soluk); margin-bottom: 18px;
}
.iz a { color: var(--lacivert); }
.iz a:hover { color: var(--altin-koyu); }
.iz i { width: 4px; height: 4px; background: var(--altin); transform: rotate(45deg); display: block; }

/* Lacivert banner içindeyken açık renge döner */
.sayfa-bas .iz { color: rgba(255,255,255,.58); }
.sayfa-bas .iz a { color: rgba(255,255,255,.8); }
.sayfa-bas .iz a:hover { color: var(--altin-acik); }

/* --- 15. İkili yerleşim ---------------------------------------------- */
.ikili {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 64px); align-items: center;
}
.ikili--genis-sol { grid-template-columns: 1.12fr .88fr; }
.ikili__gorsel img {
  width: 100%;
  border: 1px solid var(--cizgi);
  background: var(--kart);
  padding: 9px;
  box-shadow: var(--golge-kart);
}

/* Metin bloğu */
.metin h2 { margin-top: 44px; margin-bottom: 15px; }
.metin h2:first-child { margin-top: 0; }
.metin p  { font-size: 1.04rem; }

/* Vurgu kutusu */
.vurgu {
  background: var(--altin-soluk);
  border: 1px solid var(--altin);
  border-left-width: 3px;
  padding: 26px 28px;
}
.vurgu h3 { font-size: 1.1rem; margin-bottom: 9px; }
.vurgu p  { font-size: .98rem; margin: 0; color: var(--murekkep); }
.vurgu--lacivert { background: var(--lacivert); border-color: var(--lacivert-orta); border-left-color: var(--altin); color: rgba(255,255,255,.82); }
.vurgu--lacivert h3 { color: #fff; }
.vurgu--lacivert p  { color: rgba(255,255,255,.8); }

/* --- 15b. AÇIK SAYFA VİTRİNİ (iç sayfa girişleri) -------------------- */
.sayfa-vitrin {
  position: relative;
  background: var(--kagit);
  margin-top: calc(-1 * var(--baslik-h));
  padding-top: calc(var(--baslik-h) + clamp(34px, 4.5vw, 60px));
  padding-bottom: clamp(76px, 7.5vw, 112px);
  overflow: clip;
  text-align: center;
}
.sayfa-vitrin::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(181, 140, 73, .12), transparent 55%);
}
.sayfa-vitrin__ic { position: relative; z-index: 1; }

/* .iz varsayılan olarak koyu banner için beyaz; açık zeminde koyulaştırılır */
.sayfa-vitrin .iz {
  justify-content: center; margin-bottom: 22px;
  color: var(--soluk);
}
.sayfa-vitrin .iz a { color: var(--lacivert); }
.sayfa-vitrin .iz a:hover { color: var(--altin-koyu); }
.sayfa-vitrin .iz span { color: var(--soluk); }
.sayfa-vitrin .iz i { background: var(--altin); }
.sayfa-vitrin .katalog__baslik { justify-content: center; }
.sayfa-vitrin h1 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.14; }
.sayfa-vitrin__giris {
  margin: 22px auto 0; max-width: 62ch;
  font-size: 1.05rem; line-height: 1.68; color: var(--metin);
  text-wrap: pretty;
}

/* Ekran okuyucuya açık, görsel olarak gizli */
.gorsel-gizli {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- 15c. SSS SAYFASI ------------------------------------------------ */
.sss-ara {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: min(100%, 560px);
  margin: 32px auto 0;
  padding: 4px 6px 4px 18px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  box-shadow: var(--golge-kart);
  transition: border-color .2s var(--yumusak), box-shadow .2s var(--yumusak);
}
.sss-ara:focus-within { border-color: var(--altin); box-shadow: 0 0 0 4px rgba(181, 140, 73, .14); }
.sss-ara > svg { width: 20px; height: 20px; color: var(--soluk); flex: none; }
.sss-ara input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  padding: 13px 0;
  font-family: var(--serif); font-size: 1rem; color: var(--murekkep);
}
.sss-ara input::-webkit-search-cancel-button { display: none; }
.sss-ara__temizle {
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--kagit-koyu); color: var(--lacivert);
  display: grid; place-items: center; flex: none;
}
.sss-ara__temizle svg { width: 16px; height: 16px; }
.sss-ara__temizle:hover { background: var(--altin); color: #fff; }

.sss-duzen {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}

/* Kategori kılavuzu */
.sss-kilavuz { position: sticky; top: calc(var(--baslik-h) + 16px); }
.sss-kilavuz ul { list-style: none; display: grid; gap: 2px; }
.sss-kilavuz__bag {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .95rem; color: var(--metin);
  transition: background .2s var(--yumusak), color .2s var(--yumusak);
}
.sss-kilavuz__bag em {
  font-style: normal; font-family: var(--mono); font-size: .74rem;
  color: var(--soluk);
}
.sss-kilavuz__bag:hover { background: var(--kagit); color: var(--lacivert); }
.sss-kilavuz__bag.secili {
  background: var(--lacivert); color: #fff; font-weight: 500;
}
.sss-kilavuz__bag.secili em { color: var(--altin-acik); }
.sss-kilavuz__yardim {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--cizgi);
}
.sss-kilavuz__yardim p { font-size: .93rem; color: var(--soluk); margin-bottom: 14px; }
.sss-kilavuz__yardim .dugme { width: 100%; padding: 11px 16px; font-size: .8rem; }

/* Soru grupları */
.sss-grup { margin-bottom: clamp(30px, 3.6vw, 48px); scroll-margin-top: calc(var(--baslik-h) + 20px); }
.sss-grup[hidden] { display: none; }
.sss-grup__bas {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--kondens); font-size: .84rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--altin-koyu);
  margin-bottom: 16px;
}
.sss-grup__bas i { flex: 1; height: 1px; background: var(--cizgi); }

.sss-sonuc {
  padding: 14px 18px; margin-bottom: 20px;
  background: var(--altin-soluk); border: 1px solid var(--altin-soluk);
  border-left: 3px solid var(--altin); border-radius: 8px;
  font-size: .94rem; color: var(--lacivert);
}

/* --- 15d. ETİK BEYANI ------------------------------------------------ */
.beyan { list-style: none; display: grid; gap: 0; counter-reset: madde; }
.beyan__madde {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding: 28px 0;
  border-top: 1px solid var(--cizgi);
}
.beyan__madde:last-child { border-bottom: 1px solid var(--cizgi); }
.beyan__no {
  font-family: var(--kondens); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--altin-koyu);
  padding-top: 6px;
}
.beyan__madde p {
  margin: 0;
  font-size: 1.06rem; line-height: 1.72; color: var(--metin);
  text-wrap: pretty;
}

/* Beyanı kapatan mühür bloğu */
.beyan__muhur {
  display: flex; align-items: center; gap: clamp(20px, 2.6vw, 34px);
  margin-top: clamp(30px, 3.5vw, 48px);
  padding: 28px clamp(24px, 3vw, 36px);
  background: var(--altin-soluk);
  border: 1px solid rgba(181, 140, 73, .3);
  border-radius: 14px;
}
.beyan__muhur img { width: clamp(64px, 6vw, 84px); height: auto; flex: none; opacity: .9; }
.beyan__muhur strong {
  display: block;
  font-family: var(--kondens); font-size: .92rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--lacivert);
  margin-bottom: 8px;
}
.beyan__muhur p { margin: 0; font-size: .98rem; line-height: 1.64; color: var(--murekkep); }

/* --- 15e. HAKKIMIZDA — VİZYON / MİSYON + ÇALIŞMA İLKELERİ ------------
   Metinler uzun ve olduğu gibi korunuyor; okunabilirliği tipografi
   taşıyor: dev filigran numara, altın kural, girişi öne çıkaran ilk
   paragraf ve kitap tarzı gömme harf. Künye şeridiyle aynı "birleşik
   blok" dili (1px boşluk + ortak kenarlık). ------------------------- */
.ikiz {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--cizgi-ince);
  border: 1px solid var(--cizgi-ince);
  border-radius: 18px;
  overflow: hidden;
}
.ikiz__yan {
  position: relative;
  overflow: hidden;
  background: var(--kart-ust);
  padding: clamp(30px, 3.4vw, 46px) clamp(24px, 2.8vw, 40px) clamp(34px, 3.8vw, 50px);
}
/* Misyon kanadı: koyu bir blok yerine altın kırıklı kâğıt tonu */
.ikiz__yan--vurgu { background: #FCFAF6; }

/* Katalog fişi damgası gibi içi boş dev numara */
.ikiz__etiket {
  position: absolute; top: -14px; right: 12px;
  font-family: var(--kondens); font-weight: 700;
  font-size: clamp(4.6rem, 8vw, 7.4rem); line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--cizgi);
  pointer-events: none; user-select: none;
}
.ikiz__yan--vurgu .ikiz__etiket { -webkit-text-stroke-color: rgba(181, 140, 73, .32); }

.ikiz__yan h2 {
  position: relative;
  font-size: clamp(1.5rem, 2.3vw, 2rem);
  line-height: 1.16;
  margin: 0;
}
.ikiz__kural {
  display: block; width: 46px; height: 2px;
  background: var(--altin); border-radius: 2px;
  margin: 14px 0 22px;
}
.ikiz__yan p { margin: 0 0 15px; color: var(--soluk); }
.ikiz__yan p:last-child { margin-bottom: 0; }

/* Giriş paragrafı: biraz büyük, koyu ve gömme harfli */
.ikiz__yan p:first-of-type {
  font-size: clamp(1.02rem, 1.2vw, 1.1rem);
  line-height: 1.62;
  color: var(--lacivert);
}
.ikiz__yan p:first-of-type::first-letter {
  float: left;
  font-size: 3em; line-height: .86;
  padding: 5px 10px 0 0;
  color: var(--altin-koyu);
  font-weight: 600;
}

/* Çalışma ilkeleri */
.ilkeler {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(26px, 3vw, 40px);
}
.ilke {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: clamp(20px, 2.2vw, 28px);
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 14px;
  transition: border-color .25s var(--yumusak), transform .25s var(--yumusak),
              box-shadow .25s var(--yumusak);
}
.ilke:hover {
  border-color: var(--altin);
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(3, 36, 66, .07);
}
.ilke__no {
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  color: var(--altin-koyu);
  padding: 6px 11px;
  background: var(--altin-soluk);
  border: 1px solid rgba(181, 140, 73, .28);
  border-radius: 999px;
  white-space: nowrap;
}
.ilke h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--lacivert); }
.ilke p { margin: 0; font-size: .95rem; line-height: 1.62; color: var(--soluk); }

/* --- 16. SSS akordiyonu ---------------------------------------------- */
.sss-filtre { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.sss-filtre button {
  padding: 10px 20px;
  border: 1px solid var(--cizgi); background: var(--kart);
  font-family: var(--kondens); font-size: .85rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--lacivert);
  transition: all .25s var(--yumusak);
}
.sss-filtre button:hover { border-color: var(--altin); }
.sss-filtre button.secili { background: var(--lacivert); border-color: var(--lacivert); color: #fff; }

.sss-liste { display: grid; gap: 10px; }
.sss-oge {
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color .28s var(--yumusak), box-shadow .28s var(--yumusak);
}
.sss-oge:hover { border-color: var(--cizgi); }
.sss-oge.acik { border-color: var(--altin-soluk); box-shadow: var(--golge-kart); }
.sss-oge[hidden] { display: none; }
.sss-oge h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.sss-soru {
  width: 100%; text-align: left; background: none; border: 0;
  padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 16px;
  font-family: var(--serif); font-size: 1.04rem; font-weight: 600;
  color: var(--lacivert); line-height: 1.45;
}
.sss-soru:hover { color: var(--altin-koyu); }
.sss-soru__no {
  font-family: var(--mono); font-size: .72rem; color: var(--altin-koyu);
  flex: none; padding-top: 5px;
}
.sss-soru__metin { flex: 1; }
.sss-isaret {
  width: 30px; height: 30px; flex: none; margin-left: auto;
  border-radius: 50%;
  background: var(--kagit); color: var(--lacivert);
  display: grid; place-items: center;
  transition: all .3s var(--yumusak);
}
.sss-isaret svg { width: 13px; height: 13px; transition: transform .3s var(--yumusak); }
.sss-oge.acik .sss-isaret { background: var(--altin); color: #fff; }
.sss-oge.acik .sss-isaret svg { transform: rotate(45deg); }
.sss-cevap { max-height: 0; overflow: hidden; transition: max-height .36s var(--yumusak); }
.sss-cevap > div {
  padding: 0 22px 22px 60px;
  font-size: .99rem; line-height: 1.68; color: var(--metin);
}
.sss-oge[hidden] { display: none; }

/* --- 17. Çağrı şeridi ------------------------------------------------- */
/* Düz lacivert: üstündeki dalga ayracı zaten geçişi sağlıyor,
   ayrıca radyal degrade eklemek gereksiz gürültü yapıyordu. */
.cagri { position: relative; background: var(--lacivert); overflow: hidden; }
.cagri__ic {
  position: relative; z-index: 2;
  padding: clamp(52px, 6.5vw, 82px) 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 36px; flex-wrap: wrap;
}
.cagri h2 { color: #fff; max-width: 620px; }
.cagri p  { color: rgba(255,255,255,.76); margin-top: 12px; max-width: 560px; }

/* --- 18. Formlar ------------------------------------------------------ */
.form { display: grid; gap: 20px; }
/* align-items:start — yardım metni olan alan komşusunu esnetmesin */
.form__satir {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px; align-items: start;
}
/* Etiket / girdi / yardım satırları sabit: alanlar aynı hizada başlar */
.alan { display: grid; grid-template-rows: auto auto; gap: 7px; }
.alan label {
  font-family: var(--kondens); font-size: .84rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lacivert);
  min-height: 1.2em;
}
.alan label .zorunlu { color: var(--altin-koyu); }
.alan input, .alan select, .alan textarea {
  width: 100%;
  padding: 0 15px;
  height: 50px;                 /* input ve select aynı yükseklikte olsun */
  border: 1px solid var(--cizgi);
  background: var(--kart-ust);
  font-family: var(--serif); font-size: .98rem; color: var(--murekkep);
  border-radius: 2px;
  transition: all .22s var(--yumusak);
  -webkit-appearance: none; appearance: none;
}
/* Seçim kutusuna ok simgesi (appearance sıfırlandığı için) */
.alan select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23032442' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 15px;
}
.alan textarea {
  height: auto; min-height: 150px; resize: vertical;
  padding: 13px 15px; line-height: 1.62;
}
.alan input:focus, .alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--altin);
  box-shadow: 0 0 0 3px rgba(181,140,73,.16);
}
.alan small { font-size: .84rem; color: var(--soluk); }
.alan__hata { color: #9B2C2C; font-size: .85rem; }
.alan input.hatali, .alan textarea.hatali, .alan select.hatali { border-color: #9B2C2C; }

.form-not { font-size: .88rem; color: var(--soluk); }

/* Form düğmeleri eşit genişlikte */
.form__dugmeler {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form__dugmeler .dugme { width: 100%; }

/* Bildirim */
.bildirim {
  padding: 15px 20px; border: 1px solid; border-left-width: 3px;
  font-size: .96rem; margin-bottom: 20px;
}
.bildirim--basari { background: #F0F6F0; border-color: #4A7A5C; color: #2C4A36; }
.bildirim--hata   { background: #FBF0F0; border-color: #9B2C2C; color: #6B1F1F; }
.bildirim--bilgi  { background: var(--altin-soluk); border-color: var(--altin); color: var(--lacivert-koyu); }

/* --- 18b. İLETİŞİM GİRİŞİ -------------------------------------------- */
/* Boş bir başlık bandı yerine: görsel + doğrudan arama eylemi */
.iletisim-vitrin {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: min(62dvh, 520px);
  margin-top: calc(-1 * var(--baslik-h));
  padding-top: calc(var(--baslik-h) + clamp(32px, 4vw, 56px));
  padding-bottom: clamp(40px, 5vw, 68px);
  overflow: clip;
  border-bottom: 1px solid var(--cizgi);
}
.iletisim-vitrin__zemin { position: absolute; inset: 0; z-index: 0; }
.iletisim-vitrin__zemin img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 78% center;
}
.iletisim-vitrin::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(237, 239, 242, .93) 0%,
      rgba(237, 239, 242, .80) 10%,
      rgba(237, 239, 242, .40) 22%,
      rgba(237, 239, 242, 0) 40%),
    linear-gradient(to right,
      var(--kagit) 0%,
      rgba(237, 239, 242, .96) 30%,
      rgba(237, 239, 242, .72) 46%,
      rgba(237, 239, 242, .18) 62%,
      rgba(237, 239, 242, 0) 74%);
}
/* .kap zaten margin-inline:auto ile ortalıyor; genişlik sınırı iç sarmalayıcıya
   verilmezse blok daralıp sayfanın ortasına kayıyor. */
.iletisim-vitrin__ic { position: relative; z-index: 2; }
.iletisim-vitrin__metin { max-width: 620px; }
.iletisim-vitrin h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.14; letter-spacing: -.018em;
  text-wrap: balance;
}
.iletisim-vitrin .iz { color: var(--soluk); }
.iletisim-vitrin .iz a { color: var(--lacivert); }
.iletisim-vitrin .iz a:hover { color: var(--altin-koyu); }
.iletisim-vitrin .iz i { background: var(--altin); }
.iletisim-vitrin__giris {
  margin-top: 16px; font-size: 1.06rem; line-height: 1.66;
  color: var(--metin); max-width: 52ch;
}

/* Hızlı iletişim — iki eşit eylem kartı */
.hizli-iletisim {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 32px;
  max-width: 620px;
}

.eylem-kart {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  box-shadow: var(--golge-kart);
  color: inherit;
  transition: transform .25s var(--yumusak), box-shadow .25s var(--yumusak),
              border-color .25s var(--yumusak);
}
.eylem-kart:hover {
  transform: translateY(-3px);
  box-shadow: var(--golge-kalk);
  border-color: var(--altin-soluk);
}

.eylem-kart__ikon {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--lacivert); color: var(--altin-acik);
  transition: background .25s var(--yumusak), color .25s var(--yumusak);
}
.eylem-kart__ikon svg { width: 22px; height: 22px; }
.eylem-kart:hover .eylem-kart__ikon { background: var(--altin); color: #fff; }

.eylem-kart--wa .eylem-kart__ikon { background: #25D366; color: #fff; }
.eylem-kart--wa:hover .eylem-kart__ikon { background: #1EB855; color: #fff; }

.eylem-kart__metin { min-width: 0; }
.eylem-kart__metin small {
  display: block;
  font-family: var(--kondens); font-size: .74rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--soluk);
}
.eylem-kart__metin strong {
  display: block;
  font-family: var(--serif); font-size: 1.06rem; font-weight: 600;
  color: var(--lacivert); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eylem-kart__ok {
  width: 18px; height: 18px; flex: none; margin-left: auto;
  color: var(--cizgi);
  transition: color .25s var(--yumusak), transform .25s var(--yumusak);
}
.eylem-kart:hover .eylem-kart__ok { color: var(--altin); transform: translateX(3px); }

/* --- 18c. İLETİŞİM SAYFASI ------------------------------------------- */
.iletisim-duzen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* Talep fişi — katalog kartıyla aynı dil */
.talep-fis {
  position: relative;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 14px;
  box-shadow: var(--golge-kart);
  padding: clamp(26px, 3vw, 40px);
}
.talep-fis::before {
  content: "";
  position: absolute; top: -1px; left: clamp(26px, 3vw, 40px);
  width: 64px; height: 3px; background: var(--altin);
  border-radius: 0 0 2px 2px;
}
.talep-fis__ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.talep-fis__kod {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--altin-koyu);
}
.talep-fis__zorunlu { font-size: .82rem; color: var(--soluk); }
.talep-fis__zorunlu span { color: var(--altin-koyu); }
.talep-fis h2 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 12px; }
.talep-fis__giris { font-size: 1rem; color: var(--metin); margin-bottom: 28px; max-width: 52ch; }
.talep-fis .form { margin-top: 4px; }

/* Bal küpü — ekran dışında ama erişilebilirlik ağacından da çıkarılmış */
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bildirim kutuları */
.bildirim { display: flex; gap: 12px; align-items: flex-start; }
.bildirim svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.bildirim__liste { margin: 8px 0 0; padding-left: 18px; list-style: disc; }
.bildirim__liste li { margin-bottom: 4px; }
.bildirim__liste a { color: inherit; text-decoration: underline; }
.bildirim:focus-visible { outline: 2px solid var(--altin); outline-offset: 3px; }

/* Yan sütun — form uzun olduğu için kaydırırken takip eder,
   böylece sağda büyük bir boşluk kalmaz. */
.iletisim-yan {
  display: grid; gap: 14px;
  position: sticky;
  top: calc(var(--baslik-h) - 40px);
}

.kanal {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--kart-ust);
  border: 1px solid var(--cizgi-ince);
  border-radius: 12px;
  color: inherit;
}
.kanal strong { display: block; font-family: var(--kondens); font-size: .82rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--lacivert); }
.kanal small { display: block; font-size: .9rem; color: var(--soluk); margin-top: 2px; line-height: 1.5; }
.kanal__ikon {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--lacivert-sis); color: var(--lacivert);
}
.kanal__ikon svg { width: 21px; height: 21px; }
.kanal__ikon--wa { background: #25D366; color: #fff; }

.kanal--bag { transition: transform .25s var(--yumusak), box-shadow .25s var(--yumusak), border-color .25s var(--yumusak); }
.kanal--bag:hover { transform: translateY(-3px); box-shadow: var(--golge-kart); border-color: var(--altin-soluk); }


.yan-kutu {
  padding: 20px 22px;
  background: var(--kart);
  border: 1px solid var(--cizgi-ince);
  border-left: 3px solid var(--lacivert-sis);
  border-radius: 10px;
}
.yan-kutu h3 { font-size: 1.02rem; margin-bottom: 8px; }
.yan-kutu p  { font-size: .93rem; line-height: 1.6; margin: 0; }
.yan-kutu--altin { background: var(--altin-soluk); border-color: var(--altin-soluk); border-left-color: var(--altin); }

/* SSS köprüsü */
.sss-kopru {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.sss-kopru p { margin-top: 12px; max-width: 56ch; }
.sss-kopru .dugme { flex: none; }

/* --- 19. İletişim kartı ---------------------------------------------- */
.iletisim-kart {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 26px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  transition: all .3s var(--yumusak);
}
.iletisim-kart:hover { border-color: var(--altin-soluk); box-shadow: var(--golge-kart); transform: translateY(-4px); }
.iletisim-kart__ikon {
  width: 48px; height: 48px; flex: none;
  display: grid; place-items: center;
  background: var(--lacivert); color: var(--altin-acik);
}
.iletisim-kart__ikon svg { width: 23px; height: 23px; }
.iletisim-kart h3 {
  font-family: var(--kondens); font-size: .88rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px;
}
.iletisim-kart a, .iletisim-kart p { font-size: 1.02rem; margin: 0; color: var(--lacivert); font-weight: 500; }
.iletisim-kart a:hover { color: var(--altin-koyu); }
.iletisim-kart small { display: block; color: var(--soluk); font-size: .86rem; margin-top: 3px; font-weight: 400; }

/* --- 20. Alt bilgi ---------------------------------------------------- */
.alt-bilgi {
  background: var(--lacivert-koyu);
  color: rgba(255,255,255,.66);
  font-size: .94rem;
}
.alt-bilgi__izgara {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 42px;
  padding: clamp(50px, 6vw, 74px) 0 40px;
}
/* Logonun zemini beyaz olduğu için koyu alanda beyaz bir kart içine alınır */
/* Koyu zemin için açık logo kullanılır; beyaz kart kutusuna gerek kalmaz */
.alt-bilgi__marka a { display: inline-block; margin-bottom: 22px; }
.alt-bilgi__marka img { height: 68px; width: auto; }
.alt-bilgi__marka p { font-size: .93rem; color: rgba(255,255,255,.6); max-width: 320px; }
.alt-bilgi h4 {
  font-family: var(--kondens); font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--altin-acik); margin: 0 0 18px;
}
.alt-liste { list-style: none; display: grid; gap: 11px; }
.alt-liste a { color: rgba(255,255,255,.66); font-size: .93rem; transition: all .22s var(--yumusak); }
.alt-liste a:hover { color: var(--altin-acik); padding-left: 5px; }
.alt-iletisim { display: grid; gap: 15px; }
.alt-iletisim div { display: flex; gap: 12px; align-items: flex-start; }
.alt-iletisim svg { width: 17px; height: 17px; color: var(--altin-acik); flex: none; margin-top: 4px; }
.alt-iletisim a { color: rgba(255,255,255,.82); font-weight: 500; }
.alt-iletisim a:hover { color: var(--altin-acik); }
.alt-bilgi__son {
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 22px 0;
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-family: var(--kondens); font-size: .84rem; letter-spacing: .05em;
  color: rgba(255,255,255,.48);
}
.alt-bilgi__son a { color: rgba(255,255,255,.6); }
.alt-bilgi__son a:hover { color: var(--altin-acik); }

/* --- 21. Yüzen düğmeler ----------------------------------------------- */
.yuzen { position: fixed; right: 20px; bottom: 20px; z-index: 800; display: grid; gap: 11px; }
.yuzen a, .yuzen button {
  width: 56px; height: 56px; border: 0;
  border-radius: 50%;                 /* eksikti: düğmeler kare görünüyordu */
  display: grid; place-items: center;
  box-shadow: var(--golge-kalk);
  transition: all .28s var(--yumusak);
  color: #fff;
  padding: 0;
}
.yuzen svg { width: 27px; height: 27px; }
.yuzen__wa { background: #25D366; }
.yuzen__wa:hover { background: #1EB855; transform: scale(1.07) translateY(-2px); color: #fff; }
.yuzen__yukari { background: var(--lacivert); opacity: 0; visibility: hidden; }
.yuzen__yukari svg { width: 20px; height: 20px; }
.yuzen__yukari.gorunur { opacity: 1; visibility: visible; }
.yuzen__yukari:hover { background: var(--altin); color: var(--lacivert-koyu); transform: translateY(-3px); }

/* --- 21b. MOBİL ALT NAVİGASYON --------------------------------------- */
/* Hamburger yerine; dokunma hedefleri 44px'in altına inmez. */
.alt-menu {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--cizgi);
  box-shadow: 0 -4px 20px rgba(3, 36, 66, .08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.alt-menu__oge {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-height: 58px; padding: 8px 4px 6px;
  background: none; border: 0;
  font-family: var(--kondens); font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; color: var(--soluk);
  transition: color .2s var(--yumusak);
}
.alt-menu__oge svg { width: 22px; height: 22px; }
.alt-menu__oge.secili { color: var(--lacivert); }
.alt-menu__oge.secili svg { color: var(--altin-koyu); }
.alt-menu__oge:active { color: var(--altin-koyu); }

/* Ortadaki arama düğmesi yükseltilir */
.alt-menu__oge--ana { color: var(--lacivert); }
.alt-menu__daire {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--altin); color: var(--lacivert-koyu);
  box-shadow: 0 6px 16px rgba(181, 140, 73, .38);
  margin-top: -20px;
}
.alt-menu__daire svg { width: 21px; height: 21px; }

/* --- 22. Belirme animasyonu ------------------------------------------- */
.belir { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--yumusak), transform .7s var(--yumusak); }
.belir.icerde { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .belir { opacity: 1; transform: none; }
}

/* --- 23. Duyarlılık ---------------------------------------------------- */
/* DİKKAT: Bloklar azalan max-width sırasında tutulur. Daha dar kırılımın
   daha genişini ezebilmesi için sıra bozulmamalı; aksi halde eşit
   özgüllükte sonra gelen kural kazanır (SSS düzeni bu yüzden mobilde
   iki sütunda kalıyordu). */
@media (max-width: 1180px) {
  /* Menü yan yana sığmıyor: logo ortada kalır, gezinme alt menüye iner */
  :root { --baslik-h: 116px; }
  .menu { display: none; }
  .alt-menu { display: flex; }
  .baslik-cubugu__satir { grid-template-columns: 1fr; padding: 16px 0; }

  /* Logo mobilde kaydırınca KÜÇÜLMEZ. Yapışkan çubuk kendi derleme
     katmanında bir kez rasterlendiği için yüksekliği animasyonlamak
     logoyu bulanıklaştırıyordu; onun yerine yalnızca dolgu daralır. */
  .marka img { height: 84px; transition: none; }
  .baslik-cubugu.toplu .marka img { height: 84px; }
  .baslik-cubugu.toplu .baslik-cubugu__satir { padding: 10px 0; }

  /* İçerik alt menünün altında kalmasın */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  /* WhatsApp alt menünün üstünde kalsın (alt menüde telefon var, WhatsApp yok) */
  .yuzen { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 16px; }
  .yuzen a, .yuzen button { width: 50px; height: 50px; }
  .yuzen svg { width: 24px; height: 24px; }
}

@media (max-width: 1080px) {
  .izgara--4 { grid-template-columns: repeat(2, 1fr); }
  .kunye__izgara { grid-template-columns: repeat(2, 1fr); }
  .alt-bilgi__izgara { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 980px) {
  .sss-duzen { grid-template-columns: 200px minmax(0, 1fr); }
  .kunye__izgara { grid-template-columns: repeat(2, 1fr); }

  /* Hizmet detayında yan sütun akışa girer; afiş metnin üstüne alınır ki
     sayfa "görsel -> kapsam -> çağrı" sırasında okunsun. */
  .hizmet-yan { position: static; display: contents; }
  .hizmet-yan > .ikili__gorsel { order: -1; }

  .izgara--3, .adimlar, .surec, .degerler { grid-template-columns: repeat(2, 1fr); }
  .ikili, .ikili--genis-sol { grid-template-columns: 1fr; }
  .ikiz, .ilkeler { grid-template-columns: 1fr; }
  .iletisim-duzen { grid-template-columns: 1fr; }
  .iletisim-yan { position: static; }
  .hizli-iletisim { grid-template-columns: 1fr; max-width: none; }

  /* Katalog: 3+2 yerine 2'şerli */
  .katalog__izgara > :nth-child(n) { grid-column: span 6; }
  .katalog__izgara > :nth-child(5) { grid-column: span 12; }
  .hkart { min-height: 290px; }

  /* Dar ekranda görsel sağa kayar, metin için sol taraf açılır */
  .vitrin { min-height: min(84dvh, 700px); }
  .vitrin__zemin img { object-position: 78% center; }
  .vitrin::after {
    background:
      linear-gradient(180deg,
        var(--kagit) 0%,
        rgba(237, 239, 242, .96) 42%,
        rgba(237, 239, 242, .84) 68%,
        rgba(237, 239, 242, .55) 100%);
  }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  :root { --baslik-h: 108px; }
  .marka img, .baslik-cubugu.toplu .marka img { height: 76px; }
  .vitrin { min-height: auto; padding-bottom: clamp(48px, 9vw, 72px); }
  /* Düğme tam genişlik olunca ikincil bağlantı hemen altına yapışıyordu.
     Sütuna alınıp araları açılıyor; bağlantıya da dikey dolgu veriliyor —
     hem nefes alıyor hem dokunma hedefi 44px'i geçiyor (29px idi). */
  .vitrin__eylem { flex-direction: column; align-items: stretch; gap: 24px; }
  .vitrin__eylem .dugme { width: 100%; }
  .vitrin__ikincil { align-self: flex-start; padding: 12px 2px 8px; }
  .izgara--2, .izgara--3, .izgara--4, .adimlar, .surec, .degerler { grid-template-columns: 1fr; }

  /* Katalog: tek sütun; görsel dar ekranda metni bastırmasın */
  .katalog__izgara > :nth-child(n) { grid-column: span 12; }
  .hkart { min-height: auto; padding: 26px 24px 24px; }
  .hkart__ic { max-width: none; }
  .hkart__gorsel { width: 100%; opacity: .3; -webkit-mask-image: none; mask-image: none; }
  .hkart__git { top: 18px; right: 18px; width: 38px; height: 38px; }
  .form__satir { grid-template-columns: 1fr; }
  .kunye__izgara { grid-template-columns: 1fr; }
  .sss-kopru { flex-direction: column; align-items: flex-start; }
  .alt-bilgi__izgara { grid-template-columns: 1fr; }
  .cagri__ic { flex-direction: column; align-items: flex-start; }
  .fis { padding: 28px 22px; }
  .sss-soru { padding: 18px 20px; font-size: 1rem; }
  .sss-cevap > div { padding: 0 20px 20px; }
  .ozellikler li { grid-template-columns: 1fr; gap: 8px; }
  .ozellikler__no { padding-top: 0; }

  /* Beyan ve SSS */
  .beyan__madde { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .beyan__no { padding-top: 0; }
  .beyan__muhur { flex-direction: column; align-items: flex-start; text-align: left; }
  .sss-duzen { grid-template-columns: 1fr; }
  .sss-kilavuz { position: static; }
  .sss-kilavuz ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .sss-kilavuz__bag { border: 1px solid var(--cizgi); border-radius: 999px; padding: 8px 14px; }
  .sss-cevap > div { padding-left: 22px; }

  /* Künye şeridi: dört kart alt alta yığılınca ekranın tamamını yiyordu.
     Dar ekranda kartlar dikey yığın yerine "ikon | metin" satırına döner. */
  .kunye { margin-top: -40px; padding-bottom: clamp(20px, 4vw, 30px); }
  .kunye-kart {
    flex-direction: row; align-items: center; text-align: left;
    gap: 14px; padding: 14px 16px;
  }
  .kunye-kart__ikon { width: 38px; height: 38px; margin-bottom: 0; }
  .kunye-kart__ikon svg { width: 18px; height: 18px; }
  .kunye-kart__govde { display: block; flex: 1; min-width: 0; }
  .kunye-kart h3 { margin: 0 0 3px; padding-bottom: 0; }
  .kunye-kart h3::after { display: none; }
  .kunye-kart p { margin: 0; font-size: .85rem; }
  .kunye-kart__ok { margin-top: 0; }

  /* Vizyon/Misyon: dar ekranda filigran numara başlığa girmesin */
  .ikiz__etiket { font-size: 4rem; top: -8px; right: 8px; }
  .ikiz__yan p:first-of-type::first-letter { font-size: 2.7em; padding-right: 8px; }
  .ilke { gap: 13px; }

  /* Kimler için: farklı genişlikteki etiketler dar ekranda dağınık bir blok
     oluşturuyordu; katalog fişi gibi tek sütun listeye dönüşür. */
  .kitle { display: grid; gap: 0; }
  .kitle li {
    padding: 14px 2px;
    background: none;
    border: 0;
    border-bottom: 1px dotted var(--cizgi);
  }
  .kitle li:first-child { border-top: 1px dotted var(--cizgi); }
  .kitle li:hover { background: none; border-color: var(--cizgi); transform: none; }

  /* Hizmet detayı: yan çağrı ve afiş tam genişlik, sıkı dolgu */
  .yan-cagri { padding: 26px 22px; }
  .ozellikler h3 { font-size: 1rem; }

  /* Alt bilgi: tek sütun ve ortalı */
  .alt-bilgi__izgara { text-align: center; justify-items: center; gap: 34px; }
  .alt-bilgi__marka a { margin-bottom: 14px; }
  .alt-bilgi__marka img { height: 92px; }
  .alt-bilgi__marka p { max-width: 36ch; margin-inline: auto; }
  .alt-liste { justify-items: center; }
  .alt-liste a:hover { padding-left: 0; }
  .alt-iletisim { justify-items: center; }
  .alt-iletisim div { justify-content: center; }
  .alt-bilgi__son { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
}

/* --- 24. Yazdırma ------------------------------------------------------ */
@media print {
  .baslik-cubugu, .yuzen, .cagri, .mobil-menu, .perde, .alt-menu { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; padding-bottom: 0; }
  .bolum { padding: 14pt 0; }
  .fis, .kutu { border: 1px solid #999; box-shadow: none; }
}