/* ============================================================
   AHŞAPÇI — ana stil dosyası
   Statik site. Derleme yok, ön işlemci yok. Düz CSS.

   Renkler eski siteden örneklendi (CLAUDE.md §3).
   Font: müşteriden "diğer zemin fontumuz" bilgisi bekleniyor (İ-03).
         Kesinleşene kadar sistem font yığını kullanılıyor;
         --ah-font-body değişkeni değişince tüm site döner.
   ============================================================ */

/* ============================================================
   FONT — Open Sans (self-host)
   Kaynak: @fontsource/open-sans v5 (SIL Open Font License 1.1)
   CDN kullanılmıyor; dosyalar assets/fonts/ altında.

   İki alt küme var:
     latin      → temel Latin harfler
     latin-ext  → TÜRKÇE KARAKTERLER BURADA (ş Ş ğ Ğ İ)
   unicode-range sayesinde tarayıcı sadece ihtiyacı olanı indirir.
   ('ı' harfi U+0131, latin kümesinde.)
   ============================================================ */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext-400-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- MARKA YEŞİLİ ----------------------------------------------
     Tek yeşil kullanılır. Farklı yeşil tonları yok.
     Kaynak: GENEL KATALOG.pdf — katalogdaki vektör yeşili C66 M27 Y78 K9,
     sRGB karşılığı ≈ #608C5A; katalog s.5 arka plan rasterinin medyanı
     #508C4E; eski sitenin kullandığı değer #608C51.
     Üç ölçüm de G=140'ta buluşuyor; #608C51 her kanalda diğer ikisinin
     arasında kaldığı için bu değerde karar kılındı.
     Müşterinin tasarımcısından resmi marka kodu gelirse burası güncellenir. */
  --ah-green:        #608C51;   /* üst bant + katalog butonu */
  --ah-green-dark:   #4E7342;   /* SADECE hover/odak durumu — aynı yeşilin koyusu */

  /* Katalog, açık zeminleri aynı yeşilin açık tonlarıyla kuruyor.
     Bunlar marka yeşilinin beyazla karışımı (yeni yeşil değil). */
  --ah-green-t50:    #B0C6A8;
  --ah-green-t30:    #CFDCCB;
  --ah-green-t15:    #E8EEE6;

  /* ---- MARKA KAHVESİ ---------------------------------------------
     Logodaki ahşap dokunun koyu kahve tonlarından örneklendi
     (79 bin koyu piksel, medyan). Katalogun vektör paletinde kahve
     yok; bu yüzden kahve doğrudan logodan alındı. */
  --ah-brown:        #593926;   /* genel katalog butonu */
  --ah-brown-dark:   #42291B;   /* SADECE hover/odak */

  --ah-text:         #2E2A26;
  --ah-muted:        #6B6660;
  --ah-border:       #E3E0DB;

  /* Open Sans self-host ediliyor; sistem fontları yalnızca yedek. */
  --ah-font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --ah-font-head: var(--ah-font-body);
}

body {
  font-family: var(--ah-font-body);
  color: var(--ah-text);
  background: #fff;
}

/* Bootstrap'in standart container'ı bu menüye dar geliyor:
   logo + 7 menü öğesi + 2 katalog butonu 1140px'e sığmıyordu. */
@media (min-width: 1200px) {
  .container { max-width: min(1272px, calc(100vw - 2rem)); }
}
@media (min-width: 1500px) {
  .container { max-width: 1480px; }
}

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

.skip-link {
  position: absolute;
  z-index: 1080;
  padding: .5rem 1rem;
  background: var(--ah-brown);
  color: #fff;
}

/* ============================================================
   ÜST BANT
   ============================================================ */

.topbar {
  background: var(--ah-green);
  color: #fff;
  font-size: .875rem;
  line-height: 1.4;
}

.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover,
.topbar a:focus-visible { text-decoration: underline; }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  min-height: 40px;
  flex-wrap: wrap;
}

.topbar__contact,
.topbar__social,
.topbar__lang {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topbar__contact a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  white-space: nowrap;
}

.topbar__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.topbar__slogan {
  margin: 0;
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
}

.topbar__social { gap: .85rem; }
.topbar__social .ico { width: 1.125rem; height: 1.125rem; }

.topbar__lang { gap: .75rem; }

.topbar__lang .lang-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .15rem .35rem;
  border-radius: 3px;
  font-weight: 600;
}

.topbar__lang .lang-link img {
  display: block;
  border: 1px solid rgba(255, 255, 255, .5);
}

.topbar__lang .lang-link.is-active { background: rgba(255, 255, 255, .18); }

/* Mobil: iletişim üstte, slogan altında ortalanmış */
@media (max-width: 991.98px) {
  .topbar__inner {
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .5rem 0;
    text-align: center;
  }
  .topbar__contact { justify-content: center; flex-wrap: wrap; gap: .35rem 1rem; }
  .topbar__right   { justify-content: center; gap: 1rem; }
}

@media (max-width: 575.98px) {
  .topbar { font-size: .8125rem; }
  .topbar__contact { gap: .2rem .9rem; }

  /* Slogan her iki dilde de KENDİ SATIRINDA dursun.
     Önceden Türkçe slogan + ikonlar + dil seçimi tek satıra sığıyor,
     daha uzun olan İngilizce slogan dil seçimini alt satıra itiyordu.
     Üst bant 36 px büyüyor, dil değiştirince sayfa aşağı kayıyordu. */
  .topbar__right   { flex-wrap: wrap; justify-content: center; }
  .topbar__slogan  { flex: 0 0 100%; }
}

/* ============================================================
   MENÜ BARI
   ============================================================ */

.site-header {
  background: #fff;
  border-bottom: 1px solid var(--ah-border);
}

.site-header .navbar {
  padding-top: .75rem;
  padding-bottom: .75rem;
  gap: 1rem;
}

/* Müşteri notu: "Ana sayfadaki logo daha büyük olabilir mi?" → büyütüldü */
.navbar-brand img {
  display: block;
  width: clamp(200px, 19vw, 300px);
  height: auto;
}

.site-header .navbar-nav { gap: 0; flex-wrap: nowrap; }

.site-header .nav-link {
  color: var(--ah-text);
  font-weight: 600;
  font-size: .9375rem;
  padding: .5rem .55rem;
  white-space: nowrap;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus-visible,
.site-header .nav-item.dropdown:hover > .nav-link { color: var(--ah-green); }

/* Bulunulan sayfanın üst menü satırı. Bootstrap'in kendi
   --bs-navbar-active-color değeri düz siyah; Referanslar, İletişim ve
   Emprenyeli Ahşap sayfalarında menü başlığı baştan beri siyah
   çıkıyordu. main.css bootstrap'ten sonra yüklendiği için eşit
   özgüllükte bu kural kazanıyor. */
.site-header .nav-link.active { color: var(--ah-green); }
.site-header .nav-link.active + .nav-ac { color: var(--ah-green); }

.site-header .dropdown-menu {
  border: 1px solid var(--ah-border);
  border-top: 3px solid var(--ah-green);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
  padding: .35rem 0;
}

.site-header .dropdown-item { padding: .45rem 1.1rem; font-size: .9375rem; }
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus-visible { background: #F4F6F2; color: var(--ah-green); }

/* Bulunulan sayfa. Bootstrap'in kendi mavisi marka yeşiliyle
   çakışıyordu; tek yeşil kuralı gereği markanın yeşiline çevrildi. */
.site-header .dropdown-item.active,
.site-header .dropdown-item:active { background: var(--ah-green); color: #fff; }

/* --- Açılır menü başlığı: metin bağlantı, ok düğme ---------------
   Başlık metni artık düz bir bağlantı; tıklanınca üst sayfaya gider.
   Menüyü masaüstünde hover açıyor (aşağıda, ≥1200 px). 1200 px altında
   menü hamburgere giriyor ve hover yok; alt menüyü yanındaki ok
   düğmesi açıyor — olmasaydı dar ekranda alt sayfalara menüden hiç
   ulaşılamazdı. Bootstrap'in bölünmüş düğme düzeni; ek script yok.

   Başlık satırı FLEX: aksi hâlde <a> ile <button> satır-içi kalıyor ve
   aralarındaki satır sonu boşluk olarak çiziliyordu — üç menüde ~13 px,
   1366 px'te menüyü taşıracak kadar. Flex'te öğeler arası boşluk
   yazılmadıkça yok.

   Flex'in bedeli: Bootstrap navbar içinde açılır menüye top/left
   vermiyor (Popper kullanılmıyor), menü kendi akış konumunda duruyordu;
   flex'te bu konum okun SAĞI oluyor. O yüzden masaüstünde menünün yeri
   aşağıda açıkça yazılıyor. */
.site-header .nav-item { white-space: nowrap; }
.site-header .nav-item.dropdown { display: flex; align-items: center; }

.site-header .nav-ac {
  display: inline-flex;
  align-items: center;
  padding: .5rem .55rem .5rem .1rem;
  border: 0;
  background: none;
  color: var(--ah-text);
  line-height: 1;
}

.site-header .nav-ac::after { margin: 0; vertical-align: middle; }
.site-header .nav-ac:hover,
.site-header .nav-ac:focus-visible,
.site-header .nav-item.dropdown:hover > .nav-ac { color: var(--ah-green); }

@media (min-width: 1200px) {
  /* Flex yüzünden akış konumu bozulduğu için menünün yeri burada. */
  .site-header .nav-item.dropdown > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
  }

  /* Burada ok yalnızca "alt menü var" işareti, menüyü hover açıyor.
     Menü 1366 px'te kıl payı sığıyor; ok, eski ::after okunun
     kapladığı yerden geniş olmamalı. Bu yüzden başlığın sağ boşluğu
     oka devrediliyor: başlık sağdan sıfır, okun sağ boşluğu da öbür
     menü öğelerininkiyle aynı formülde. Toplam genişlik eskisiyle
     aynı kalıyor, aradaki fark yalnızca okun kendi 2 px'i. */
  .site-header .nav-item.dropdown > .nav-link { padding-right: 0; }

  .site-header .nav-ac {
    padding: .5rem clamp(.14rem, .62vw - .45rem, .55rem) .5rem .12rem;
  }

  html[lang="en"] .site-header .nav-ac {
    padding: .5rem clamp(.26rem, .55vw - .42rem, .45rem) .5rem .12rem;
  }
}

/* Hamburger: ok sağ kenara, parmak için geniş; menü kendi satırına.
   Burada menü position:static akıyor, flex öğesi oluyor. */
@media (max-width: 1199.98px) {
  .site-header .nav-item.dropdown { flex-wrap: wrap; justify-content: space-between; }
  .site-header .nav-item.dropdown > .dropdown-menu { flex: 0 0 100%; }
  .site-header .nav-ac { padding: .5rem 1rem; }
}

/* Katalog butonları — hamburger menünün DIŞINDA, mobilde de görünür */
.header-catalogs {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-left: 1rem;
  flex: none;
  order: 3;
}

.site-header .navbar-collapse { order: 2; }

.btn-catalog {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border: 0;
  border-radius: 4px;
  color: #fff;
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease;
}

.btn-catalog:hover,
.btn-catalog:focus-visible { color: #fff; }

.btn-catalog--brown { background: var(--ah-brown); }
.btn-catalog--brown:hover,
.btn-catalog--brown:focus-visible { background: var(--ah-brown-dark); }

.btn-catalog--green { background: var(--ah-green); }
.btn-catalog--green:hover,
.btn-catalog--green:focus-visible { background: var(--ah-green-dark); }

/* Masaüstünde açılır menüler hover ile de açılsın */
@media (min-width: 1200px) {
  .site-header .nav-item.dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
}

/* 1200 px üstü: menü tek satırda kalacak ve katalog butonlarının sağ
   kenarı, sayfa içeriğinin sağ kenarıyla ÇAKIŞACAK. Eskiden bu aralıkta
   menü satırı container'dan ~25 px taşıyor, butonlar içerik sütununun
   dışına çıkıyordu; iç sayfalardaki ızgaralar header ile hizasız
   görünüyordu. Boşluk ve punto artık vw ile süzülüyor, sabit kırılma
   noktası yerine genişlikle birlikte daralıyor. */
@media (min-width: 1200px) {
  .site-header .navbar { gap: clamp(.4rem, .7vw, 1rem); }
  .site-header .navbar-collapse { min-width: 0; }

  .site-header .nav-link {
    font-size: clamp(.8125rem, .22vw + .55rem, .9375rem);
    padding: .5rem clamp(.14rem, .62vw - .45rem, .55rem);
  }

  /* İngilizce etiketler daha uzun ("Our Applications & Products"),
     her genişlikte bir tık daha dar. */
  /* Taban .1rem idi: 1200–1500 arasında etiketler arasında 3 px
     kalıyor, kelimeler birbirine yapışıyordu. Katalog butonları iki
     satıra sarılınca yer açıldığı için taban yükseltildi (ara 3 → 8 px).
     Türkçede ara zaten 16 px, orada taban aynı kaldı — TR menü daha
     uzun, 1200 px'te payı bu kadar yok. */
  html[lang="en"] .site-header .nav-link {
    font-size: clamp(.78rem, .2vw + .53rem, .9rem);
    padding: .5rem clamp(.26rem, .55vw - .42rem, .45rem);
  }

  .header-catalogs { margin-left: clamp(.4rem, .6vw, 1rem); }
}

@media (min-width: 1200px) and (max-width: 1499.98px) {
  .navbar-brand img { width: 240px; }
  .btn-catalog { font-size: .75rem; padding: .4rem .6rem; }
}

/* 1200–1500 px: menü bu aralıkta yatay duruyor ama logo + menü + iki
   katalog butonu satıra sığmıyordu; son menü öğesi butonların altında
   kalıyordu. Butonların yazısı burada tek satır yerine İKİ satıra
   sarılıyor ve punto bir tık küçülüyor — kutular daralınca menüye yer
   açılıyor. Üstte hizalı duruyorlar ki ikon ilk satırla aynı hizada
   kalsın.

   Bant neden 1340 değil 1500'e kadar: 1340–1500 arasında menü tek
   satırlı butonlarla da sığıyor ama payı yalnızca ~20 px. Yazı tipi
   ölçüleri işletim sistemine göre birkaç piksel oynuyor (Windows
   DirectWrite ile Linux FreeType aynı değil); yedi etikette bu pay
   tamamen yenebiliyor. 1500 px'ten sonra container 1456'ya oturuyor ve
   pay 160 px'e çıkıyor, orada gerek yok. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
  .btn-catalog {
    align-items: flex-start;
    gap: .35rem;
    padding: .35rem .5rem;
    font-size: .6875rem;
    line-height: 1.2;
    white-space: normal;
    text-align: left;        /* .btn ortalıyor; ikonla hizalansın */
  }

  /* Sarmayı yapan şey bu: genişlik sınırı olmadan metin tek satır kalır.
     Sınır en uzun kelimeden ("Taşınabilir") dar olamaz, kelime
     bölünmüyor — kutunun tabanı o. */
  .btn-catalog span { display: block; max-width: 6.5em; }
  .btn-catalog .ico { flex: none; margin-top: .15rem; }

  /* "Portable Wooden Houses" 6.5em'de üç satıra düşüyor ve header'ı
     uzatıyordu; İngilizcede sınır iki satıra göre. */
  html[lang="en"] .btn-catalog span { max-width: 8.5em; }

  /* Son birkaç pikseli logodan alıyoruz. Logo zaten bu aralıkta
     300'den 240'a iniyordu; en dar bantta bir kademe daha. */
  .navbar-brand img { width: 220px; }

  .header-catalogs { margin-left: .4rem; }

  /* TR menü 1200 px'te ancak 7 px payla sığıyordu; payı ikiye katlamak
     için sütunlar arası boşluk da bu bantta kısıldı. */
  .site-header .navbar { gap: .3rem; }
}

/* 1200–1280 en dar nokta: TR menüsünün payı yukarıdakilerle 14 px'e
   çıkıyor ama bu, yazı tipi ölçüsü birkaç piksel oynadığında yenebilir.
   Logo bir kademe daha küçülüyor (mobilde de 200 px). */
@media (min-width: 1200px) and (max-width: 1279.98px) {
  .navbar-brand img { width: 200px; }
}

@media (max-width: 1199.98px) {
  .header-catalogs {
    order: 2;
    flex-direction: row;
    flex-basis: 100%;
    gap: .5rem;
    margin: .85rem 0 .25rem;
  }
  .header-catalogs .btn-catalog { flex: 1 1 0; justify-content: center; min-width: 0; }
  .site-header .navbar-collapse { order: 3; }
  .site-header .navbar-nav { padding-top: .5rem; flex-wrap: wrap; }
  .site-header .nav-link { white-space: normal; }
}

/* Telefonda yan yana sığmıyor, etiket kesiliyordu — alt alta, tam etiketle */
@media (max-width: 575.98px) {
  .header-catalogs { flex-direction: column; }
  .header-catalogs .btn-catalog { justify-content: flex-start; }
}

/* ============================================================
   HERO / KAPAK GÖRSELİ
   Müşteri isteği: menünün bittiği yerden ekranın altına kadar,
   tam genişlik. Kaydırınca alttaki bölümler başlar.
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  /* Kesin yüksekliği main.js veriyor: hero'nun ekrandaki gerçek konumunu
     ölçüp kalan alanın tamamını ona atıyor, böylece altta boşluk kalmıyor.
     Aşağıdaki değerler yalnızca JS çalışmazsa devreye giren yedek. */
  height: calc(100vh - 150px);
  height: calc(100svh - 150px);
  min-height: 240px;   /* cok kisa ekranlarda tasmasin */
  overflow: hidden;
  background: #DCEBD6;   /* görsel inene kadar zemin (açık yeşil) */
}

.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Görsel kare (2162x2122); geniş ekranda üstten hizalanıyor ki
     açık renkli üst bölge her zaman görünsün — slogan orada duruyor. */
  object-position: center top;
}

.hero__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  /* Yazı görselin ortasında değil, hero alanının tam ortasında —
     hem üstten hem alttan ortalı (müşteri isteği). */
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vh, 3rem) clamp(.75rem, 2.5vw, 2rem);
}

.hero__slogan {
  margin: 0;
  width: 100%;
  max-width: none;
  text-align: center;
  font-style: italic;
  font-weight: 700;
  line-height: 1.08;
  /* Slogan HTML'de <br> ile iki satır yazılıyor; en uzun satır
     "Çürümeyen Ahşap" (15 karakter). Punto o satıra göre ölçeklendi. */
  font-size: min(11vw, 12rem);
  /* Kahverengi marka rengi — görselin açık üst bölgesinde 8:1 kontrast
     veriyor (koyu yeşil 4.3:1, marka yeşili 3.1:1'de kalıyordu).
     Ayrıca ahşap rengi olması slogan ile uyuşuyor. */
  color: var(--ah-brown);
  /* Kırpma farklı ekranlarda koyu bir ağaç ucunu yazının altına
     getirirse diye çok hafif bir açık hale — normalde görünmez. */
  text-shadow: 0 1px 10px rgba(255, 255, 255, .55);
}

/* İngilizce sloganın en uzun satırı "Non-Decaying Wood..." (20 karakter),
   Türkçesi 15 karakter. Punto ona göre düşürüldü.
   ⚠️ Bu katsayılar metnin uzunluğuna bağlı — slogan değişirse
   yeniden ölçülmeli, yoksa yazı ekrandan taşar. */
/* İngilizce slogan TÜRKÇE İLE AYNI GENİŞLİKTE dursun.
   Ölçüm (1366 px): TR en uzun satır "Çürümeyen Ahşap" 150.26 px puntoda
   1201 px; EN en uzun satır "Non-Decaying Wood..." 112.70 px puntoda
   1097 px. Yani EN harfleri satır başına daha geniş yer kaplıyor:
   1201/150.26 = 7.99  ·  1097/112.70 = 9.73  →  oran 0.821.
   TR punto min(11vw, 12rem) olduğuna göre EN puntosu bunun 0.821 katı:
   11 × 0.821 = 9.03vw  ·  12 × 0.821 = 9.85rem.
   Sonuç: dil değiştirince slogan bloğu aynı genişlikte kalıyor,
   geçişteki "büyüyüp küçülme" hissi kayboluyor. */
html[lang="en"] .hero__slogan {
  font-size: min(9.03vw, 9.85rem);
}

/* Dar ekranlarda görselin tamamı göründüğü için sloganın tam ortası
   ağaçlara denk geliyor ve bazı harflerin arkası koyulaşıyor
   (ölçüldü: en koyu %5 dilimde kontrast 2.7:1'e kadar düşüyordu).
   Yazının arkasına kenarları tamamen eriyen çok yumuşak bir aydınlık
   ekleniyor — kutu görünmüyor, suluboya dokusu bozulmuyor.
   Masaüstünde gerek yok, orada zaten 8:1. */
@media (max-width: 991.98px) {
  .hero__inner::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 70%;
    background: radial-gradient(ellipse at center,
                rgba(255, 255, 255, .62) 0%,
                rgba(255, 255, 255, .42) 45%,
                rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
  }

  .hero__slogan {
    position: relative;
    text-shadow: 0 1px 14px rgba(255, 255, 255, .9);
  }
}

@media (max-width: 575.98px) {
  .hero { min-height: 240px; }
}

/* ============================================================
   ANA SAYFA GÖRSEL ŞERİDİ (galeri)
   Aynı anda 5 küçük görsel, altında görsel sayısı kadar nokta.
   Şerit native scroll + scroll-snap ile çalışıyor: telefonda
   parmakla kaydırma bedava geliyor, ek kütüphane yok.
   ============================================================ */

.galeri {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.galeri__sarmal {
  position: relative;
}

.galeri__serit {
  display: flex;
  gap: clamp(.5rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}

.galeri__serit::-webkit-scrollbar { display: none; }

/* Aynı anda kaç görsel görünecek — ekran daraldıkça azalıyor */
.galeri__oge {
  --adet: 5;
  flex: 0 0 calc((100% - (var(--adet) - 1) * clamp(.5rem, 1.2vw, 1rem)) / var(--adet));
  scroll-snap-align: start;
}

@media (max-width: 1199.98px) { .galeri__oge { --adet: 4; } }
@media (max-width: 991.98px)  { .galeri__oge { --adet: 3; } }
@media (max-width: 767.98px)  { .galeri__oge { --adet: 2; } }
@media (max-width: 479.98px)  { .galeri__oge { --adet: 1.4; } }

.galeri__dugme {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ah-green-t15);
  cursor: pointer;
  position: relative;
}

.galeri__dugme img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;               /* küçük karede düzgün dursun; tam hâli pencerede */
  transition: transform .35s ease, filter .35s ease;
}

.galeri__dugme:hover img,
.galeri__dugme:focus-visible img {
  transform: scale(1.06);
  filter: brightness(1.04);
}

.galeri__dugme:focus-visible {
  outline: 3px solid var(--ah-green);
  outline-offset: 2px;
}

/* --- Yan oklar --- */
.galeri__ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  cursor: pointer;
  transition: background-color .15s ease, opacity .15s ease;
}

.galeri__ok svg { width: 18px; height: 18px; fill: var(--ah-brown); }
.galeri__ok:hover { background: #fff; }
.galeri__ok--sol { left: -14px; }
.galeri__ok--sag { right: -14px; }
.galeri__ok[disabled] { opacity: .35; cursor: default; }

@media (max-width: 991.98px) {
  .galeri__ok { display: none; }   /* dokunmatikte parmakla kaydırılıyor */
}

/* --- Noktalar: marka yeşili --- */
.galeri__noktalar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
}

.galeri__nokta {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--ah-green);
  border-radius: 50%;
  background: var(--ah-green-t50);
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.galeri__nokta:hover,
.galeri__nokta:focus-visible { transform: scale(1.15); }

.galeri__nokta.is-active {
  background: var(--ah-green);
  border-color: var(--ah-green-dark);
  transform: scale(1.2);
}

/* ============================================================
   GÖRSEL BÜYÜTME PENCERESİ
   ============================================================ */

.galeri-modal .modal-content {
  position: relative;
  background: transparent;
  border: 0;
  align-items: center;
}

.galeri-modal__resim {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;             /* tam görsel, kırpma yok */
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}

.galeri-modal__aciklama {
  margin: .85rem 0 0;
  color: #fff;
  font-size: .9375rem;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.galeri-modal__kapat {
  position: absolute;
  top: -42px;
  right: 0;
  z-index: 3;
  filter: invert(1) grayscale(1) brightness(2);
}

.galeri-modal__ok {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  cursor: pointer;
}

.galeri-modal__ok svg { width: 20px; height: 20px; fill: var(--ah-brown); }
.galeri-modal__ok--sol { left: -60px; }
.galeri-modal__ok--sag { right: -60px; }

@media (max-width: 991.98px) {
  .galeri-modal__ok--sol { left: 6px; }
  .galeri-modal__ok--sag { right: 6px; }
  .galeri-modal__kapat { top: -36px; }
}

@media (prefers-reduced-motion: reduce) {
  .galeri__serit { scroll-behavior: auto; }
  .galeri__dugme img { transition: none; }
}

/* ============================================================
   ZEMİN ALANI
   Katalogdaki suluboya yıkaması, galeri ile Instagram bölümünü
   birlikte sarıyor. Kapak görselinden sonra sert bir geçiş olmasın
   diye üstte beyazdan eriyerek başlıyor, altta yine beyaza eriyor.
   Üstüne hafif bir beyaz perde var ki fotoğraflar ve yazılar
   zeminle yarışmasın (yeşil bir tarla değil, kâğıt dokusu gibi dursun).
   ============================================================ */

.zemin-alan {
  position: relative;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-image:
    linear-gradient(to bottom,
      #fff 0%,
      rgba(255, 255, 255, .55) 12%,
      rgba(255, 255, 255, .55) 85%,
      #fff 100%),
    url("../img/zemin/kapak-alt-zemin-1920.jpg");
}

/* WebP destekleyen tarayıcılarda 41 KB'lık sürüm kullanılır
   (JPG karşılığı 117 KB). Desteklemeyen eskilerde üstteki JPG kalır. */
@supports (background-image: image-set(url("../img/zemin/kapak-alt-zemin-1920.webp") type("image/webp"))) {
  .zemin-alan {
    background-image:
      linear-gradient(to bottom,
        #fff 0%,
        rgba(255, 255, 255, .55) 12%,
        rgba(255, 255, 255, .55) 85%,
        #fff 100%),
      image-set(url("../img/zemin/kapak-alt-zemin-1920.webp") type("image/webp"),
                url("../img/zemin/kapak-alt-zemin-1920.jpg") type("image/jpeg"));
  }
}

/* Dar ekranda daha küçük dosya yeter */
@media (max-width: 767.98px) {
  .zemin-alan { background-image:
    linear-gradient(to bottom, #fff 0%, rgba(255,255,255,.55) 10%,
                    rgba(255,255,255,.55) 88%, #fff 100%),
    url("../img/zemin/kapak-alt-zemin-1200.jpg"); }
}

/* ============================================================
   INSTAGRAM BÖLÜMÜ (M-07 — şu an yer tutucu)
   ============================================================ */

.ig {
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem);
}

/* 6 gönderi = 3 sütun x 2 satır. Instagram'ın kendi profil ızgarası da
   3 sütun, göz bu düzene alışkın. Izgara genişliği sınırlandı ki geniş
   ekranda kareler abartılı büyümesin (1366px'te ~350px, 1920px'te ~350px). */
.ig__izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.2vw, 1rem);
  max-width: 1080px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

@media (max-width: 575.98px) { .ig__izgara { grid-template-columns: repeat(2, 1fr); } }

.ig__kutu > * {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--ah-green-t50);
}

.ig__yer {
  display: grid;
  place-items: center;
}

.ig__yer svg {
  width: 28%;
  height: 28%;
  fill: var(--ah-green);
  opacity: .45;
}

/* Gerçek gönderiler geldiğinde bu sınıf kullanılacak */
.ig__gonderi img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.ig__gonderi:hover img { transform: scale(1.05); }

.ig__alt {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  text-align: center;
}

.btn-katalog-benzeri {
  display: inline-block;
  padding: .65rem 1.4rem;
  border-radius: 4px;
  background: var(--ah-green);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s ease;
}

.btn-katalog-benzeri:hover,
.btn-katalog-benzeri:focus-visible { background: var(--ah-green-dark); color: #fff; }

.bolum-baslik {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--ah-brown);
  text-align: center;
  margin: 0 0 clamp(1.25rem, 3vw, 2rem);
}

/* ============================================================
   REFERANSLAR — kesintisiz akan logo şeridi
   Tıklanmıyor, sadece gösterim. Beyaz zeminde duruyor: logolar
   dokulu bir zeminde kirli görünür, temiz zemin şart.
   ============================================================ */

.ref {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(3rem, 7vw, 4.5rem);
  background: #fff;
  overflow: hidden;
}

/* Şerit, üstteki galeri şeridiyle BİREBİR aynı genişlikte.
   Kendi ölçüsü yok: sitenin .container kabının içinde duruyor, böylece
   galeri ile referanslar hiçbir ekran boyutunda birbirinden ayrılamaz.
   Genişlik değişecekse .container kuralından değişir, buradan değil. */
.ref__pencere {
  width: 100%;
  overflow: hidden;
}

.ref__serit {
  display: flex;
  gap: var(--ref-ara, 2rem);
  width: max-content;
  /* kenarlarda yumuşak eriyiş — şerit aniden kesilmesin */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.ref__sira {
  --ref-ara: 2rem;
  display: flex;
  gap: var(--ref-ara);
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: refAkis 70s linear infinite;
}

@keyframes refAkis {
  to { transform: translateX(calc(-100% - var(--ref-ara))); }
}

.ref__serit:hover .ref__sira { animation-play-state: paused; }

.ref__oge {
  flex: none;
  width: 164px;
  text-align: center;
}

.ref__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  padding: .5rem;
  border: 1px solid var(--ah-green-t50);
  border-radius: 6px;
  background: #fff;
}

.ref__logo picture { display: contents; }

.ref__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;      /* logo asla kırpılmaz, ezilmez */
}

/* Gerçek logo gelene kadar firmanın kısaltması duruyor */
.ref__kisaltma {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ah-green);
}

.ref__ad {
  margin: .6rem 0 0;
  font-size: .8125rem;
  line-height: 1.3;
  color: var(--ah-muted);
}

@media (max-width: 575.98px) {
  .ref__sira { --ref-ara: 1.25rem; animation-duration: 55s; }
  .ref__oge { width: 134px; }
  .ref__logo { height: 98px; }
  .ref__kisaltma { font-size: 1.125rem; }
  .ref__ad { font-size: .75rem; }
}

/* Hareketi azalt tercihi: akış durur, şerit kaydırılabilir kalır */
@media (prefers-reduced-motion: reduce) {
  .ref__sira { animation: none; }
  .ref__serit { overflow-x: auto; }
}

/* ============================================================
   FOOTER
   Dört sütun: marka+tanıtım metni | site haritası | ürünler | iletişim.
   Telif satırı en altta ortalı.
   Koyu yeşil zemin — logo "koyu zemin" varyantını kullanıyor
   (harfleri beyaz dolu), beyaz kutu gerekmiyor.
   ============================================================ */

.site-footer {
  background: #2F3A2A;
  color: #D8DCD3;
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
}

.site-footer a { color: #D8DCD3; text-decoration: none; }
.site-footer a:hover,
.site-footer a:focus-visible { color: #fff; text-decoration: underline; }

.site-footer__ust {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.7fr 1.25fr;
  gap: clamp(1.5rem, 3vw, 3rem);
}

@media (max-width: 1199.98px) {
  .site-footer__ust { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575.98px) {
  .site-footer__ust { grid-template-columns: 1fr; }
}

/* --- 1. sütun: marka --- */
.site-footer__logo { display: block; }

/* Punto ve vurgular genel katalogdaki sayfanın birebir karşılığı:
   gövde 12 pt normal, vurgular bold, kapanış cümlesi 14 pt semibold. */
.site-footer__metin {
  margin: 1.25rem 0 0;
  font-size: .9375rem;
  line-height: 1.7;
  color: #C9D0C2;
}

.site-footer__metin strong { color: #fff; font-weight: 700; }

.site-footer__kapanis {
  margin: .75rem 0 0;
  font-size: 1.0625rem;   /* katalogdaki 14/12 oranı */
  font-weight: 600;
  line-height: 1.45;
  color: var(--ah-green-t50);
}

.site-footer__sosyal {
  display: flex;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.site-footer__sosyal a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ah-green);
  color: #fff;
}

.site-footer__sosyal a:hover { background: var(--ah-green-t50); color: #2F3A2A; }
.site-footer__sosyal .ico { width: 18px; height: 18px; fill: currentColor; }

/* --- Başlıklar: altında marka yeşilinin açık tonunda çizgi --- */
.site-footer__baslik {
  margin: 0 0 1.25rem;
  padding-bottom: .65rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  position: relative;
}

.site-footer__baslik::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: var(--ah-green-t50);
}

/* --- Bağlantı listeleri --- */
.site-footer__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__liste li { margin-bottom: .55rem; }
.site-footer__liste a { font-size: .875rem; }

/* Ürünler uzun liste — iki alt sütuna bölünüyor */
.site-footer__liste--iki {
  columns: 2;
  column-gap: 1.5rem;
}

.site-footer__liste--iki li { break-inside: avoid; }

@media (max-width: 767.98px) {
  .site-footer__liste--iki { columns: 1; }
}

/* Ürünlerimiz sütununun altındaki ikinci liste: taşınabilir ev modelleri.
   Beşinci sütun açmak marka paragrafını sıkıştırdığı için modeller
   geniş sütunun altına alt başlıkla eklendi. Başlığın kendisi üst
   sayfaya bağlanıyor. */
.site-footer__altbaslik {
  position: relative;
  margin: 1.5rem 0 1rem;
  padding-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #fff;
}

.site-footer__altbaslik::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--ah-green-t50);
}

.site-footer__altbaslik a { color: inherit; }

/* --- İletişim --- */
.site-footer__iletisim { margin: 0; font-style: normal; }

.site-footer__iletisim p {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 0 0 .7rem;
  font-size: .875rem;
  line-height: 1.5;
}

.site-footer__iletisim .ico {
  width: 16px;
  height: 16px;
  margin-top: .15rem;
  fill: var(--ah-green-t50);
  flex: none;
}

/* --- WhatsApp butonu --- */
.wa-buton {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
  padding: .7rem 1.1rem .7rem .8rem;
  border-radius: 6px;
  background: var(--ah-green);
  color: #fff;
  transition: background-color .15s ease;
}

.wa-buton:hover,
.wa-buton:focus-visible { background: var(--ah-green-dark); color: #fff; text-decoration: none; }

.wa-buton__ikon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .18);
  flex: none;
}

.wa-buton__ikon .ico { width: 22px; height: 22px; fill: #fff; }

.wa-buton__yazi { display: flex; flex-direction: column; line-height: 1.25; }
.wa-buton__yazi strong { font-size: .9375rem; }
.wa-buton__yazi span { font-size: .8125rem; opacity: .9; }

/* --- Telif satırı: ortalı --- */
.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  text-align: center;
  font-size: .8125rem;
  color: #A9B0A2;
}

.site-footer__bottom p { margin: 0; }


/* ================================================================
   404 — SAYFA BULUNAMADI
   Kendi görsel dili yok: zemin, renkler ve butonlar sitenin
   geri kalanından geliyor. Tek yeni öğe büyük "404" rakamı.
   ================================================================ */
.hata {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: var(--ah-green-t15);
  overflow: hidden;
}

.hata__zemin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

.hata__ic {
  position: relative;
  text-align: center;
  max-width: 44rem;
  padding: 0 1rem;
}

.hata__kod {
  margin: 0;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  font-size: min(26vw, 11rem);
  color: var(--ah-brown);
  text-shadow: 0 1px 12px rgba(255, 255, 255, .7);
}

.hata__baslik {
  margin: .5rem 0 0;
  font-size: clamp(1.375rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--ah-brown-dark);
}

.hata__metin {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: #4A4A4A;
}

.hata__butonlar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
}

.buton {
  /* Sayfa içi birincil buton. 404 ve iç sayfalar aynı bileşeni kullanır. */
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.4rem;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid var(--ah-green);
  background: var(--ah-green);
  color: #fff;
  transition: background .2s ease, color .2s ease;
}

.buton:hover,
.buton:focus-visible {
  background: var(--ah-green-dark);
  border-color: var(--ah-green-dark);
  color: #fff;
}

.buton--kahve {
  background: var(--ah-brown);
  border-color: var(--ah-brown);
}

.buton--kahve:hover,
.buton--kahve:focus-visible {
  background: var(--ah-brown-dark);
  border-color: var(--ah-brown-dark);
}

.buton--ikincil {
  background: transparent;
  color: var(--ah-green-dark);
}

.buton--ikincil:hover,
.buton--ikincil:focus-visible {
  background: var(--ah-green);
  border-color: var(--ah-green);
  color: #fff;
}

/* Hızlı bağlantılar */
.hata__oneri {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--ah-green-t50);
}

.hata__oneri h2 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ah-brown);
}

.hata__oneri ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hata__oneri a {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ah-green-t50);
  font-size: .875rem;
  color: var(--ah-brown-dark);
  text-decoration: none;
}

.hata__oneri a:hover,
.hata__oneri a:focus-visible {
  background: var(--ah-green);
  border-color: var(--ah-green);
  color: #fff;
}


/* ================================================================
   İÇ SAYFA ORTAK PARÇALARI
   Buradan aşağısı tüm iç sayfalarda kullanılır: kapak bandı,
   kırıntı yolu (breadcrumb) ve metin bloğu. Ana sayfaya ait
   hiçbir kural değişmedi.
   ================================================================ */

/* --- Kapak bandı: görsel + sayfa başlığı --- */
.ic-kapak {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 34vw, 420px);
  overflow: hidden;
  background: var(--ah-green-t15);
}

.ic-kapak__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Başlık her fotoğrafta okunsun diye alttan üste koyulaşan perde.
   Düz siyah katman yerine degrade: fotoğrafın üst kısmı açık kalıyor. */
.ic-kapak::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(46, 42, 38, .15) 0%,
              rgba(46, 42, 38, .55) 60%,
              rgba(46, 42, 38, .78) 100%);
}

.ic-kapak__ic {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(2rem, 5vw, 3.5rem) 1rem;
  text-align: center;
  color: #fff;
}

.ic-kapak__baslik {
  margin: 0;
  font-size: clamp(1.875rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}

.ic-kapak__slogan {
  margin: .75rem 0 0;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1rem, 1.9vw, 1.375rem);
  color: #EDF2EA;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* --- Kırıntı yolu --- */
.kirinti {
  background: #fff;
  border-bottom: 1px solid var(--ah-border);
}

.kirinti ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .5rem;
  margin: 0;
  padding: .75rem 0;
  list-style: none;
  font-size: .875rem;
  color: var(--ah-muted);
}

.kirinti a { color: var(--ah-green-dark); text-decoration: none; }
.kirinti a:hover,
.kirinti a:focus-visible { text-decoration: underline; }

.kirinti li + li::before {
  content: "›";
  margin-right: .5rem;
  color: var(--ah-green-t50);
}

.kirinti [aria-current="page"] { color: var(--ah-text); font-weight: 600; }

/* --- İç sayfa metin bloğu --- */
.ic-bolum { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.ic-bolum--zemin { background: var(--ah-green-t15); }

.ic-metin {
  max-width: 62ch;
  margin: 0 auto;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--ah-text);
}

.ic-metin p { margin: 0 0 1.25rem; }
.ic-metin p:last-child { margin-bottom: 0; }
.ic-metin strong { font-weight: 700; }

/* ================================================================
   HAKKIMIZDA SAYFASI
   ================================================================ */

/* --- Künye şeridi: katalogda yazılı dört bilgi --- */
.hk-kunye {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767.98px) {
  .hk-kunye { grid-template-columns: repeat(2, 1fr); }
}

.hk-kunye li {
  text-align: center;
  padding: clamp(1rem, 2.5vw, 1.5rem) .75rem;
  border: 1px solid var(--ah-green-t50);
  border-radius: 8px;
  background: #fff;
}

.hk-kunye b {
  display: block;
  font-size: clamp(1.375rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ah-green-dark);
}

.hk-kunye span {
  display: block;
  margin-top: .4rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ah-muted);
}

/* --- "Neden ahşap?" maddeleri --- */
.hk-neden {
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 68rem;
  margin-inline: auto;
}

@media (max-width: 767.98px) { .hk-neden { columns: 1; } }

.hk-neden li {
  break-inside: avoid;
  display: flex;
  gap: .75rem;
  margin-bottom: 1.1rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ah-text);
}

.hk-neden .ico {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .22rem;
  fill: var(--ah-green);
  flex: none;
}

/* --- Alıntı: katalogun kapanış cümlesi --- */
.hk-alinti {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
  font-size: clamp(1.25rem, 2.8vw, 1.875rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.35;
  color: var(--ah-brown);
}

/* --- Tesis görselleri --- */
.hk-tesis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767.98px) { .hk-tesis { grid-template-columns: 1fr; } }

.hk-tesis figure {
  margin: 0;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ah-green-t50);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(46, 42, 38, .07);
}

.hk-tesis img {
  display: block;
  width: 100%;
  border-radius: 12px 12px 0 0;
  /* height:auto şart. HTML'deki width/height nitelikleri tarayıcıda
     sunum ipucu olarak height:576px'e dönüşüyor; auto demezsek
     aspect-ratio hiç devreye girmiyor ve kutular dikey uzuyor. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.hk-tesis figcaption {
  margin: 0;
  padding: .85rem 1rem 1.1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ah-muted);
  text-align: center;
}

/* --- Sayfa sonu yönlendirme --- */
.hk-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}


/* --- Kapak bandının açık varyantı: belge sayfaları --- */
/* Fotoğraf yerine ana sayfadaki suluboya zemin. Belge sayfasına
   alakasız bir fotoğraf koymak yerine site zemini kullanılıyor. */
.ic-kapak--acik::after { background: rgba(255, 255, 255, .25); }
.ic-kapak--acik .ic-kapak__gorsel { opacity: .55; }
.ic-kapak--acik .ic-kapak__baslik { color: var(--ah-brown); text-shadow: 0 1px 10px rgba(255,255,255,.7); }
.ic-kapak--acik .ic-kapak__slogan { color: var(--ah-brown-dark); text-shadow: 0 1px 8px rgba(255,255,255,.8); }

/* ================================================================
   BELGE SAYFALARI  (ISO belgeleri, marka tescil)
   ================================================================ */

.belge-liste {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 991.98px) { .belge-liste { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .belge-liste { grid-template-columns: 1fr; } }

.belge {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--ah-border);
  border-radius: 10px;
  overflow: hidden;
}

/* Görselin kendisi tıklanamaz (pointer-events:none) — sağ tık ve
   sürükleme butona denk gelir, "resmi farklı kaydet" çıkmaz.
   Bu bir engel değil caydırıcıdır; ekran görüntüsü her zaman mümkün. */
.belge__kutu {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--ah-border);
  background: var(--ah-green-t15);
  cursor: zoom-in;
  position: relative;
}

.belge__kutu img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.belge__kutu:focus-visible {
  outline: 3px solid var(--ah-green);
  outline-offset: -3px;
}

.belge__govde {
  padding: 1rem 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}

.belge__kod {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ah-green-dark);
}

.belge__ad {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ah-text);
}

.belge__tarih {
  margin: .4rem 0 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--ah-muted);
}

.belge__tarih b { font-weight: 600; color: var(--ah-text); }

/* --- Bilgi kutusu --- */
/* Bilgi notu: kutunun ölçüleri .kutu'dan gelir, burada yalnız tipografi */
.belge-not {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--ah-text);
}

.belge-not p { margin: 0 0 .75rem; }
.belge-not p:last-child { margin-bottom: 0; }
.belge-not a { color: var(--ah-green-dark); }

/* --- Büyütme penceresi --- */
.belge-modal .modal-content {
  background: #11150F;
  border: 0;
  border-radius: 10px;
}

.belge-modal .modal-body {
  padding: 0;
  display: grid;
  place-items: center;
}

.belge-modal img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.belge-modal__kapat {
  position: absolute;
  top: -.75rem;
  right: -.75rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ah-green);
  color: #fff;
}

.belge-modal__kapat svg { width: 16px; height: 16px; fill: currentColor; }
.belge-modal__kapat:hover { background: var(--ah-green-dark); }

.belge-modal__baslik {
  margin: 0;
  padding: .75rem 1rem;
  text-align: center;
  font-size: .9375rem;
  color: #D8DCD3;
}


/* ================================================================
   SAYFA ZEMİNİ — iç sayfalarda suluboya yıkaması
   Sabit katman: içerik kayarken zemin yerinde duruyor. Uzun
   sayfalarda görseli gerdirmiyor, mobilde background-attachment:fixed
   sorunlarına da girmiyor.
   ================================================================ */
.sayfa-zemin {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sayfa-zemin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

/* Zemin kullanan sayfanın gövdesi — görsel yüklenene kadar açık yeşil */
body.zeminli { background: var(--ah-green-t15); }

/* Zemin varken bölümler kendi arka planını koymaz */
body.zeminli .ic-bolum--zemin { background: transparent; }

/* Kapak bandı: zemin zaten sayfanın tamamında, bant saydam kalıyor */
/* Belge sayfalarında kapak bandı yok: başlık, kırıntı yolunun hemen
   altında sayfa zemininin üzerinde duruyor. Ayrı bir bant olmadığı için
   boş bir şerit izlenimi vermiyor. */
.ic-kapak--seffaf { background: transparent; min-height: 0; }
.ic-kapak--seffaf .ic-kapak__ic {
  padding: clamp(1.75rem, 4vw, 2.75rem) 1rem clamp(.25rem, 1vw, .5rem);
}
.ic-kapak--seffaf::after { display: none; }
.ic-kapak--seffaf .ic-kapak__baslik {
  color: var(--ah-brown);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .85);
}

/* Kırıntı yolu zeminin üzerinde okunsun */
body.zeminli .kirinti {
  background: rgba(255, 255, 255, .78);
  border-bottom-color: rgba(255, 255, 255, .9);
}

/* ================================================================
   KUTU — zemin üzerinde metin alanı
   Belge sayfasındaki bilgi kutusuyla aynı dil. Zemin üzerinde
   okunabilirliği sağlayan tek öğe bu; metin doğrudan zemine yazılmıyor.
   ================================================================ */
/* 1200 px üstünde kutu 1248 px'e çıkıyor; tek sütun düz metin satır
   başına ~160 karaktere ulaşıp okunmaz hâle geliyordu. Uzun metin
   bloklarını iki sütuna bölüyoruz — satır ~75 karakterde kalıyor,
   kutu da boş kalmıyor. Kısa bloklar (.ic-metin--tek) bölünmüyor. */
@media (min-width: 1200px) {
  /* Kutu artık tam genişlikte; metin 62ch'de kalırsa kutunun sağı boş
     görünüyor. Genişlik serbest, uzun bloklar iki sütuna ayrılıyor. */
  .kutu .ic-metin { max-width: none; }

  .kutu .ic-metin--sutunlu {
    columns: 2;
    column-gap: clamp(1.75rem, 3vw, 3rem);
    column-rule: 1px solid var(--ah-green-t15, rgba(96,140,81,.15));
  }
  .kutu .ic-metin--sutunlu > * { break-inside: avoid; }
  .kutu .ic-metin--sutunlu > *:first-child { margin-top: 0; }
}

.kutu {
  /* Sitedeki TÜM metin kutuları aynı genişlikte. Tek yer burası;
     sayfa başına ayrı genişlik tanımlanmıyor.
     Genişlik = sayfanın içerik sütunu (header logosu ↔ katalog
     butonları). Eskiden 66rem'di; sayfanın %85'i kalıyor, ızgaraların
     ve künye şeritlerinin yanında dar duruyordu. */
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--ah-green-t50);
  /* Sol kenardaki yeşil bant kutunun ayırt edici işareti */
  border-left: 4px solid var(--ah-green);
  border-radius: 12px;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: 0 2px 16px rgba(46, 42, 38, .07);
}

.kutu + /* 1200 px üstünde kutu 1248 px'e çıkıyor; tek sütun düz metin satır
   başına ~160 karaktere ulaşıp okunmaz hâle geliyordu. Uzun metin
   bloklarını iki sütuna bölüyoruz — satır ~75 karakterde kalıyor,
   kutu da boş kalmıyor. Kısa bloklar (.ic-metin--tek) bölünmüyor. */
@media (min-width: 1200px) {
  /* Kutu artık tam genişlikte; metin 62ch'de kalırsa kutunun sağı boş
     görünüyor. Genişlik serbest, uzun bloklar iki sütuna ayrılıyor. */
  .kutu .ic-metin { max-width: none; }

  .kutu .ic-metin--sutunlu {
    columns: 2;
    column-gap: clamp(1.75rem, 3vw, 3rem);
    column-rule: 1px solid var(--ah-green-t15, rgba(96,140,81,.15));
  }
  .kutu .ic-metin--sutunlu > * { break-inside: avoid; }
  .kutu .ic-metin--sutunlu > *:first-child { margin-top: 0; }
}

.kutu { margin-top: clamp(1.25rem, 3vw, 2rem); }

/* Kutu içindeki bölüm başlığı üstten boşluk almasın */
.kutu > .bolum-baslik:first-child { margin-top: 0; }


/* Zemin üzerinde duran bölüm başlıkları — hafif beyaz hale */
body.zeminli .bolum-baslik { text-shadow: 0 1px 10px rgba(255, 255, 255, .8); }
body.zeminli .kutu .bolum-baslik { text-shadow: none; }


/* --- Tek başına kalan belge: kart + açıklama yan yana --- */
.belge-tek {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

@media (max-width: 767.98px) {
  .belge-tek { grid-template-columns: 1fr; }
}

.belge-tek .belge { height: 100%; }

.belge-tek__metin p { margin: 0 0 1rem; }
.belge-tek__metin p:last-child { margin-bottom: 0; }

.belge-tek__kunye {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.8;
  color: var(--ah-muted);
}

.belge-tek__kunye b { font-weight: 600; color: var(--ah-text); }

/* Izgarada tek başına kalan son kart ortalansın —
   ileride tek sayılı listeler olursa diye güvenlik ağı. */
@media (min-width: 992px) {
  .belge-liste > .belge:last-child:nth-child(3n + 1) { grid-column: 2; }
}


/* ================================================================
   MARKA TESCİL — tescil kapsamı listesi
   ================================================================ */
.kapsam { margin: 0; }

.kapsam__sinif + .kapsam__sinif { margin-top: 1.75rem; }

.kapsam__no {
  display: inline-block;
  margin: 0 0 .5rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--ah-green);
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.kapsam__ad {
  margin: 0 0 .75rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ah-text);
}

.kapsam__one {
  display: flex;
  gap: .6rem;
  margin: 0;
  padding: .75rem .9rem;
  border-radius: 8px;
  background: var(--ah-green-t15);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ah-text);
}

.kapsam__one .ico {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .18rem;
  fill: var(--ah-green);
  flex: none;
}

.kapsam details {
  margin-top: 1.25rem;
  border-top: 1px solid var(--ah-border);
  padding-top: 1rem;
}

.kapsam summary {
  cursor: pointer;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ah-green-dark);
}

.kapsam summary:focus-visible { outline: 3px solid var(--ah-green); outline-offset: 3px; }

.kapsam details ul {
  margin: .9rem 0 0;
  padding-left: 1.2rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ah-muted);
}

.kapsam details li { margin-bottom: .5rem; }
.kapsam details li.one { color: var(--ah-text); font-weight: 600; }


/* ================================================================
   EMPRENYELİ AHŞAP SAYFASI
   Kaynak düzen: Genel Katalog s. 5. Katalogda sayfanın üst yarısı
   düz marka yeşili, alt yarısı suluboya zemin. Sitede de aynısı:
   yeşil BANT (tüm sayfa değil), altında sayfanın mevcut zemini.
   ================================================================ */

/* Yeşil bant. Alt kenarı şeffaflaşarak sayfanın suluboya zeminine
   eriyor — katalogdaki organik suluboya geçişinin karşılığı.
   Düz kesilmiş bir yeşil blok, sitenin geri kalanına yapışık durur. */
.yesil-bant {
  position: relative;
  padding: clamp(2rem, 5vw, 3.25rem) 0 clamp(5rem, 10vw, 9rem);
  background: linear-gradient(180deg,
              var(--ah-green) 0,
              var(--ah-green) calc(100% - clamp(70px, 10vw, 150px)),
              rgba(96, 140, 81, 0) 100%);
}

.yesil-bant__baslik {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  /* Beyaz / marka yeşili kontrastı 3.91:1 — büyük metin eşiği 3:1,
     bu yüzden başlık ve etiketler BÜYÜK punto kullanıyor. */
  font-size: clamp(1.625rem, 3.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.22;
  color: #fff;
  /* Katalogda başlığın sol kenarı ilk görselin sol kenarıyla hizalı. */
  text-align: left;
}

/* Üç emprenye çeşidi. Aralar boş bırakılıyor; zemin yeşil olduğu için
   resimlerin arası da arkası da yeşil görünüyor (müşteri isteği). */
.emp-renk {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767.98px) { .emp-renk { grid-template-columns: 1fr; } }

.emp-renk figure { margin: 0; }

.emp-renk img {
  display: block;
  width: 100%;
  height: auto;                 /* width/height nitelikleri aspect-ratio'yu ezmesin */
  /* Katalogdaki kutu oranı 1.43; müşterinin gönderdiği fotoğrafların kendi
     oranları 1.64 / 1.56 / 1.50. 3/2 en az kırpan ortak orandır
     (natürel hiç kırpılmıyor), üçü de aynı boyutta durur. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Katalogdaki gibi köşeler keskin, çerçeve yok. */
}

.emp-renk figcaption {
  margin-top: .85rem;
  /* 1.25rem + 700 = büyük metin sayılır, beyaz/yeşil kontrastı yeterli */
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  font-weight: 700;
  color: #fff;
  text-align: left;   /* katalogdaki gibi */
}

/* Alt bölüm: büyük görsel + açıklama, tek kutu içinde yan yana.
   Görselin zemini beyaz olduğu için kutunun beyazına siniyor. */
/* Görsel sola yaslanıp metin altından dolanıyor (katalogdaki dergi düzeni).
   Grid kullanılsaydı metin sütunu uzun, görsel sütunu kısa kalıp
   sol altta büyük bir boşluk oluşuyordu. */
.emp-detay { display: block; }
.emp-detay::after { content: ""; display: block; clear: both; }

.emp-detay picture {
  display: block;
  float: left;
  width: min(40%, 420px);
  margin: .35rem clamp(1.25rem, 2.5vw, 2rem) 1rem 0;
}

@media (max-width: 767.98px) {
  .emp-detay picture { float: none; width: 100%; margin: 0 0 1.25rem; }
}

.emp-detay img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.emp-detay__baslik {
  margin: 0 0 1.1rem;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ah-green-dark);
}

.emp-detay p { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.75; }
.emp-detay p:last-child { margin-bottom: 0; }
.emp-detay strong { color: var(--ah-text); }


/* ================================================================
   ÜRÜN GALERİSİ  (Uygulama ve Ürünlerimiz alt sayfaları)
   Eski sitedeki düzen: her satırda 3 fotoğraf, altında proje adı,
   m² ve ilçe/il. Müşteri isteği: son satır asla 1-2 fotoğrafla
   yarım kalmayacak. Bu yüzden sütun sayısı 3 veya 1 — hiç 2 değil,
   ve öğe sayısı 3'ün katına yer tutucuyla tamamlanıyor.
   ================================================================ */
.urun-galeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.9rem, 2vw, 1.75rem);
  /* Izgara sayfanın tam içerik genişliğini kullanıyor: soldan header
     logosunun başladığı yer, sağdan katalog butonlarının bittiği yer.
     Dar bırakılınca sayfa ortasında sıkışık duruyordu. */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 2 sütuna hiç düşmüyoruz: 3'ün katı olan öğe sayısı 2 sütunda
   yine yarım satır bırakır. 768 px altında tek sütun. */
@media (max-width: 767.98px) { .urun-galeri { grid-template-columns: 1fr; } }

.urun-galeri figure { margin: 0; }

.urun-kart {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(46, 42, 38, .10);
  transition: transform .18s ease, box-shadow .18s ease;
}

.urun-kart:hover,
.urun-kart:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(46, 42, 38, .18);
}

.urun-kart:focus-visible { outline: 3px solid var(--ah-green); outline-offset: 3px; }

.urun-kart img {
  display: block;
  width: 100%;
  height: auto;              /* width/height nitelikleri aspect-ratio'yu ezmesin */
  aspect-ratio: 4 / 3;       /* 14 kaynak fotoğrafın 8'i zaten 4:3 */
  object-fit: cover;
}

/* Katalogdaki ve eski sitedeki biçim: görselin altında, SAĞA yaslı,
   küçük puntolu ve italik. İki satıra taşan açıklama satır yüksekliğini
   bozmasın diye hepsi iki satırlık yer kaplıyor. */
.urun-galeri figcaption {
  min-height: 2.9em;
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.45;
  font-style: italic;
  font-weight: 400;
  color: var(--ah-muted);
  text-align: right;
}

/* Yer tutucu — ya projenin baskı kalitesinde fotoğrafı yok,
   ya da satırı tamamlamak için yeni bir proje bekleniyor. */
.urun-bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  border: 2px dashed var(--ah-green-t50);
  border-radius: 10px;
  background: rgba(255, 255, 255, .55);
  text-align: center;
}

.urun-bos svg { width: 34px; height: 34px; fill: var(--ah-green); opacity: .65; }

.urun-bos span {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ah-muted);
  max-width: 24ch;
}

/* Büyütme penceresi */
.galeri-modal .modal-content {
  background: #fff;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
}

.galeri-modal .modal-body {
  padding: 0;
  background: #2E2A26;
  display: flex;
  justify-content: center;
}

/* Fotoğraf + açıklama şeridi birlikte ekrana sığsın; aksi hâlde uzun
   fotoğraflarda alttaki açıklama ekranın dışında kalıyordu. */
.galeri-modal img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
}

.galeri-modal__baslik {
  margin: 0;
  padding: .85rem 1.1rem;
  font-size: .9375rem;
  font-weight: 600;
  text-align: center;
  color: var(--ah-text);
}

.galeri-modal__kapat,
.galeri-modal__ok {
  position: absolute;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(46, 42, 38, .62);
  color: #fff;
}

.galeri-modal__kapat { top: .6rem; right: .6rem; }
.galeri-modal__ok--onceki { top: 50%; left: .6rem; transform: translateY(-50%); }
.galeri-modal__ok--sonraki { top: 50%; right: .6rem; transform: translateY(-50%); }

.galeri-modal__kapat:hover,
.galeri-modal__ok:hover { background: var(--ah-green); }

.galeri-modal__kapat:focus-visible,
.galeri-modal__ok:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.galeri-modal svg { width: 16px; height: 16px; fill: currentColor; }


/* ================================================================
   ÜRÜN KATEGORİLERİ — "Uygulama ve Ürünlerimiz" üst sayfası
   14 kategori var; 3 sütunda son satır tek kart kalacağı için
   2 sütun kullanılıyor (14 = 7 tam satır). Kart da galeri
   karelerinden farklı olsun diye yatay: solda kapak, sağda ad.
   ================================================================ */
.kategori-liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.9rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 767.98px) { .kategori-liste { grid-template-columns: 1fr; } }

/* Giriş balonu doğrudan ızgaranın üstündeyse araya boşluk gerekiyor
   (ürünler üst sayfası). Taşınabilir evler üst sayfasında aralarında
   bölüm başlığı var, orada bu kural devreye girmiyor. */
.kutu + .kategori-liste { margin-top: clamp(1.5rem, 3.5vw, 2.5rem); }

.kategori-kart {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  align-items: stretch;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ah-green-t50);
  border-left: 4px solid var(--ah-green);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(46, 42, 38, .07);
  transition: transform .18s ease, box-shadow .18s ease;
}

.kategori-kart:hover,
.kategori-kart:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(46, 42, 38, .16);
}

.kategori-kart:focus-visible { outline: 3px solid var(--ah-green); outline-offset: 3px; }

.kategori-kart img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 118px;
  object-fit: cover;
}

.kategori-kart__ic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .3rem;
  padding: clamp(.8rem, 2vw, 1.15rem);
}

.kategori-kart__no {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ah-green);
}

.kategori-kart__ad {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ah-green-dark);
}

.kategori-kart__not {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ah-muted);
}

/* =====================================================================
   NOT (12.10.2026): Bu satırdan sonrası bir noktada dosyadan DÜŞMÜŞTÜ.
   main.css sonundan ~330 satır eksikti; tarayıcı dosyayı 334 kuralda
   bitiriyordu. Referanslar, İletişim ve 24 taşınabilir ev sayfası
   bu yüzden biçimsiz görünüyordu. Geri konuldu — dosyanın
   `.ref-duvar`, `.ilet-kartlar` ve `.ev-*` blokları ile BİTMESİ
   gerekir, son satır `@media (max-width: 479.98px)` bloğudur.
   ===================================================================== */


/* ================================================================
   TAŞINABİLİR AHŞAP EVLER — MODEL SAYFASI
   Katalogdaki model sayfasının web karşılığı. Üstte kapak fotoğrafı,
   altında künye (fotoğraf + teknik bilgiler), sonra kat planları.

   Plan çizimleri PNG olarak duruyor: WebP/JPEG kaybı ince çizgide
   halkalanma yapıyor, oda adları okunmaz hâle geliyor.
   ================================================================ */

/* --- Künye: solda fotoğraf, sağda teknik bilgiler --- */
.ev-ust {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

@media (max-width: 991.98px) { .ev-ust { grid-template-columns: 1fr; } }

.ev-ust figure { margin: 0; }

.ev-ust figcaption {
  margin-top: .5rem;
  font-size: .8125rem;
  line-height: 1.45;
  font-style: italic;
  color: var(--ah-muted);
  text-align: right;
}

/* Künye listesi — iki sütun etiket/değer */
.ev-kunye {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--ah-border);
}

@media (max-width: 479.98px) { .ev-kunye { grid-template-columns: 1fr; } }

.ev-kunye > div {
  padding: .7rem .1rem;
  border-bottom: 1px solid var(--ah-border);
}

.ev-kunye dt {
  margin: 0 0 .15rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ah-muted);
}

.ev-kunye dd {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ah-text);
}

/* --- Kat planları --- */
.ev-katlar {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Izgara öğesi varsayılan min-width:auto ile içeriği kadar genişler;
   plan çizimi dar ekranda kutudan taşıyordu. */
.ev-katlar > li { min-width: 0; }

.ev-kat__baslik {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  margin: 0 0 clamp(.9rem, 2vw, 1.25rem);
}

.ev-kat__ad {
  margin: 0;
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 700;
  color: var(--ah-brown);
}

.ev-kat__olcu { font-size: .875rem; color: var(--ah-muted); }

/* Plan çizimi ürün kartıyla aynı düğme, ama kırpılmıyor:
   çizimin kenarı kesilirse ölçü çizgileri gider.
   Föylerin bir kısmı yatık (10×4 m), bir kısmı dikine (4×8 m) çizilmiş;
   dikine olanlar tam genişlikte gösterilince metrelerce uzuyordu, bu
   yüzden yükseklikten sınırlanıyorlar. */
.ev-plan-kart { background: #fff; }

.ev-plan-kart img {
  width: auto;
  max-width: 100%;
  max-height: min(78vh, 880px);
  margin-inline: auto;
  aspect-ratio: auto;
  object-fit: contain;
  background: #fff;
}

/* Oda listesi — plan üstündeki adların okunur dökümü */
.ev-odalar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .6rem;
  margin: clamp(.9rem, 2vw, 1.25rem) 0 0;
  padding: 0;
  list-style: none;
}

.ev-odalar li {
  padding: .35rem .75rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ah-text);
  background: var(--ah-green-t15);
  border: 1px solid var(--ah-green-t50);
  border-radius: 999px;
}

.ev-odalar b { font-weight: 700; }

/* Plan çizimi geniş (≈2,5:1). Telefonda sayfa genişliğine sığdırılınca
   oda adları okunmaz hâle geliyordu; dar ekranda çizim kendi içinde
   yatay kayıyor ve okunur bir asgari genişlikte duruyor.
   Sayfanın kendisi taşmıyor — kaydırma yalnızca bu kutuda. */
.ev-plan-sar { max-width: 100%; }

@media (max-width: 767.98px) {
  .ev-plan-sar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }
  /* Yalnızca yatık planlar kaydırılıyor; dikine planlar zaten
     telefon ekranına oranlı duruyor. */
  .ev-plan-sar .ev-plan-kart--genis { min-width: 560px; }
}

.ev-plan-ipucu {
  display: none;
  margin: .5rem 0 0;
  font-size: .75rem;
  font-style: italic;
  color: var(--ah-muted);
}

@media (max-width: 767.98px) { .ev-plan-ipucu { display: block; } }


/* Uygulama fotoğrafı olmayan model sayfasında kapak bandı — başka bir
   modelin fotoğrafını koymak ziyaretçiyi yanıltır, bant düz yeşil kalıyor. */
.ic-kapak--fotosuz {
  min-height: clamp(150px, 20vw, 260px);
  background: linear-gradient(180deg, var(--ah-green) 0%, var(--ah-green-dark) 100%);
}

.ic-kapak--fotosuz::after { content: none; }

/* Künye fotoğrafı yoksa yer tutucu kartı sütunu boş bırakmıyor */
.ev-ust .urun-bos { aspect-ratio: 4 / 3; }


/* ================================================================
   REFERANSLAR SAYFASI — logo duvarı
   Anasayfadaki akan şeridin aksine burada hepsi bir arada duruyor.
   Izgara değil esnek kutu: 25 logo hiçbir sütun sayısına tam
   bölünmüyor, ızgarada son satır sola yapışıp kırık duruyordu.
   Satırlar ortalandığı için eksik son satır kasıtlı görünüyor.
   ================================================================ */
.ref-duvar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ref-duvar > li { flex: 0 1 clamp(140px, 18vw, 210px); }

.ref-kart {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(.9rem, 2vw, 1.25rem);
  background: #fff;
  border: 1px solid var(--ah-green-t30);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(46, 42, 38, .06);
}

/* Logolar farklı oranlarda; hepsi aynı yükseklikte bir alanın içine
   oturuyor ve kırpılmıyor — kurum logosu kırpılmaz.
   Sınır yüzdeyle değil mutlak değerle veriliyor: kutunun yüksekliği
   içeriğe göre hesaplandığı için max-height:100% kendi kendine
   dayanıyor ve uzun logolar kutudan taşıyordu. */
.ref-kart__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(66px, 9vw, 96px);
  margin-bottom: .75rem;
}

.ref-kart__logo img {
  max-width: 100%;
  max-height: clamp(66px, 9vw, 96px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.ref-kart__bos {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  width: 100%;
  height: clamp(66px, 9vw, 96px);
  border: 2px dashed var(--ah-green-t50);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
}

.ref-kart__bos svg { width: 24px; height: 24px; fill: var(--ah-green); opacity: .65; }
.ref-kart__bos em { font-size: .6875rem; font-style: normal; color: var(--ah-muted); }

.ref-kart__ad {
  margin: auto 0 0;
  font-size: .8125rem;
  line-height: 1.35;
  text-align: center;
  color: var(--ah-text);
}


/* ================================================================
   İLETİŞİM SAYFASI — kanal kartları
   ================================================================ */
.ilet-kartlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ilet-kart {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--ah-green-t50);
  border-left: 4px solid var(--ah-green);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(46, 42, 38, .07);
}

.ilet-kart__ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ah-green-t15);
}

.ilet-kart__ico svg { width: 22px; height: 22px; fill: var(--ah-green); }

.ilet-kart__baslik {
  margin: .25rem 0 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ah-brown);
}

.ilet-kart__govde {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
  font-style: normal;          /* <address> italiğini kapat */
  color: var(--ah-text);
}

.ilet-kart__govde a { color: var(--ah-text); text-decoration: none; }
.ilet-kart__govde a:hover,
.ilet-kart__govde a:focus-visible { color: var(--ah-green); text-decoration: underline; }

.ilet-kart__not { font-size: .75rem; color: var(--ah-muted); }

.ilet-kart__bag {
  align-self: flex-start;
  margin-top: auto;
  padding-top: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ah-green);
  text-decoration: none;
}

.ilet-kart__bag:hover,
.ilet-kart__bag:focus-visible { color: var(--ah-green-dark); text-decoration: underline; }

/* Model kartında fotoğraf yoksa görsel sütunu boş kalmasın */
.kategori-kart__bos {
  display: grid;
  place-items: center;
  min-height: 118px;
  height: 100%;
  background: var(--ah-green-t15);
  border-right: 1px dashed var(--ah-green-t50);
}

.kategori-kart__bos svg { width: 30px; height: 30px; fill: var(--ah-green); opacity: .55; }