/* ═══════════════════════════════════════════════════════════════════
   AÇILIŞ BEYANI · solda söz, sağda konum haritası
   -------------------------------------------------------------------
   Kaydırmaya bağlı hiçbir şey yok. Harita bir düğmedir: tıklanınca tam
   ekran katman açılır, işaret sayısı üçten on dörde çıkar.

   Kutu yok, çerçeve yok, gölge yok. Ayrım boşluk ve saç çizgisiyle.
   Her sınıf `byn-` ile başlar — ihlali site-uret.py --denetle yakalar.
   ═══════════════════════════════════════════════════════════════════ */

.byn{
  position:relative;background:var(--z1);overflow:clip;
  padding-block:var(--blm-pd);
}

/* ── marka dokusu · bölümün zemini ────────────────────────────────────
   Renk amblemin GÖVDESİNE değil, İÇİNDEKİ KANALLARA gider: madalyonun
   yaprak/dal araları boyanır; gövdenin kendisi ve dairenin dışı bölümün
   kendi zemini olarak kalır. Bütün maskeyi ters çevirmek bölümün tamamını
   boyayıp zemin rengini değiştiriyordu — o yanlıştı.

   Maske TEK DOSYADIR: bizim çizilmiş amblem SVG'sinden türetildi.
   Motiflerin HEPSİ DÜZ dizilir — ayna yok, her amblem aynı yönde durur.

   Kenar SERT biter: disk amblemin dış yarıçapında (0,916) bir piksellik
   payla kesilir; dallar kesildikleri yerde komşusuyla birleşir. Kare,
   motifin kendi sınırına KIRPILIR: kırpılmadığında aralarında boş kare
   payı kalıyordu. İki katmanlı mask-composite
   denendi, tarayıcıda beklenen sonucu vermedi; türetilmiş dosya belirsizlik
   bırakmıyor. */
.byn-doku{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  --byn-tas:6rem;
  background:var(--toprak);
  -webkit-mask:url("../img/amblem-kanal.webp") repeat;
          mask:url("../img/amblem-kanal.webp") repeat;
  -webkit-mask-size:var(--byn-tas) var(--byn-tas);
          mask-size:var(--byn-tas) var(--byn-tas);
  opacity:0.025;
}
/* Koyu temada mürekkep zıt renk değil, zeminin bir tık açığı. */
html[data-tema="koyu"] .byn-doku{
  background:color-mix(in srgb,var(--z1),var(--keten) 10%);
  opacity:0.030;
}
.byn-iz{
  position:relative;z-index:1;
  display:grid;align-items:center;
  gap:var(--bo-4);
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
}

/* ── sol: söz ── */
.byn-sol{display:grid;gap:var(--bo-2)}
.byn-bsl{
  font-family:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-weight:800;font-size:var(--blm-bsl);
  line-height:1.08;letter-spacing:-.03em;color:var(--mrk);margin:0;
}
html[lang="ar"] .byn-bsl{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0;line-height:1.4}
.byn-bsl em{font-style:normal;color:inherit}  /* gradient'i delmesin */
.byn-kir{display:none}
@media(min-width:720px){.byn-kir{display:inline}}

.byn-metin{display:grid;gap:clamp(.85rem,1.6vw,1.15rem);max-inline-size:40rem}
.byn-lead{
  margin:0;color:var(--mrk);font-size:var(--yz-gir);
  font-weight:500;line-height:1.5;letter-spacing:-.012em;text-wrap:pretty;
}
.byn-gvd{
  margin:0;color:color-mix(in oklab,var(--mrk2),var(--mrk) 30%);
  font-size:var(--yz-gir);line-height:1.66;
}

/* ── sağ: çizim plakası + altında iki bağlantı ── */
.byn-sag{display:grid;justify-items:stretch;gap:.7rem}
/* İki eylem eşit ağırlıkta iki düğme. Alt çizgili "bağlantı · bağlantı"
   hâli tıklanabilir görünmüyordu ve hizası dağınıktı. */
.byn-eylem2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.byn-ac{
  font:inherit;font-size:var(--yz-kck);font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1rem;border-radius:var(--yr-s);
  border:1px solid var(--cizgi);background:none;color:var(--mrk);
  transition:background-color var(--mikro) var(--egri);
}
.byn-ac:hover{background:var(--z2)}
.byn-ac svg{inline-size:.9rem;block-size:.9rem;flex:none;color:var(--toprak-mtn)}
@media(max-width:520px){.byn-eylem2{grid-template-columns:1fr}}

/* sekmeler — kutu değil, alt çizgi */
.byn-sek{display:flex;gap:var(--bo-2);border-block-end:1px solid var(--cizgi2)}
.byn-sek-d{
  font:inherit;font-size:var(--yz-kck);font-weight:600;cursor:pointer;border:0;background:none;
  color:var(--mrk2);padding:0 0 .55rem;position:relative;
  transition:color var(--mikro) var(--egri);
}
.byn-sek-d::after{
  content:"";position:absolute;inset-block-end:-1px;inset-inline:0;block-size:1px;
  background:var(--mrk);opacity:0;transition:opacity var(--mikro) var(--egri);
}
.byn-sek-d[aria-selected="true"]{color:var(--mrk)}
.byn-sek-d[aria-selected="true"]::after{opacity:1}
.byn-sek-d:hover{color:var(--mrk)}

/* iki panel aynı gözde; gizli olan display:none DEĞİL — iframe yüklü kalsın */
.byn-kutu{display:grid}
.byn-pnl{grid-area:1 / 1;position:relative}
.byn-pnl[data-gizli]{visibility:hidden;opacity:0;pointer-events:none}
.byn-gmap{
  inline-size:min(100%,calc((100svh - 17rem) * 1.3333));
  aspect-ratio:4/3;border:0;display:block;margin-inline:auto;
  border-radius:var(--yr-s);background:var(--z2);
}
.byn-git{
  position:absolute;inset-block-end:.6rem;inset-inline-start:.6rem;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.4rem .7rem;border-radius:var(--yr-l);
  font-size:var(--yz-kck);font-weight:600;color:var(--mrk);
  background:color-mix(in srgb,var(--z1) 88%,transparent);
  transition:background-color var(--mikro) var(--egri);
}
.byn-git:hover{background:var(--z1)}
.byn-git svg{inline-size:.85rem;block-size:.85rem;flex:none}


html[dir="rtl"] .byn-ac svg{transform:scaleX(-1)}
.byn-plaka{
  position:relative;display:block;inline-size:100%;padding:0;border:0;
  background:none;cursor:pointer;text-align:start;
  border-radius:var(--yr-s);overflow:hidden;
  transition:transform var(--gecis) var(--egri);
}
.byn-plaka:hover{transform:scale(1.008)}
.byn-harita{
  position:relative;display:block;aspect-ratio:4/3;
  background:url("../img/konum-paftasi-m.webp") no-repeat center/100% 100%;
}

/* ── işaretler (küçük ve büyük haritada ortak) ── */
.byn-im{
  position:absolute;z-index:1;
  inset-inline-start:var(--byn-x);inset-block-start:var(--byn-y2);
  inline-size:0;block-size:0;
}
.byn-nok{
  position:absolute;display:block;
  inline-size:.55rem;block-size:.55rem;border-radius:50%;
  inset-inline-start:0;inset-block-start:0;translate:-50% -50%;
  background:var(--toprak-mtn);
}
.byn-ad{
  position:absolute;inset-block-start:0;inset-inline-start:0;
  font-size:var(--yz-etk);font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  color:var(--mrk);background:color-mix(in srgb,var(--z1) 88%,transparent);
  padding:.16rem .45rem;border-radius:var(--yr-s);
}
.byn-im[data-nok="yok"] .byn-nok{display:none}
.byn-im[data-yer="alt-orta"] .byn-ad{translate:-50% var(--byn-alt,1.1rem)}
.byn-im[data-yer="alt-sag"]  .byn-ad{translate:1rem .55rem}
.byn-im[data-yer="alt-sol"]  .byn-ad{translate:calc(-100% - 1rem) .55rem}
.byn-im[data-yer="ust-sag"]  .byn-ad{translate:1rem -1.85rem}
.byn-im[data-yer="ust-sol"]  .byn-ad{translate:calc(-100% - 1rem) -1.85rem}
html[dir="rtl"] .byn-im[data-yer="ust-sol"] .byn-ad,
html[dir="rtl"] .byn-im[data-yer="alt-sol"] .byn-ad{translate:calc(100% + 1rem) -1.85rem}

/* ── tam ekran katman ── */


@keyframes byn-kat-ac{from{opacity:0}to{opacity:1}}

@keyframes byn-cer-ac{from{opacity:0;transform:translateY(1rem) scale(.99)}to{opacity:1;transform:none}}
/* Harita EKRAN YÜKSEKLİĞİNE göre sınırlanır. Yalnız genişliğe bakıp
   4/3 oran vermek haritayı ekrandan taşırıyor, künye de üstüne biniyordu:
   ızgara satırı taşan içeriği tutamıyor. Yükseklik payı künyeye ayrıldı. */
.byn-buyuk{
  position:relative;aspect-ratio:4/3;border-radius:var(--yr-s);overflow:hidden;
  inline-size:min(100%,calc((100svh - 17rem) * 1.3333));
  margin-inline:auto;
  /* align-self:start ŞART: ızgara öğesi varsayılan olarak gerilir; gerilmiş
     bir öğede aspect-ratio'dan gelen yükseklik satırla uyuşmuyor ve öğe
     satırından 19 px taşıp künyenin üstüne biniyordu (ölçüldü). */
  align-self:start;
  background:url("../img/konum-paftasi.webp") no-repeat center/100% 100%;
}




/* katman künyesi */
.byn-kunye{display:grid;gap:.7rem;padding-block-start:clamp(.25rem,1vw,.6rem)}
.byn-kat-bsl{
  margin:0;font-family:"Manrope",ui-sans-serif,sans-serif;font-weight:700;
  font-size:var(--yz-alt);letter-spacing:-.02em;color:var(--mrk);
}
html[lang="ar"] .byn-kat-bsl{font-family:"Noto Kufi Arabic",sans-serif;letter-spacing:0}
/* Ölçü şeridi kaldırıldı; açıklama satırı bir sütun genişledi ki üç değil
   iki satırda okunsun. */
.byn-kat-gvd{margin:0;color:var(--mrk2);font-size:var(--yz-gvd);line-height:1.6;max-inline-size:104ch}
html[lang="ar"] 
@media(prefers-reduced-motion:reduce){
  .byn-katman,
  .byn-plaka:hover{transform:none}
}

@media(max-width:900px){
  .byn-iz{grid-template-columns:minmax(0,1fr);gap:var(--bo-3)}
  .byn-ad{font-size:var(--yz-etk);padding:.12rem .35rem}
}
@media(max-width:600px){
  /* Dar ekranda on dört etiket okunmaz hâle geliyor; büyük paftada da
     yalnız ana işaretler bırakılır. */
  .byn-buyuk .byn-im[data-yer="alt-sag"],
  .byn-buyuk .byn-im[data-yer="ust-sag"]{display:none}
}


/* ═══════════════════════════════════════════════════════════════════
   PROJE ORTAKLARI — 25 Ağu 2026, hero'dan buraya taşındı.
   -------------------------------------------------------------------
   Hero'daki kurallarla aynı davranış, iki farkla:
     · Şerit SOLA yaslı (hero'da sağa yaslıydı; burada metin sütununun
       altında duruyor, metinle aynı kenardan başlamalı).
     · Renk açıkça yazılır. Logolar maskeyle boyanıyor (background:
       currentColor); hero'da metin rengi #F3EEE4 sabitti, burada tema
       değişince mürekkep de değişsin diye token'a bağlandı.
   İlk öğenin ipucu kutusu sola taşmasın diye hizası başa çekilir —
   hero'da son öğe için sağa çekiliyordu, yaslama tersine döndü.
   ═════════════════════════════════════════════════════════════════ */
.byn-ortak{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--bo-3);
  margin-block-start:clamp(1.8rem,3.4vw,2.6rem);
}
.byn-ortak-logo{
  display:block;background:currentColor;color:var(--mrk2);opacity:.8;
  inline-size:var(--byn-ortak-gen);block-size:auto;aspect-ratio:var(--byn-ortak-oran);
  -webkit-mask:var(--byn-ortak-kaynak) no-repeat center/contain;
          mask:var(--byn-ortak-kaynak) no-repeat center/contain;
  transition:opacity var(--mikro,.18s) var(--egri),color var(--mikro,.18s) var(--egri);
}
.byn-ortak-ek{--byn-ortak-kaynak:url(../logo/ortak-emlak-konut.png);--byn-ortak-oran:2.01;--byn-ortak-gen:10.2rem}
.byn-ortak-mg{--byn-ortak-kaynak:url(../logo/ortak-makkah-gate.png);--byn-ortak-oran:1.84;--byn-ortak-gen:10.6rem}
.byn-ortak-sk{--byn-ortak-kaynak:url(../logo/ortak-sakani.png);--byn-ortak-oran:2.445;--byn-ortak-gen:9.2rem}
@media(max-width:720px){ .byn-ortak-logo{--byn-ortak-gen:7.6rem} }

/* İpucu: konumlandırıcı ÖĞENİN KENDİSİ — ad kutusu şeridin değil,
   üstüne gelinen logonun ortasında belirir. */
.byn-ortak-oge{position:relative;display:inline-flex;align-items:center}
.byn-ortak-ipucu{
  position:absolute;inset-block-end:calc(100% + .7rem);inset-inline:0;
  display:flex;justify-content:center;pointer-events:none;z-index:4;
}
.byn-ortak-ad{
  flex:none;inline-size:max-content;max-inline-size:min(20rem,60vw);text-align:center;
  font-size:var(--yz-kck);line-height:1.4;padding:.5rem .85rem;border-radius:var(--yr-m);
  color:var(--mrk);background:color-mix(in oklab,var(--z1) 93%,transparent);
  border:1px solid var(--cizgi);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;transform:translateY(5px);
  transition:opacity 220ms var(--egri),transform 220ms var(--egri);
}
.byn-ortak-oge:hover .byn-ortak-ad,
.byn-ortak-oge:focus-within .byn-ortak-ad{opacity:1;transform:translateY(0)}
.byn-ortak-oge:hover .byn-ortak-logo{opacity:1;color:var(--mrk)}
.byn-ortak-oge:first-child .byn-ortak-ipucu{justify-content:start}
@media (prefers-reduced-motion:reduce){
  .byn-ortak-ad{transition:none;transform:none}
  .byn-ortak-logo{transition:none}
}


/* ═══ KONUM HARİTASI İÇERİĞİ ═══════════════════════════════════════════
   28 Ağu 2026 · kendi perdesi/kapatı kaldırıldı, ortak modal kabuğuna
   (.mdl · kip="dugum") taşındı. Burada kalan yalnız KARTIN kendisi:
   koyu perdenin üstünde duran açık zeminli kutu.                        */
.byn-icerik[hidden]{display:none}
.byn-icerik{
  position:relative; inline-size:min(100%,84rem);
  display:grid; gap:var(--bo-2);
  background:var(--z1); color:var(--mrk); border-radius:var(--yr-s);
  padding:clamp(1rem,2.4vw,1.9rem);
  animation:byn-cer-ac 420ms var(--egri) both;
}
@media (prefers-reduced-motion:reduce){ .byn-icerik{animation:none} }