/* ==========================================================================
   ARTE — BİLEŞENLER
   Üst menü, alt bilgi, sayfa başlığı bandı, mobil alt çubuk, modal, kartlar.
   ========================================================================== */

/* ==========================================================================
   1. ÜST MENÜ (header)
   ========================================================================== */

.ust {
  background: var(--renk-beyaz);
  position: relative;
  z-index: 30;
}

/* --- Koyu bilgi bandı (masaüstü) ----------------------------------------- */
.ust-bant {
  background: var(--renk-koyu);
  min-height: var(--ust-bant-h);
}
.ust-bant .kapsa {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--ust-bant-h);
  gap: var(--bo-7);
}
.ust-bant-sol { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.ust-bant a,
.ust-bant span { font: 400 var(--p-mini)/1 var(--yazi-govde); color: var(--acik-metin-72); }
.ust-bant a:hover { color: var(--acik-metin); }
.ust-bant .etiket { color: var(--renk-turuncu); letter-spacing: .18em; }
.ust-bant-sag { color: var(--acik-metin-50) !important; }

/* Üst banttaki telefon — simge + numara (25 Ağu, soldan sağa alındı). */
.ust-bant-tel {
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.ust-bant-tel .tel-simge { width: 15px; height: 15px; flex: none; opacity: .8; }
.ust-bant-tel:hover .tel-simge { opacity: 1; }

/* --- Ana çubuk ------------------------------------------------------------ */
.ust-bar {
  border-bottom: 1px solid rgba(20, 22, 26, .09);
}
.ust-bar .kapsa {
  height: var(--ust-bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bo-7);
}

/* --- Logo ----------------------------------------------------------------- */
.logo { display: flex; flex-direction: column; gap: 3px; }
.logo-ad {
  font: 800 26px/1 var(--yazi-baslik);
  letter-spacing: -.02em;
  color: var(--renk-koyu);
}
.logo-ad i { font-style: normal; color: var(--renk-turuncu); }   /* "te" hecesi */
.logo-ad b { font-weight: 400; }                                  /* "dekorasyon" */
.logo-alt {
  font: 400 9px/1 var(--yazi-govde);
  letter-spacing: .42em;
  color: var(--renk-metin-4);
  text-transform: uppercase;
}

/* --- Menü ----------------------------------------------------------------- */
.menu { display: flex; align-items: center; gap: var(--bo-7); min-width: 0; }

.menu-oge { position: relative; display: flex; align-items: center; height: var(--ust-bar-h); }

.menu-bag {
  display: flex; align-items: center; gap: 5px;
  font: 500 var(--p-kucuk)/1 var(--yazi-govde);
  color: var(--renk-koyu);
  white-space: nowrap;
}
.menu-bag:hover { color: var(--renk-turuncu); }
/* Ok işareti 9px'ti, ekranda 7,5×9 piksellik soluk bir nokta gibi
   duruyordu ve açılır menü olduğu fark edilmiyordu. 11px'e çıkarıldı
   (25 Ağu, sahibinin isteği: "biraz büyütelim, çok olmasın"). */
.menu-bag .ok { font: 400 11px/1 var(--yazi-govde); color: var(--renk-metin-4); }

/* Bulunulan sayfa turuncu ve daha kalın */
.menu-oge.aktif > .menu-bag { color: var(--renk-turuncu); font-weight: 600; }
.menu-oge.aktif > .menu-bag .ok { color: var(--renk-turuncu); }

/* Alt menü */
.alt-menu {
  display: none;
  position: absolute; left: -16px; top: var(--ust-bar-h);
  min-width: 212px;
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi);
  border-top: 2px solid var(--renk-turuncu);
  border-radius: var(--yari-3);
  box-shadow: var(--golge-kart);
  padding: var(--bo-2);
  flex-direction: column;
}
.menu-oge:hover .alt-menu,
.menu-oge:focus-within .alt-menu { display: flex; }

.alt-menu a {
  font: 500 var(--p-mini)/1 var(--yazi-govde);
  color: var(--renk-koyu);
  padding: 12px;
  border-radius: var(--yari-3);
  white-space: nowrap;
}
.alt-menu a:hover { background: var(--renk-panel); color: var(--renk-turuncu); }

/* --- Sağdaki iki buton ---------------------------------------------------- */
.ust-eylem { display: flex; align-items: center; gap: var(--bo-5); flex: none; }

/* --- Hamburger (mobil) ---------------------------------------------------- */
.hamburger {
  display: none;
  width: var(--dokunma); height: var(--dokunma);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.hamburger span {
  width: 22px; height: 1.5px; background: var(--renk-koyu); display: block;
  transition: transform var(--gecis), opacity var(--gecis);
}
.hamburger span:last-child { width: 14px; }

/* --- Mobil açılır menü ---------------------------------------------------- */
.mobil-menu {
  display: none;
  position: fixed; inset: var(--ust-bar-h) 0 0;
  background: var(--renk-beyaz);
  overflow-y: auto;
  padding: var(--bo-7) var(--kenar) 120px;
  z-index: 40;
}
.mobil-menu.acik { display: block; }
body.menu-acik { overflow: hidden; }

.mobil-menu a,
.mobil-menu .mobil-baslik {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--dokunma);
  padding: var(--bo-4) 0;
  border-bottom: 1px solid var(--cizgi-8);
  font: 500 17px/1.3 var(--yazi-govde);
  width: 100%;
}
.mobil-menu .aktif > a,
.mobil-menu a.aktif { color: var(--renk-turuncu); font-weight: 600; }

.mobil-alt-liste { display: none; padding-left: var(--bo-5); }
.mobil-alt-liste.acik { display: block; }
.mobil-alt-liste a { font-size: 15px; color: var(--renk-metin-2); }

.mobil-menu-eylem { display: flex; flex-direction: column; gap: var(--bo-3); margin-top: var(--bo-7); }

/* --- Dar masaüstünde menü sığsın ------------------------------------------
   19 Ağu'da ölçüldü: 1366px'te "İletişim", 1280px'te ayrıca "Hakkımızda"
   sağdaki düğmelerin üstüne biniyordu (48px'e varan örtüşme). Menü yazıları
   nowrap, .ust-eylem ise flex:none — hiçbiri daralmadığı için taşan kısım
   düğmelerin üzerine geliyordu. İki kademeli çözüm:                        */

/* 1. kademe — boşluklar daralır, her şey görünmeye devam eder */
@media (max-width: 1400px) {
  .ust-bar   { gap: var(--bo-5); }
  .menu      { gap: var(--bo-5); }
  .ust-eylem { gap: var(--bo-3); }
}

/* 2. kademe — ikinci düğme çekilir. "Ücretsiz Keşif" kalkar, ana çağrı
   "Fotoğrafla Teklif Al" kalır; keşif düğmesi sayfa içinde ve mobil
   menüde durduğu için kaybolmuyor. */
@media (max-width: 1340px) {
  .ust-eylem .dugme-sade { display: none; }
}

@media (max-width: 1180px) {
  .menu, .ust-eylem { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 900px) {
  .ust-bant { display: none; }
}


/* ==========================================================================
   2. SAYFA BAŞLIĞI BANDI (alt sayfalar)
   ========================================================================== */

.sayfa-basi {
  background: var(--renk-panel);
  border-bottom: 1px solid var(--cizgi-8);
  padding-block: 38px;
}
.sayfa-basi .kapsa {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--bo-7);
}
.sayfa-basi h1 {
  font: 700 var(--p-h1-alt)/1.08 var(--yazi-baslik);
  letter-spacing: -.025em;
  color: var(--renk-koyu);
}
.kirinti { font: 400 var(--p-mini)/1.6 var(--yazi-govde); color: var(--renk-metin-4); }
.kirinti a:hover { color: var(--renk-turuncu); }

@media (max-width: 700px) {
  .sayfa-basi .kapsa { flex-direction: column; align-items: flex-start; gap: var(--bo-4); }
}


/* ==========================================================================
   3. ALT BİLGİ (footer)
   ========================================================================== */

.alt {
  background: var(--renk-koyu-2);
  color: var(--acik-metin);
  padding-block: 64px 30px;
}
.alt-ust {
  display: grid;
  /* 25 Ağu: "Ürün sayfaları" sütunu eklendi, 4 sütun 5'e çıktı. */
  grid-template-columns: 1.3fr 1fr 1fr 1.15fr 1.1fr;
  gap: 48px;
  margin-bottom: 44px;
}
.alt .logo-ad { color: var(--acik-metin); font-size: 24px; }
.alt .logo-alt { color: #6E6A63; padding-top: var(--bo-1); }
.alt p { max-width: 38ch; font: 400 var(--p-kucuk)/1.75 var(--yazi-govde); color: var(--acik-metin-50); }

.alt-sutun { display: flex; flex-direction: column; gap: var(--bo-4); }
.alt-sutun .etiket-gri { color: #6E6A63; }
.alt-sutun a,
.alt-sutun span:not(.etiket-gri) {
  font: 400 var(--p-kucuk)/1.6 var(--yazi-govde);
  color: var(--acik-metin-72);
}
.alt-sutun a:hover { color: var(--renk-turuncu); }
.alt-tel { font: 600 var(--p-govde-2)/1 var(--yazi-baslik) !important; color: var(--acik-metin) !important; }

/* Alt bilgideki WhatsApp düğmesi — rengi .dugme-whatsapp'tan gelir */
.alt-wa {
  align-self: flex-start;
  margin-top: var(--bo-1);
  color: var(--renk-koyu) !important;
  font: 700 var(--p-mini)/1 var(--yazi-baslik) !important;
}
.alt-wa:hover { color: var(--renk-koyu) !important; }

.alt-son {
  display: flex; justify-content: space-between; align-items: center; gap: var(--bo-5);
  border-top: 1px solid rgba(246, 243, 238, .1);
  padding-top: 24px;
  font: 400 var(--p-mini)/1.6 var(--yazi-govde);
  color: var(--acik-metin-40);
}
.alt-son a:hover { color: var(--acik-metin-72); }
/* Genis ekranda uc sutun: telif solda, yasal baglantilar tam ortada, imza sagda.
   Dar ekranda telif yazisi iki satira dusmesin diye bu hizalama uygulanmaz. */
@media (min-width: 1001px) {
  .alt-son > span:first-child { flex: 1 1 0; }
  .alt-son-orta { flex: 0 0 auto; text-align: center; }
  .alt-son-sag  { flex: 1 1 0; text-align: right; }
}

@media (max-width: 1000px) {
  .alt-ust { grid-template-columns: 1fr 1fr; gap: var(--bo-8); }
}
@media (max-width: 640px) {
  .alt-ust { grid-template-columns: 1fr; }
  .alt-son { flex-direction: column; align-items: flex-start; }
}


/* ==========================================================================
   4. MOBİL SABİT ALT ÇUBUK
   Tasarım: "ekranın altında her zaman görünen üç aksiyon"
   ========================================================================== */

.mobil-cubuk { display: none; }

@media (max-width: 900px) {
  .mobil-cubuk {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 62px;
    background: var(--renk-koyu);
    z-index: 45;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mobil-cubuk a {
    display: flex; align-items: center; justify-content: center;
    font: 600 var(--p-mini)/1 var(--yazi-baslik);
    color: var(--acik-metin);
  }
  .mobil-cubuk a:first-child {
    background: var(--renk-turuncu);
    color: #fff;
    font-weight: 700;
  }
  /* WhatsApp bağlantısı kendi yeşiliyle — yazı antrasit (beyaz okunmuyor) */
  .mobil-cubuk .cubuk-wa {
    background: var(--renk-wa);
    color: var(--renk-koyu);
    font-weight: 700;
    gap: var(--bo-2);
  }
  /* Alt çubuk içeriği kapatmasın */
  body { padding-bottom: 62px; }
}


/* ==========================================================================
   YUKARI ÇIK DÜĞMESİ
   Sayfa bir ekran boyu kaydırılınca belirir; sağ altta durur.
   ========================================================================== */

.yukari-cik {
  position: fixed;
  right: var(--bo-7);
  bottom: var(--bo-7);
  z-index: 44;                    /* mobil alt çubuğun (45) altında kalır */

  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;

  background: var(--renk-koyu);
  color: var(--acik-metin);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(20, 22, 26, .28);
  font: 400 20px/1 var(--yazi-govde);

  /* Görünürlük yalnızca sınıfla yönetilir.
     visibility: hidden düğmeyi klavye sırasından da çıkarır.

     TUZAK: visibility geçiş listesine süreyle konursa, düğme sınıfı alsa
     bile o süre boyunca gizli/tıklanamaz kalıyor. Doğrusu: görünürken
     gecikmesiz, gizlenirken solma bitince uygulanacak şekilde ayarlamak. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--gecis), transform var(--gecis),
              background var(--gecis), visibility 0s var(--gecis);
}
.yukari-cik.gorunur {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity var(--gecis), transform var(--gecis),
              background var(--gecis), visibility 0s;
}
.yukari-cik:hover { background: var(--renk-turuncu); }

@media (max-width: 900px) {
  /* Mobilde alttaki sabit çubuğun üstünde dursun */
  .yukari-cik { right: var(--bo-4); bottom: calc(62px + var(--bo-4)); width: 44px; height: 44px; }
}


/* ==========================================================================
   5. MODAL (teklif / keşif formu, ışık kutusu)
   ========================================================================== */

.modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 22, 26, .72);
  z-index: 60;
  padding: var(--bo-7);
  overflow-y: auto;
}
.modal.acik { display: flex; align-items: center; justify-content: center; }

.modal-kutu {
  background: var(--renk-beyaz);
  border-radius: var(--yari-3);
  box-shadow: var(--golge-panel);
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
}
.modal-kutu.genis { width: min(1080px, 100%); }

.modal-basi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-5);
  padding: var(--bo-7) var(--bo-8);
  border-bottom: 1px solid var(--cizgi-8);
}
.modal-govde { padding: var(--bo-8); display: flex; flex-direction: column; gap: var(--bo-6); }

/* Pencere adımı — boşluklar satır içi stille değil buradan verilir */
.modal-adim { display: flex; flex-direction: column; gap: var(--bo-5); }
.modal-adim-basi { display: flex; flex-direction: column; gap: var(--bo-2); }
.modal-adim-basi p { font-size: var(--p-kucuk); }

.modal-eylem {
  display: flex; gap: var(--bo-4); align-items: center;
  padding-top: var(--bo-5);
  border-top: 1px solid var(--cizgi);
}
/* Ana eylem sağda dursun; "Vazgeç" onun kadar yer kaplamasın */
.modal-eylem .dugme-birincil { margin-left: auto; }
@media (max-width: 480px) {
  .modal-eylem { flex-direction: column-reverse; align-items: stretch; }
  .modal-eylem .dugme-birincil { margin-left: 0; }
}
.modal-kapat {
  width: var(--dokunma); height: var(--dokunma);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--renk-metin-3);
  border-radius: var(--yari-3);
}
.modal-kapat:hover { background: var(--renk-panel); color: var(--renk-koyu); }

/* Adım göstergesi */
.adim-cizgi { height: 3px; background: var(--cizgi); }
.adim-cizgi > span { display: block; height: 3px; background: var(--renk-turuncu); transition: width .3s ease; }


/* ==========================================================================
   6. FORM ALANLARI
   ========================================================================== */

.alan { display: flex; flex-direction: column; gap: var(--bo-2); }
.alan > label { font: 500 var(--p-mini)/1 var(--yazi-govde); color: var(--renk-metin-2); }

.alan input,
.alan select,
.alan textarea {
  min-height: var(--dokunma);
  padding: 13px 14px;
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-3);
  font: 400 var(--p-govde-2)/1.4 var(--yazi-govde);
  width: 100%;
}
.alan input:focus,
.alan select:focus,
.alan textarea:focus { border-color: var(--renk-turuncu); outline: none; }
.alan textarea { min-height: 110px; resize: vertical; }

.alan-hata { color: var(--renk-hata); font: 400 12px/1.5 var(--yazi-govde); }
.alan input[aria-invalid="true"] { border-color: var(--renk-hata); }

/* Fotoğraf yükleme alanı */
.yukleme {
  border: 1.5px dashed var(--cizgi-16);
  background: var(--renk-panel);
  border-radius: var(--yari-3);
  padding: 32px 20px;
  display: flex; flex-direction: column; align-items: center; gap: var(--bo-2);
  text-align: center;
  cursor: pointer;
}
.yukleme:hover { border-color: var(--renk-turuncu); background: var(--renk-vurgu-zemin); }
.yukleme b { font: 700 var(--p-govde-2)/1 var(--yazi-baslik); }
.yukleme small { font: 400 12px/1.5 var(--yazi-govde); color: var(--renk-metin-3); }

/* --- Fotoğraf yükleme alanı (ortak) ---------------------------------------
   Hem penceredeki hızlı teklif formu hem teklif sayfası bunu kullanır.
   Bu yüzden teklif.css'te değil burada: pencere her sayfada var.        */

.yukleme-alani {
  display: flex; flex-direction: column; align-items: center; gap: var(--bo-3);
  padding: var(--bo-9) var(--bo-6);
  background: var(--renk-panel);
  border: 2px dashed var(--cizgi-20);
  border-radius: var(--yari-3);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--gecis), background var(--gecis);
}
.yukleme-alani:hover,
.yukleme-alani.uzerinde { border-color: var(--renk-turuncu); background: var(--renk-vurgu-zemin); }
.yukleme-alani:focus-within { outline: 2px solid var(--renk-turuncu); outline-offset: 2px; }

.yukleme-simge { color: var(--renk-turuncu); }
.yukleme-simge svg { width: 32px; height: 32px; display: block; }
.yukleme-yazi { font: 400 var(--p-govde-2)/1.5 var(--yazi-govde); color: var(--renk-metin-2); }
.yukleme-yazi b { color: var(--renk-koyu); }
.yukleme-alt { font: 400 var(--p-mini)/1.4 var(--yazi-govde); color: var(--renk-metin-3); }

.yukleme-sayac:empty { display: none; }
.yukleme-sayac {
  font: 500 var(--p-mini)/1 var(--yazi-govde);
  color: var(--renk-metin-2);
}

/* Önizleme — her fotoğrafın kendi kaldırma düğmesi var */
.yukleme-onizleme {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--bo-3);
}
.yukleme-parca { position: relative; }
.yukleme-parca img {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--yari-3);
  border: 1px solid var(--cizgi);
  display: block;
}
.yukleme-sil {
  position: absolute; top: 5px; right: 5px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: rgba(20, 22, 26, .72);
  color: #fff;
  border-radius: 50%;
  font: 700 15px/1 var(--yazi-govde);
  cursor: pointer;
  transition: background var(--gecis);
}
.yukleme-sil:hover { background: var(--renk-hata); }
.yukleme-sil:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }


/* --- Form durumu ve bot tuzağı --------------------------------------------
   ⚠ BAL KÜPÜ: ziyaretçinin göremediği alan. display:none KULLANILMAZ —
     bazı botlar gizli alanları atlar, konumlandırarak saklamak daha etkili.
     Ekran okuyucular aria-hidden ve tabindex="-1" sayesinde atlar.       */

.bal-kupu {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form-durum:empty { display: none; }
.form-durum {
  padding: 12px 14px;
  border-radius: var(--yari-3);
  font: 500 var(--p-mini)/1.5 var(--yazi-govde);
  border: 1px solid;
}
.form-durum.hata { background: #FCECEA; border-color: #EFB3AC; color: #8C2A1E; }

.form-tesekkur {
  display: flex; flex-direction: column; gap: var(--bo-2);
  padding: 28px 22px;
  text-align: center;
  background: var(--renk-panel);
  border-radius: var(--yari-3);
}
.form-tesekkur b { font: 700 var(--p-govde)/1.2 var(--yazi-baslik); }
.form-tesekkur span { font: 400 var(--p-kucuk)/1.6 var(--yazi-govde); color: var(--renk-metin-2); }


/* ==========================================================================
   7. KARTLAR
   ========================================================================== */

/* --- Proje kartı ---------------------------------------------------------- */

/* Fotoğraflar SADECE YATAY görünür: kutu sabit 3:2 oranında, dikey fotoğraf
   ortasından kırpılarak yatay hâle gelir (kullanıcı kararı, 18 Ağu).
   Böylece bütün kartlar aynı boyda ve aynı şekilde durur. */
.proje-kart {
  display: flex; flex-direction: column; gap: var(--bo-6);
  width: 480px;
}

.proje-gorsel {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--yari-3);
  overflow: hidden;
}

/* ⚠ gorsel() her fotoğrafı <picture> içine koyuyor; `> img` yazılırsa kural
   img'ye HİÇ ulaşmaz ve fotoğraf kendi doğal boyutunda kalır. Torun seçici
   kullanılmalı — kartlardaki yükseklik uyuşmazlığı tam bu yüzden çıkmıştı. */
.proje-gorsel picture,
.proje-gorsel > .gorsel-yer,
.proje-gorsel img {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  border-radius: 0;
  object-fit: cover;
  transition: transform .5s ease;
}

.proje-kart:hover .proje-gorsel img { transform: scale(1.03); }

.proje-bilgi { display: flex; flex-direction: column; gap: var(--bo-2); align-items: flex-start; }
.proje-satir { display: flex; gap: var(--bo-3); align-items: center; }
.proje-bilgi .bag-ok { margin-top: var(--bo-2); font-size: var(--p-mini); }
.proje-kart .yer  { font: 600 var(--p-etiket)/1 var(--yazi-mono); letter-spacing: .14em; color: var(--renk-turuncu); }
.proje-kart .ilce { font: 400 12px/1 var(--yazi-govde); color: var(--renk-metin-4); }
.proje-kart h3 { font: 600 21px/1.25 var(--yazi-baslik); }
.proje-kart h3 a:hover { color: var(--renk-turuncu); }
.proje-kart p { font: 400 var(--p-kucuk)/1.7 var(--yazi-govde); color: var(--renk-metin-2); max-width: 44ch; }

/* Filtre dışında kalan kartlar */
.proje-kart[hidden] { display: none; }

/* --- Proje şeridi araçları ------------------------------------------------ */

/* Filtreler ve oklar başlıkla aynı satırda dursun (tasarımdaki gibi).
   Geniş ekranda sarmaz; dar ekranda alta iner. */
/* ⚠ Seçici bilerek iki sınıflı: temel.css'teki `.bolum-basi > div` kuralı
   bütün başlık kutularını ALT ALTA diziyor (flex-direction: column) ve
   özgüllüğü daha yüksek. O yüzden oklar filtrelerin altına düşüyordu;
   burada yan yana olmaya zorlanıyor. */
.proje-serit-basi .proje-araclar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--bo-2);
  flex: none;
}
.proje-filtre  { display: flex; gap: var(--bo-2); }

/* Başlık, araçlara yer açmak için gerekirse daralsın */
.proje-serit-basi > div:first-child { min-width: 0; flex: 1 1 auto; }
.proje-serit-basi .h2 { max-width: 22ch; }

/* Dar ekranda filtreler alt satıra sarılabilir ama OKLAR HEP FİLTRELERİN
   SAĞINDA kalır. Eskiden araçlar bütün olarak sarıldığı için oklar filtrelerin
   altına düşüyor, ayrı bir satır gibi duruyordu. */
@media (max-width: 1240px) {
  .proje-serit-basi .proje-araclar { flex-wrap: nowrap; align-items: flex-start; }
  .proje-filtre  { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .serit-oklar   { flex: none; }
}

/* Seçili filtre koyu dolgu (tasarımdaki "Tümü" düğmesi gibi) */
.proje-filtre .cip.secili {
  background: var(--renk-koyu);
  border-color: var(--renk-koyu);
  color: var(--acik-metin);
}

.serit-oklar { display: flex; gap: var(--bo-2); margin-left: var(--bo-2); }
.serit-ok {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--cizgi-20);
  border-radius: var(--yari-3);
  font: 600 15px/1 var(--yazi-baslik);
  transition: background var(--gecis), color var(--gecis);
}
.serit-ok:hover { background: var(--renk-koyu); color: var(--acik-metin); }
.serit-ok[disabled] { opacity: .35; cursor: default; }
.serit-ok[disabled]:hover { background: none; color: inherit; }

.proje-serit { gap: var(--bo-7); margin-bottom: var(--bo-8); }
.serit-bos { padding: var(--bo-9); color: var(--renk-metin-3); font-size: var(--p-kucuk); }

@media (max-width: 900px) {
  .proje-kart { width: 82vw; max-width: 340px; }
  /* Mobilde de ayni 3:2 oran — sabit yukseklik orani bozardi */
  .serit-oklar { display: none; }        /* mobilde parmakla kaydırılıyor */
}

/* Hizmet satırı */
.hizmet-satir {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bo-7);
  padding: var(--bo-7) 0;
  border-bottom: 1px solid var(--cizgi-8);
}
.hizmet-satir h3 { font: 600 var(--p-h3)/1.3 var(--yazi-baslik); }
.hizmet-satir:hover h3 { color: var(--renk-turuncu); }

/* Malzeme / kapak modeli kutusu */
.malzeme-kutu { display: flex; flex-direction: column; gap: var(--bo-3); }
.malzeme-kutu .gorsel-yer { aspect-ratio: 1; }
.malzeme-kutu span { font: 500 var(--p-mini)/1.4 var(--yazi-govde); }

/* Video kartı
   ⚠ Oynat düğmesinin stili SADECE sayfalar.css'te (.video-kapak .oynat).
   Burada da bir tanım vardı; ikisi çakışıyordu: buradaki "inset: 0 + margin:
   auto" miras kalıp, oradaki "left/top: 50%" ile birleşince düğme ortaya
   değil sağ yarının ortasına oturuyordu. Tek yerde durmalı. */
.video-kart { display: flex; flex-direction: column; gap: var(--bo-3); }
.video-kart .gorsel-yer { aspect-ratio: 16 / 9; }

/* Süreç adımı */
.adim-kart {
  background: var(--renk-beyaz);
  padding: var(--bo-6);
  border-radius: var(--yari-3);
  display: flex; flex-direction: column; gap: var(--bo-1);
}
.adim-kart .no { font: 700 22px/1 var(--yazi-baslik); color: var(--renk-koyu); }
.adim-kart.aktif .no { color: var(--renk-turuncu); }
.adim-kart b { font: 600 var(--p-govde-2)/1.3 var(--yazi-baslik); }
.adim-kart p { font: 400 var(--p-mini)/1.6 var(--yazi-govde); color: var(--renk-metin-2); }

/* ==========================================================================
   ÖNCESİ / SONRASI SÜRGÜSÜ
   ========================================================================== */

.once-sonra {
  position: relative;
  overflow: hidden;
  border-radius: var(--yari-3);
  height: 560px;
  background: #DED7CC;
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;          /* dikey kaydırma sayfaya kalsın */
  margin-bottom: var(--bo-9);
}

.once-sonra .kat { position: absolute; inset: 0; }

/* Hem yer tutucu hem <picture> hem de içindeki <img> alanı tam doldurur.
   picture'ı atlarsak görsel kendi boyutunda kalır ve kutuyu taşırır. */
.once-sonra .kat > *,
.once-sonra .kat picture,
.once-sonra .kat img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

/* Sonrası katmanı, sürgünün sağında kalan kısmı gösterir */
.once-sonra .kat-sonra { clip-path: inset(0 0 0 var(--pos, 52%)); }

/* Sonrası yer tutucusu öncekinden ayırt edilsin diye daha açık */
.once-sonra .gorsel-yer.acik {
  background: repeating-linear-gradient(135deg, #EDE7DD 0 12px, #E4DDD1 12px 24px);
}

.once-sonra .tutamac {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 52%);
  width: 2px; background: var(--renk-beyaz);
  box-shadow: 0 0 0 1px rgba(20, 22, 26, .12);
}
.once-sonra .tutamac-daire {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--renk-beyaz);
  box-shadow: 0 8px 24px rgba(20, 22, 26, .28);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  font: 700 13px/1 var(--yazi-baslik);
  color: var(--renk-koyu);
}
.once-sonra .tutamac:focus-visible { outline: 2px solid var(--renk-turuncu); outline-offset: 2px; }

.once-sonra .rozet-once,
.once-sonra .rozet-sonra {
  position: absolute; top: 24px;
  font: 700 12px/1 var(--yazi-baslik);
  letter-spacing: .18em;
  padding: 11px 15px;
  border-radius: var(--yari-3);
}
.once-sonra .rozet-once  { left: 24px;  background: rgba(255, 255, 255, .86); color: var(--renk-koyu); }
.once-sonra .rozet-sonra { right: 24px; background: var(--renk-turuncu);      color: #fff; }

/* Sol altta mekân adı ve kısa bilgi */
.once-sonra .os-etiket {
  position: absolute; left: 24px; bottom: 24px;
  display: flex; gap: var(--bo-2); flex-wrap: wrap;
}
.once-sonra .os-etiket span {
  font: 600 12px/1 var(--yazi-govde);
  color: var(--renk-koyu);
  background: rgba(255, 255, 255, .9);
  padding: 10px 14px;
  border-radius: var(--yari-2);
}

/* --- Alttaki küçük seçim görselleri --------------------------------------- */

.os-secim { display: flex; flex-direction: column; gap: var(--bo-5); }

.os-secim-basi {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--bo-4); flex-wrap: wrap;
}

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

/* --- Beşten fazla dönüşüm varsa şerit yatay kayar --------------------------
   Kartlar alt satıra düşüp bölümü uzatmasın. Beş tanesi ekrana tam oturur,
   altıncı kenardan görünerek "devamı var" hissini verir.                  */
.os-secim-kayar .os-kucukler {
  display: flex;
  overflow-x: auto;
  /* proximity, mandatory değil: mandatory her kartta zorla yapıştırdığı için
     fareyle sürüklerken hareket kesik kesik hissediliyordu. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;                 /* çubuk gizli — gezinme oklarla */
  padding-bottom: 2px;                   /* odak halkası kırpılmasın */
}
.os-secim-kayar .os-kucukler::-webkit-scrollbar { display: none; }

.os-secim-kayar .os-kucuk {
  flex: 0 0 calc((100% - 4 * var(--bo-5)) / 5);
  scroll-snap-align: start;
}

.os-kucuk {
  display: flex; flex-direction: column; gap: 9px;
  text-align: left;
  padding: 0;
}
.os-kucuk-gorsel {
  position: relative;
  display: block;
  height: 118px;
  border-radius: var(--yari-2);
  overflow: hidden;
  outline: 2px solid transparent;
  outline-offset: -3px;
  transition: outline-color var(--gecis);
}
.os-kucuk-gorsel > .gorsel-yer,
.os-kucuk-gorsel picture,
.os-kucuk-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }

.os-kucuk:hover .os-kucuk-gorsel   { outline-color: var(--cizgi-20); }
.os-kucuk.secili .os-kucuk-gorsel  { outline-color: var(--renk-turuncu); }

.os-rozet {
  position: absolute; left: 10px; top: 10px;
  font: 700 9px/1 var(--yazi-baslik);
  letter-spacing: .14em;
  background: rgba(255, 255, 255, .9);
  color: var(--renk-koyu);
  padding: 6px 8px;
  border-radius: var(--yari-2);
}
.os-kucuk.secili .os-rozet { background: var(--renk-turuncu); color: #fff; }

.os-kucuk-ad   { font: 600 var(--p-mini)/1.35 var(--yazi-baslik); color: var(--renk-koyu); }
.os-kucuk-meta { font: 400 12px/1.35 var(--yazi-govde); color: var(--renk-metin-4); }

@media (max-width: 900px) {
  .once-sonra { height: 340px; }
  .once-sonra .tutamac-daire { width: var(--dokunma); height: var(--dokunma); font-size: 11px; }
  .once-sonra .rozet-once, .once-sonra .rozet-sonra { top: 14px; font-size: 10px; padding: 8px 11px; }
  .once-sonra .rozet-once { left: 14px; } .once-sonra .rozet-sonra { right: 14px; }
  .once-sonra .os-etiket { left: 14px; bottom: 14px; }
  .os-kucukler { grid-template-columns: repeat(2, 1fr); gap: var(--bo-4); }
  .os-kucuk-gorsel { height: 96px; }

  /* Telefonda iki kart tam, üçüncüsü yarım görünür — kaydırılacağı belli olur */
  .os-secim-kayar .os-kucuk { flex: 0 0 calc((100% - 1.6 * var(--bo-4)) / 2.4); }
}

/* ==========================================================================
   FOTOĞRAF GALERİSİ + IŞIK KUTUSU
   ========================================================================== */

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

.galeri-goz {
  position: relative;
  display: block;
  padding: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--yari-3);
  overflow: hidden;
  cursor: zoom-in;
}
.galeri-goz picture,
.galeri-goz img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.galeri-goz:hover img { transform: scale(1.05); }

/* --- Fotoğraf kodu (kapı modelleri) — 20 Ağu ------------------------------
   Ziyaretçi beğendiği kapının kodunu görüp telefonda söyleyebilsin.
   Yalnızca panelden açıklama girilmiş fotoğraflarda basılır.            */

.galeri-kod {
  position: absolute;
  left: 8px; bottom: 8px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(20, 22, 26, .74);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #fff;
  font: 600 11px/1.2 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .04em;
  pointer-events: none;        /* tıklama fotoğrafa gitsin */
  white-space: nowrap;
}

/* Model adı — kodun yanında, fotoğrafın alt şeridinde.
   Panelden "LK-042 · Ceviz desenli" yazılınca çıkar; ad girilmemişse
   yalnız kod görünür (20 Ağu). */
.galeri-ad {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  z-index: 2;
  padding: 4px 9px 4px 74px;      /* kod rozetinin yanından başlar */
  border-radius: 999px;
  background: rgba(20, 22, 26, .62);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: #F6F3EE;
  font: 500 11px/1.4 var(--yazi-govde);
  text-align: left;
  pointer-events: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 700px) {
  .galeri-kod { left: 6px; bottom: 6px; padding: 3px 7px; font-size: 10px; }
  .galeri-ad  { left: 6px; right: 6px; bottom: 6px; padding-left: 62px; font-size: 10px; }
}

/* --- SERBEST ORANLI GALERİ (hizalı / justified) ----------------------------
   20 Ağustos. Önce 4:3 kutuya kırpılıyordu (bir projenin 11 fotoğrafının
   10'u DİKEY, hepsinin üstü altı kesiliyordu). Sonra masonry denendi ama
   sütunlar farklı yerlerde bitip "alttan sarkıyordu".

   Şimdi HİZALI ızgara: her satır kapsayıcının tam genişliğini doldurur ve
   satırdaki fotoğraflar aynı yüksekliktedir; genişlikleri kendi oranlarına
   göre değişir. Böylece dikey fotoğraf dikey kalır, hiçbir şey kırpılmaz
   ve ızgaranın alt kenarı düz biter — tek bir blok gibi görünür.

   Satır hesabını site.js yapar (14. bölüm): her kutuya piksel genişlik ve
   yükseklik yazar.

   ⚠ JavaScript kapalıysa: kutular dörtlü sıralar hâlinde, kendi oranlarında
     ve kırpılmadan akar — satırlar tam hizalanmaz ama düzen bozulmaz.     */

.galeri.serbest {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.galeri.serbest .galeri-goz {
  aspect-ratio: auto;
  flex: 0 0 auto;
  /* JS yoksa kabaca dörtlü sıra; JS gelince piksel değer üzerine yazılır */
  width: calc(25% - 11px);
  background: var(--renk-panel, #F6F3EE);
}

/* gorsel() <picture> üretiyor; "> img" ona ulaşamıyor — ikisi de sıfırlanır */
.galeri.serbest .galeri-goz picture {
  position: static;
  display: block;
  width: 100%; height: 100%;
}
.galeri.serbest .galeri-goz img {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

/* --- Işık kutusu ---------------------------------------------------------- */

/* Işık kutusu stilleri assets/css/isik-kutusu.css dosyasında — panel de
   aynı dosyayı yüklüyor, bu yüzden ortak bir yere alındı. */


/* ==========================================================================
   ÜRÜN ORTAKLARI — kayan logo bandı (alt bilginin üstünde)
   ========================================================================== */

.marka-bant {
  background: var(--renk-beyaz);
  padding-block: var(--bo-5) var(--bo-6);   /* bant bilerek ince tutuldu */
}

/* Başlık şeridin dışında, üstünde ve ortada durur */
.marka-baslik {
  display: block;
  text-align: center;
  margin-bottom: var(--bo-4);
}

/* Ayırıcı çizgi başlığın altında — bant başlıktan ayrışsın */
.logo-bandi {
  overflow: hidden;
  border-top: 1px solid var(--cizgi-8);
  padding-top: var(--bo-5);
}

.logo-bandi ul {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: logoKay 42s linear infinite;
}

/* Fareyle üstüne gelince durur — okumak isteyen durdurabilsin */
.logo-bandi:hover ul { animation-play-state: paused; }

.logo-bandi li { flex: none; }

.logo-bandi picture,
.logo-bandi img {
  display: block;
  height: 48px;          /* markalar kendi renkleriyle ve okunur boyutta */
  width: auto;
  transition: transform var(--gecis);
}
.logo-bandi li:hover img { transform: scale(1.06); }

@media (max-width: 900px) {
  .marka-bant { padding-block: var(--bo-4) var(--bo-5); }
  .logo-bandi ul { gap: 44px; animation-duration: 30s; }
  .logo-bandi img { height: 34px; }
}

/* Hareket azaltma tercihi: şerit durur, logolar sabit dizilir */
@media (prefers-reduced-motion: reduce) {
  .logo-bandi { overflow-x: auto; }
  .logo-bandi ul { animation: none; }
}

@keyframes logoKay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes arteYuksel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }


/* --- Ana sayfa: malzeme kartları -----------------------------------------
   Her kart bir koleksiyonun kendi sayfasına gider.
   Eskiden burada 11 küçük kutu vardı ve bölüm sayfanın üçte birini yiyordu.

   ⚠ 27 Ağu: ızgara (grid) YERİNE yatay şerit. Koleksiyon sayısı artıyor
     (parke eklendi, yenileri gelecek) ve üçlü ızgarada dördüncü kart tek
     başına alt satıra düşüyordu. Şerit sayıdan bağımsız çalışır: sığdığı
     kadarı görünür, gerisi kaydırılır. Bilgisayarda fareyle sürükleme
     site.js'teki genel kuraldan gelir, ayrıca ok düğmeleri var.           */
.malzeme-kartlar {
  display: flex;
  gap: var(--bo-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: var(--bo-3);
  /* Alttaki bağlantıyla arasında nefes payı — öteki bölümlerdeki gibi */
  margin-bottom: var(--bo-8);
}

/* Geniş ekranda dört kart tam sığar; beşinci koleksiyon eklenince şerit
   kendiliğinden kaymaya başlar ve oklar belirir. */
.malzeme-kart {
  flex: 0 0 calc((100% - 3 * var(--bo-6)) / 4);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi);
  border-radius: var(--yari-3);
  overflow: hidden;
  transition: border-color var(--gecis), transform var(--gecis);
}
.malzeme-kart:hover { border-color: var(--renk-turuncu); }
.malzeme-kart:hover .malzeme-kart-ad { color: var(--renk-turuncu); }

/* 4:3 — kapak ve kapı fotoğrafları dikeye yakın; şerit kutuda içerik kayboluyordu */
.malzeme-kart-gorsel {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  background: var(--renk-panel);
}
.malzeme-kart-gorsel > .gorsel-yer,
.malzeme-kart-gorsel picture,
.malzeme-kart-gorsel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 0; object-fit: cover;
}

.malzeme-kart-govde {
  display: flex; flex-direction: column; gap: var(--bo-3);
  padding: var(--bo-6);
}
.malzeme-kart-ad {
  font: 600 18px/1.3 var(--yazi-baslik);
  color: var(--renk-koyu);
  transition: color var(--gecis);
}
.malzeme-kart-metin {
  font: 400 var(--p-mini)/1.6 var(--yazi-govde);
  color: var(--renk-metin-2);
  flex: 1 1 auto;
}
.malzeme-kart .bag-ok { margin-top: var(--bo-1); font-size: var(--p-mini); }

/* Dar ekranda kart sayısı azalır; son kartın bir parçası bilerek görünür
   kalır ("daha var" işareti) — yoksa şeridin devamı fark edilmiyor. */
@media (max-width: 1100px) {
  .malzeme-kart { flex-basis: calc((100% - 2 * var(--bo-6)) / 3); }
}
@media (max-width: 860px) {
  .malzeme-kart { flex-basis: calc((100% - 1.2 * var(--bo-6)) / 2.2); }
}
@media (max-width: 560px) {
  .malzeme-kart { flex-basis: calc((100% - 0.15 * var(--bo-6)) / 1.15); }
}

/* Başlık satırındaki ipucu yazısı ile oklar yan yana dursun.
   ⚠ Seçici bilerek iki sınıflı: temel.css'teki `.bolum-basi > div` kuralı
     bütün başlık kutularını ALT ALTA diziyor ve özgüllüğü daha yüksek. */
.malzeme-serit-basi .malzeme-araclar {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--bo-5);
  flex: none;
}
.malzeme-serit-basi .malzeme-araclar p { margin: 0; }

/* Kaydıracak bir şey yoksa oklar hiç görünmesin (site.js karar verir).
   ⚠ `.serit-oklar` display:flex olduğu için `hidden` tek başına yetmiyor. */
.serit-oklar[hidden] { display: none; }


/* --- Malzeme bölümü alt boşluk ------------------------------------------
   Bölümün 76px alt dolgusu + video bölümünün 76px üst dolgusu üst üste
   gelince 152px oluyordu ve kullanıcı bunu "çok büyük" buldu. Bu bölümde
   son öge küçük bir düğme olduğu için boşluk daha da çıplak duruyor;
   alt dolgu yarıya indirildi (malzeme bolumu alt bosluk). */
/* Alt boşluk yalnız ARDINDAN video bölümü geldiğinde sıfırlanır.
   Video panelden kapatılınca .alt-bosluk-var gelir ve normal dolgu döner —
   yoksa Malzemeler bölümü doğrudan blog şeridine yapışıyordu (19 Ağu). */
#malzemeler.bolum { padding-bottom: 0; }
#malzemeler.bolum.alt-bosluk-var { padding-bottom: var(--bolum-y); }

/* Kartlarla düğme arası da sıkılaştırıldı */
.malzeme-kartlar { margin-bottom: var(--bo-6); }

/* --- Ana sayfada iki panel bölüm yan yana geldiğinde ---------------------
   Malzemeler ve Video bölümlerinin ikisi birden panelden kapatılırsa
   "Hizmetler" ile "Tadilat rehberi" arka arkaya geliyor. İkisinin de
   zemini aynı olduğu için aralarında çift dolgulu bir dikiş izi kalıyordu;
   alttakinin üst dolgusu kaldırılınca tek bir bölüm gibi duruyor. */
#rehber.bolum.ust-bosluk-yok { padding-top: 0; }

/* --- Sıkça sorulan sorular (SSS) -----------------------------------------
   26 Ağu'da eklendi. <details> kullanıldı: JavaScript kapalı olsa da
   açılıp kapanır, ekran okuyucular da doğru okur. */
.sss-liste { display: flex; flex-direction: column; gap: 0; max-width: 78ch; }

.sss-oge {
  border-bottom: 1px solid var(--cizgi);
  padding: var(--bo-5) 0;
}
.sss-oge:first-child { border-top: 1px solid var(--cizgi); }

.sss-oge > summary {
  display: flex; align-items: flex-start; gap: var(--bo-4);
  cursor: pointer;
  list-style: none;
  font: 600 var(--p-govde-1)/1.5 var(--yazi-baslik);
  color: var(--renk-koyu);
}
.sss-oge > summary::-webkit-details-marker { display: none; }

/* Açılır ok — açıkken döner */
.sss-oge > summary::after {
  content: '+';
  margin-left: auto;
  font: 400 22px/1 var(--yazi-govde);
  color: var(--renk-turuncu);
  transition: transform .18s ease;
}
.sss-oge[open] > summary::after { content: '−'; }

.sss-oge > summary:hover { color: var(--renk-turuncu); }

.sss-cevap {
  padding-top: var(--bo-4);
  max-width: 68ch;
  font: 400 var(--p-govde-2)/1.75 var(--yazi-govde);
  color: var(--renk-metin-2);
}

@media (max-width: 600px) {
  .sss-oge { padding: var(--bo-4) 0; }
}

/* --- Sosyal medya simgeleri (alt bilgi) ----------------------------------
   26 Ağu'da eklendi. Simgeler satır içi SVG; renk currentColor ile gelir,
   böylece koyu alt bilgide tek yerden yönetilir. */
.sosyal {
  display: flex;
  gap: 10px;
  margin-top: var(--bo-5);
}

.alt-sutun .sosyal-bag,
.sosyal-bag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(246, 243, 238, .18);
  color: var(--acik-metin-72);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}

/* ⚠ ÖZGÜLLÜK TUZAĞI (26 Ağu): yukarıda `.alt-sutun a:hover` kuralı var ve
   rengi TURUNCU yapıyor. Özgüllüğü (0-2-1) benim `.sosyal-bag:hover`
   kuralımdan (0-2-0) yüksek olduğu için onu eziyordu: zemin turuncu +
   simge turuncu = fare üstüne gelince SİMGE KAYBOLUYORDU.
   Çözüm: seçiciye `.alt-sutun` eklendi (0-3-0), artık bu kural kazanıyor. */
.alt-sutun .sosyal-bag:hover,
.alt-sutun .sosyal-bag:focus-visible {
  color: var(--renk-koyu);
  background: var(--renk-turuncu);
  border-color: var(--renk-turuncu);
}

/* Klavyeyle gezenler için görünür odak halkası */
.sosyal-bag:focus-visible {
  outline: 2px solid var(--acik-metin);
  outline-offset: 2px;
}

@media (max-width: 700px) {
  .sosyal { gap: 8px; }
  .sosyal-bag { width: 40px; height: 40px; }   /* parmakla basılabilir boy */
}

/* --- ÜÇÜNCÜ SEVİYE MENÜ (Mobilya → Dolap → yana açılan liste) ------------
   26 Ağu'da eklendi. Alt menüdeki bir başlığın kendi listesi varsa, üstüne
   gelince SAĞA doğru açılır. */
.alt-oge { position: relative; display: flex; flex-direction: column; }

/* Üst satır: adı solda, "›" oku sağda */
.alt-menu .alt-bag-ust {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bo-4);
}
.alt-bag-ust .ok-yan {
  font: 400 15px/1 var(--yazi-govde);
  color: var(--renk-metin-4);
  transition: transform .16s ease, color .16s ease;
}
.alt-oge:hover .ok-yan,
.alt-oge:focus-within .ok-yan { color: var(--renk-turuncu); transform: translateX(2px); }

.alt-menu-2 {
  display: none;
  position: absolute;
  left: calc(100% + 6px);
  top: -8px;
  min-width: 214px;
  background: var(--renk-beyaz);
  border: 1px solid var(--cizgi);
  border-top: 2px solid var(--renk-turuncu);
  border-radius: var(--yari-3);
  box-shadow: var(--golge-kart);
  padding: var(--bo-2);
  flex-direction: column;
  z-index: 2;
}
.alt-oge:hover .alt-menu-2,
.alt-oge:focus-within .alt-menu-2 { display: flex; }

/* ⚠ Fare, ana listeyle yan liste arasındaki 6px boşluktan geçerken menü
   kapanmasın diye görünmez bir köprü bırakılır. */
.alt-menu-2::before {
  content: '';
  position: absolute;
  left: -10px; top: 0; bottom: 0; width: 10px;
}

/* Ekranın sağına sığmazsa sola açılır */
@media (max-width: 1180px) {
  .alt-menu-2 { left: auto; right: calc(100% + 6px); }
  .alt-menu-2::before { left: auto; right: -10px; }
}

/* Telefon: yana açılma yok, girintili liste.
   ⚠ TUZAK (26 Ağu): `.mobil-menu a` kuralı `justify-content: space-between`
     kullanıyor. Eklediğim "—" işareti ilk flex ögesi olunca yazıyı sağ uca
     itti, satırlar ekrandan taştı. Bu yüzden burada hizalama BAŞA alınıyor
     ve tire ile yazı arasına gap konuyor. */
.mobil-alt-liste .mobil-alt-2 {
  justify-content: flex-start;
  gap: 8px;
  padding-left: var(--bo-5);
  font-size: 14px;
  color: var(--renk-metin-3);
}
.mobil-alt-liste .mobil-alt-2::before {
  content: '—';
  flex: none;
  color: var(--renk-turuncu);
}