/* ==========================================================================
   ÇAKMAK PEN . 04 BİLEŞEN
   Düğme, kart, akordiyon, sekme, çip, büyüteç, süreç adımı, rozet.

   YASAK LİSTESİ BURADA UYGULANIR:
   gölge yok, buzlu cam yok, kart solunda renkli şerit yok,
   aşırı yuvarlak radius yok, kıpırdayan ok yok, her şeyde hover yok.
   ========================================================================== */

/* --------------------------------------------------------------------------
   DÜĞME
   Renkleri token'dan alır; .koyu bölüm içinde otomatik olarak tersine döner.
   -------------------------------------------------------------------------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--b2);
  min-height: var(--dokunma-y);
  min-width: var(--dokunma-g);
  padding: var(--b3) var(--b5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--eylem);
  color: var(--eylem-uzeri);
  font-size: var(--fs-kucuk);
  font-weight: 600;
  line-height: var(--satir-orta);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--sure-hizli) var(--yumusama);
}

.dugme:hover {
  background: var(--eylem-hover);
  text-decoration: none;
}

.dugme:active {
  background: var(--eylem-basili);
}

.dugme svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* İkincil: konturlu */
.dugme--kontur {
  background: transparent;
  border-color: var(--cizgi-form);
  color: var(--metin);
  transition: border-color var(--sure-hizli) var(--yumusama),
    background-color var(--sure-hizli) var(--yumusama);
}

.dugme--kontur:hover {
  background: transparent;
  border-color: var(--eylem);
}

.dugme--kontur:active {
  background: var(--zemin-yumusak);
}

/* Sade: yalnız metin, düğme dokunma hedefini korur */
.dugme--sade {
  padding-inline: var(--b3);
  background: transparent;
  color: var(--eylem);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.dugme--sade:hover {
  background: transparent;
  text-decoration-thickness: 2px;
}

.dugme--genis {
  width: 100%;
}

.dugme-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b3);
  align-items: center;
}

/* --------------------------------------------------------------------------
   KART
   Sol kenarda renkli şerit YOK. Ayrım kontur ve boşlukla kurulur.
   Gölge YOK.
   -------------------------------------------------------------------------- */
.kart {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
}

.kart__govde {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: var(--b5);
}

.kart__govde > :last-child {
  margin-bottom: 0;
}

.kart__baslik {
  margin-bottom: var(--b3);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: var(--aralik-baslik);
}

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

/* KARTIN TAMAMI TIKLANABILIR.
   Baslik baglantisi tek basina 20px yuksekliginde bir dokunma hedefiydi;
   kilavuz 44px istiyor. Basligi buyutmek yerine baglantiyi kartin uzerine
   yayiyoruz: hedef artik kartin kendisi, yaklasik 300x400px.
   Olcum: python _araclar/dokunma-denetle.py */
.kart__baslik a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.kart__baslik a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

/* Kart icindeki gercek denetimler yayilan baglantinin ustunde kalmali,
   yoksa tiklanamazlar. */
.kart .dugme,
.kart button,
.kart__govde a:not(.kart__baslik a) {
  position: relative;
  z-index: 2;
}

/* Odak halkasi baglantinin kendisinde degil kartta gorunsun */
.kart:focus-within {
  outline: var(--odak-kalinlik) solid var(--odak);
  outline-offset: var(--odak-bosluk);
}

.kart__baslik a:focus-visible {
  outline: none;
}

.kart__metin {
  margin-bottom: var(--b4);
  color: var(--metin-sessiz);
  font-size: var(--fs-kucuk);
}

.kart__ayak {
  margin-top: auto;
  padding-top: var(--b4);
}

/* Kart görseli: set %83 dikey olduğu için sabit 3:4 */
.kart__gorsel {
  aspect-ratio: var(--oran-galeri);
  /* Iki sutunlu bantta kart 507px'e cikiyor ve 3:4 orani gorseli 676px'e
     tasiyordu. Tavan konur, object-fit: cover kirpar. */
  max-height: 22rem;
  background: var(--notr-100);
}

.kart__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Hizmet kartı: görsel üstte, metin altta */
.kart--hizmet .kart__baslik {
  font-size: var(--fs-h4);
}

/* --------------------------------------------------------------------------
   AKORDİYON
   KRİTİK: panel CSS'te AÇIK doğar. JS yüklendikten sonra kapanır.
   JS hiç çalışmazsa bütün içerik görünür kalır (boş ekran yasağı).
   -------------------------------------------------------------------------- */
.akordiyon {
  border-top: 1px solid var(--cizgi);
}

.akordiyon__oge {
  border-bottom: 1px solid var(--cizgi);
}

.akordiyon__baslik {
  margin: 0;
}

.akordiyon__acar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--b4);
  width: 100%;
  min-height: 56px;
  padding: var(--b4) 0;
  background: transparent;
  border: 0;
  color: var(--metin);
  font-size: var(--fs-h4);
  font-weight: 600;
  line-height: var(--satir-orta);
  text-align: left;
  letter-spacing: var(--aralik-baslik);
}

.akordiyon__isaret {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  color: var(--metin-silik);
  transition: transform var(--sure-hizli) var(--yumusama);
}

.akordiyon__acar[aria-expanded="true"] .akordiyon__isaret {
  transform: rotate(180deg);
}

/* Panel varsayılan AÇIK doğar. JS kapatır.
   ÖNEMLİ: geçiş ayrı bir bayrakla (.akordiyon-hazir) açılır. Başlangıç
   durumu geçişsiz kurulur, yoksa sayfa açılırken bütün paneller bir an
   açılıp kapanıyor ve içerik gözle görülür şekilde sıçrıyor. */
.akordiyon__panel {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
}

/* Ic sarmalayicida PADDING KULLANILMAZ. box-sizing: border-box ile bir
   eleman min-height: 0 verilse bile kendi padding'inden kucuk olamaz;
   padding burada olsaydi panel kapaliyken o kadarlik bir serit sizardi.
   Alt bosluk son cocugun margin'i ile verilir. */
.akordiyon__panel > div {
  min-height: 0;
  overflow: hidden;
}

.akordiyon__panel > div > :last-child {
  margin-bottom: var(--b5);
}

.akordiyon__panel[data-kapali="true"] {
  grid-template-rows: 0fr;
}

.akordiyon-hazir .akordiyon__panel {
  transition: grid-template-rows var(--sure) var(--yumusama);
}

/* --------------------------------------------------------------------------
   SEKME
   Ok tuşlarıyla gezilir, roving tabindex ile yönetilir (04-sekme.js).
   -------------------------------------------------------------------------- */
.sekmeler {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b1);
  margin-bottom: var(--b5);
  border-bottom: 1px solid var(--cizgi);
}

.sekme {
  min-height: var(--dokunma-y);
  padding: var(--b3) var(--b4);
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--metin-sessiz);
  font-size: var(--fs-kucuk);
  font-weight: 600;
}

.sekme:hover {
  color: var(--metin);
}

.sekme[aria-selected="true"] {
  color: var(--metin);
  border-bottom-color: var(--eylem);
}

.sekme-paneli:focus-visible {
  outline-offset: var(--b2);
}

/* JS yokken sekme cubugu is gormez ve paneller alt alta durur.
   Bu durumda cubugu gizleyip panelleri ayirmak, bos bir denetim
   birakmaktan iyidir. .js-hazir gelince normale doner. */
html:not(.js-hazir) .sekmeler {
  display: none;
}

html:not(.js-hazir) .sekme-paneli + .sekme-paneli {
  margin-top: var(--b4);
  padding-top: var(--b4);
  border-top: 1px solid var(--cizgi);
}

/* --------------------------------------------------------------------------
   ÇİP (galeri filtresi)
   Pill (999px) radius YOK.
   -------------------------------------------------------------------------- */
.cip-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b2);
  margin-bottom: var(--b6);
}

.cip {
  min-height: var(--dokunma-y);
  padding: var(--b2) var(--b4);
  background: transparent;
  border: 1px solid var(--cizgi-form);
  border-radius: var(--radius);
  color: var(--metin);
  font-size: var(--fs-kucuk);
  font-weight: 600;
  transition: background-color var(--sure-hizli) var(--yumusama);
}

.cip:hover {
  background: var(--zemin-yumusak);
}

.cip[aria-pressed="true"] {
  background: var(--eylem);
  border-color: var(--eylem);
  color: var(--eylem-uzeri);
}

.cip__sayi {
  margin-left: var(--b2);
  font-weight: 400;
  color: var(--metin-silik);
}

.cip[aria-pressed="true"] .cip__sayi {
  color: inherit;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   GALERİ ÖĞESİ VE BÜYÜTEÇ
   Hover-zoom YOK: yakınlaştırma montaj bantlarını ve etiketleri teşhir eder.
   -------------------------------------------------------------------------- */
.galeri-oge {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  background: var(--notr-100);
  border: 1px solid var(--cizgi);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: var(--oran-galeri);
  transition: border-color var(--sure-hizli) var(--yumusama);
}

.galeri-oge:hover {
  border-color: var(--cizgi-form);
}

.galeri-oge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.buyutec {
  position: fixed;
  inset: 0;
  z-index: var(--z-buyutec);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--b3);
  padding: var(--b4);
  background: rgba(10, 10, 10, 0.94);
  color: var(--beyaz);
}

.buyutec[hidden] {
  display: none !important;
}

.buyutec__ust {
  display: flex;
  justify-content: flex-end;
}

.buyutec__sahne {
  display: grid;
  place-items: center;
  min-height: 0;
}

/* Upscale kapalı: kaynak tavanı 1600px, büyütmek artefaktı görünür yapar */
.buyutec__sahne img {
  max-width: min(100%, 1600px);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.buyutec__alt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--b4);
  font-size: var(--fs-kucuk);
}

.buyutec__aciklama {
  max-width: var(--olcu);
  margin: 0;
  color: var(--notr-300);
}

.buyutec__gez {
  display: flex;
  gap: var(--b2);
  flex: 0 0 auto;
}

.buyutec__dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--dokunma-g);
  min-height: var(--dokunma-y);
  background: transparent;
  border: 1px solid var(--cizgi-form-negatif);
  border-radius: var(--radius);
  color: var(--beyaz);
}

.buyutec__dugme:hover {
  background: rgba(255, 255, 255, 0.12);
}

.buyutec__dugme svg {
  width: 20px;
  height: 20px;
}

.buyutec__dugme:focus-visible {
  outline-color: var(--beyaz);
}

/* --------------------------------------------------------------------------
   SÜREÇ ADIMI
   Numaralı satır. Kıpırdayan ok YOK.
   -------------------------------------------------------------------------- */
.surec {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: adim;
  border-top: 1px solid var(--cizgi);
}

.surec__adim {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--b4) var(--b5);
  align-items: start;
  margin-top: 0;
  padding: var(--b5) 0;
  border-bottom: 1px solid var(--cizgi);
  counter-increment: adim;
}

.surec__adim::before {
  content: counter(adim, decimal-leading-zero);
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variation-settings: "wdth" var(--gen-dar);
  letter-spacing: var(--aralik-baslik);
  color: var(--metin-silik);
  font-variant-numeric: tabular-nums;
  line-height: var(--satir-orta);
}

.surec__baslik {
  margin-bottom: var(--b2);
  font-size: var(--fs-h4);
  font-weight: 600;
}

.surec__metin {
  margin: 0;
  color: var(--metin-sessiz);
  font-size: var(--fs-kucuk);
}

/* --------------------------------------------------------------------------
   ROZET VE NOT
   Uydurma sertifika rozeti YOK. Rozet yalnız gerçek bilgi taşır.
   -------------------------------------------------------------------------- */
.rozet {
  display: inline-flex;
  align-items: center;
  gap: var(--b2);
  padding: var(--b1) var(--b3);
  border: 1px solid var(--cizgi-form);
  border-radius: var(--radius-kucuk);
  font-size: var(--fs-mini);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--metin-sessiz);
}

.not {
  padding: var(--b4) var(--b5);
  border: 1px solid var(--cizgi-form);
  border-radius: var(--radius);
  background: var(--zemin-yumusak);
  font-size: var(--fs-kucuk);
}

.not > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   İLETİŞİM SATIRI
   Telefon numarası her yerde tel: bağlantısıdır, düz metin değil.
   -------------------------------------------------------------------------- */
.iletisim-satiri {
  display: flex;
  align-items: center;
  gap: var(--b3);
  min-height: var(--dokunma-y);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.iletisim-satiri:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.iletisim-satiri svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--metin-silik);
}

.iletisim-satiri__ad {
  display: block;
  font-size: var(--fs-mini);
  font-weight: 400;
  color: var(--metin-silik);
  letter-spacing: 0.04em;
}