/* ==========================================================================
   HOMSEN MİMARLIK — ÖZEL TASARIM MOBİLYA
   --------------------------------------------------------------------------
   Mevcut tasarım sisteminin değişkenlerini (css/style.css) kullanır,
   yeni bir renk, font veya boşluk dili tanımlamaz.
   ========================================================================== */

/* ---------- MASONRY IZGARA ---------- */
.mob-izgara{
  column-count:3;
  column-gap:22px;
}
.mob-izgara.genis{ column-count:2; column-gap:28px; }

@media (max-width:1024px){
  .mob-izgara{column-count:2;}
}
@media (max-width:680px){
  .mob-izgara, .mob-izgara.genis{column-count:1; column-gap:0;}
}

/* ---------- KART ---------- */
.mob-kart{
  position:relative; display:block; width:100%;
  break-inside:avoid; margin:0 0 22px;
  padding:0; border:0; background:var(--grej);
  overflow:hidden; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit; text-decoration:none;
}
.mob-izgara.genis .mob-kart{margin-bottom:28px;}
@media (max-width:680px){ .mob-kart{margin-bottom:16px;} }

.mob-kart-medya{display:block; overflow:hidden;}
.mob-kart-medya img{
  width:100%; height:auto; display:block;
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
}
.mob-kart:hover .mob-kart-medya img{transform:scale(1.035);}

.mob-kart-perde{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(16,15,13,.72) 0%, rgba(16,15,13,.12) 42%, transparent 70%);
  opacity:0; transition:opacity 600ms cubic-bezier(.22,.61,.36,1);
}
.mob-kart:hover .mob-kart-perde,
.mob-kart:focus-visible .mob-kart-perde{opacity:1;}

.mob-kart-yazi{
  position:absolute; left:26px; right:26px; bottom:24px; color:#fff;
  opacity:0; transform:translateY(10px);
  transition:opacity 600ms cubic-bezier(.22,.61,.36,1),
             transform 700ms cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}
.mob-kart:hover .mob-kart-yazi,
.mob-kart:focus-visible .mob-kart-yazi{opacity:1; transform:none;}
.mob-kart-yazi h3{
  color:#fff; font-size:1.45rem; font-weight:300; line-height:1.2; margin:0 0 10px;
}
.mob-git{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.76rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.mob-git em{font-style:normal; transition:transform var(--gecis);}
.mob-kart:hover .mob-git em{transform:translateX(5px);}

/* Dokunmatik cihazlarda hover yok — yazı her zaman görünsün */
@media (hover:none){
  .mob-kart-perde{opacity:1;}
  .mob-kart-yazi{opacity:1; transform:none;}
}
@media (max-width:680px){
  .mob-kart-yazi{left:20px; right:20px; bottom:18px;}
  .mob-kart-yazi h3{font-size:1.25rem;}
}

/* ---------- ANA SAYFA VİTRİN BAŞLIĞI ---------- */
.mob-vitrin{background:var(--traverten);}
.mob-vitrin .bolum-basi h2{max-width:16ch;}

/* ---------- MOBİLYA SAYFASI: ÜST BÖLÜM ---------- */
.mob-ust{
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(201,188,166,.14) 0%, transparent 56%),
    radial-gradient(90% 70% at 8% 94%, rgba(110,37,50,.18) 0%, transparent 60%),
    var(--siyah);
  color:var(--grej);
}
.mob-ust-ic{padding:158px 0 86px;}
.mob-yol{font-size:.8rem; color:rgba(255,255,255,.55); margin-bottom:28px;}
.mob-yol a{text-decoration:none; transition:color var(--gecis);}
.mob-yol a:hover{color:#fff;}
.mob-yol span{margin:0 8px; color:rgba(255,255,255,.3);}
.mob-yol strong{color:rgba(255,255,255,.88); font-weight:400;}
.mob-ust .etiket{
  font-size:.78rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--bordo-acik); display:block; margin-bottom:18px;
}
.mob-ust h1{
  color:#fff; font-size:clamp(2.2rem,5.2vw,4.2rem); line-height:1.08;
  font-weight:300; max-width:17ch;
}
.mob-ust p{
  color:rgba(230,224,213,.8); max-width:58ch; margin:26px 0 0; font-size:1.06rem;
}
@media (max-width:560px){ .mob-ust-ic{padding:132px 0 62px;} }

/* ---------- MOBİLYA SAYFASI: CTA ---------- */
.mob-cta{background:var(--bordo); color:#fff; padding:92px 0; text-align:center;}
.mob-cta h2{
  color:#fff; font-size:clamp(1.9rem,4vw,3rem); line-height:1.16;
  max-width:22ch; margin:0 auto 20px;
}
.mob-cta p{color:rgba(255,255,255,.82); max-width:54ch; margin:0 auto 36px;}
@media (max-width:760px){ .mob-cta{padding:68px 0;} }

/* ---------- BÜYÜTME ---------- */
.mob-buyut{
  position:fixed; inset:0; z-index:400; display:none;
  background:rgba(18,17,14,.94); padding:28px;
  align-items:center; justify-content:center;
}
.mob-buyut.acik{display:flex;}
.mob-buyut-kutu{max-width:920px; width:100%; position:relative;}
.mob-buyut img{
  width:100%; height:auto; max-height:80svh; object-fit:contain; display:block;
}
.mob-buyut-ad{
  color:rgba(255,255,255,.8); font-size:.78rem; letter-spacing:.2em;
  text-transform:uppercase; margin-top:18px; text-align:center;
}
.mob-buyut-kapat{
  position:absolute; top:-48px; right:0; width:40px; height:40px;
  background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff;
  cursor:pointer; font-size:1.1rem; line-height:1; transition:all var(--gecis);
}
.mob-buyut-kapat:hover{background:#fff; color:var(--siyah);}
@media (max-width:640px){ .mob-buyut{padding:16px;} }