/* ==========================================================================
   ARTE — SAYFAYA ÖZEL BÖLÜMLER
   Ana sayfanın kendine has bölümleri burada. Her bölüm kendi başlığı altında.
   ========================================================================== */

/* --- HERO ----------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  /* Fotoğraf alanı metinden geniş: 20 Ağu'da 50/50 idi, kullanıcı
     fotoğrafın daha büyük görünmesini istedi. 1000px altında bu kural
     geçersiz — orada tek sütuna dönüyor. */
  grid-template-columns: 1fr 1.28fr;
  min-height: 660px;
  background: var(--renk-panel);
  overflow: hidden;
}

.hero-metin {
  padding: 88px var(--kenar) 72px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 26px;
  animation: arteYuksel .7s ease both;
}
.hero-metin h1 { max-width: 15ch; }
.hero-vurgu {
  font: 600 26px/1.3 var(--yazi-baslik);
  letter-spacing: -.015em;
  max-width: 24ch;
}
.hero-metin .giris-metni { max-width: 46ch; }

.hero-sayilar {
  display: flex; gap: 36px; flex-wrap: wrap;
  padding-top: var(--bo-7);
  margin-top: var(--bo-3);
  border-top: 1px solid rgba(20, 22, 26, .12);
}
.hero-sayilar div { display: flex; flex-direction: column; gap: 4px; }
.hero-sayilar b { font: 700 26px/1 var(--yazi-baslik); }
.hero-sayilar span { font: 400 12px/1.4 var(--yazi-govde); color: var(--renk-metin-3); }

.hero-gorsel { position: relative; min-height: 660px; overflow: hidden; }
.hero-gorsel .gorsel-yer { position: absolute; inset: 0; border-radius: 0; padding: var(--bo-7); }

/* --- Hero slaytları -------------------------------------------------------
   Slaytlar yan yana dizilir, şerit sağa-sola kayar. Parmakla ve fareyle
   sürüklenebilir; sürüklerken şerit parmağı birebir takip eder, bırakınca
   en yakın slayta oturur. */

.hero-ray {
  position: absolute; inset: 0;
  display: flex;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
  cursor: grab;

  /* Dikey kaydırma sayfaya ait kalsın, yatay hareketi biz yönetelim */
  touch-action: pan-y;

  /* Sürüklerken metin/görsel seçilmesin */
  user-select: none;
  -webkit-user-select: none;
}

/* Parmak/fare basılıyken: animasyon kapalı, şerit anlık takip eder */
.hero-ray.suruklerken {
  transition: none;
  cursor: grabbing;
}

.hero-slayt {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
}

.hero-slayt picture,
.hero-slayt img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* alanı doldur, oranı bozma */
  object-position: center;
  pointer-events: none;       /* sürükleme sırasında görsel "yakalanmasın" */
}

.hero-slayt .gorsel-yer { pointer-events: none; }

/* Kutu tıklanabilir kalsın */
.hero-slayt .hero-kutu { pointer-events: auto; }

/* Görselin üstündeki beyaz bilgi kutusu */
.hero-kutu {
  position: absolute; right: 40px; bottom: 78px;
  width: 326px;
  /* Hafif saydam: altındaki fotoğraf sezilsin ama yazı okunur kalsın
     (20 Ağu, kullanıcı isteği). Bulanıklık arkadaki deseni yumuşatıyor —
     desteklemeyen tarayıcıda düz %86 beyaz kalır, yine okunur. */
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
          backdrop-filter: blur(14px) saturate(1.15);
  padding: var(--bo-7);
  border-radius: var(--yari-3);
  box-shadow: var(--golge-hero);
}
.hero-kutu p { margin-top: var(--bo-3); font: 600 16px/1.45 var(--yazi-baslik); }

.hero-noktalar { position: absolute; right: 40px; bottom: 36px; display: flex; gap: var(--bo-2); z-index: 2; }
.hero-noktalar button {
  width: 26px; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .5);
  transition: background var(--gecis);
  /* Dokunma hedefi görünenden büyük olsun (mobilde parmakla basılabilsin) */
  position: relative;
}
.hero-noktalar button::before {
  content: ""; position: absolute; inset: -18px -6px;
}
.hero-noktalar button:hover { background: rgba(255, 255, 255, .8); }
.hero-noktalar button[aria-current="true"] { background: var(--renk-turuncu); }

/* Slaytın tamamını kaplayan bağlantı — yalnızca panelde hedef verilmişse
   basılır. Etiket kutusunun da üstünde: oradaki yazıyı okuyup tıklayan
   ziyaretçi aynı yere gitsin. Noktalar ve sayaç (z-index: 2) üstte kalır. */
.hero-bag { position: absolute; inset: 0; z-index: 1; display: block; }
.hero-slayt:has(.hero-bag) { cursor: pointer; }
.hero-bag:focus-visible { outline: 3px solid var(--renk-turuncu); outline-offset: -6px; }

/* Kaç fotoğraf var, hangisindeyiz — mobilde noktaların yerini tutar.
   Masaüstünde gizli, orada noktalar zaten gösteriyor. */
.hero-sayac { display: none; }

/* Dar masaüstünde fotoğrafı bu kadar büyütmek metni sıkıştırıyor:
   1180px'te başlık iki satırdan üçe çıkıyordu (20 Ağu ölçümü). */
@media (max-width: 1260px) {
  .hero { grid-template-columns: 1fr 1.1fr; }
}

/* 1120px altında eski 50/50 oranına dön: metin daha da daralırsa başlık
   üç satıra taşıyor. Burası zaten tek sütuna geçmeye yakın. */
@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1000px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-metin { padding: var(--bo-9) var(--kenar); order: 2; }
  .hero-gorsel { min-height: 280px; order: 1; }
  .hero-kutu, .hero-noktalar { display: none; }

  .hero-sayac {
    display: inline-block;
    position: absolute; right: 14px; bottom: 14px; z-index: 2;
    padding: 6px 11px;
    background: rgba(14, 16, 19, .62);
    backdrop-filter: blur(4px);
    border-radius: 20px;
    font: 500 12px/1 var(--yazi-mono);
    color: rgba(255, 255, 255, .82);
    letter-spacing: .04em;
    pointer-events: none;          /* sürüklemeyi engellemesin */
  }
  .hero-sayac b { color: #fff; font-weight: 700; }
}


/* --- KOYU CTA ŞERİDİ ------------------------------------------------------ */

.cta-serit {
  background: var(--renk-koyu);
  color: var(--acik-metin);
  padding-block: 52px;
}
.cta-serit .kapsa {
  display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.cta-serit b { font: 700 var(--p-h2-kucuk)/1.15 var(--yazi-baslik); letter-spacing: -.015em; display: block; }
.cta-serit p { font: 400 var(--p-govde-2)/1.6 var(--yazi-govde); color: var(--acik-metin-60); margin-top: var(--bo-2); }

@media (max-width: 900px) {
  .cta-serit .kapsa { grid-template-columns: 1fr; gap: var(--bo-7); }
  .cta-serit .satir .dugme { flex: 1; }
}


/* --- MEKÂN PLANI ÇİZİCİ BANDI --------------------------------------------- */

/* Zemin kenardan kenara; içerik .kapsa hizasında kalır.
   Böylece geniş ekranda bant içeriği diğer bölümlerle aynı çizgide durur. */
.plan-bant {
  background: var(--renk-panel);
  border-block: 1px solid var(--cizgi-8);
  transition: background var(--gecis);
}
.plan-bant:hover { background: var(--renk-panel-2); }

.plan-bandi {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--bo-10);
  align-items: center;
  padding-block: var(--bo-10);   /* sol/sağ boşluk .kapsa'dan gelir */
}
.plan-bandi h2 { max-width: 24ch; }
.plan-bandi p { max-width: 56ch; font: 400 16px/1.75 var(--yazi-govde); color: var(--renk-metin-2); }

.plan-ozellik { display: flex; gap: var(--bo-7); flex-wrap: wrap; font: 500 var(--p-mini)/1 var(--yazi-govde); }
.plan-ozellik i { font-style: normal; color: var(--renk-silik); }

/* Izgara gözleri içeriğinden küçülebilsin.
   TUZAK: min-width olmazsa göz, içindeki en geniş öğe kadar (burada 380px'lik
   plan çizimi) şişer ve mobilde sayfayı yatayda taşırır. */
.plan-bandi > * { min-width: 0; }

/* ==========================================================================
   PLAN ÖNİZLEMESİ — planlayıcının canlandırması
   Modüller sırayla yerleşir, bir süre durur, silinir ve döngü baştan başlar.
   Tamamen CSS; ayrı görsel yok. Ölçüler gerçek ekrandan alınmıştır.
   ========================================================================== */

.plan-onizleme {
  display: flex; align-items: center; justify-content: center;
  padding: 26px 34px;
  min-width: 0;
}

.plan-cerceve {
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 337 / 220;      /* gerçek plandaki oran */
  --duvar-kalinlik: 7.5%;
}

.plan-duvar { position: absolute; inset: 0; background: var(--renk-duvar); border-radius: var(--yari-1); }
.plan-ic    { position: absolute; inset: var(--duvar-kalinlik); background: var(--renk-beyaz); }

/* --- Duvar ölçüleri ------------------------------------------------------- */
.plan-olcu {
  position: absolute;
  font: 600 9px/1 var(--yazi-mono);
  color: var(--renk-metin-2);
  white-space: nowrap;
}
.plan-olcu-ust { left: 50%; top: -18px; transform: translateX(-50%); }
.plan-olcu-sag { right: -30px; top: 50%; transform: translateY(-50%) rotate(90deg); }

/* --- Seçili duvar --------------------------------------------------------- */
.plan-secili-duvar {
  position: absolute;
  left: var(--duvar-kalinlik); right: var(--duvar-kalinlik); top: 0;
  height: var(--duvar-kalinlik);
  background: var(--renk-turuncu);
  display: flex; align-items: center; justify-content: center;
  animation: planDuvarSec 14s ease-in-out infinite;
}
.plan-secili-duvar b {
  font: 700 6px/1 var(--yazi-baslik);
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .92);
}

/* --- "ÖN KESİT GÖR" etiketleri -------------------------------------------- */
.plan-kesit {
  position: absolute;
  font: 700 6px/1 var(--yazi-baslik);
  letter-spacing: .08em;
  color: var(--renk-koyu);
  background: #fff;
  border: 1px solid var(--cizgi);
  padding: 4px 6px;
  border-radius: var(--yari-2);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(20, 22, 26, .1);
  opacity: 0;
  animation: planKesit 14s ease-in-out infinite;
}
.plan-kesit.turuncu { background: var(--renk-turuncu); color: #fff; border-color: var(--renk-turuncu); }

.k-ust { left: 16%;  top: -12px; }
.k-sag { right: -46px; top: 30%; }
.k-sol { left: -52px; bottom: 32%; }
.k-alt { left: 42%;  bottom: -13px; }   /* kapı adıyla çakışmasın diye ortada */

/* --- Duvar numaraları ----------------------------------------------------- */
.plan-no {
  position: absolute;
  width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
  font: 500 7px/1 var(--yazi-mono);
  color: var(--renk-metin-2);
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-2);
}
.n-sol { left: 1.5%; top: 46%; }
.n-sag { right: 1.5%; top: 46%; }

/* --- Modüller ------------------------------------------------------------- */
.plan-modul {
  position: absolute;
  background: #EFEAE1;
  border: 1px solid rgba(20, 22, 26, .25);
  border-radius: 1px;
  opacity: 0;
  transform: scale(.82);
  animation: planModul 14s ease-in-out infinite;
  /* Her modül sırasına göre gecikmeli girer: 0s, 0.55s, 1.1s … */
  animation-delay: calc(var(--sira) * .55s);
}

/* Modül adı — modülün üstünde duran beyaz etiket */
.plan-modul .ad {
  position: absolute; left: 50%; top: -9px;
  transform: translateX(-50%);
  font: 500 6.5px/1 var(--yazi-govde);
  color: var(--renk-koyu);
  background: #fff;
  border: 1px solid var(--cizgi);
  padding: 3px 5px;
  border-radius: var(--yari-2);
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(20, 22, 26, .09);
  z-index: 2;
}

/* Döndür ve sil düğmeleri — modülün üst köşelerinde */
.plan-modul .dondur,
.plan-modul .sil {
  position: absolute; top: -7px;
  width: 13px; height: 13px;
  display: flex; align-items: center; justify-content: center;
  font: 400 7px/1 var(--yazi-govde);
  font-style: normal;
  color: #fff;
  border-radius: 50%;
  z-index: 3;
}
.plan-modul .dondur { left: -7px;  background: var(--renk-turuncu); }
.plan-modul .sil    { right: -7px; background: var(--renk-koyu); }

/* Ölçü yazısı — modülün altında */
.plan-modul .olcu {
  position: absolute; left: 0; bottom: -11px;
  font: 400 6px/1 var(--yazi-mono);
  font-style: normal;
  text-decoration: none;
  color: var(--renk-metin-3);
  white-space: nowrap;
}

/* Konumlar ve dolgular — gerçek plandaki yerleşim */
.m-camasir  { left: 9%;  top: 7.5%;  width: 17%; height: 30%; }
.m-camasir::after {
  content: ""; position: absolute; inset: 22% 18%;
  background: #fff; border: 1px solid rgba(20,22,26,.18);
}

.m-ayna     { left: 30%; top: 7.5%;  width: 23%; height: 22%; background: #DED2BE; }

.m-pencere  { left: 73%; top: 0;     width: 19%; height: 7.5%;
              background: #CBDDE6; border-color: rgba(20,22,26,.32); }
.m-pencere .ad { top: -11px; }
.m-pencere .olcu { bottom: -10px; left: auto; right: 0; }

.m-klozet   { right: 9%; top: 30%;   width: 13%; height: 21%;
              background: #fff; border-radius: 40% 4px 4px 40%; }
.m-klozet::after {
  content: ""; position: absolute; inset: 18% 14% 18% 30%;
  background: #F4F2EE; border: 1px solid rgba(20,22,26,.14); border-radius: 30% 2px 2px 30%;
}
/* Ad etiketi sola açılır — sağ köşedeki sil düğmesinin altında kalmasın */
.m-klozet .ad { top: 22%; left: auto; right: calc(100% + 8px); transform: none; }

.m-dus      { right: 9%; bottom: 7.5%; width: 25%; height: 37%;
              background:
                radial-gradient(rgba(20,22,26,.16) .8px, transparent .9px) 0 0 / 9px 9px,
                #E9EBEE; }
.m-dus .ad { top: auto; bottom: 22%; left: auto; right: -8px; transform: none; }

.m-havluluk { left: 41%; bottom: 7.5%; width: 15%; height: 3.5%;
              background: repeating-linear-gradient(90deg, #C9C2B6 0 1.5px, #fff 1.5px 4px);
              border-color: rgba(20,22,26,.2); }
.m-havluluk .ad { top: -10px; bottom: auto; }
.m-havluluk .olcu { bottom: auto; top: -19px; left: -30%; }

.m-kapi     { left: 9%;  bottom: 0;   width: 21%; height: 7.5%;
              background: #F6F3EE; border-color: rgba(20,22,26,.25); }
.m-kapi .ad { top: auto; bottom: -12px; }
.m-kapi .olcu { bottom: auto; top: -10px; }

/* Kapının açılış yayı — kapı genişliği yarıçapında çeyrek daire, içeri açılır */
.kapi-yay {
  position: absolute;
  left: 0; bottom: 100%;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(20, 22, 26, .28);
  border-top: 0; border-right: 0;
  border-bottom-left-radius: 100%;
  opacity: .5;
  pointer-events: none;
}

/* --- Seçili modülün duvara uzaklığı — kesikli turuncu ölçü ---------------- */
.plan-uzaklik {
  position: absolute;
  opacity: 0;
  animation: planUzaklik 14s ease-in-out infinite;
}
.plan-uzaklik b {
  position: absolute;
  font: 600 7px/1 var(--yazi-mono);
  color: var(--renk-turuncu);
  background: #fff;
  padding: 1px 3px;
  white-space: nowrap;
}
.u-dikey { left: 41.5%; top: 7.5%; bottom: 45%; border-left: 1px dashed var(--renk-turuncu); }
.u-dikey b { left: 4px; top: 45%; }

.u-yatay { left: 9%; right: 41.5%; bottom: 26%; border-bottom: 1px dashed var(--renk-turuncu); }
.u-yatay b { right: 8px; bottom: 3px; }

/* --- Zamanlama ------------------------------------------------------------
   0–5s   modüller sırayla yerleşir
   5–9s   plan tamamlanmış hâlde durur
   9–11s  modüller sırayla silinir
   11–14s boş plan, döngü yeniden başlar                                     */

@keyframes planModul {
   0%   { opacity: 0; transform: scale(.82); }
   4%   { opacity: 1; transform: scale(1.06); }
   7%   { opacity: 1; transform: scale(1); }
  60%   { opacity: 1; transform: scale(1); }
  66%   { opacity: 0; transform: scale(.9) translateY(-4px); }
 100%   { opacity: 0; transform: scale(.82); }
}

@keyframes planDuvarSec {
   0%, 22% { opacity: 0; }
  28%, 58% { opacity: 1; }
  64%,100% { opacity: 0; }
}

@keyframes planKesit {
   0%, 18% { opacity: 0; }
  24%, 60% { opacity: 1; }
  66%,100% { opacity: 0; }
}

@keyframes planUzaklik {
   0%, 30% { opacity: 0; }
  36%, 56% { opacity: 1; }
  62%,100% { opacity: 0; }
}

/* Hareket azaltma tercihi: canlandırma durur, plan dolu hâliyle kalır */
@media (prefers-reduced-motion: reduce) {
  .plan-modul, .plan-secili-duvar, .plan-kesit, .plan-uzaklik {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .plan-modul .ad { transform: translateX(-50%); }
}

/* Dar ekranda plan küçülür; kenardaki etiketler taşmasın diye gizlenir */
@media (max-width: 900px) {
  .plan-olcu-sag,
  .k-sag, .k-sol { display: none; }
  .plan-modul .olcu { display: none; }
}

@media (max-width: 900px) {
  .plan-bandi { grid-template-columns: 1fr; gap: var(--bo-7); padding-block: var(--bolum-y); }
  .plan-onizleme { padding: 0; }
}


/* --- 3D TASARIM ----------------------------------------------------------- */

.ucb .bolum-basi { margin-bottom: var(--bo-9); }

.ucb-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-bottom: var(--bo-9);
}

/* TUZAK: display:grid, hidden özniteliğinin gizleme görevini eziyor.
   Bu satır olmazsa seçili olmayan karşılaştırmalar da ekranda kalır. */
.ucb-ikili[hidden] { display: none; }

.ucb-kutu {
  position: relative;
  height: 440px;
  margin: 0;
  border-radius: var(--yari-3);
  overflow: hidden;
}
.ucb-kutu > .gorsel-yer,
.ucb-kutu picture,
.ucb-kutu img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  object-fit: cover;
}

.ucb-rozet {
  position: absolute; left: 20px; top: 20px;
  font: 700 var(--p-etiket)/1 var(--yazi-baslik);
  letter-spacing: .18em;
  padding: 10px 14px;
  border-radius: var(--yari-3);
  z-index: 1;
}
.ucb-rozet.turuncu-rozet { background: var(--renk-turuncu);        color: var(--renk-koyu); }
.ucb-rozet.beyaz-rozet   { background: rgba(255, 255, 255, .9);    color: var(--renk-koyu); }

.ucb-alt { display: flex; gap: var(--bo-4); align-items: center; flex-wrap: wrap; }
.ucb-sekmeler { display: flex; gap: var(--bo-4); flex-wrap: wrap; }
.ucb-alt > a:last-child { margin-left: auto; }

/* Seçili sekme dolu görünsün */
.ucb-sekmeler .dugme-acik.secili {
  background: var(--acik-metin);
  color: var(--renk-koyu);
  border-color: var(--acik-metin);
}

@media (max-width: 900px) {
  .ucb-ikili { grid-template-columns: 1fr; gap: var(--bo-2); }
  .ucb-kutu { height: 240px; }
  .ucb-alt > a:last-child { margin-left: 0; width: 100%; }
}


/* --- SÜREÇ ---------------------------------------------------------------- */

.surec-liste { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bo-4); }
@media (max-width: 900px) { .surec-liste { grid-template-columns: 1fr; } }


/* --- PROJE ŞERİDİ ---------------------------------------------------------
   NOT: Buradaki şerit bilerek kenar boşluğunu taşırmıyor.
   Negatif dış boşluk + iç boşluk numarası (kenardan kenara kaydırma görüntüsü)
   yapışma (scroll-snap) noktalarını kenar boşluğu kadar kaydırıyordu; şerit
   başa dönemiyor, "geri" oku hiç sönmüyordu. Gerekirse ayrı çözülecek.       */


/* --- HİZMET LİSTESİ ------------------------------------------------------- */

.hizmet-liste { border-top: 1px solid var(--cizgi-8); }


/* --- MOBİLYA ATÖLYESİ ----------------------------------------------------- */

.atolye-ic {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--bo-10);
  align-items: center;
}
.atolye-metin { display: flex; flex-direction: column; gap: var(--bo-6); align-items: flex-start; }

.atolye-liste { width: 100%; border-top: 1px solid rgba(20, 22, 26, .12); }
.atolye-liste li {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-5);
  padding: 16px 0;
  border-bottom: 1px solid rgba(20, 22, 26, .12);
}
.atolye-liste .ad    { font: 600 var(--p-govde-2)/1.3 var(--yazi-baslik); }
.atolye-liste .detay { font: 400 var(--p-mini)/1.3 var(--yazi-govde); color: var(--renk-metin-4); text-align: right; }

.atolye-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: var(--bo-4);
}
.atolye-goz { position: relative; border-radius: var(--yari-3); overflow: hidden; }
.atolye-goz.genis { grid-column: span 2; }
.atolye-goz > .gorsel-yer,
.atolye-goz picture,
.atolye-goz img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}

@media (max-width: 900px) {
  .atolye-ic { grid-template-columns: 1fr; gap: var(--bo-8); }
  .atolye-izgara { grid-auto-rows: 150px; gap: var(--bo-2); }
}


/* --- HİZMET LİSTESİ ------------------------------------------------------- */

.hizmet-izgara { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
.hizmet-sutun li a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-4);
  padding: 20px 0;
  border-bottom: 1px solid rgba(20, 22, 26, .14);
  transition: color var(--gecis);
}
.hizmet-sutun li a span { font: 600 19px/1.2 var(--yazi-baslik); }
.hizmet-sutun li a i    { font: 500 12px/1 var(--yazi-mono); font-style: normal; color: var(--renk-turuncu); }
.hizmet-sutun li a:hover span { color: var(--renk-turuncu); }
.hizmet-sutun li a:hover i    { transform: translateX(3px); }
.hizmet-sutun li a i { transition: transform var(--gecis); }

@media (max-width: 900px) {
  .hizmet-izgara { grid-template-columns: 1fr; }
  .hizmet-sutun li a span { font-size: 17px; }
}


/* --- MALZEME IZGARASI ----------------------------------------------------- */

.malzeme-izgara { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--bo-5); }

.malzeme-kutu { display: flex; flex-direction: column; gap: var(--bo-4); }
.malzeme-gorsel {
  position: relative; display: block;
  height: 220px;
  border-radius: var(--yari-3);
  overflow: hidden;
}
.malzeme-gorsel > .gorsel-yer,
.malzeme-gorsel picture,
.malzeme-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
  transition: transform .5s ease;
}
.malzeme-kutu:hover .malzeme-gorsel img { transform: scale(1.04); }
.malzeme-ad { font: 600 16px/1.2 var(--yazi-baslik); }
.malzeme-kutu:hover .malzeme-ad { color: var(--renk-turuncu); }

/* --- KAPI KARTI ------------------------------------------------------------
   Kapı fotoğrafı kırpılmaz (contain): model ve kasa detayı görünmeli.
   Zemin rengi yok, yalnızca ince çerçeve. Büyüme efekti yok.

   KUTU ORANI NEDEN KARE:
   Fotoğrafların bir kısmında iki kapı yan yana (oran ~1.05), bir kısmında
   tek kapı (~0.51). Dikey kutuda kare fotoğraflar üstte-altta büyük boşluk
   bırakıyordu. Kare kutu ikisini de dengeliyor: çoğunluk tam doluyor,
   tek kapılılar yalnızca yanlardan boşluk veriyor.                         */
.malzeme-gorsel.kisa,
.galeri.kapi .galeri-goz {
  background: none;
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  aspect-ratio: 1;
  height: auto;
}

.malzeme-gorsel.kisa picture,
.malzeme-gorsel.kisa img,
.galeri.kapi .galeri-goz picture,
.galeri.kapi .galeri-goz img {
  object-fit: contain;
  padding: var(--bo-2);
  transition: none;
}
.malzeme-kutu:hover .malzeme-gorsel.kisa img,
.galeri.kapi .galeri-goz:hover img { transform: none; }

.galeri.kapi .galeri-goz:hover { border-color: var(--cizgi-20); }

.malzeme-basi {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--bo-5);
  flex-wrap: wrap;
}

/* Seramik / tezgâh koleksiyon kartları */
/* Sınıf adı "ikili" ama artık üç kart var (25 Ağu: seramik · vitrifiye ·
   armatür). Ad korundu — başka yerlerde seçici olarak kullanılıyor. */
.koleksiyon-ikili {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: rgba(20, 22, 26, .12);
}
/* İçi boş koleksiyonun kartı basılmadığı için kart sayısı değişebiliyor;
   ızgara ona göre daralır, kartlar gereksiz genişlemez.
   Dört kartta üçlü sıra çirkin bir "3 + 1" bırakıyor — o yüzden ikişerli
   iki sıra (27 Ağu, parke koleksiyonu eklenince). */
.koleksiyon-ikili.adet-1 { grid-template-columns: minmax(0, 460px); }
.koleksiyon-ikili.adet-2 { grid-template-columns: repeat(2, 1fr); }
.koleksiyon-ikili.adet-4 { grid-template-columns: repeat(2, 1fr); }
.koleksiyon-kart {
  background: var(--renk-panel);
  padding: 38px 40px;
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-7);
  border-radius: var(--yari-3);
}
/* Partner marka bağlantıları — katalog kartının içinde */
.katalog-partner {
  list-style: none; margin: var(--bo-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--bo-2) var(--bo-5);
}
.katalog-partner a {
  font: 600 var(--p-mini)/1.4 var(--yazi-govde);
  color: var(--renk-turuncu-koyu);
}
.katalog-partner a:hover { text-decoration: underline; }
.katalog-eylem { flex: none; }

.koleksiyon-kart p {
  max-width: 34ch;
  margin-top: var(--bo-2);
  font: 400 var(--p-kucuk)/1.65 var(--yazi-govde);
  color: var(--renk-metin-2);
}
.koleksiyon-dugme { background: var(--renk-koyu); color: var(--acik-metin); flex: none; font-weight: 700; }
.koleksiyon-dugme:hover { background: var(--renk-turuncu); color: #fff; }

@media (max-width: 900px) {
  .malzeme-izgara { grid-template-columns: repeat(2, 1fr); }
  .malzeme-gorsel, .malzeme-gorsel.kisa { height: 150px; }
  .koleksiyon-ikili { grid-template-columns: 1fr; }
  .koleksiyon-kart { padding: var(--bo-7); flex-direction: column; align-items: flex-start; gap: var(--bo-5); }
}


/* --- VİDEO GALERİ + REFERANSLAR ------------------------------------------- */

.video-ic { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--bo-10); }

/* Referans yokken bölüm SAYFAYA YAYILIR — eskiden burada da iki sütun
   yazılıydı, sağ yarısı boş duruyordu. */
.video-bolum.tek-sutun .video-ic { grid-template-columns: minmax(0, 1fr); }

.video-sutun,
.referans-sutun { display: flex; flex-direction: column; gap: var(--bo-8); padding-top: var(--bo-10); }

/* Referansla birlikteyken dar sütuna 3 kart sığar */
.video-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bo-5); }

/* --- ANA SAYFA: kartlar kendi oranında, hepsi aynı yükseklikte -------------
   20 Ağu, kullanıcının kararı: ana sayfada 3 video ve "short video DAR olsun".

   Eşit sütunlu ızgarada dikey kart da yatay kart kadar geniş yer kaplıyordu.
   Burada flex kullanılıyor ve her kart KENDİ ORANI kadar pay alıyor:
     yatay 16/9 = 1.78 birim · dikey 9/16 = 0.5625 birim
   Genişlikler bu oranda dağıldığı için yükseklikler kendiliğinden eşitlenir —
   short kart ince bir şerit gibi durur, yanındakiler geniş kalır.          */

.video-bolum.tek-sutun .video-izgara {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.video-bolum.tek-sutun .video-kart       { flex: 1.78 1 0; min-width: 0; }
.video-bolum.tek-sutun .video-kart-dikey { flex: 0.5625 1 0; min-width: 0; }

/* --- VİDEOLAR SAYFASI: aynı oranlı paylaşım (20 Ağu) -----------------------
   Orada da dikey videolar yatayların üç katı uzuyordu. Ana sayfayla aynı
   mantık: her kart kendi oranı kadar pay alır, yükseklikler eşitlenir.

   Fark: burada çok video olabilir, o yüzden flex-basis veriliyor —
   `basis: 0` olsaydı yirmi kart tek satıra ezilirdi. Basis oranla orantılı
   (yatay %18, dikey %5.7) ki sarma doğru yerden olsun.                    */

.video-sayfa .video-izgara {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.video-sayfa .video-kart       { flex: 1.78 1 18%;   min-width: 0; }
.video-sayfa .video-kart-dikey { flex: 0.5625 1 5.7%; min-width: 0; }

.video-kart { display: flex; flex-direction: column; gap: var(--bo-3); }

/* --- Dikey video (telefon / Reels oranı) — 20 Ağu --------------------------
   Panelden "Dikey video" işaretlenen kayıtlar 9:16 oranında gösterilir.
   Oran SABİT olduğu ve ızgara sütunları eşit genişlikte olduğu için dikey
   kartların boyları da kendiliğinden eşit olur.

   Yatay ve dikey kartlar aynı satırdayken satır en uzuna göre uzuyordu;
   `align-items: start` ile her kart kendi boyunda kalıyor.                */

.video-izgara { align-items: start; }

/* ⚠ Oran `.video-kapak` üzerinde — `.gorsel-yer` diye bir eleman BASILMIYOR
   (gorsel() doğrudan <picture> üretiyor). Yanlış seçici sessizce hiçbir şey
   yapmıyordu. */
.video-kart-dikey .video-kapak {
  aspect-ratio: 9 / 16;
  max-height: none;   /* kart zaten dar; yükseklik oranla eşitleniyor */
}
.video-kart-dikey .video-kapak img { object-position: center; }

/* ANA SAYFADA dikey kapak: kart zaten dar olduğu için kapak 9/16 kalır;
   yükseklik yanındaki yatay kartlarla eşitlenir (flex oranı sayesinde). */
.video-bolum .video-kart-dikey .video-kapak {
  max-height: none;
  height: auto;
}

/* Yerinde oynayan video — oynatıcı kapağın yerini alır */
.video-kapak iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-oynuyor { cursor: default; }

/* Bağlantısı olmayan kayıt: oynat düğmesi gösterilmez, kırık düğme olmasın */
.video-kart-pasif { cursor: default; }
.video-kart-pasif .oynat { display: none; }
/* 16:9 — YouTube kapaklarının kendi oranı. Sabit 180px yükseklikteyken
   kapağın sağı solu kırpılıyordu (19 Ağu ölçümü: kutu 1.54, kapak 1.78). */
.video-kapak {
  position: relative; display: block;
  aspect-ratio: 16 / 9;
  border-radius: var(--yari-3);
  overflow: hidden;
}
.video-kapak > .gorsel-yer,
.video-kapak picture,
.video-kapak img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}
.video-kapak .oynat {
  /* inset/margin açıkça sıfırlanıyor: başka bir kural bunları verirse
     ortalama bozulur (bir kez oldu, düğme sağa kaydı). */
  position: absolute; inset: auto; margin: 0;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center;
  font: 400 14px/1 var(--yazi-govde);
  color: var(--renk-koyu);
  transition: background var(--gecis), color var(--gecis);
}
.video-kart:hover .oynat { background: var(--renk-turuncu); color: #fff; }
.video-ad { font: 600 var(--p-kucuk)/1.35 var(--yazi-baslik); }

.referans { display: flex; gap: var(--bo-5); margin: 0; padding-bottom: var(--bo-7); border-bottom: 1px solid rgba(20,22,26,.12); }
.referans:last-child { border-bottom: 0; padding-bottom: 0; }
.referans-gorsel { position: relative; width: 64px; height: 64px; flex: none; border-radius: var(--yari-3); overflow: hidden; }
.referans-gorsel > * { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.referans blockquote { margin: 0; font: 400 var(--p-kucuk)/1.7 var(--yazi-govde); color: var(--renk-koyu); }
.referans figcaption { margin-top: var(--bo-2); font: 500 12px/1 var(--yazi-govde); color: var(--renk-metin-4); }

@media (max-width: 1280px) {
  .video-bolum.tek-sutun .video-izgara,
  .video-sayfa .video-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .video-ic { grid-template-columns: 1fr; gap: var(--bo-8); }
  .video-izgara,
  .video-bolum.tek-sutun .video-izgara,
  .video-sayfa .video-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-kapak { height: 160px; }
  /* ⚠ Yukarıdaki SABİT YÜKSEKLİK dikey kartın 9:16 oranını eziyordu —
     dar ekranda dikey video yatay görünüyordu (20 Ağu ölçümü: 350×200). */
  .video-kart-dikey .video-kapak { height: auto; aspect-ratio: 9 / 16; max-height: none; }

  /* ⚠ Ana sayfa ızgarası FLEX (oranlı paylaşım) — buraya %50'lik bir kural
     yazınca dikey kart da yarım ekran genişliğinde oluyor ve 9:16 yüzünden
     1360px boyunda devleşiyordu (20 Ağu ölçümü, 820px ekran).
     Oranlı paylaşım dar ekranda da korunur; tek sütuna ancak 600px altında
     geçilir.

     Bu aralıkta yatay kapaklar SABİT 160px (eski tasarım kararı); dikey
     kart da aynı yüksekliğe oturtulur, yoksa satır hizası kayıyor. */
  .video-bolum.tek-sutun .video-kart-dikey,
  .video-sayfa .video-kart-dikey { flex: 0 0 auto; }
  .video-bolum.tek-sutun .video-kart-dikey .video-kapak,
  .video-sayfa .video-kart-dikey .video-kapak {
    height: 160px; width: auto; aspect-ratio: 9 / 16;
  }
  /* Videolar sayfasında yatay kartlar bu aralıkta ikişerli aksın.
     ⚠ `:not(.video-kart-dikey)` şart — dikey kart da `.video-kart`
     sınıfını taşıyor ve bu kural onun `flex: 0 0 auto` ayarını eziyordu
     (20 Ağu ölçümü: dikey kart 765×160, yani yatay görünüyordu). */
  .video-sayfa .video-kart:not(.video-kart-dikey) { flex: 1 1 calc(50% - 100px); }
}
@media (max-width: 600px) {
  .video-izgara,
  .video-bolum.tek-sutun .video-izgara,
  .video-sayfa .video-izgara { grid-template-columns: 1fr; }
  .video-kapak { height: 200px; }
  .video-kart-dikey .video-kapak { height: auto; aspect-ratio: 9 / 16; max-height: none; }

  /* Telefonda her kart tam genişlik */
  /* ⚠ `:not(...)` ile yazılan 1000px kuralı bunlardan DAHA ÖZGÜL; aynı
     biçimde yazılmazsa telefonda yatay kart 168px'e sıkışıyordu. */
  .video-bolum.tek-sutun .video-kart,
  .video-bolum.tek-sutun .video-kart-dikey,
  .video-sayfa .video-kart:not(.video-kart-dikey),
  .video-sayfa .video-kart-dikey { flex: 1 1 100%; }

  /* ⚠ 1000px bloğundaki "height:160px" kuralı AYNI ÖZGÜLLÜKTE olduğu için
     buraya da yazılmalı; yoksa telefonda dikey kart yatay görünüyordu
     (20 Ağu ölçümü: 350×160, oran 2.19). */
  .video-bolum.tek-sutun .video-kart-dikey .video-kapak,
  .video-sayfa .video-kart-dikey .video-kapak {
    height: auto; width: auto; aspect-ratio: 9 / 16;
  }
}


/* --- TADİLAT REHBERİ (blog şeridi) ---------------------------------------- */

.blog-izgara {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: rgba(20, 22, 26, .12);
}
.blog-kart {
  background: var(--renk-panel);
  padding: var(--bo-8);
  display: flex; flex-direction: column; gap: var(--bo-3);
}
.blog-kart:first-child { padding-left: 0; }
.blog-sure { font: 500 var(--p-etiket)/1 var(--yazi-mono); color: var(--renk-metin-4); }
.blog-kart h3 { font: 600 20px/1.35 var(--yazi-baslik); }
.blog-kart p  { font: 400 var(--p-kucuk)/1.7 var(--yazi-govde); color: var(--renk-metin-2); }
.blog-kart:hover h3 { color: var(--renk-turuncu); }

@media (max-width: 900px) {
  .blog-izgara { grid-template-columns: 1fr; }
  .blog-kart, .blog-kart:first-child { padding: var(--bo-7) 0; }
}


/* ==========================================================================
   ALT SAYFALAR
   ========================================================================== */

/* --- Hizmetler sayfası ---------------------------------------------------- */

.hizmet-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bo-6); }

.hizmet-kart {
  display: flex; flex-direction: column;
  background: var(--renk-panel);
  border-radius: var(--yari-3);
  overflow: hidden;
  transition: background var(--gecis);
}
.hizmet-kart:hover { background: var(--renk-panel-2); }

.hizmet-kart-gorsel { position: relative; display: block; height: 240px; }
.hizmet-kart-gorsel > .gorsel-yer,
.hizmet-kart-gorsel picture,
.hizmet-kart-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}

.hizmet-kart-govde { display: flex; flex-direction: column; gap: var(--bo-3); padding: var(--bo-7); }
.hizmet-kart-govde h2 { font: 600 var(--p-h3)/1.25 var(--yazi-baslik); }
.hizmet-kart-govde p  { font: 400 var(--p-kucuk)/1.7 var(--yazi-govde); color: var(--renk-metin-2); }
.hizmet-kart:hover h2 { color: var(--renk-turuncu); }

/* "Emin değil misiniz?" çağrı kutusu */
.hizmet-cagri {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-7);
  background: var(--renk-koyu);
  color: var(--acik-metin);
  padding: var(--bo-8);
  border-radius: var(--yari-3);
  flex-wrap: wrap;
}
.hizmet-cagri b    { display: block; font: 700 var(--p-h3)/1.3 var(--yazi-baslik); }
.hizmet-cagri span { display: block; margin-top: var(--bo-2); font: 400 var(--p-kucuk)/1.7 var(--yazi-govde); color: var(--acik-metin-60); max-width: 52ch; }

@media (max-width: 900px) {
  .hizmet-kartlar { grid-template-columns: 1fr; }
  .hizmet-kart-gorsel { height: 200px; }
  .hizmet-cagri { flex-direction: column; align-items: flex-start; }
  .hizmet-cagri .dugme { width: 100%; }
}


/* --- Projeler sayfası ----------------------------------------------------- */

.proje-ust-satir {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-6);
  flex-wrap: wrap;
}

/* Ana sayfadaki şerit yerine burada ızgara */
.proje-izgara {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bo-8) var(--bo-7);
}
/* Izgarada kartlar sabit genişlik almasın */
.proje-izgara .proje-kart { width: auto; }
/* Izgara düzeninde sütun genişliği sabittir; ana sayfadaki "genişlik
   fotoğrafa göre serbest" kuralı burada geçmez. Fotoğraf kutuyu doldurur. */
.proje-izgara .proje-kart { min-width: 0; max-width: none; }
.proje-izgara .proje-gorsel { height: auto; width: auto; aspect-ratio: 3 / 2; }
.proje-izgara .proje-gorsel picture { width: 100%; }
.proje-izgara .proje-gorsel img { width: 100%; max-width: 100%; }

@media (max-width: 1000px) { .proje-izgara { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .proje-izgara { grid-template-columns: 1fr; } }


/* --- Ürün / hizmet sayfası metni ------------------------------------------ */

.urun-metin { display: flex; flex-direction: column; gap: var(--bo-5); max-width: 74ch; }
.urun-metin h2 { margin-top: var(--bo-5); }
.urun-metin h3 { font: 600 var(--p-govde)/1.35 var(--yazi-baslik); margin-top: var(--bo-4); }
.urun-metin p  { font: 400 var(--p-govde-2)/1.8 var(--yazi-govde); color: var(--renk-metin-2); }
.urun-metin p:first-child { font-size: var(--p-govde); color: var(--renk-koyu); }


/* --- İletişim sayfası ----------------------------------------------------- */

.iletisim-ic { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--bo-10); align-items: start; }

.iletisim-tel { font: 600 var(--p-h3)/1.3 var(--yazi-baslik); }
.iletisim-tel:hover { color: var(--renk-turuncu); }

.lokasyon {
  display: flex; flex-direction: column; gap: var(--bo-3);
  align-items: flex-start;
  padding-bottom: var(--bo-5);
  border-bottom: 1px solid var(--cizgi);
}
.lokasyon:last-child { border-bottom: 0; }
.lokasyon > span:nth-child(2) { font: 400 var(--p-kucuk)/1.65 var(--yazi-govde); color: var(--renk-metin-2); max-width: 40ch; }

/* Yol tarifi düğmesi — bağlantı yerine düğme, göze çarpsın */
.tarif-dugme { gap: var(--bo-2); font-size: var(--p-mini); }
.tarif-dugme span { color: var(--renk-turuncu); font-size: 13px; }
.tarif-dugme:hover span { color: inherit; }


/* --- Harita: sayfanın en altında, kenardan kenara ------------------------- */

/* Harita alt bilgiye yapışır: altında boşluk veya yazı şeridi bırakılmaz.
   Negatif alt boşluk, sayfa gövdesinin (.bolum) alt iç boşluğunu yutar —
   yoksa harita ile alt bilgi arasında beyaz bir şerit kalıyor. */
.harita {
  margin-top: var(--bolum-y);
  margin-bottom: calc(var(--bolum-y) * -1);
  border-top: 1px solid var(--cizgi-8);
  line-height: 0;                /* iframe altındaki satır boşluğunu siler */
}
.harita iframe {
  width: 100%;
  height: 460px;
  border: 0;
  display: block;
  filter: grayscale(.15);        /* sayfanın sakin tonuna yaklaşsın */
}

/* Harita yüklenmeden önceki perde — ziyaretçi isterse açar.
   Böylece sayfa açılışında Google'a hiç istek gitmiyor. */
.harita-kapali { background: var(--renk-panel); line-height: normal; }

.harita-perde {
  height: 460px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--bo-4);
  padding: var(--bo-8) var(--kenar);
  text-align: center;
  /* Hafif bir harita dokusu — gerçek harita değil, sadece zemin deseni */
  background-image:
    linear-gradient(var(--cizgi-8) 1px, transparent 1px),
    linear-gradient(90deg, var(--cizgi-8) 1px, transparent 1px);
  background-size: 44px 44px;
}
.harita-simge { color: var(--renk-turuncu); }
.harita-simge svg { width: 34px; height: 34px; display: block; }

.harita-perde b {
  font: 700 var(--p-govde-2)/1.5 var(--yazi-baslik);
  color: var(--renk-koyu);
  max-width: 40ch;
}
.harita-not {
  font: 400 var(--p-mini)/1.6 var(--yazi-govde);
  color: var(--renk-metin-2);
  max-width: 52ch;
}
.harita-not a { color: var(--renk-turuncu-koyu); font-weight: 600; }
.harita-not a:hover { text-decoration: underline; }

@media (max-width: 700px) {
  .harita-perde { height: auto; min-height: 320px; padding: var(--bo-9) var(--kenar); }
}

@media (max-width: 700px) {
  .harita iframe { height: 320px; }
}

.iletisim-form {
  display: flex; flex-direction: column; gap: var(--bo-5);
  background: var(--renk-panel);
  padding: var(--bo-8);
  border-radius: var(--yari-3);
}
.form-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bo-5); }

@media (max-width: 900px) {
  .iletisim-ic { grid-template-columns: 1fr; gap: var(--bo-8); }
  .form-ikili { grid-template-columns: 1fr; }
  .iletisim-form { padding: var(--bo-6); }
}


/* --- Hakkımızda sayfası --------------------------------------------------- */

.hakkimizda-ust { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--bo-10); align-items: start; }

.hakkimizda-sayilar { display: flex; flex-direction: column; gap: var(--bo-5); }
.hakkimizda-sayilar > div {
  display: flex; flex-direction: column; gap: var(--bo-1);
  padding-bottom: var(--bo-5);
  border-bottom: 1px solid var(--cizgi);
}
.hakkimizda-sayilar b    { font: 700 26px/1 var(--yazi-baslik); color: var(--renk-turuncu); }
.hakkimizda-sayilar span { font: 400 var(--p-mini)/1.5 var(--yazi-govde); color: var(--renk-metin-2); }

.hakkimizda-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bo-5); }
.hakkimizda-goz { display: flex; flex-direction: column; gap: var(--bo-3); }
.hakkimizda-goz > .gorsel-yer,
.hakkimizda-goz picture { aspect-ratio: 4 / 3; border-radius: var(--yari-3); }
.hakkimizda-goz img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--yari-3); }

@media (max-width: 900px) {
  .hakkimizda-ust { grid-template-columns: 1fr; gap: var(--bo-8); }
  .hakkimizda-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* --- Blog sayfası --------------------------------------------------------- */

.blog-liste { display: flex; flex-direction: column; }
.blog-satir {
  display: flex; flex-direction: column; gap: var(--bo-2);
  padding: var(--bo-7) 0;
  border-bottom: 1px solid var(--cizgi);
}
.blog-satir h2 { font: 600 var(--p-h3)/1.3 var(--yazi-baslik); }
.blog-satir p  { font: 400 var(--p-kucuk)/1.7 var(--yazi-govde); color: var(--renk-metin-2); max-width: 70ch; }
.blog-satir:not(.blog-bekliyor):hover h2 { color: var(--renk-turuncu); }
.blog-bekliyor { opacity: .72; }


/* --- Videolar sayfası: içerik bekleyen kartlar ---------------------------- */

.video-bekliyor { cursor: default; }
.video-bekliyor .video-kapak { opacity: .72; }
.video-bekliyor .oynat { background: rgba(255, 255, 255, .7); }
.video-durum {
  font: 500 var(--p-etiket)/1 var(--yazi-mono);
  letter-spacing: .12em;
  color: var(--renk-metin-4);
  text-transform: uppercase;
}


/* --- Mobilya sayfası: alt sayfa kartları ---------------------------------- */

.mobilya-kartlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bo-6); }

.mobilya-kart {
  display: flex; flex-direction: column;
  background: var(--renk-panel);
  border-radius: var(--yari-3);
  overflow: hidden;
  transition: background var(--gecis);
}
.mobilya-kart:hover { background: var(--renk-panel-2); }

/* 4:3 — eskiden 200 px sabitti ve kutu 2.15 oranına çıkıyordu; dikey
   fotoğraflar (900x1200) ince bir şeride sıkışıp içerik kayboluyordu. */
.mobilya-kart-gorsel { position: relative; display: block; aspect-ratio: 4 / 3; }
.mobilya-kart-gorsel > .gorsel-yer,
.mobilya-kart-gorsel picture,
.mobilya-kart-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}

.mobilya-kart-govde { display: flex; flex-direction: column; gap: var(--bo-2); padding: var(--bo-6); }
.mobilya-kart-govde h2 { font: 600 19px/1.25 var(--yazi-baslik); }
.mobilya-kart-govde p  { font: 400 var(--p-mini)/1.65 var(--yazi-govde); color: var(--renk-metin-2); }
.mobilya-kart:hover h2 { color: var(--renk-turuncu); }

@media (max-width: 900px) {
  .mobilya-kartlar { grid-template-columns: 1fr; }
}


/* ==========================================================================
   MALZEME SEÇİCİ — seç, WhatsApp'tan gönder
   ========================================================================== */

.secim-bolum {
  background: var(--renk-panel);
  padding-block: var(--bolum-y);
  margin-block: var(--bolum-y);
}

.secim-izgara {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--bo-5);
}

/* Seçim kutusu — etiketin tamamı tıklanabilir */
.secim-kutu { display: flex; flex-direction: column; gap: var(--bo-3); cursor: pointer; }
.secim-kutu input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Kapak ve kapı modelleri dikey çekiliyor (0.75); kare kutu en az kırpar. */
.secim-gorsel {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--yari-3);
  overflow: hidden;
  background: var(--renk-beyaz);
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color var(--gecis);
}
.secim-gorsel > .gorsel-yer,
.secim-gorsel picture,
.secim-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}
/* Kapılar tam görünsün — kırpma yok */
.secim-gorsel.kapi picture,
.secim-gorsel.kapi img { object-fit: contain; padding: var(--bo-2); }

.secim-tik {
  position: absolute; right: 8px; top: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--cizgi-20);
  color: transparent;
  font: 700 13px/1 var(--yazi-govde);
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis);
}

.secim-kutu:hover .secim-gorsel { outline-color: var(--cizgi-20); }
.secim-kutu input:focus-visible + .secim-gorsel { outline-color: var(--renk-turuncu); }

/* Seçilmiş hâli */
.secim-kutu input:checked + .secim-gorsel { outline-color: var(--renk-turuncu); }
.secim-kutu input:checked + .secim-gorsel .secim-tik {
  background: var(--renk-turuncu);
  border-color: var(--renk-turuncu);
  color: #fff;
}

.secim-ad { font: 500 var(--p-mini)/1.3 var(--yazi-govde); }
.secim-kutu input:checked ~ .secim-ad { font-weight: 600; color: var(--renk-turuncu); }

/* --- Alt çubuk: seçim yapıldıkça belirir ---------------------------------- */

.secim-cubuk {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: var(--bo-7);
  background: var(--renk-koyu);
  color: var(--acik-metin);
  padding-block: var(--bo-5);
}
.secim-cubuk[hidden] { display: none; }
.secim-cubuk .kapsa {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-6);
  flex-wrap: wrap;
}
.secim-ozet { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.secim-ozet b { font: 700 var(--p-govde-2)/1 var(--yazi-baslik); }
.secim-ozet span {
  font: 400 12px/1.4 var(--yazi-govde);
  color: var(--acik-metin-60);
  max-width: 72ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.secim-cubuk .dugme-sade { border-color: var(--acik-cizgi-2); color: var(--acik-metin); }
.secim-cubuk .dugme-sade:hover { border-color: var(--acik-metin); }

@media (max-width: 1000px) { .secim-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  {
  .secim-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bo-4); }
  /* oran sabit (1:1) — mobilde de aynı kadraj */
  .secim-cubuk { bottom: 62px; }        /* mobil alt çubuğun üstünde dursun */
  .secim-cubuk .kapsa { flex-direction: column; align-items: stretch; gap: var(--bo-4); }
  .secim-cubuk .satir { justify-content: stretch; }
  .secim-cubuk .satir > * { flex: 1; }
}


/* --- Proje detay sayfası -------------------------------------------------- */

.proje-ust { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--bo-10); align-items: start; }

.proje-kunye { display: flex; gap: var(--bo-9); flex-wrap: wrap; }
.proje-kunye > div { display: flex; flex-direction: column; gap: var(--bo-2); }
.proje-kunye b { font: 600 var(--p-govde-2)/1.3 var(--yazi-baslik); }

/* Gömülü video — oranı korur */
.video-cerceve { position: relative; aspect-ratio: 16 / 9; border-radius: var(--yari-3); overflow: hidden; background: var(--renk-koyu); }
.video-cerceve iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.proje-cagri span a { color: var(--acik-metin); text-decoration: underline; }
.proje-cagri span a:hover { color: var(--renk-turuncu); }

@media (max-width: 900px) {
  .proje-ust { grid-template-columns: 1fr; gap: var(--bo-8); }
}


/* --- 3D Tasarımlar sayfası ------------------------------------------------ */

.ucb-ust-satir {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--bo-7);
  flex-wrap: wrap;
}

.ucb-araclar { display: flex; justify-content: flex-end; }

/* --- Küçük kartlar -------------------------------------------------------- */

.ucb-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bo-6) var(--bo-5);
}

.ucb-kart {
  display: flex; flex-direction: column; gap: var(--bo-3);
  padding: 0;
  text-align: left;
}
.ucb-kart[hidden] { display: none; }

.ucb-kart-gorsel {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--yari-3);
  overflow: hidden;
  cursor: zoom-in;
  /* 3D çizimlerin zemini genelde açık (teknik çizimler tamamen beyaz);
     beyaz sayfada nerede bittiği belirsiz kalıyordu. Çerçeve sınırı belli
     ediyor. `--cizgi` (%10) çok soluk kalmıştı, %16'ya çıkarıldı (20 Ağu). */
  border: 1px solid var(--cizgi-16);
}
.ucb-kart:hover .ucb-kart-gorsel,
.ucb-kart:focus-visible .ucb-kart-gorsel { border-color: var(--renk-turuncu); }
.ucb-kart-gorsel > .gorsel-yer,
.ucb-kart-gorsel picture,
.ucb-kart-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
  transition: transform .5s ease;
}
.ucb-kart:hover .ucb-kart-gorsel img { transform: scale(1.04); }

.ucb-rozet-3d {
  position: absolute; left: 10px; top: 10px;
  font: 700 10px/1 var(--yazi-baslik);
  letter-spacing: .14em;
  color: #fff; background: var(--renk-turuncu);
  padding: 6px 8px; border-radius: var(--yari-2);
}
/* "Çalışma sürüyor" — 3D çizimi olup fotoğrafı henüz olmayan kartlarda.
   3D rozetiyle çakışmaması için sağ üstte durur. */
.ucb-rozet-suruyor {
  position: absolute; right: 10px; top: 10px;
  max-width: calc(100% - 20px);
  font: 600 10px/1 var(--yazi-baslik);
  letter-spacing: .06em;
  color: var(--renk-koyu); background: rgba(246, 243, 238, .92);
  padding: 6px 8px; border-radius: var(--yari-2);
}
.ucb-buyut {
  position: absolute; right: 10px; bottom: 10px;
  font: 600 11px/1 var(--yazi-govde);
  color: var(--renk-koyu);
  background: rgba(255, 255, 255, .92);
  padding: 7px 10px; border-radius: var(--yari-2);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--gecis), transform var(--gecis);
}
.ucb-kart:hover .ucb-buyut,
.ucb-kart:focus-visible .ucb-buyut { opacity: 1; transform: none; }

.ucb-kart-ad   { font: 600 var(--p-govde-2)/1.3 var(--yazi-baslik); }
.ucb-kart-meta { font: 400 var(--p-mini)/1.4 var(--yazi-govde); color: var(--renk-metin-4); }
.ucb-kart:hover .ucb-kart-ad { color: var(--renk-turuncu); }

@media (max-width: 1100px) { .ucb-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .ucb-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Karşılaştırma penceresi ---------------------------------------------- */

.ucb-pencere {
  position: fixed; inset: 0;
  background: rgba(14, 16, 19, .95);
  z-index: 70;
  display: flex; flex-direction: column;
  padding: var(--bo-7) var(--bo-8) var(--bo-8);
}
.ucb-pencere[hidden] { display: none; }

.ucb-pencere-basi {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-5);
  color: var(--acik-metin);
  font: 600 var(--p-h3)/1.3 var(--yazi-baslik);
  padding-bottom: var(--bo-5);
}
/* Kapatma düğmesi koyu zeminde kaybolmasın: çerçeveli, dolgulu ve
   yanında "Kapat" yazısıyla. Eskiden yalnızca soluk bir × idi ve
   kullanıcı çıkışı bulamıyordu (24 Ağu). */
.ucb-pencere-basi .modal-kapat {
  width: auto; min-height: var(--dokunma);
  gap: 8px; padding: 0 14px;
  color: #fff;
  background: rgba(246, 243, 238, .10);
  border: 1px solid rgba(246, 243, 238, .34);
  font: 600 var(--p-mini)/1 var(--yazi-govde);
}
.ucb-pencere-basi .modal-kapat .ucb-kapat-carpi { font-size: 20px; line-height: 1; }
.ucb-pencere-basi .modal-kapat:hover,
.ucb-pencere-basi .modal-kapat:focus-visible {
  background: rgba(246, 243, 238, .22); color: #fff;
}

.ucb-pencere-govde {
  flex: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--bo-2);
  min-height: 0;
}
/* Karşılaştırma penceresinde de aynı çerçeve — koyu zeminde açık çizgi */
.ucb-pencere-govde .ucb-kutu {
  height: 100%;
  border-radius: var(--yari-3);
  border: 1px solid rgba(246, 243, 238, .18);
  overflow: hidden;
}
.ucb-pencere-govde .ucb-kutu > span { position: absolute; inset: 0; }

/* Eksik tarafta gösterilen açıklama — yer tutucu değil, müşteriye yazı */
.ucb-not {
  /* Üst kutu (span[data-ucb-gercek]) inset:0 ile yerleşiyor; yazının o
     kutunun ORTASINDA durması için burada da inset:0 gerekiyor — yoksa
     yazı tepeye yapışıp "GERÇEK UYGULAMA" etiketinin üstüne biniyor. */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--bo-7) var(--bo-5) var(--bo-5);
  text-align: center; text-wrap: balance;
  /* Neredeyse mat: yoksa arkadaki sayfa yazının içinden görünüyor */
  background: rgba(14, 16, 19, .97);
  color: var(--acik-metin-72);
  font: 400 var(--p-govde-2)/1.6 var(--yazi-govde);
}
.ucb-pencere-govde .gorsel-yer,
.ucb-pencere-govde picture,
.ucb-pencere-govde img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}

@media (max-width: 800px) {
  .ucb-pencere { padding: var(--bo-6) var(--bo-4) var(--bo-6); }
  .ucb-pencere-basi { font-size: var(--p-govde-2); }
  .ucb-pencere-govde { grid-template-columns: 1fr; gap: var(--bo-3); overflow-y: auto; }
  .ucb-pencere-govde .ucb-kutu { height: 40vh; min-height: 220px; }
}


/* --- Plan sayfasındaki örnek ekran görüntüsü ------------------------------ */

.plan-ornek { margin: 0; display: flex; flex-direction: column; gap: var(--bo-4); }
.plan-ornek picture,
.plan-ornek img {
  width: 100%; height: auto;
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  background: var(--renk-panel);
}
.plan-ornek figcaption {
  font: 400 var(--p-mini)/1.6 var(--yazi-govde);
  color: var(--renk-metin-3);
}


/* --- HENÜZ YAPILMAMIŞ BÖLÜM İŞARETİ --------------------------------------
   Sadece geliştirme sırasında görünür; sayfa tamamlanınca silinir.        */
.yapilacak {
  border: 1.5px dashed var(--cizgi-16);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
  padding: var(--bo-9) var(--bo-7);
  display: flex; flex-direction: column; gap: var(--bo-2);
  text-align: center;
}
.yapilacak b { font: 600 var(--p-govde-2)/1.3 var(--yazi-baslik); color: var(--renk-metin-2); }
.yapilacak small { font: 400 var(--p-mini)/1.6 var(--yazi-govde); color: var(--renk-metin-3); }


/* --- BLOG YAZISI SAYFASI ---------------------------------------------------
   Okuma genişliği bilerek dar: uzun satır gözü yorar, 60-70 karakter ideal. */

/* Kapak 16:9 ile sınırlı (19 Ağu). Eskiden fotoğrafın kendi boyu kadar
   uzuyordu; dikey bir fotoğraf ekranın tamamını kaplıyordu. */
.yazi-kapak {
  aspect-ratio: 16 / 9;
  border-radius: var(--yari-3);
  overflow: hidden;
}
.yazi-kapak picture,
.yazi-kapak img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.yazi-kapak picture, .yazi-kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }

.yazi-govde { max-width: 68ch; display: flex; flex-direction: column; gap: var(--bo-5); }
.yazi-govde p { font: 400 var(--p-govde)/1.8 var(--yazi-govde); color: var(--renk-metin-2); }
.yazi-govde h2 { margin-top: var(--bo-4); }
.yazi-govde .giris-metni { font-weight: 500; color: var(--renk-koyu); }

.yazi-ust {
  display: flex; gap: var(--bo-4); align-items: center;
  font: 500 var(--p-mini)/1 var(--yazi-govde);
  color: var(--renk-metin-3);
  text-transform: uppercase; letter-spacing: .06em;
}


/* --- KOLEKSİYON SAYFALARI (seramik / tezgâh) ------------------------------
   İki bölüm: elimizdeki ürünler ve PDF kataloglar. 18 Ağu 2026'da eklendi. */

.koleksiyon-izgara {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--bo-6);
}

.koleksiyon-urun { display: flex; flex-direction: column; gap: var(--bo-4); }

/* Seramik ve tezgâh örnekleri kare çekiliyor; kare kutu en az kırpar */
.koleksiyon-urun-gorsel {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--yari-3);
  overflow: hidden;
  padding: 0;
  background: var(--renk-panel);
  cursor: zoom-in;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color var(--gecis);
}
.koleksiyon-urun-gorsel:hover { outline-color: var(--renk-turuncu); }

.koleksiyon-urun-gorsel > .gorsel-yer,
.koleksiyon-urun-gorsel picture,
.koleksiyon-urun-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}

.koleksiyon-urun-govde { display: flex; flex-direction: column; gap: 4px; }
.koleksiyon-urun-govde b { font: 600 var(--p-mini)/1.35 var(--yazi-baslik); }

.koleksiyon-kod {
  font: 600 12px/1.3 var(--yazi-mono);
  letter-spacing: .04em;
  color: var(--renk-turuncu-koyu);
}
.koleksiyon-meta { font: 400 12px/1.4 var(--yazi-govde); color: var(--renk-metin-3); }

/* PDF kataloglar */
.katalog-izgara {
  display: grid;
  /* Logo büyüdükçe kart da genişledi (260 → 300 → 340), yoksa katalog adı
     iki satıra kırılıyor */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: var(--bo-5);
}

.katalog-kart {
  display: flex; align-items: center; gap: var(--bo-5);
  padding: var(--bo-6);
  /* 25 Ağu: kart zemini beyazdan sitenin kremine alındı. Logo kutusu beyaz
     kaldı — marka logoları saydam değil, kendi beyaz zeminleri var; kart da
     beyaz olsaydı logo kutusu hiç ayrışmazdı. */
  background: var(--renk-panel);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  transition: border-color var(--gecis);
}
.katalog-kart:hover { border-color: var(--renk-turuncu); }
.katalog-kart:hover b { color: var(--renk-turuncu); }

/* PDF kırmızısı — dosya türünü tek bakışta anlatıyor.
   Palet turuncusuna (#E8621B) yakın düşmesin diye daha saf ve koyu bir ton;
   --renk-hata bilerek kullanılmadı, o renk "bir şey ters gitti" demek. */
.katalog-simge {
  flex: none;
  /* Logo kutusuyla AYNI yükseklik: aynı sayfada ikisi yan yana geldiğinde
     kartlar farklı boyda görünmesin. Logo kutusu 168px genişken 200×70 oranıyla
     ~65px yüksekliğe oturuyor. */
  width: 65px; height: 65px;
  display: grid; place-items: center;
  background: #C4241D; color: #fff;
  border-radius: var(--yari-2);
  font: 700 12px/1 var(--yazi-mono);
  letter-spacing: .06em;
}

/* Marka logosu kutusu — "PDF" rozetinin yerine geçer (25 Ağu).
   Logolar geniş ve kısa (200×70) olduğu için kutu kareden geniş; zemin beyaz,
   çünkü logoların çoğunun kendi zemini beyaz ve koyu kutuda kayboluyorlar. */
.katalog-logo {
  flex: none;
  /* ⚠ Marka logoları 200×70, yani ÇOK GENİŞ ve basık (oran 2,9).
     Kutu kareye yakın olunca logo genişliğe sığıyor, yükseklikte kocaman
     boşluk kalıyordu — kutuyu büyütmek logoyu büyütmüyordu. Çözüm: kutuya
     yükseklik VERMEMEK. Genişlik sabit, yüksekliği logo belirliyor; logo da
     kutuyu boydan boya dolduruyor (aşağıdaki img kuralı). */
  width: 168px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-2);
  overflow: hidden;
}
.katalog-logo img {
  /* width:auto idi — logo kendi doğal boyutunda kalıp küçük görünüyordu.
     %100 ile kutunun genişliğini dolduruyor, yükseklik oranla geliyor. */
  width: 100%; height: auto;
  display: block;
}

/* "PDF" rozeti — logo kutusu geldiğinden beri dosya türünü bu söylüyor.
   Yukarıdaki kutuyla aynı kırmızı: ikisi de aynı şeyi anlatıyor. */
.katalog-tur {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 4px;
  background: #C4241D;
  font: 700 10px/1.6 var(--yazi-mono);
  letter-spacing: .07em;
  color: #fff;
  vertical-align: 1px;
}

/* Dar ekranda büyük logo metne yer bırakmıyor — bir kademe küçülüyor. */
@media (max-width: 560px) {
  .katalog-logo  { width: 120px; padding: 5px 7px; }
  .katalog-simge { width: 48px; height: 48px; }
}

.katalog-govde { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.katalog-govde b { font: 600 var(--p-mini)/1.35 var(--yazi-baslik); transition: color var(--gecis); }

.katalog-kart .bag-ok { flex: none; }

.koleksiyon-bos {
  padding: var(--bo-9);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
  color: var(--renk-metin-2);
}

@media (max-width: 1100px) {
  .koleksiyon-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .koleksiyon-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bo-4); }
  .katalog-izgara { grid-template-columns: minmax(0, 1fr); }
}


/* --- Filtre şeridi (pill) --------------------------------------------------
   Kapı Modelleri sayfasında yüzey türleri. Şerit dar ekranda yatay kayar;
   kaydırma kuralı gereği PC'de fareyle de sürüklenir (site.js hallediyor).  */

.pill-serit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pill-serit .pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border: 1px solid var(--cizgi-16);
  border-radius: 999px;
  background: var(--renk-beyaz);
  color: var(--renk-metin-2);
  font: 500 14px/1 var(--yazi-govde);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.pill-serit .pill:hover {
  border-color: var(--renk-koyu);
  color: var(--renk-koyu);
}

.pill-serit .pill.aktif {
  background: var(--renk-koyu);
  border-color: var(--renk-koyu);
  color: var(--renk-beyaz);
}

/* Filtre dışında kalan galeri gizlenir (JS kapalıysa hepsi görünür kalır) */
.kapi-grup[hidden] { display: none; }



/* ==========================================================================
   BLOG — kart ızgarası, yazı düzeni ve yan sütun            (19 Ağu)
   ========================================================================== */

/* --- /blog: kartlar -------------------------------------------------------
   Satır listesi yerine kart: kapak üstte, altında süre-başlık-özet.        */

.blog-kart-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bo-6);
}

.blog-kutu {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  overflow: hidden;
  background: var(--renk-beyaz);
  transition: border-color .15s, transform .15s;
}
.blog-kutu:hover {
  border-color: var(--renk-koyu);
  transform: translateY(-2px);
}

.blog-kutu-gorsel {
  display: block;
  aspect-ratio: 3 / 2;
  background: var(--renk-panel);
  overflow: hidden;
}
.blog-kutu-gorsel picture,
.blog-kutu-gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Kapağı olmayan yazıda desenli yer tutucu — kartlar aynı boyda kalsın */
.blog-kutu-bos {
  display: block;
  width: 100%; height: 100%;
  background:
    repeating-linear-gradient(45deg,
      var(--renk-panel) 0 10px,
      var(--renk-zemin, #F1EDE7) 10px 20px);
}

.blog-kutu-govde {
  display: flex;
  flex-direction: column;
  gap: var(--bo-2);
  padding: var(--bo-6);
  flex: 1 1 auto;
}
.blog-kutu-govde h2 { font: 600 var(--p-h3)/1.35 var(--yazi-baslik); }
.blog-kutu-govde p {
  font: 400 var(--p-kucuk)/1.7 var(--yazi-govde);
  color: var(--renk-metin-2);
  flex: 1 1 auto;
}
.blog-kutu:hover h2 { color: var(--renk-turuncu); }
.blog-kutu .bag-ok { margin-top: var(--bo-2); }

@media (max-width: 1000px) {
  .blog-kart-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .blog-kart-izgara { grid-template-columns: 1fr; }
}


/* --- Yazı sayfası: iki sütun ---------------------------------------------- */

.yazi-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--bo-9);
  align-items: start;
}
.yazi-duzen.tek-sutun {
  grid-template-columns: minmax(0, 1fr);
  max-width: 76ch;
}

.yazi-ana { min-width: 0; }

/* Yan sütun sayfa kaydırılırken üstte kalsın */
.yazi-yan {
  position: sticky;
  top: calc(var(--ust-bar-h) + var(--bo-5));
  display: flex;
  flex-direction: column;
  gap: var(--bo-5);
  padding: var(--bo-6);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  background: var(--renk-panel);
}

.yan-liste {
  display: flex;
  flex-direction: column;
  gap: var(--bo-4);
}

.yan-yazi {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--bo-4);
  align-items: center;
  padding-bottom: var(--bo-4);
  border-bottom: 1px solid var(--cizgi);
}
.yan-yazi:last-child { border-bottom: 0; padding-bottom: 0; }

/* Kapağı olmayan yazıda tek sütuna düşsün, boş kutu kalmasın */
.yan-yazi:not(:has(.yan-yazi-gorsel)) { grid-template-columns: minmax(0, 1fr); }

.yan-yazi-gorsel {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--yari-2, 6px);
  overflow: hidden;
  background: var(--renk-beyaz);
}
.yan-yazi-gorsel picture,
.yan-yazi-gorsel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.yan-yazi-govde {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.yan-yazi-govde b {
  font: 600 14px/1.4 var(--yazi-baslik);
  color: var(--renk-koyu);
}
.yan-yazi:hover .yan-yazi-govde b { color: var(--renk-turuncu); }

@media (max-width: 900px) {
  .yazi-duzen { grid-template-columns: minmax(0, 1fr); }
  .yazi-yan { position: static; }
}

/* --- Hizmet/ürün sayfası: iki sütun ----------------------------------------
   19 Ağu: metin 700px kalıp sağında 725px boşluk bırakıyordu. Metin okuma
   genişliğini koruyor, sağdaki boşluk özet kutusuna gidiyor.               */

.urun-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--bo-9);
  align-items: start;
}

/* Özet yoksa metin ortalanır — tek başına sola yaslı kalmasın */
.urun-duzen.tek-sutun {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}
.urun-duzen.tek-sutun .urun-metin { margin-inline: auto; }

.urun-ana { min-width: 0; }

.urun-yan {
  position: sticky;
  top: calc(var(--ust-bar-h) + var(--bo-5));
  display: flex;
  flex-direction: column;
  gap: var(--bo-5);
  padding: var(--bo-7);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  background: var(--renk-panel);
}

.urun-ozet {
  display: flex;
  flex-direction: column;
  gap: var(--bo-4);
}
.urun-ozet li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: var(--bo-4);
  border-bottom: 1px solid var(--cizgi);
}
.urun-ozet li:last-child { border-bottom: 0; padding-bottom: 0; }
.urun-ozet .ad {
  font: 600 11px/1 var(--yazi-govde);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--renk-metin-3);
}
.urun-ozet .detay {
  font: 400 var(--p-kucuk)/1.5 var(--yazi-govde);
  color: var(--renk-koyu);
}

.urun-yan-tel {
  font: 600 var(--p-kucuk)/1.3 var(--yazi-baslik);
  color: var(--renk-koyu);
  text-align: center;
}
.urun-yan-tel:hover { color: var(--renk-turuncu); }

@media (max-width: 900px) {
  .urun-duzen { grid-template-columns: minmax(0, 1fr); gap: var(--bo-7); }
  .urun-yan { position: static; }
}
/* --- 3D bölümü: uygulama fotoğrafı henüz yoksa ---------------------------
   Banyo kaydının "gerçek uygulama" fotoğrafı yüklenmemişti; kutu boş
   kalıyor ve içinde ziyaretçiye dosya yolu yazıyordu. Artık durumu
   anlatan bir cümle basılıyor. Fotoğraf yüklenince bu sınıf hiç gelmez. */
.ucb-bekliyor .ucb-bekliyor-metin {
  position: absolute;
  inset: auto 0 0 0;
  margin: 0;
  padding: 0 var(--bo-6) var(--bo-6);
  z-index: 1;
  text-align: center;
  font: 400 var(--p-govde-2)/1.7 var(--yazi-govde);
  color: var(--renk-metin-2);
}
/* Kutu 440px sabit; metin dikeyde ortada dursun */
.ucb-bekliyor {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ucb-bekliyor .ucb-bekliyor-metin {
  position: relative;
  inset: auto;
  padding: 0 var(--bo-7);
  max-width: 34ch;
}

@media (max-width: 700px) {
  .ucb-bekliyor .ucb-bekliyor-metin { padding: 0 var(--bo-5); }
}