/* ============================================================
   The Mono Atelier — site stili
   Kimlik: orman yeşili + amber, sıcak kum zeminler,
   dokusu hissedilen ahşap fotoğrafları, geniş boşluk
   ============================================================ */

:root {
  --yesil: #41523e;
  --yesil-koyu: #2c382a;
  --yesil-acik: #5d7259;
  --amber: #c6862d;
  --amber-acik: #e0a95c;
  --amber-solgun: #f0e3cf;

  --kum: #f2efe8;
  --kum-koyu: #e7e2d7;
  --krem: #faf8f4;
  --beyaz: #ffffff;

  --metin: #2b2b26;
  --metin-yumusak: #6f6d63;
  --cizgi: #ddd8cb;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Segoe UI", Arial, sans-serif;
  /* Header tipografisi: küçük punto + geniş harf aralığı ile ağırbaşlı durur.
     Yalnız başlık alanında kullanılır; gövde Jost, başlıklar Fraunces. */
  --baslik-yazi: "Montserrat", "Segoe UI", Arial, sans-serif;

  --golge: 0 20px 50px rgba(43, 43, 38, .13);
  --gecis: .4s cubic-bezier(.2, .7, .3, 1);

  /* ============================================================
     BAŞLIK ÖLÇÜ SÖZLEŞMESİ — okumadan değiştirmeyin
     Plakanın boyunu içindeki EN UZUN öğe belirler; bu öğe iki kırılma
     noktasında farklıdır: masaüstünde logo (40px), mobilde hamburger
     (8px + 30px çakışmış span yığını + 8px = 46px).
       --ust          = tezgâh + plaka, akıştaki toplam boy   → .kahraman
       --ust-yapisik  = kaydırınca ekranda kalan boy          → .yan-kutu,
                        main [id] scroll-margin-top, mobil çekmece inset
     İkisi de burada TÜRETİLİYOR: ilk kare = son kare, CLS 0.
     site.js yalnız emniyet kemeri olarak yeniden ölçer (yazı boyu büyütme,
     menüye öğe eklenmesi); JS hiç çalışmasa da değerler doğru kalır.      */
  --kunye-boy: 34px;      /* üst çubuk satırı */
  --plaka-pay: 9px;       /* plakanın tezgâhtan üst/alt boşluğu */
  --plaka-ic: 10px;       /* plakanın dikey iç nefesi */
  --plaka-icerik: 40px;   /* plakadaki en uzun öğe: masaüstünde logo */
  --logo-boy: 40px;
  --plaka-yan: 18px;      /* plakanın yatay iç nefesi */
  --plaka-boy: calc(var(--plaka-icerik) + var(--plaka-ic) * 2);              /* 60px */
  --ust: calc(var(--kunye-boy) + var(--plaka-pay) * 2 + var(--plaka-boy));   /* 112px */
  --ust-yapisik: calc(var(--plaka-pay) * 2 + var(--plaka-boy));              /*  78px */

  /* --- FREZE ---
     Ahşap kenar kuralı: (1) düzlemde duran yüzeyler testere kenarıdır
     (0-3px: kart, buton, form, yan kutu, ışık kutusu, çerez bildirimi);
     (2) elle temas edilen tutamaklar tornadan çıkar (%50: simgeler, slayt
     noktaları, ok düğmeleri); (3) freze biti yalnız TEK parçaya vurulur:
     künye plakası. Bu jeton aşağıdaki İKİ seçicide geçer ve ikisi de aynı
     nesnenin köşesidir — .baslik .kapsayici ve sağ ucunu dolduran
     .baslik .tel-dugme. ÜÇÜNCÜ bir kullanım kuralı bozar.                 */
  --freze: 12px;
}

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

html { scroll-behavior: smooth; }

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

/* width/height öznitelikleri var; oran korunsun diye height:auto şart */
img { max-width: 100%; height: auto; display: block; }

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

.kapsayici { width: min(1240px, 91%); margin-inline: auto; }
.dar { width: min(880px, 91%); margin-inline: auto; }

/* Fraunces değişken eksenleri: başlıklarda hafif "wonk" ve yumuşak optik */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.015em;
}

/* ---------- Üst çubuk ---------- */

/* Şerit değil, zemin: .baslik ile AYNI koyu yeşil, arada dikiş yok.
   flex-wrap kaldırıldı — sarma, --ust'ü sessizce yanlışa düşürüyordu. */
.ust-cubuk {
  background: var(--kum);
  /* --metin-yumusak kum zeminde 4.52:1 veriyordu; AA sınırını kıl payı
     geçiyor ve 12px normal metin için pay bırakmıyor. Bir ton koyu. */
  color: #57554c;
  border-bottom: 1px solid var(--cizgi);
  font-family: var(--baslik-yazi);
  font-size: 12px;
  letter-spacing: .05em;
}

.ust-cubuk .kapsayici {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: var(--kunye-boy);   /* boy padding'den değil jetondan gelsin */
  padding-block: 0;
}

.ust-cubuk .ayrac { display: flex; gap: 24px; flex-shrink: 0; }
.ust-cubuk a { display: inline-flex; align-items: center; }
.ust-cubuk > .kapsayici > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-cubuk a:hover { color: var(--amber); }
.ust-cubuk :focus-visible { outline-color: var(--yesil-koyu); }

/* ---------- Başlık / menü ---------- */

/* .baslik GÖRÜNEN YÜZEY DEĞİL, ZEMİN'dir; görünen nesne .baslik .kapsayici.
   Zemin kalıcı olarak koyu: kaydırınca boyanma yok, plaka her sayfada ve her
   kaydırma konumunda okunuyor.
   BURAYA YAZMAYIN: backdrop-filter · filter · transform · perspective ·
   will-change · contain · clip-path. Filtreli ya da dönüşümlü bir ata öğe,
   içindeki position:fixed mobil çekmeceyi ekrana değil kendine sabitler.
   Plakanın "üstte duran nesne" okuması opak zemin + freze + gölgeyle
   sağlanıyor, filtreyle değil. */
.baslik {
  position: sticky;      /* fixed DEĞİL: .sayfa-basi'nın sabit üst boşluğu ve
                            <main>'in akışı başlığın yer kaplamasına dayanıyor;
                            fixed'e geçilirse 19 sayfa da altına girer */
  top: 0;
  z-index: 90;           /* çekmecenin 100'ü ve düğmenin 110'u bu bağlamda */
  /* SAYDAM: header'ın kendi zemini yok. Plaka sayfanın üstünde yüzüyor,
     içerik --plaka-pay kadarlık boşluklardan altından akıyor. Plakanın
     okunurluğu kendi beyaz zemini, kenarlığı ve gölgesiyle sağlanıyor —
     zemine bağlı değil, bu yüzden koyu fotoğrafın üstünde de duruyor. */
  background: transparent;
  border-bottom: 0;
  padding-block: var(--plaka-pay);
}

/* .kaydi YALNIZCA GÖLGE DERİNLEŞTİRİR. Yasak: padding · height ·
   border-width · transform · font-size — plakanın border-box'ına dokunan
   her şey. Sebep: --ust jetonlardan türetilmiş sabit bir değer; kaydırma
   ortasında boy değişirse değer yanlışa düşer ve kapak zıplar.
   Gölge .baslik'ta DEĞİL plakada: header saydam olduğu için görünmeyen bir
   kutunun gölgesi havada asılı bir çizgi olarak görünürdü. */
.baslik.kaydi .kapsayici {
  box-shadow: 0 2px 6px rgba(43, 43, 38, .08), 0 12px 30px rgba(43, 43, 38, .14);
}

/* ---------- KÜNYE PLAKASI ----------
   Hizalama sözleşmesi: plakanın DIŞ kenarı min(1240px, 91%) ile hizalı,
   yani her .bolum .kapsayici ile aynı düşey hatta. Logo plakanın içinde
   --plaka-yan kadar içeride.
   overflow: hidden EKLEMEYİN — :focus-visible halkalarını kırpar. */
.baslik .kapsayici {
  display: flex;
  align-items: stretch;           /* CTA kanalı plakayı boydan doldursun */
  justify-content: space-between;
  gap: 26px;
  min-height: var(--plaka-boy);
  padding-inline: var(--plaka-yan);
  /* Plaka BEYAZ, zemin krem: yeşil kalkınca ikisini ayıran tek şey bu ton
     farkı ve kenarlık. Kenarlık olmadan plaka zeminde erir ve header düz bir
     şeride döner — nesne okuması buna bağlı. */
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--freze);    /* FREZE — 1/2 */
  box-shadow: 0 1px 3px rgba(43, 43, 38, .05), 0 6px 18px rgba(43, 43, 38, .06);
  transition: box-shadow var(--gecis);
}

.baslik .kapsayici :focus-visible { outline-color: var(--yesil-koyu); }

.marka { display: block; }
.baslik .marka { display: flex; align-items: center; }
.baslik .marka img { height: var(--logo-boy); }
.marka img { width: auto; }
.alt-bilgi .marka img { height: 46px; }

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

/* Küçük punto, orta ağırlık, geniş aralık: Montserrat bu ayarda
   kalın ve teknik değil, ölçülü ve ağırbaşlı okunuyor. */
.gezinme a {
  font-family: var(--baslik-yazi);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--yesil);
  padding-block: 6px;
  position: relative;
}

/* ---------- Menü damgası ----------
   Cahit Vuruş ile birebir aynı olan "soldan çizilen alt çizgi" kalktı.
   Yerine sitenin kendi işaret ailesi geldi: .madde-listesi li::before ile
   aynı 7px amber kare. Mutlak konumlu, yer kaplamaz → yeniden akış yok.
   Gizli başlangıç durumu YOK: işaretin varlığı .aktif/:hover'a bağlı,
   opacity'ye değil — kural düşerse içerik görünür kalır. */
.gezinme a.aktif { color: var(--yesil-koyu); font-weight: 600; letter-spacing: .155em; }

.gezinme a:not(.tel-dugme).aktif::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  margin-top: -3.5px;
  width: 7px;
  height: 7px;
  background: var(--amber);
}

@media (hover: hover) and (pointer: fine) {
  /* korumanın içinde: dokunmatikte yapışkan :hover ekranda kare bırakmasın */
  .gezinme a:not(.tel-dugme):hover::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 50%;
    margin-top: -3.5px;
    width: 7px;
    height: 7px;
    background: var(--amber-acik);
  }
}

.tel-dugme {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--yesil);
  color: var(--krem) !important;
  padding: 11px 22px;
  font-family: var(--baslik-yazi);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background var(--gecis), transform var(--gecis);
}

.tel-dugme:hover { background: var(--amber); color: var(--yesil-koyu) !important; }
@media (hover: hover) and (pointer: fine) {
  .tel-dugme:hover { transform: translateY(-2px); }
}

/* ---------- CTA: plakanın sağ ucuna gömülü kanal ----------
   align-items:stretch zinciri sayesinde kanalın boyu plakanın iç boyuna
   EŞİT çıkıyor; negatif dikey marj ve kesirli calc yok. Tek negatif marj
   yatayda ve bir jetona eşit: kanal plakanın sağ iç kenarına tam oturur,
   dış köşeleri plakanın frezesini devralır. */
.baslik .tel-dugme {
  align-self: stretch;
  margin-left: 6px;
  margin-right: calc(-1 * var(--plaka-yan));
  padding-block: 0;
  padding-inline: clamp(20px, 2vw, 28px);
  border-radius: 0 var(--freze) var(--freze) 0;   /* FREZE — 2/2, aynı nesne */
}
/* kanal plakanın parçası: yerinden oynayamaz */
.baslik .tel-dugme:hover,
.baslik .tel-dugme:active { transform: none; }
.baslik .tel-dugme:focus-visible {
  outline-color: var(--amber-acik);
  outline-offset: -3px;             /* halka plakanın dışına taşmasın */
}

/* 26px span + 2×9px = 44px genişlik (WCAG 2.5.5), yükseklik 30+16 = 46px.
   span'larda display:block KALMALI: translateY(8px) adımı margin:6px 0
   marjlarının blok akışında çakışmasına bağlı. */
.menu-dugmesi { display: none; background: none; border: none; cursor: pointer; padding: 8px 9px; }
.menu-dugmesi span {
  display: block; width: 26px; height: 2px;
  background: var(--yesil); margin: 6px 0;
  transition: transform var(--gecis), opacity var(--gecis);
}

/* ---------- Butonlar ---------- */

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

.dugme.dolu { background: var(--amber); color: var(--yesil-koyu); }
.dugme.dolu:hover { background: var(--amber-acik); }
@media (hover: hover) and (pointer: fine) {
  .dugme.dolu:hover { transform: translateY(-2px); }
}

.dugme.koyu { background: var(--yesil); color: var(--krem); }
.dugme.koyu:hover { background: var(--amber); color: var(--yesil-koyu); }

.dugme.cerceve { border-color: rgba(255, 255, 255, .45); color: #fff; }
.dugme.cerceve:hover { border-color: var(--amber); color: var(--amber-acik); }

.dugme.ince { border-color: var(--cizgi); color: var(--yesil); }
.dugme.ince:hover { border-color: var(--amber); color: var(--amber); }

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

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

.bolum { padding-block: clamp(64px, 9vw, 118px); }
.bolum.kum { background: var(--kum); }
.bolum.yesil { background: var(--yesil); color: rgba(255, 255, 255, .85); }

.bolum-baslik { max-width: 660px; margin-bottom: 54px; }
.bolum-baslik.ortala { margin-inline: auto; text-align: center; }

/* üst etiket: ince amber çizgi + küçük büyük harf */
.etiket {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 16px;
}

.etiket::before { content: ""; width: 30px; height: 1px; background: var(--amber); }
.bolum-baslik.ortala .etiket::after { content: ""; width: 30px; height: 1px; background: var(--amber); }
.bolum.yesil .etiket { color: var(--amber-acik); }
.bolum.yesil .etiket::before, .bolum.yesil .etiket::after { background: var(--amber-acik); }

.bolum-baslik h2 {
  font-size: clamp(30px, 4vw, 50px);
  line-height: 1.14;
  color: var(--yesil);
}

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

.bolum-baslik p { margin-top: 18px; color: var(--metin-yumusak); font-size: 17.5px; }
.bolum.yesil .bolum-baslik p { color: rgba(255, 255, 255, .74); }

/* ---------- Kapak ---------- */

.kahraman {
  position: relative;
  /* Yedek artık gerçek değerle eş; --ust :root'ta türetildiği için
     pratikte hiç devreye girmiyor. Eskiden mobilde 116px yedek 77px'lik
     gerçeğe karşı 39px yanlıştı: her ilk yüklemede kapak sıçrıyordu. */
  min-height: calc(100vh - var(--ust, 112px));
  min-height: calc(100svh - var(--ust, 112px));
  display: grid;
  align-items: end;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}

.ortu-gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

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

.kahraman::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(28, 36, 26, .92) 4%, rgba(28, 36, 26, .34) 46%, rgba(28, 36, 26, .12)),
    linear-gradient(to right, rgba(28, 36, 26, .78), rgba(28, 36, 26, .34) 46%, transparent 72%);
}

.kahraman .kapsayici { padding-block: 0 clamp(58px, 9vh, 104px); }

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

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

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

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

.slayt img { width: 100%; height: 100%; object-fit: cover; }
.slayt.etkin img { animation: yavas-kay 11s ease-out forwards; }

@keyframes yavas-kay {
  from { transform: scale(1.1) translateX(1.2%); }
  to   { transform: scale(1) translateX(0); }
}

.slayt-metinleri { display: grid; }

.slayt-metin {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .55s ease, visibility .55s;
  max-width: 780px;
}

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

.slayt-metin .ust-not,
.slayt-metin h1,
.slayt-metin h2,
.slayt-metin p { overflow: hidden; }

.slayt-metin .satir { display: block; transform: translateY(110%); opacity: 0; }
.slayt-metin.etkin .satir { animation: satir-ac 1s cubic-bezier(.19, .8, .28, 1) forwards; }

.slayt-metin.etkin .ust-not .satir { animation-delay: .12s; }
.slayt-metin.etkin h1 .satir,
.slayt-metin.etkin h2 .satir { animation-delay: .26s; }
.slayt-metin.etkin p .satir { animation-delay: .44s; }

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

.kahraman .ust-not {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--amber-acik);
  margin-bottom: 22px;
}

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

.slayt-metin h1,
.slayt-metin h2 {
  font-size: clamp(38px, 5.6vw, 76px);
  line-height: 1.06;
  font-weight: 600;
  color: #fff;
  margin-bottom: 22px;
  max-width: 14ch;
}

.slayt-metin h1 em,
.slayt-metin h2 em { font-style: normal; color: var(--amber-acik); }

.slayt-metin p {
  font-size: 18px;
  color: rgba(255, 255, 255, .84);
  margin-bottom: 34px;
  max-width: 46ch;
}

.slayt-dugmeler { display: flex; gap: 14px; flex-wrap: wrap; opacity: 0; transform: translateY(18px); }
.slayt-metin.etkin .slayt-dugmeler { animation: dugme-ac .85s cubic-bezier(.19, .8, .28, 1) .6s forwards; }
@keyframes dugme-ac { to { opacity: 1; transform: none; } }

/* kapak alt şeridi: malzeme / kabiliyet notları */
.malzeme-serit {
  border-top: 1px solid rgba(255, 255, 255, .2);
  margin-top: clamp(38px, 6vh, 66px);
  padding-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 22px;
  max-width: 860px;
}

.malzeme-serit div strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.15;
  color: var(--amber-acik);
}

.malzeme-serit div span {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
}

/* oklar ve noktalar */
.slayt-ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(28, 36, 26, .25);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: all var(--gecis);
}

.slayt-ok:hover { background: var(--amber); border-color: var(--amber); color: var(--yesil-koyu); }
.slayt-ok.onceki { left: 24px; }
.slayt-ok.sonraki { right: 24px; }

.slayt-noktalari {
  position: absolute;
  right: 26px; bottom: 26px;
  display: flex; gap: 10px;
  z-index: 3;
}

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

.slayt-noktalari button.etkin { width: 72px; }
.slayt-noktalari button i { display: block; height: 100%; width: 0; background: var(--amber); }
.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%; } }

/* ---------- Atölye tanıtımı ---------- */

.atolye-duzen {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 86px);
  align-items: center;
}

.atolye-gorsel { position: relative; }

.atolye-gorsel img { border-radius: 3px; }

/* amber çerçeve dokunuşu */
.atolye-gorsel::after {
  content: "";
  position: absolute;
  left: -22px; bottom: -22px;
  width: 62%; height: 58%;
  border: 1px solid var(--amber);
  border-radius: 3px;
  z-index: -1;
}

.atolye-metin h2 { font-size: clamp(30px, 3.9vw, 48px); line-height: 1.14; color: var(--yesil); margin-bottom: 20px; }
.atolye-metin h2 em { font-style: normal; color: var(--amber); }
.atolye-metin .giris { color: var(--metin-yumusak); }
.atolye-metin p + p { margin-top: 14px; }

.imza {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--cizgi);
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
}

.imza div strong {
  display: block;
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.1;
  color: var(--yesil);
}

.imza div span {
  font-size: 12.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--amber);
}

/* ---------- Hizmetler: geniş dönüşümlü satırlar ---------- */

.hizmet-satir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(34px, 5vw, 76px);
  align-items: center;
  padding-block: clamp(38px, 5vw, 62px);
  border-top: 1px solid var(--cizgi);
}

.hizmet-satir:first-of-type { border-top: none; padding-top: 0; }

/* Çift sıradaki satırlarda görsel sağa geçer.
   nth-child değil nth-of-type: kapsayıcıda bölüm başlığı div'i de var,
   nth-child onu da sayıp dönüşümü kaydırıyordu. */
.hizmet-satir:nth-of-type(even) .hs-gorsel { order: 2; }

.hs-gorsel { position: relative; overflow: hidden; border-radius: 3px; }
.hs-gorsel img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s ease; }
@media (hover: hover) and (pointer: fine) {
  .hizmet-satir:hover .hs-gorsel img { transform: scale(1.05); }
}

.hs-no {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--amber);
  color: var(--yesil-koyu);
  font-family: var(--serif);
  font-size: 15px;
  padding: 5px 13px;
  border-radius: 2px;
}

.hs-metin h3 { font-size: clamp(24px, 2.8vw, 34px); color: var(--yesil); margin-bottom: 8px; }
.hs-metin .slogan { color: var(--amber); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; }
.hs-metin p { color: var(--metin-yumusak); margin-bottom: 22px; }

/* .hs-metin kapsamı kaldırıldı: blog kartlarındaki 6 bağlantı stilsizdi. */
.incele {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--yesil); border-bottom: 1px solid var(--amber); padding-bottom: 5px;
  transition: color var(--gecis), border-color var(--gecis);
}

.kart .incele { margin-top: 16px; }
.incele::after { content: "→"; transition: transform var(--gecis); }

/* Tetikleyici eklendi, değiştirilmedi: satır geneli hover korunuyor. */
.hizmet-satir:focus-within .incele::after,
.kart:focus-within .incele::after,
.incele:focus-visible::after { transform: translateX(6px); }

@media (hover: hover) and (pointer: fine) {
  .hizmet-satir:hover .incele::after,
  .kart:hover .incele::after,
  .incele:hover::after { transform: translateX(6px); }
}

/* ---------- Süreç: ahşabın yolculuğu ---------- */

.surec-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  counter-reset: adim;
}

.surec-adim {
  position: relative;
  padding: 34px 26px 30px;
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.surec-adim:first-child { border-left: none; }

.surec-adim .no {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .2em;
  color: var(--amber-acik);
  display: block;
  margin-bottom: 16px;
}

/* adımı işaretleyen amber nokta */
.surec-adim::before {
  content: "";
  position: absolute;
  top: 0; left: -4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--amber);
  transform: translateY(-50%);
}

.surec-adim:first-child::before { left: 0; }

.surec-adim h3 { font-size: 21px; color: #fff; margin-bottom: 9px; }
.surec-adim p { font-size: 15px; color: rgba(255, 255, 255, .7); }

/* ---------- Referans vitrini ---------- */

.referans-kart {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--yesil);
  color: #fff;
  border-radius: 4px;
  overflow: hidden;
}

.referans-kart .rk-gorsel { position: relative; min-height: 380px; }
.referans-kart .rk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.referans-kart .rk-icerik { padding: clamp(32px, 4vw, 58px); align-self: center; }
.referans-kart .rk-icerik h3 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.referans-kart .rk-icerik p { color: rgba(255, 255, 255, .78); margin-bottom: 26px; }

.rk-rozet {
  display: inline-block;
  background: var(--amber);
  color: var(--yesil-koyu);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  margin-bottom: 16px;
}

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

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

.galeri-mozaik a { position: relative; overflow: hidden; border-radius: 3px; display: block; }
.galeri-mozaik .mz-buyuk { grid-column: span 2; grid-row: span 2; }
.galeri-mozaik .mz-genis { grid-column: span 2; }
.galeri-mozaik .mz-uzun { grid-row: span 2; }

.galeri-mozaik img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.galeri-mozaik a::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(44, 56, 42, .4), transparent 55%);
  opacity: 0;
  transition: opacity var(--gecis);
}
@media (hover: hover) and (pointer: fine) {
  .galeri-mozaik a:hover img { transform: scale(1.06); }
  .galeri-mozaik a:hover::after { opacity: 1; }
}

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

.galeri-izgara a { border-radius: 3px; overflow: hidden; aspect-ratio: 4 / 3; display: block; }
.galeri-izgara img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
@media (hover: hover) and (pointer: fine) {
  .galeri-izgara a:hover img { transform: scale(1.06); }
}

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

/* ışık kutusu */
.isik-kutusu {
  position: fixed; inset: 0;
  background: rgba(24, 30, 22, .95);
  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: 3px; }
.isik-kutusu .kapat, .isik-kutusu .onceki, .isik-kutusu .sonraki {
  position: absolute;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
  color: #fff; font-size: 19px; 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(--amber); color: var(--yesil-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%); }

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

.sayfa-basi {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(88px, 12vh, 130px) clamp(52px, 8vh, 78px);
  background: var(--yesil);
  overflow: hidden;
}

.sayfa-basi h1 { font-size: clamp(32px, 5vw, 56px); margin-bottom: 12px; }
.kirinti { font-size: 13.5px; letter-spacing: .06em; color: rgba(255, 255, 255, .72); }
.kirinti a:hover { color: var(--amber-acik); }
.kirinti span { color: var(--amber-acik); }

/* ---------- Metin sayfaları ---------- */

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

.detay-metin h2 { font-size: clamp(26px, 3vw, 34px); color: var(--yesil); margin-bottom: 18px; }
.detay-metin h3 { font-size: 22px; color: var(--yesil); margin: 36px 0 12px; }
.detay-metin p + p { margin-top: 14px; }

.madde-listesi { list-style: none; display: grid; gap: 13px; margin: 22px 0 30px; }
.madde-listesi li { display: flex; gap: 14px; align-items: baseline; color: var(--metin); }
.madde-listesi li::before { content: ""; width: 7px; height: 7px; flex-shrink: 0; background: var(--amber); transform: translateY(-2px); }

.yan-kutu {
  background: var(--kum);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  padding: 32px 30px;
  position: sticky;
  /* eskiden elle yazılmış 108px'ti; gerçek başlık 112px olduğu için
     yan kutu 4px başlığın altına giriyordu */
  top: calc(var(--ust-yapisik) + 20px);
}

.yan-kutu h3 { font-size: 21px; color: var(--yesil); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--cizgi); }
.yan-kutu dl { display: grid; gap: 12px; }
.yan-kutu .satir { display: flex; justify-content: space-between; gap: 14px; font-size: 15.5px; }
.yan-kutu dt { color: var(--metin-yumusak); }
.yan-kutu dd { font-weight: 600; color: var(--yesil); text-align: right; }
.yan-kutu .dugme { width: 100%; justify-content: center; margin-top: 24px; }

/* Yapışkan başlık yüzünden bugüne kadar TÜM çapa bağlantıları
   (uretim.html#masif-panel, #ozel-tasarim, #yuzey-isleme,
   hakkimizda.html#yaklasim, #kalite) hedefi başlığın altına park ediyordu;
   depoda hiç scroll-margin yoktu, html'de ise scroll-behavior: smooth var.
   :where() sıfır özgüllük → hiçbir kuralla çakışmaz. main ile daraltıldı ki
   çerez bildirimi gibi gövde seviyesi id'ler etkilenmesin. */
:where(main [id]) { scroll-margin-top: calc(var(--ust-yapisik) + 20px); }

/* Açık çekmece, çerez bildiriminin (z-index 300) altında kalmasın.
   z-index içeren blok YARATMAZ → mobil menü tuzağını tetiklemez. */
body.menu-acik .baslik { z-index: 310; }

/* ---------- Kart ızgarası ---------- */

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

.kart {
  background: var(--beyaz);
  border: 1px solid var(--cizgi);
  border-radius: 3px;
  padding: 34px 28px;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}

.kart:hover { box-shadow: var(--golge); border-color: var(--amber); }
@media (hover: hover) and (pointer: fine) {
  .kart:hover { transform: translateY(-5px); }
}

.kart .simge {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--amber-solgun);
  color: var(--amber);
  display: grid; place-items: center;
  margin-bottom: 20px;
}

.kart h3 { font-size: 20px; color: var(--yesil); margin-bottom: 10px; }
.kart 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(--yesil); color: #fff; border-radius: 3px; padding: 40px 34px; }
.iletisim-kart h3 { font-size: 23px; margin-bottom: 26px; }
.iletisim-kart .kalem { display: flex; gap: 16px; margin-bottom: 24px; }
.iletisim-kart .kalem .simge {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(224, 169, 92, .18);
  color: var(--amber-acik);
  display: grid; place-items: center;
}
.iletisim-kart .kalem strong {
  display: block; font-size: 12.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber-acik); margin-bottom: 3px;
}
.iletisim-kart .kalem a:hover { color: var(--amber-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: 13.5px; font-weight: 500; letter-spacing: .05em; color: var(--yesil); }

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

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

.form-alan .dugme { justify-self: start; }
.form-durum { margin-top: 10px; font-size: 14.5px; min-height: 1.2em; }
.form-durum[data-tur="basari"] { color: #2f7a4f; }
.form-durum[data-tur="hata"] { color: #b3372f; }

.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(--amber); }
.onay-alani a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }

.harita-kutu { margin-top: 56px; border-radius: 3px; overflow: hidden; box-shadow: var(--golge); }
.harita-kutu iframe { display: block; width: 100%; height: 400px; border: 0; }

/* bal küpü: robotlar doldurur, insanlar görmez.
   display:none yerine ekran dışına alıyoruz — bazı robotlar gizli
   alanları atlar, ekran dışındakini atlamaz. */
.bal-kupu { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Sık sorulan sorular ---------- */

.sss-listesi { border-top: 1px solid var(--cizgi); }
.sss-listesi details { border-bottom: 1px solid var(--cizgi); }

.sss-listesi summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 4px;
  font-family: var(--serif);
  font-size: 19px;
  color: var(--yesil);
  cursor: pointer;
  list-style: none;
  transition: color var(--gecis);
}

.sss-listesi summary::-webkit-details-marker { display: none; }
.sss-listesi summary:hover { color: var(--amber); }

/* + işareti; açıkken yatay çizgiye döner */
.sss-listesi summary::after {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  background:
    linear-gradient(var(--amber), var(--amber)) center / 100% 1.5px no-repeat,
    linear-gradient(var(--amber), var(--amber)) center / 1.5px 100% no-repeat;
  transition: transform var(--gecis), background-size var(--gecis);
}

.sss-listesi details[open] summary::after { transform: rotate(90deg); background-size: 100% 1.5px, 0 100%; }

.sss-listesi details p { padding: 0 4px 26px; color: var(--metin-yumusak); max-width: 78ch; }


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

.iletisim-serit { display: grid; grid-template-columns: 46% 54%; background: var(--yesil); color: #fff; }
.is-gorsel { position: relative; min-height: 440px; }
.is-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.is-icerik { display: flex; align-items: center; padding: clamp(56px, 8vw, 96px) clamp(28px, 6vw, 88px); }
.is-kutu { max-width: 54ch; }
.is-kutu h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; 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, .24); transition: border-color var(--gecis); }
.is-telefon span { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-acik); margin-bottom: 6px; }
.is-telefon strong { font-family: var(--serif); font-size: clamp(26px, 3vw, 38px); color: #fff; transition: color var(--gecis); }
.is-telefon:hover { border-color: var(--amber); }
.is-telefon:hover strong { color: var(--amber-acik); }

/* ---------- Eylem çağrısı şeridi ---------- */

.cta-serit { position: relative; isolation: isolate; color: #fff; text-align: center; padding-block: clamp(64px, 9vw, 96px); background: var(--yesil); overflow: hidden; }
.cta-serit::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../img/ahsap-mutfak-1-800.webp") center / cover no-repeat; opacity: .16; }
.cta-serit h2 { font-size: clamp(28px, 4vw, 42px); max-width: 22ch; margin: 0 auto 18px; }
.cta-serit p { color: rgba(255, 255, 255, .78); max-width: 58ch; margin: 0 auto 32px; }

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

.alt-bilgi { background: var(--yesil-koyu); color: rgba(255, 255, 255, .74); padding-top: 72px; 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: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--amber-acik); margin-bottom: 20px; }
.alt-bilgi ul { list-style: none; display: grid; gap: 11px; }
.alt-bilgi a:hover { color: var(--amber-acik); }

.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, .68); background: none; border: none; font: inherit; padding: 0; cursor: pointer; }
.yasal-satir a:hover, .yasal-satir button:hover { color: var(--amber-acik); }

.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: 13.5px; color: rgba(255, 255, 255, .5); }

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

.cerez-bildirimi {
  position: fixed; left: 50%; bottom: 20px;
  transform: translateX(-50%);
  width: min(920px, calc(100vw - 32px));
  background: var(--yesil);
  color: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(20, 26, 19, .45);
  z-index: 300;
  animation: cerez-gir .45s cubic-bezier(.2, .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(--amber-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: 13px; }

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

.yasal-metin { max-width: 78ch; }
.yasal-metin h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--yesil); 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; }
.yasal-metin a { color: var(--amber); text-decoration: underline; text-underline-offset: 3px; }
.yasal-tarih { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--cizgi); color: var(--metin-yumusak); font-size: 14.5px; }
.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(--kum); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--yesil); }
.yasal-tablo tr:last-child td { border-bottom: none; }
.yasal-tablo code { font-size: 13.5px; background: var(--kum); padding: 2px 6px; border-radius: 2px; }

/* ---------- İkonlar ---------- */

.ikon { display: inline-block; vertical-align: -.28em; flex-shrink: 0; }
.ust-cubuk .ikon { width: 15px; height: 15px; vertical-align: -.22em; margin-right: 3px; opacity: .85; }
.iletisim-kart .kalem .simge .ikon { width: 19px; height: 19px; }

/* ---------- Beliriş ---------- */

.belir { opacity: 0; transform: translateY(26px); transition: opacity .85s ease, transform .85s ease; }
.belir.gorundu { opacity: 1; transform: none; }

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

@media (max-width: 1180px) {
  /* Dar masaüstünde menü küçülür. Bu kural Jost 14.5px içindi ve
     Montserrat 12.5px tabanını BÜYÜTÜYORDU; yön düzeltildi. */
  .gezinme { gap: 16px; }
  .gezinme a { font-size: 11.5px; letter-spacing: .14em; }
  .atolye-duzen, .detay-duzen, .iletisim-duzen { grid-template-columns: 1fr; gap: 46px; }
  .yan-kutu { position: static; }
  .alt-bilgi .izgara { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  :root {
    --kunye-boy: 0px;       /* üst çubuk gizli */
    --plaka-pay: 7px;
    --plaka-ic: 9px;
    --plaka-icerik: 46px;   /* mobilde en uzun öğe LOGO DEĞİL hamburger */
    --logo-boy: 34px;
    --plaka-yan: 14px;
  }
  /* --plaka-boy = 64px · --ust = --ust-yapisik = 78px */

  .slayt-ok { display: none; }

  /* ---- ÇEKMECE ----
     Başlığın ALTINDAN başlıyor ve tam genişlik: plaka ortadan dilimlenmiyor,
     logo kesilmiyor, hamburger krem plakanın üstünde kalıyor. Çekmecenin
     koyu yeşili tezgâhın devamı olarak okunuyor.
     RADÜS YOK: çekmece bir yüzeydir, künye plakası değil (freze kuralı). */
  .gezinme {
    position: fixed;
    inset: var(--ust-yapisik) 0 0 0;
    width: auto;
    background: var(--yesil-koyu);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 18px;
    padding: 34px 9% 48px;
    border-radius: 0;
    transform: translateX(100%);
    /* visibility: kapalı çekmecedeki 7 bağlantı sekme sırasından ÇIKAR.
       Eskiden yalnız ekran dışına taşınıyorlardı; odak halkası görünüm
       alanının dışında çiziliyordu. */
    visibility: hidden;
    transition: transform var(--gecis), visibility 0s linear .4s;
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 100;
  }

  .gezinme.acik {
    transform: none;
    visibility: visible;
    transition: transform var(--gecis), visibility 0s;
  }

  .gezinme a { color: #fff; font-size: 17px; padding-block: 10px; }
  .gezinme a.aktif { color: var(--amber-acik); font-weight: 600; }
  .gezinme a:not(.tel-dugme).aktif::before { left: -18px; background: var(--amber-acik); }
  .gezinme :focus-visible { outline-color: var(--amber-acik); }

  /* kanal mantığı çekmecede geçersiz: düz yüzeyde düz buton */
  .baslik .tel-dugme {
    align-self: flex-start;
    margin: 8px 0 0;
    padding: 13px 26px;
    border-radius: 2px;
    background: var(--amber);
    color: var(--yesil-koyu) !important;
  }

  .menu-dugmesi { display: block; z-index: 110; }
  /* X artık KREM plakanın üstünde duruyor (çekmece başlığın altından
     başlıyor) → çubuklar koyu yeşil kalmalı; eski #fff kuralları
     krem üstünde görünmez olurdu. */
  .menu-dugmesi.acik span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-dugmesi.acik span:nth-child(2) { opacity: 0; }
  .menu-dugmesi.acik span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .ust-cubuk { display: none; }   /* site.js ölçümü bu display kontrolüne dayanıyor */
  .hizmet-satir { grid-template-columns: 1fr; }
  .hizmet-satir:nth-of-type(even) .hs-gorsel { order: 0; }
  .referans-kart { grid-template-columns: 1fr; }
  .iletisim-serit { grid-template-columns: 1fr; }
  .is-gorsel { min-height: 280px; }
  .surec-adim { border-left: none; border-top: 1px solid rgba(255,255,255,.16); }
  .surec-adim::before { left: 0; }
}

@media (max-width: 800px) {
  .galeri-mozaik { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .galeri-mozaik .mz-buyuk { grid-column: span 2; grid-row: span 2; }
  .galeri-mozaik .mz-genis { grid-column: span 2; }
  .galeri-mozaik .mz-uzun { grid-row: span 1; }
  .form-izgara { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .alt-bilgi .izgara { grid-template-columns: 1fr; gap: 32px; }
  /* üçü tek satırda kalsın: kapak ekranı aşmasın */
  .malzeme-serit { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .malzeme-serit div strong { font-size: 23px; }
  .malzeme-serit div span { font-size: 11px; letter-spacing: .1em; }
  .imza { gap: 24px; }
  .cerez-bildirimi { bottom: 12px; }
  .cb-dugmeler { width: 100%; }
  .cb-dugmeler .dugme { flex: 1; justify-content: center; }
}

/* ============================================================
   HAREKET KATMANI
   Tek jest sözlüğü: çizilen çizgi · ıslanan yüzey · bastırılan damga · iki hız.
   İlke: gizli başlangıç durumu (opacity:0, scaleX(0), clip-path) YALNIZCA
   prefers-reduced-motion: no-preference içinde tanımlanır. Kural düşerse
   içerik görünür kalır — kaybolmaz.
   ============================================================ */

:root {
  /* temas sert, bırakma yumuşak — ikinci hız */
  --kesin: .14s cubic-bezier(.2, .9, .3, 1);
  /* uzun oturmalar için yalnız eğri; süre yanında yazılır */
  --agir: cubic-bezier(.16, .84, .24, 1);
}

/* ---------- Atlama bağlantısı ----------
   Testere kenarı (2px): düzlemde duran bir yüzey, freze almaz. */
.atla {
  position: fixed;
  top: 8px; left: -9999px;
  z-index: 400;
  background: var(--krem);
  color: var(--yesil-koyu);
  padding: 12px 20px;
  font-size: 14px;
  letter-spacing: .06em;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(16, 22, 15, .35);
}
.atla:focus { left: 8px; }

/* ---------- Odak görünürlüğü ---------- */

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.bolum.yesil :focus-visible, .sayfa-basi :focus-visible,
.alt-bilgi :focus-visible, .iletisim-kart :focus-visible,
.referans-kart :focus-visible, .kahraman :focus-visible,
.isik-kutusu :focus-visible { outline-color: var(--amber-acik); }

/* Form alanlarında outline kapalıydı; klavye için geri veriliyor. */
.form-alan input:focus-visible,
.form-alan textarea:focus-visible,
.form-alan select:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* ---------- Geçişsiz kalan bağlantılar: site tek ritme giriyor ---------- */

.ust-cubuk a, .alt-bilgi a, .yasal-satir a, .yasal-satir button,
.kirinti a, .iletisim-kart .kalem a, .cb-metin a,
.onay-alani a, .yasal-metin a, .kart h3 a {
  transition: color var(--gecis);
}

/* ---------- Temas dili: her tıklanabilir yüzey ele cevap verir ----------
   Dokunmatikte tek gerçek geri bildirim bu; :hover değil :active. */

.dugme:active, .tel-dugme:active { transform: translateY(0) scale(.985); transition-duration: .12s; }
.kart:active { transform: translateY(-2px); transition-duration: .12s; }
.slayt-ok:active { transform: translateY(-50%) scale(.94); transition-duration: .12s; }
.isik-kutusu .kapat:active { transform: scale(.92); }
.isik-kutusu .onceki:active, .isik-kutusu .sonraki:active { transform: translateY(-50%) scale(.92); }

/* ============================================================
   ÇİZİM JESTLERİ — kaydırma tetikli, yeni JS yok
   ============================================================ */

/* E1 · Markalama çizgisi: marangozlukta her kesim önce çizilir.
   Sitenin 25 yerde tekrar eden mevcut imzası canlanıyor. */
@media (prefers-reduced-motion: no-preference) {
  .belir .etiket::before,
  .belir .etiket::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .55s var(--agir) .18s;
  }
  .bolum-baslik.ortala.belir .etiket::after { transform-origin: right; }

  .belir.gorundu .etiket::before,
  .belir.gorundu .etiket::after { transform: scaleX(1); }
}

/* E2 · Antet — iç sayfa başlığının açılması.
   h1 maskesi: Fraunces'in ğ/ş/ç alt uzantıları kırpılmasın diye padding,
   kutu yüksekliği değişmesin diye eşit negatif margin (CLS 0). */
.sayfa-basi h1 { overflow: hidden; padding-bottom: .08em; margin-bottom: calc(12px - .08em); }
.sayfa-basi h1 .satir { display: block; }

.sayfa-basi::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: min(240px, 42%);
  height: 1px;
  background: var(--amber);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  /* opacity kullanılmıyor: h1 metin LCP adayı olursa geciktirmesin */
  .sayfa-basi h1 .satir {
    transform: translateY(110%);
    animation: satir-ac .95s cubic-bezier(.19, .8, .28, 1) .08s forwards;
  }
  .sayfa-basi .kirinti {
    opacity: 0;
    transform: translateY(8px);
    animation: dugme-ac .8s cubic-bezier(.19, .8, .28, 1) .34s forwards;
  }
  .sayfa-basi::after {
    transform: scaleX(0);
    animation: cizgi-ac 1s var(--agir) .2s forwards;
  }
}

@keyframes cizgi-ac { to { transform: scaleX(1); } }

/* Menü damgasının oturması */
@media (prefers-reduced-motion: no-preference) {
  .gezinme a:not(.tel-dugme).aktif::before,
  .gezinme a:not(.tel-dugme):hover::before { animation: damga .22s cubic-bezier(.2, .9, .3, 1); }
}
@keyframes damga { from { transform: scale(.3); } to { transform: none; } }

/* E3 · Süreç hattı — bölümün kendi metni "beş aşama" diyor; hareket anlatının kendisi.
   Her adım kendi segmentini çiziyor: ızgara sardığında da doğru okunuyor. */
.surec-adim { transition: background var(--gecis); }
.surec-adim .no { transition: color var(--gecis); }
.surec-adim::before { transition: transform .45s var(--agir); }

.surec-adim::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--amber);
  opacity: .55;
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  .surec-izgara.belir .surec-adim::after {
    transform: scaleX(0);
    transition: transform .6s linear;
  }
  .surec-izgara.belir .surec-adim::before { transform: translateY(-50%) scale(0); }

  .surec-izgara.gorundu .surec-adim::after { transform: scaleX(1); }
  .surec-izgara.gorundu .surec-adim::before { transform: translateY(-50%) scale(1); }

  /* segment 0,30 s arayla devralıyor; nokta segment biterken oturuyor */
  .surec-izgara.belir .surec-adim:nth-child(1)::after { transition-delay: .05s; }
  .surec-izgara.belir .surec-adim:nth-child(2)::after { transition-delay: .35s; }
  .surec-izgara.belir .surec-adim:nth-child(3)::after { transition-delay: .65s; }
  .surec-izgara.belir .surec-adim:nth-child(4)::after { transition-delay: .95s; }
  .surec-izgara.belir .surec-adim:nth-child(5)::after { transition-delay: 1.25s; }

  .surec-izgara.belir .surec-adim:nth-child(1)::before { transition-delay: .5s; }
  .surec-izgara.belir .surec-adim:nth-child(2)::before { transition-delay: .8s; }
  .surec-izgara.belir .surec-adim:nth-child(3)::before { transition-delay: 1.1s; }
  .surec-izgara.belir .surec-adim:nth-child(4)::before { transition-delay: 1.4s; }
  .surec-izgara.belir .surec-adim:nth-child(5)::before { transition-delay: 1.7s; }
}

@media (hover: hover) and (pointer: fine) {
  .surec-adim:hover { background: rgba(255, 255, 255, .045); }
  .surec-adim:hover .no { color: #fff; }
  .surec-izgara.gorundu .surec-adim:hover::before { transform: translateY(-50%) scale(1.4); }
}

/* ============================================================
   YÜZEY TEPKİLERİ
   Yağ ahşabı koyulaştırır ve damarı ortaya çıkarır: efekt büyüme değil ıslanma.
   Dinlenme hâli filter:none — mobil ile masaüstü aynı renkte görünür.
   Hover ailesinin tamamı (hover:hover) içinde: dokunmatikte kural hiç üretilmez,
   yapışan :hover artığı olmaz.
   ============================================================ */

.hs-gorsel img, .rk-gorsel img, .galeri-mozaik img, .galeri-izgara img,
.kart > a img, .is-gorsel img, .atolye-gorsel img {
  transition: transform .9s ease, filter .9s ease;
}

/* hizmet satırında kesim kenarı */
.hs-gorsel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .55s var(--agir);
}

.hs-no { transition: transform var(--gecis), box-shadow var(--gecis); }

/* galeri ızgarasına da mozaiğin perdesi */
.galeri-izgara a { position: relative; }
.galeri-izgara a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44, 56, 42, .42), transparent 55%);
  opacity: 0;
  transition: opacity var(--gecis);
}

.kart .simge { transition: background var(--gecis), color var(--gecis), transform .45s var(--agir); }
.iletisim-kart .kalem .simge { transition: background var(--gecis), transform .45s var(--agir); }
.rk-rozet { transition: background var(--gecis); }

@media (hover: hover) and (pointer: fine) {
  /* E5 · hizmet satırı: fotoğraf ıslanır, damga bastırılır */
  .hizmet-satir:hover .hs-gorsel img { filter: saturate(1.06) contrast(1.03); }
  .hizmet-satir:hover .hs-gorsel::after { transform: scaleX(1); }
  .hizmet-satir:hover .hs-no {
    transform: translateY(1px) scale(.97);
    box-shadow: inset 0 1px 3px rgba(43, 43, 38, .4);
  }

  /* E6 · kart kalkıyor, içindeki fotoğraf da canlanıyor */
  .kart:hover > a img { transform: scale(1.05); filter: saturate(1.05) contrast(1.02); }
  .kart:hover .simge { background: var(--amber); color: var(--yesil-koyu); transform: translateY(-3px); }

  /* E7 · galeri */
  .galeri-izgara a:hover::after, .galeri-mozaik a:hover::after { opacity: 1; }
  .galeri-izgara a:hover img, .galeri-mozaik a:hover img { filter: saturate(1.05) contrast(1.02); }

  /* E8 · iletişim kartı kalemleri */
  .iletisim-kart .kalem:hover .simge { background: rgba(224, 169, 92, .34); transform: translateY(-2px); }

  /* E9 · referans kartı */
  .referans-kart:hover .rk-gorsel img { transform: scale(1.045); filter: saturate(1.05) contrast(1.02); }
  .referans-kart:hover .rk-gorsel::after { transform: scaleY(1); }
  .referans-kart:hover .rk-rozet { background: var(--amber-acik); }
}

/* Klavye eşitliği: her hover tepkisinin odak karşılığı */
.hizmet-satir:focus-within .hs-gorsel::after { transform: scaleX(1); }
.kart:focus-within { transform: translateY(-5px); box-shadow: var(--golge); border-color: var(--amber); }
.kart:focus-within > a img { transform: scale(1.05); }
.galeri-izgara a:focus-visible::after, .galeri-mozaik a:focus-visible::after { opacity: 1; }
.iletisim-kart .kalem:focus-within .simge { background: rgba(224, 169, 92, .34); }
.referans-kart:focus-within .rk-gorsel::after { transform: scaleY(1); }

/* E9 · referans kartının tamamı bağlantı olur — asıl kazanç mobilde.
   .rk-icerik ve .dugme konumlandırılmaz ki örtünün kapsayıcı bloğu
   .referans-kart (position:relative) kalsın. */
.referans-kart .rk-icerik .dugme::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.referans-kart .rk-icerik > *:not(.dugme) { position: relative; z-index: 1; }

/* Titreme kilidi: düğme transform alırsa kendi ::after'ının kapsayıcı bloğu
   olur, örtü çöker, hover biter, tekrar başlar — sonsuz döngü. */
.referans-kart .dugme.dolu:hover { transform: none; }

/* iki paneli birleştiren dikiş */
.referans-kart .rk-gorsel::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--amber);
  z-index: 1;
  transform: scaleY(0);
  transition: transform .7s var(--agir);
}

/* ============================================================
   FÖY DİLİ, ZEMİN VE FORM
   ============================================================ */

/* E10 · künye föyü — noktalı ölçü çizgisi */
.yan-kutu dt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.yan-kutu dt::after {
  content: "";
  flex: 1;
  height: 0;
  border-bottom: 1px dotted var(--cizgi);
  transform-origin: left;
  transition: transform .5s var(--agir), border-color var(--gecis);
}

@media (prefers-reduced-motion: no-preference) {
  .yan-kutu.belir dt::after { transform: scaleX(0); }
  .yan-kutu.gorundu dt::after { transform: scaleX(1); }
  .yan-kutu.belir .satir:nth-child(2) dt::after { transition-delay: .07s; }
  .yan-kutu.belir .satir:nth-child(3) dt::after { transition-delay: .14s; }
  .yan-kutu.belir .satir:nth-child(4) dt::after { transition-delay: .21s; }
  .yan-kutu.belir .satir:nth-child(5) dt::after { transition-delay: .28s; }
  .yan-kutu.belir .satir:nth-child(6) dt::after { transition-delay: .35s; }
}

@media (hover: hover) and (pointer: fine) {
  .yan-kutu .satir:hover dt::after { border-bottom-color: var(--amber); }
}

/* E11 · madde listeleri — amber kareler sırayla oturur */
@media (prefers-reduced-motion: no-preference) {
  .belir .madde-listesi li::before {
    transform: translateY(-2px) scale(0);
    transition: transform .4s var(--agir);
  }
  .belir.gorundu .madde-listesi li::before { transform: translateY(-2px) scale(1); }
  .belir.gorundu .madde-listesi li:nth-child(2)::before { transition-delay: .06s; }
  .belir.gorundu .madde-listesi li:nth-child(3)::before { transition-delay: .12s; }
  .belir.gorundu .madde-listesi li:nth-child(4)::before { transition-delay: .18s; }
  .belir.gorundu .madde-listesi li:nth-child(5)::before { transition-delay: .24s; }
  .belir.gorundu .madde-listesi li:nth-child(6)::before { transition-delay: .30s; }
  .belir.gorundu .madde-listesi li:nth-child(n+7)::before { transition-delay: .36s; }
}

/* E12 · ölçü çentikleri — cetvel işareti çizgiye diktir.
   Çentik öğenin kendi üst kenarına bağlı: ızgara sarsa da metnin üstüne binmez. */
.malzeme-serit div, .imza div { position: relative; }
.malzeme-serit div::before, .imza div::before {
  content: "";
  position: absolute;
  left: 0; top: -10px;
  width: 1px; height: 9px;
  background: var(--amber);
  transform-origin: top;
}

@media (prefers-reduced-motion: no-preference) {
  .malzeme-serit.belir div::before,
  .belir .imza div::before { transform: scaleY(0); transition: transform .5s var(--agir); }
  .malzeme-serit.gorundu div::before,
  .belir.gorundu .imza div::before { transform: scaleY(1); }

  .malzeme-serit.belir div:nth-child(2)::before,
  .belir .imza div:nth-child(2)::before { transition-delay: .12s; }
  .malzeme-serit.belir div:nth-child(3)::before,
  .belir .imza div:nth-child(3)::before { transition-delay: .24s; }
}

/* E13 · atölye çerçevesi — önce parça, sonra ölçü çerçevesi */
@media (prefers-reduced-motion: no-preference) {
  .atolye-gorsel.belir::after {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s var(--agir) .35s;
  }
  .atolye-gorsel.belir.gorundu::after { clip-path: inset(0); }
}

/* E14 · zemin oturması — sitenin en büyük iki sabit yüzeyi.
   Blok solmuyor; yalnız zemin çok yavaş yerine oturuyor. */
.is-gorsel { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .cta-serit.belir-zemin::before {
    transform: scale(1.08);
    transition: transform 2.4s var(--agir);
  }
  .cta-serit.belir-zemin.gorundu::before { transform: none; }

  .is-gorsel.belir-zemin img {
    transform: scale(1.06);
    transition: transform 2.2s var(--agir);
  }
  .is-gorsel.belir-zemin.gorundu img { transform: none; }
}

/* E15 · form — çizik izi. Amber kenarlık tek odak göstergesiydi;
   alt çizgi onun yerine değil yanına ekleniyor. */
label.form-alan { position: relative; }
label.form-alan > span { transition: color var(--gecis); }
label.form-alan:focus-within > span { color: var(--amber); }

label.form-alan::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--agir);
}
label.form-alan:focus-within::after { transform: scaleX(1); }

/* E16 · alt bilgi bağlantılarında çizgi */
.alt-bilgi ul a { position: relative; }
.alt-bilgi ul a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--amber-acik);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--gecis);
}
@media (hover: hover) and (pointer: fine) {
  .alt-bilgi ul a:hover::after { transform: scaleX(1); }
}
.alt-bilgi ul a:focus-visible::after { transform: scaleX(1); }

/* E17 · SSS menteşesi.
   Yükseklik tarayıcının kendi <details> davranışına bırakıldı: 0fr/1fr ızgara
   tekniği fr izini her tarayıcı durumunda çözmediği için cevabın görünmez
   kalma riski vardı. Burada yalnızca cevap belirirken menteşe hareketi var;
   animasyon hiç çalışmazsa taban durum zaten görünür (fail-open). */
@keyframes sss-ac {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* fill-mode yok: animasyon dışında taban stil (görünür) geçerli kalır */
  .sss-listesi details[open] .sss-govde > * { animation: sss-ac .32s var(--agir); }
}

/* E18 · ışık kutusu açılışı */
.isik-kutusu { opacity: 0; transition: opacity .22s ease; }
.isik-kutusu.gorunur { opacity: 1; }
.isik-kutusu img { transform: scale(.97); transition: transform .3s var(--agir); }
.isik-kutusu.gorunur img { transform: none; }

@media (max-width: 1080px) {
  /* referans kartı tek sütuna düşünce dikey dikiş anlamsız */
  .referans-kart .rk-gorsel::after { display: none; }
}

@media (max-width: 560px) {
  .malzeme-serit div::before { height: 7px; top: -8px; }
}

/* ============================================================
   Hareket azaltma — dosyanın SON bloğu.
   Gizli başlangıç durumlarının tamamı zaten no-preference içinde;
   burada yalnız süreler susturuluyor ve mevcut kusurlar onarılıyor.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

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

  /* Kusur onarımı: bu iki öğe hareket azaltmada da animasyonluydu;
     süre susturulunca görünmez kalırlardı. */
  .slayt-metin .satir { transform: none; opacity: 1; animation: none; }
  .slayt-dugmeler { opacity: 1; transform: none; animation: none; }

  .isik-kutusu.acik { opacity: 1; }
  .isik-kutusu img { transform: none; }
}