/* Ana sayfa açılışı ("Sergi"; Views/Vitrin/Index) — onaylı prototip _calisma/acilis-demo/sergi.html (2026-10-16), portal belirteçleriyle
   (tasarim.css). Ortada sabit tez, arkada temaların ekranlarıyla kayan 3B koridor; hareket, kaydırma anı ve tembel görsel yükleme
   sergi.js'te. Önek: sg-. CSP: satır içi stil yok — panel rengi .tv-{id} { --r } sınıfından (_TemaRenkleri); ölçüleri betik CSSOM ile
   yazar (--g panel genişliği, --sg-ust yapışkan başlığın yüksekliği; ikisinin de CSS yedeği var). Tema hep aydınlık. */

/* ═══ Kaydırma anı: dış kap uzun, sahne yapışkan; kaydırdıkça kamera koridorda ilerler ═══
   Prototipin serin metin tonları sergiye yerel (--sg-ink, --sg-ink-2, --sg-cizgi; prototipte --ink, --ink-2, --cizgi). Silik metin portalın
   --silik'i kalır: prototipin #7b84a0'ı açık zeminde 4,5:1'in altında. */
.sg-kap { --sg-ust: 76px; --sg-ink: #0d1530; --sg-ink-2: #4a5470; --sg-cizgi: #e3e8f4;
  position: relative; height: 175vh; height: 175svh; }
.sg-sergi { --g: clamp(320px, 36vw, 620px);
  position: sticky; top: var(--sg-ust); height: calc(100vh - var(--sg-ust)); height: calc(100svh - var(--sg-ust)); min-height: 560px;
  overflow: hidden; perspective: 900px; perspective-origin: 50% 46%;
  background:
    radial-gradient(55% 45% at 50% 46%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(90% 60% at 50% 125%, rgba(47, 102, 255, .12), transparent 70%),
    linear-gradient(#eaf0fb, #f6f8fc 58%, #edf1f9); }

/* Zemin ızgarası (kayar), ufuk çizgisi. Izgara bir göz (90 px) uzun iç katmanda; betik --sg-zy ile transform üzerinden kaydırır
   (background-position her karede büyük maskeli katmanı yeniden boyatırdı) */
.sg-zemin { position: absolute; left: -60%; right: -60%; top: 60%; height: 140%; pointer-events: none; overflow: hidden;
  transform: rotateX(80deg); transform-origin: top;
  -webkit-mask: linear-gradient(transparent, #000 22%, #000 55%, transparent); mask: linear-gradient(transparent, #000 22%, #000 55%, transparent); }
.sg-zemin::before { content: ""; position: absolute; left: 0; right: 0; top: -90px; bottom: 0;
  background-image: linear-gradient(rgba(47, 102, 255, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 102, 255, .11) 1px, transparent 1px);
  background-size: 90px 90px; transform: translate3d(0, var(--sg-zy, 0px), 0); will-change: transform; }
.sg-ufuk { position: absolute; left: 0; right: 0; top: calc(60% - 1px); height: 2px; pointer-events: none; filter: blur(1px);
  background: linear-gradient(90deg, transparent, rgba(47, 102, 255, .25) 30%, rgba(139, 124, 246, .3) 50%, rgba(224, 147, 42, .25) 70%, transparent); }

/* 3B dünya ve paneller (konum, opaklık ve --v betikten; görünür aralık dışındaki panel gizli) */
.sg-sahne { position: absolute; inset: 0; perspective: 900px; perspective-origin: inherit; }
.sg-dunya { position: absolute; inset: 0; transform-style: preserve-3d; }
.sg-pano { --sg-r: var(--r, #8a93a0); --sg-r-hale: transparent;
  position: absolute; left: 50%; top: 44%; display: block; width: var(--g); aspect-ratio: 16 / 10;
  margin-left: calc(var(--g) / -2); margin-top: calc(var(--g) * -.3125); border-radius: 16px;
  text-decoration: none; will-change: transform, opacity; visibility: hidden; outline: none; }
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  /* Hale prototipteki gibi saydam rengin (%70) %22'si: alfa ≈ .15 */
  .sg-pano { --sg-r: color-mix(in srgb, var(--r, #8a93a0) 70%, transparent); --sg-r-hale: color-mix(in srgb, var(--sg-r) 22%, transparent); }
}
.sg-pano:hover { text-decoration: none; }
.sg-pano img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; background: #dfe5f2;
  box-shadow: 0 0 0 1px rgba(13, 21, 48, .06), 0 60px 120px -40px var(--sg-r), 0 26px 50px -30px rgba(13, 21, 48, .5);
  -webkit-box-reflect: below 14px linear-gradient(transparent 64%, rgba(255, 255, 255, .26));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.sg-zayif .sg-pano img { -webkit-box-reflect: none; }
/* Etiket panelin ÜSTÜNDE; en iyi görüş mesafesine yakınlık (--v, betikten) arttıkça belirginleşir */
.sg-etiket { position: absolute; left: 2px; bottom: calc(100% + 14px); display: flex; align-items: center; gap: 10px; white-space: nowrap;
  font: 600 15px/1 var(--f-govde); color: var(--silik); opacity: calc(.25 + var(--v, 0) * .75); }
.sg-etiket b { font: 800 24px/1 var(--f-baslik); letter-spacing: -.02em; color: var(--sg-ink); }
.sg-etiket i { width: 10px; height: 10px; border-radius: 50%; background: var(--sg-r); box-shadow: 0 0 0 4px var(--sg-r-hale); }
.sg-git { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px;
  background: #fff; color: var(--sg-ink); font: 700 15px/1 var(--f-govde); opacity: 0; translate: 0 8px; transition: all .3s;
  box-shadow: 0 12px 30px -10px rgba(13, 21, 48, .55); }
.sg-pano:hover img, .sg-pano:focus-visible img { transform: scale(1.035); }
.sg-pano:hover .sg-git, .sg-pano:focus-visible .sg-git { opacity: 1; translate: 0 0; }
.sg-pano:focus-visible img { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--mavi), 0 60px 120px -40px var(--sg-r); }
/* Yakınlaşma (sergi.js; yalnız ince işaretçi + üzerine gelme, telefon kipi ve hareket azaltma dışında: .sg-yaklasir). Fareyle gelinen panel
   izleyiciye döner ve yaklaşır (.sg-odakta); üzerine gelme süsleri yerini bu sınıfa bırakır: panel kayarken :hover bir an düşse de görsel
   büyüyüp küçülmez, ipucu yanıp sönmez. Sahne fareyi yalnız panellerde tutar; yakınlaşma sürerken (.sg-odak) tezin üstüne çıkar (yakın
   panel başlığın altında kalmaz), cam şerit ve durdur düğmesinin altında kalır. Telefonda ve hareket azaltılmışta bu sınıflar hiç konmaz.
   Görünür tez kutusunun tamamı fareyi tutar (başlık, öğe araları, formun yanları): arkadaki panel başlığın üstünden geçen fareyle
   yaklaşıp sorgu kutusunu örtmez, görünmeyen panele tıklanmaz. Yakınlaşma sürerken tezin önündeki duvar panellerini betik ayrıca
   yaklaştırmaz (sergi.js tezde). Kaydırmada neredeyse görünmeyecek kadar sönen tez (sergi.js TEZ_FARE, .sg-sonuk) fareyi tutmaz. */
.sg-yaklasir .sg-sahne { pointer-events: none; }
.sg-yaklasir .sg-pano { pointer-events: auto; }
.sg-yaklasir .sg-tez:not(.sg-sonuk) { pointer-events: auto; }
.sg-yaklasir .sg-pano:hover img { transform: none; }
.sg-yaklasir .sg-pano:hover .sg-git { opacity: 0; translate: 0 8px; }
.sg-yaklasir .sg-pano.sg-odakta .sg-git { opacity: 1; translate: 0 0; }
.sg-yaklasir.sg-odak .sg-sahne { z-index: 6; }

/* ═══ Tez: ortada sabit; arkasında beyaz radyal parıltı. Yalnız form, bağlantı ve paragraf fareyi tutar (yan paneller tıklanabilsin) ═══ */
.sg-tez { position: absolute; left: 50%; top: 44%; translate: -50% -50%; z-index: 5; width: min(900px, 92vw); text-align: center;
  transform-origin: 50% 60%; pointer-events: none; }
.sg-tez form, .sg-tez a, .sg-tez p { pointer-events: auto; }
/* Neredeyse görünmeyecek kadar sönen tez (sergi.js TEZ_FARE) yalnız fareye kapanır (visibility kullanılmaz: başlık ve sorgu erişilebilirlik
   ağacında, sekme sırasında kalır) */
.sg-tez.sg-sonuk form, .sg-tez.sg-sonuk a, .sg-tez.sg-sonuk p { pointer-events: none; }
.sg-tez::before { content: ""; position: absolute; inset: -80px -110px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .96), rgba(255, 255, 255, .74) 52%, transparent); }
.sg-ust-etiket { display: inline-flex; align-items: center; gap: 12px; font: 700 13px/1 var(--f-govde); letter-spacing: .14em; text-transform: uppercase;
  color: var(--mavi-koyu); }
.sg-ust-etiket::before, .sg-ust-etiket::after { content: ""; width: 26px; height: 2px; background: var(--mavi); opacity: .6; }
.sg-tez h1 { margin: 20px 0 22px; font: 800 clamp(46px, 5.8vw, 96px)/.97 var(--f-baslik); letter-spacing: -.045em; text-wrap: balance; color: var(--sg-ink); }
.sg-isilti { display: block; padding-bottom: .08em; background: var(--isilti); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Kısaca metni prototiptekinden uzun (katalogdan sayı + fiyat): satır sayısı artmasın diye biraz geniş */
.sg-giris { max-width: 54ch; margin: 0 auto; font-size: clamp(17px, 1.25vw, 20px); line-height: 1.55; color: var(--sg-ink-2);
  text-shadow: 0 0 12px #fff; }   /* koyu panel arkadan geçerken satır uçlarında karşıtlık düşmesin */

/* Alan adı sorgusu: ortalanmış hap kutu (işlev mevcut sorgunun: GET /satin-al?ad=…) */
.sg-sorgu-kutu { width: min(560px, 100%); margin: 30px auto 0; }
.sg-sorgu { display: flex; align-items: center; gap: 6px; padding: 7px 7px 7px 22px; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 1.5px var(--sg-cizgi), 0 22px 50px -24px rgba(13, 21, 48, .45); }
.sg-sorgu:focus-within { box-shadow: 0 0 0 2px var(--mavi), 0 22px 50px -24px rgba(47, 102, 255, .55); }
.sg-sorgu input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: none; font: 600 17px/1 var(--f-govde); color: var(--sg-ink); }
.sg-sorgu input::placeholder { color: var(--silik); font-weight: 500; }
.sg-sorgu .tk-dugme { min-height: 50px; padding: 0 26px; border-radius: 999px; font: 700 16px/1 var(--f-govde); }
.sg-sorgu-ipucu { margin-top: 12px; }
.sg-sorgu-alt { justify-content: center; margin-top: 8px; }
.sg-alt-bag { display: inline-flex; gap: 8px; margin-top: 16px; font: 700 15px/1 var(--f-govde); color: var(--mavi-koyu); text-decoration: none; }
.sg-alt-bag:hover { text-decoration: underline; }
/* Satış kapalıyken tek satır sakin not; tema yoksa "hazırlanıyor" notu */
.sg-kapali-not, .sg-hazirlaniyor { max-width: 46ch; margin: 28px auto 0; font-size: 15px; color: var(--sg-ink-2); }
.sg-kapali-not b, .sg-hazirlaniyor b { color: var(--sg-ink); }
.sg-kapali-not + .sg-hazirlaniyor, .sg-alt-bag + .sg-hazirlaniyor { margin-top: 16px; }

/* ═══ Cam şerit (yalnız gerçek sayılar), "Kaydırın" ipucu, durdur/oynat ═══ */
.sg-serit { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; z-index: 6; display: flex; gap: 30px; align-items: center;
  margin: 0; padding: 15px 28px; list-style: none; border-radius: 999px; background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px -24px rgba(13, 21, 48, .4);
  font: 600 15px/1 var(--f-govde); color: var(--sg-ink-2); white-space: nowrap; }
.sg-serit b { margin-right: 3px; font: 800 21px/1 var(--f-baslik); color: var(--sg-ink); font-variant-numeric: tabular-nums; }
.sg-ipucu { position: absolute; right: 28px; bottom: 30px; z-index: 6; display: flex; align-items: center; gap: 8px;
  font: 600 13px/1 var(--f-govde); color: var(--sis); }   /* --silik sahnenin alt köşesindeki zeminde 4,5:1'in altında */
.sg-ipucu::after { content: ""; width: 1.5px; height: 26px; background: linear-gradient(var(--sis), transparent); animation: sg-in 1.8s ease-in-out infinite; }
/* Sergi durdurulunca CSS süsü de durur (WCAG 2.2.2; sergi.js .sg-durdu) */
.sg-durdu .sg-ipucu::after { animation: none; }
@keyframes sg-in { 0%, 100% { transform: translateY(-4px); opacity: .4; } 50% { transform: translateY(4px); opacity: 1; } }
/* WCAG 2.2.2: kendiliğinden süren hareket durdurulabilir (betik hareketi başlatınca görünür) */
.sg-dur { position: absolute; right: 24px; top: 20px; z-index: 7; min-height: 36px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--cam-kenar); background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--sg-ink); font: 600 13px/1.2 var(--f-govde); cursor: pointer; box-shadow: var(--g-2); }
.sg-dur:hover { background: #fff; }
.sg-dur:focus-visible { outline: var(--odak-cizgi); outline-offset: 2px; }

/* ═══ Sonraki bölüm (açılıştan hemen sonra gelen: yönetici notu ya da #paket) yuvarlak üst köşeyle sahnenin üstüne çıkar ═══ */
.sg-kap:not(.sg-kap--bos) + * { position: relative; z-index: 10; margin-top: -34px; border-radius: 34px 34px 0 0; background: var(--yuzey-0);
  box-shadow: 0 -30px 60px -40px rgba(13, 21, 48, .25); }
/* Satış kapısının eksik koşulları (yalnız geliştirmede ve yöneticiye) */
.sg-yonetici { padding-top: 28px; }
.sg-kap--bos + .sg-yonetici { padding-top: 0; }
.sg-yonetici .tk-uyari { max-width: 760px; }

/* Ekranı olan tema yoksa: sahne ve şerit basılmaz, tez kendi akışında ortada */
.sg-kap--bos { height: auto; }
.sg-kap--bos .sg-sergi { position: relative; top: auto; height: auto; min-height: 0; padding: clamp(56px, 8vw, 112px) 16px; }
.sg-kap--bos .sg-tez { position: relative; left: auto; top: auto; translate: none; margin: 0 auto; }

/* Kısa ekran (ör. 1366×768 dizüstü, görünür alan ~650 px): tezde prototipte olmayan sorgu ipucu ve iki bağlantı da var; başlık
   yüksekliğe göre küçülür, boşluklar daralır ki tez sahnenin üst kenarına ve şeride değmesin (telefon kipi aşağıda ayrıca ezer) */
@media (max-height: 760px) {
  .sg-tez h1 { margin: 14px 0 16px; font-size: clamp(46px, min(5.8vw, 9vh), 96px); }
  .sg-sorgu-kutu { margin-top: 22px; }
}

/* Orta genişlik: ipucu şeritle çakışmasın, şerit daralsın (tam boy şerit ≈ 630 px; ipucu ancak ~850 px altında çakışır) */
@media (max-width: 900px) {
  .sg-ipucu { display: none; }
  .sg-serit { gap: 22px; padding: 13px 22px; font-size: 14px; }
  .sg-serit b { font-size: 19px; }
}

/* ═══ Telefon (sorgu tema.css / tema.js / sergi.js ile AYNI): tez üstte hemen görünür, sergi altında kendi 330 px alanında; kaydırma anı yok ═══ */
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  .sg-kap { height: auto; }
  .sg-sergi { --g: 66vw; position: relative; top: auto; height: auto; min-height: 0; display: flex; flex-direction: column;
    perspective: 700px; perspective-origin: 50% 74%; }
  .sg-tez { position: relative; left: auto; top: auto; translate: none; width: auto; margin: 0; padding: 34px 16px 0; }
  .sg-tez::before { inset: 0 -20px -40px; }
  .sg-tez h1 { margin: 16px 0; font-size: clamp(38px, 11vw, 52px); }
  .sg-ust-etiket { font-size: 12px; letter-spacing: .12em; }
  .sg-ust-etiket::before, .sg-ust-etiket::after { width: 16px; }
  .sg-sorgu-kutu { margin-top: 22px; }
  .sg-sorgu { padding-left: 16px; }
  .sg-sorgu .tk-dugme { min-height: 46px; padding: 0 18px; }
  .sg-sahne { position: relative; inset: auto; flex: none; height: 330px; overflow: hidden; perspective: 700px; perspective-origin: 50% 42%;
    -webkit-mask: linear-gradient(transparent, #000 22%); mask: linear-gradient(transparent, #000 22%); }
  .sg-dunya { inset: 0; }
  .sg-pano { top: 50%; }
  .sg-etiket { font-size: 13px; }
  .sg-etiket b { font-size: 19px; }
  .sg-zemin, .sg-ufuk { top: 62%; }
  .sg-serit, .sg-ipucu { display: none; }
  .sg-dur { top: auto; bottom: 12px; right: 16px; }
  .sg-kap:not(.sg-kap--bos) + * { margin-top: 0; }
  .sg-kap--bos .sg-sergi { padding: 0 0 48px; }
}

/* Hareket azaltılmışsa kaydırma anı yok, sahne durgun (betik tek kare çizer) */
@media (prefers-reduced-motion: reduce) {
  .sg-kap { height: auto; }
  .sg-sergi { position: relative; top: auto; }
  .sg-ipucu { display: none; }
  .sg-kap:not(.sg-kap--bos) + * { margin-top: 0; }                /* durgun sahnede alttaki şeridin üstüne binmesin */
  .sg-pano img, .sg-git { transition: none; }
}

/* ═══ Başlık şeridi (2026-10-17): yüzen başlık çubuğunun çevresi açılışın üst rengiyle (.sg-sergi zemininin başı) aynı olsun —
   sayfa zemini (bej) başlığın iki yanında dikiş gibi görünmesin. Yapışkan açılış sürerken başlığın arkası da aynı renkte kalır:
   yükseklik başlık (80 px) + dış kap (175svh). Telefonda ve hareket azaltılmışta açılış yapışkan değil, yalnız başlık şeridi gerekir. ═══ */
body:has(.sg-kap:not(.sg-kap--bos)) { background-image: linear-gradient(#eaf0fb, #eaf0fb); background-repeat: no-repeat;
  background-size: 100% calc(80px + 175vh); background-size: 100% calc(80px + 175svh); }
@media (max-width: 760px), (pointer: coarse) and (max-height: 520px) {
  body:has(.sg-kap:not(.sg-kap--bos)) { background-size: 100% 120px; }
}
@media (prefers-reduced-motion: reduce) {
  body:has(.sg-kap:not(.sg-kap--bos)) { background-size: 100% 100vh; background-size: 100% 100svh; }
}