/* ARTMİM v1 · sürüklemeli 3B seçki galerisi (T, 8 Eki 2026)
   Kaydırmaya bağlı "tur" bölümünün yerine: v2'deki galeri motoru (js/galeri3b.js), v1'in koyu zemini ve renkleriyle.
   Sürükle / ok tuşları / oklar; ortadaki kareye tıklayınca projesi açılır. */
.galeri3b { position: relative; background: var(--zemin, #0a1c1b); color: var(--metin, #def4f2); padding: clamp(84px, 9vw, 140px) 0 clamp(64px, 7vw, 112px); overflow: hidden; }
.galeri3b__bas { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; margin-bottom: clamp(26px, 3.6vw, 50px); }
.galeri3b__bas .section-kicker { color: var(--aksan-acik, #83c9bf); }
.galeri3b__bas h2 { color: #eef9f8; margin: .3rem 0 0; max-width: 24ch; font-family: "Fraunces", Georgia, serif; font-size: clamp(1.65rem, 2.6vw, 2.6rem);
  font-weight: 400; font-style: italic; line-height: 1.25; letter-spacing: -.02em; }
.galeri3b__tum { display: inline-flex; align-items: center; gap: 12px; color: #eef9f8; font-weight: 600; border-bottom: 1px solid rgba(131, 201, 191, .5); padding-bottom: 6px; white-space: nowrap; transition: color .3s, border-color .3s; }
.galeri3b__tum:hover { color: var(--aksan-acik, #83c9bf); border-color: var(--aksan-acik, #83c9bf); }
.galeri3b__tum svg { width: 20px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .4s; }
.galeri3b__tum:hover svg { transform: translateX(4px); }
.galeri3b__sahne { position: relative; height: clamp(430px, 70svh, 780px); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.galeri3b__sahne.surukleniyor { cursor: grabbing; }
.galeri3b__sahne:focus-visible { box-shadow: inset 0 0 0 1px var(--aksan-acik, #83c9bf); }
.galeri3b__sahne canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.galeri3b__alt { display: grid; grid-template-columns: 1fr auto auto; gap: 30px; align-items: center; margin-top: clamp(22px, 3vw, 38px); }
.galeri3b__ad { min-height: 62px; }
.galeri3b__ad b { display: block; font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: #eef9f8; }
.galeri3b__ad span { display: block; margin-top: 8px; color: var(--gri, #74a7a3); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; }
.galeri3b__sayac { display: flex; align-items: center; gap: 18px; color: var(--gri, #74a7a3); font-size: .8rem; letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.galeri3b__cubuk { position: relative; width: clamp(140px, 18vw, 280px); height: 1px; background: rgba(238, 249, 248, .16); }
.galeri3b__cubuk i { position: absolute; top: -1px; height: 3px; background: var(--aksan-acik, #83c9bf); transition: left .6s cubic-bezier(.2, .8, .2, 1), width .6s cubic-bezier(.2, .8, .2, 1); }
.galeri3b__oklar { display: flex; border: 1px solid rgba(238, 249, 248, .18); border-radius: var(--radius, 6px); overflow: hidden; }
.galeri3b__oklar button { width: 58px; height: 58px; display: grid; place-items: center; background: none; border: 0; color: #eef9f8; cursor: pointer; transition: background-color .35s, color .35s; }
.galeri3b__oklar button + button { border-left: 1px solid rgba(238, 249, 248, .18); }
.galeri3b__oklar button:hover, .galeri3b__oklar button:focus-visible { background: var(--aksan, #007871); color: #fff; }
.galeri3b__oklar svg { width: 22px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.ipucu { position: absolute; left: 50%; bottom: 24px; z-index: 3; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 20px 0 14px;
  border-radius: 999px; background: rgba(10, 28, 27, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(238, 249, 248, .16);
  color: #eef9f8; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; transition: opacity .7s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.ipucu.gitti { opacity: 0; transform: translate(-50%, 14px); }
.ipucu__el { width: 28px; height: 28px; fill: none; stroke: var(--aksan-acik, #83c9bf); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: g3b-el 2.6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes g3b-el { 0%, 100% { transform: translateX(-7px) rotate(-8deg); } 50% { transform: translateX(9px) rotate(6deg); } }
.galeri3b__yedek { display: none; }
.galeri3b--yedek .galeri3b__sahne canvas, .galeri3b--yedek .ipucu { display: none; }
.galeri3b--yedek .galeri3b__yedek { display: flex; position: absolute; inset: 0; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 12%; scrollbar-width: none; }
.galeri3b__yedek a { flex: 0 0 76%; scroll-snap-align: center; overflow: hidden; border-radius: var(--radius, 6px); }
.galeri3b__yedek img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 760px) {
  .galeri3b__bas { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .galeri3b__sahne { height: clamp(290px, 44svh, 400px); }
  .galeri3b__tum { justify-self: start; }
  .galeri3b__alt { grid-template-columns: 1fr; gap: 16px; }   /* oklar solda: sayfanın sağ alttaki sabit "yukarı" düğmesiyle çakışmasın */
  .galeri3b__oklar { justify-self: start; }
  .galeri3b__sayac { display: none; }
  .galeri3b__oklar button { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ipucu__el { animation: none; } }