/* Gayrimenkul Teknolojileri merkez sayfası (bileşen: components/gayrimenkul/GayrimenkulMerkez.astro). Dil: proje hattı haritası.
   Hero kareleri · dört duraklı hat · hizmet kartları · kapı levhaları · tek model serisi · SSS · son çağrı. Açık ds tasarım sistemi (Aurora). */
.gm { --gm-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --gm-d1: #5B3DF5; --gm-d2: #0E8FA8; --gm-d3: #E8572F; --gm-d4: #6E8A00; }

/* ───────── Hero ───────── */
.gm-hero__izgara { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.gm-hero__metin { min-width: 0; }
.gm-h1 { margin-top: 18px; }
.gm-kareler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.gm-kareler li { position: relative; min-width: 0; overflow: hidden; border-radius: 22px; background: #E9E6F3; box-shadow: 0 24px 50px rgba(29, 24, 48, .14); }
.gm-kareler li.k2, .gm-kareler li.k4 { translate: 0 28px; }
.gm-kareler img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gm-kareler span { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; background: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ds-ink); }
.gm-kareler span b { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 11px/1 var(--gm-mono); color: #FFFFFF; background: var(--gm-d1); }
.gm-kareler li.k2 span b { background: var(--gm-d2); }
.gm-kareler li.k3 span b { background: var(--gm-d3); }
.gm-kareler li.k4 span b { background: var(--gm-d4); }

/* ───────── Ortak başlık ───────── */
.gm-baslik { max-width: 760px; margin-bottom: 44px; }
.gm-baslik .ds-h2 { margin-top: 18px; }
.gm-baslik > p { margin: 16px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--ds-muted); }

/* ───────── Hat: dört durak ───────── */
.gm-hat { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.gm-hat::before { content: ""; position: absolute; left: 24px; right: 24px; top: 23px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--gm-d1) 0 25%, var(--gm-d2) 25% 50%, var(--gm-d3) 50% 75%, var(--gm-d4) 75% 100%); opacity: .9; }
.gm-hat > li { --r: var(--gm-d1); position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.gm-hat > li.d2 { --r: var(--gm-d2); }
.gm-hat > li.d3 { --r: var(--gm-d3); }
.gm-hat > li.d4 { --r: var(--gm-d4); }
.gm-hat__durak { position: relative; z-index: 1; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #FFFFFF; border: 6px solid var(--r); box-shadow: 0 10px 22px rgba(29, 24, 48, .14); }
.gm-hat__durak b { font: 700 13px/1 var(--gm-mono); color: var(--ds-ink); }
.gm-hat__kart { display: flex; flex-direction: column; width: 100%; min-width: 0; flex: 1; margin-top: 18px; padding: 22px 22px 18px; border-radius: 22px; background: #FFFFFF; border: 1px solid var(--ds-line); border-top: 4px solid var(--r); box-shadow: var(--ds-shadow); }
.gm-hat__kart h3 { margin: 0; font-family: var(--ds-display); font-size: 20px; line-height: 1.2; letter-spacing: -.015em; color: var(--ds-ink); }
.gm .gm-hat__soru { margin: 8px 0 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; color: var(--r); }
.gm .gm-hat__kart > p:not(.gm-hat__soru) { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ds-muted); }
.gm-hat__kart ul { display: grid; gap: 8px; margin: auto 0 0; padding: 16px 0 0; list-style: none; }
.gm-hat__kart li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #F7F5FC; color: var(--ds-ink) !important; text-decoration: none !important; font-size: 14px; font-weight: 600; line-height: 1.35; transition: background .2s ease, transform .2s ease; }
.gm-hat__kart li a:hover { background: #EFEBFA; transform: translateX(2px); }
.gm-hat__tur { padding: 4px 7px; border-radius: 7px; border: 1.5px solid var(--r); font: 700 10.5px/1 var(--gm-mono); letter-spacing: .04em; color: var(--r); white-space: nowrap; }
.gm-hat__kart li a.hizmet .gm-hat__tur { background: var(--r); color: #FFFFFF; }
.gm-hat__ad { min-width: 0; overflow-wrap: break-word; }
.gm-hat__kart li a i { font-size: 12px; color: var(--ds-muted-2); }

/* ───────── Hizmet kartları ───────── */
.gm-hizmetler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gm-hizmet { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); min-width: 0; overflow: hidden; border-radius: 26px; background: #FFFFFF; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); color: var(--ds-ink) !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease; }
.gm-hizmet:hover { transform: translateY(-3px); box-shadow: 0 30px 60px rgba(40, 28, 90, .14); }
.gm-hizmet__gorsel { display: block; min-height: 100%; }
.gm-hizmet__gorsel img { display: block; width: 100%; height: 100%; min-height: 220px; object-fit: cover; }
.gm-hizmet__metin { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 22px 24px; }
.gm-hizmet__no { font: 700 12px/1 var(--gm-mono); color: var(--ds-violet); }
.gm-hizmet__metin b { font-family: var(--ds-display); font-size: 21px; line-height: 1.2; letter-spacing: -.015em; overflow-wrap: break-word; }
.gm-hizmet__metin > span:not(.gm-hizmet__no) { font-size: 14.5px; line-height: 1.6; color: var(--ds-muted); }
.gm-hizmet__metin em { margin-top: auto; padding-top: 6px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--ds-violet); }

/* ───────── Kapılar ───────── */
.gm-kapilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gm-kapi { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 0 24px 24px; border-radius: 26px 26px 22px 22px; background: linear-gradient(180deg, #F5F2FD 0, #FFFFFF 120px); border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow); }
.gm-kapi__levha { display: inline-flex; align-items: center; gap: 10px; margin: -1px 0 18px; padding: 12px 16px 10px; border-radius: 0 0 14px 14px; background: #1D1830; color: #FFFFFF; font: 700 13px/1 var(--gm-mono); letter-spacing: .06em; box-shadow: 0 10px 22px rgba(29, 24, 48, .2); }
.gm-kapi__levha i { color: #C9BAFF; }
.gm-kapi h3 { margin: 0; font-family: var(--ds-display); font-size: 21px; line-height: 1.2; color: var(--ds-ink); }
.gm .gm-kapi > p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ds-muted); }
.gm-kapi__alt { margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ds-muted-2); }
.gm-kapi ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.gm-kapi ul a { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: #EFEBFA; color: var(--ds-violet) !important; text-decoration: none !important; font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.gm-kapi__sektor { margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 700; color: var(--ds-ink) !important; text-decoration: none !important; }
.gm-kapi__sektor i { margin-left: 4px; font-size: 12px; color: var(--ds-violet); }

/* ───────── Tek model ───────── */
.gm-model__seri { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; counter-reset: m; }
.gm-model__seri li { position: relative; min-width: 0; }
.gm-model__seri li:not(:last-child)::after { content: ""; position: absolute; top: calc(50% - 26px); right: -18px; z-index: 1; width: 10px; height: 10px; border-top: 2.5px solid var(--ds-violet); border-right: 2.5px solid var(--ds-violet); rotate: 45deg; }
.gm-model__seri img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 18px 40px rgba(29, 24, 48, .12); }
.gm-model__seri span { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--ds-ink); }
.gm-model__seri span b { font: 700 12px/1 var(--gm-mono); color: var(--ds-violet); }

/* ───────── SSS ───────── */
.gm-sss { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.gm-sss .gm-baslik { margin-bottom: 0; }
.gm-sss__liste { display: grid; gap: 10px; }
.gm-sss__liste details { padding: 0 22px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ds-line); }
.gm-sss__liste summary { display: flex; align-items: center; gap: 14px; padding: 18px 0; list-style: none; cursor: pointer; font-family: var(--ds-display); font-size: 17.5px; font-weight: 700; line-height: 1.35; color: var(--ds-ink); }
.gm-sss__liste summary::-webkit-details-marker { display: none; }
.gm-sss__liste summary span { flex: 1; min-width: 0; }
.gm-sss__liste summary i { flex: 0 0 auto; font-size: 14px; color: var(--ds-violet); transition: rotate .25s ease; }
.gm-sss__liste details[open] summary i { rotate: 45deg; }
.gm-sss__liste summary:focus-visible { outline: 3px solid var(--ds-violet-2); outline-offset: 4px; border-radius: 8px; }
.gm .gm-sss__liste p { margin: 0 0 18px; font-size: 15px; line-height: 1.7; color: var(--ds-muted); }

/* ───────── Son çağrı ───────── */
.gm-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding: 44px 48px; border-radius: 32px; background: radial-gradient(70% 120% at 100% 0%, rgba(139, 108, 255, .45) 0%, rgba(139, 108, 255, 0) 60%), #15112A; color: #FFFFFF; }
.gm-cta > div:first-child { flex: 1 1 420px; min-width: 0; }
.gm-cta .ds-h2 { color: #FFFFFF; }
.gm-cta .ds-vurgu { background-image: linear-gradient(100deg, #C9BAFF 0%, #9BE6F3 100%); }
.gm .gm-cta p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .74); }
.gm-cta__dugmeler { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 1099.98px) {
  .gm-hat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .gm-hat::before { display: none; }
  .gm-hizmet { grid-template-columns: minmax(0, 1fr); }
  .gm-hizmet__gorsel img { min-height: 0; aspect-ratio: 16 / 9; }
  .gm-kapilar { grid-template-columns: minmax(0, 1fr); }
  .gm-model__seri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gm-model__seri li:nth-child(2)::after { display: none; }
}
@media (max-width: 991.98px) {
  .gm-hero__izgara { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .gm-sss { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 767.98px) {
  .gm-baslik { margin-bottom: 30px; }
  .gm-baslik > p { font-size: 16px; }
  .gm-kareler { gap: 10px; }
  .gm-kareler li { border-radius: 16px; }
  .gm-kareler li.k2, .gm-kareler li.k4 { translate: 0 16px; }
  .gm-kareler span { left: 6px; right: 6px; bottom: 6px; gap: 6px; padding: 5px 7px; font-size: 11.5px; border-radius: 10px; }
  .gm-kareler span b { width: 20px; height: 20px; font-size: 10px; }
  .gm-hat { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gm-hat > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding-bottom: 18px; }
  .gm-hat > li::before { content: ""; position: absolute; left: 17px; top: 40px; bottom: 0; width: 6px; border-radius: 6px; background: var(--r); opacity: .35; }
  .gm-hat > li:last-child::before { display: none; }
  .gm-hat__durak { width: 40px; height: 40px; border-width: 5px; }
  .gm-hat__durak b { font-size: 11px; }
  .gm-hat__kart { margin-top: 0; padding: 18px 16px 14px; }
  .gm-hat__kart li a { gap: 8px; padding: 8px; font-size: 13.5px; }
  .gm-hizmetler { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gm-hizmet__metin { padding: 18px 18px 20px; }
  .gm-kapi { padding: 0 18px 20px; }
  .gm-model__seri { gap: 16px; }
  .gm-model__seri li::after { display: none; }
  .gm-model__seri span { font-size: 13px; }
  .gm-sss__liste details { padding: 0 16px; }
  .gm-sss__liste summary { font-size: 16px; }
  .gm-cta { padding: 30px 20px; border-radius: 24px; }
  .gm-cta__dugmeler, .gm-cta__dugmeler .ds-btn { width: 100%; }
}
@media (max-width: 374.98px) {
  .gm-hat__kart li a { grid-template-columns: minmax(0, 1fr) auto; }
  .gm-hat__tur { grid-column: 1 / -1; justify-self: start; }
  .gm-kareler span { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) { .gm-hizmet, .gm-hat__kart li a, .gm-sss__liste summary i { transition: none; } }