/* GİRİŞ CAMI (Claude 2026-10-26) — ortak cam giriş kartı + ipek dalga zemini.
   Kullanan: yönetim uygulaması /login (auth.py bu dosyayı sayfaya GÖMER) ve gazioglumobilya.com /hesap/giris|kayit|dogrula|sifre (site.html).
   Kendi jetonları (--gcam-*): sitenin html[data-tema="acik|koyu"] ve uygulamanın html[data-theme="light|dark"] seçimini, yoksa sistemi izler.
   Dil: Apple · Işık Altını (açık) / Gece altını (koyu); siyah-beyaz zemin, altın YALNIZ detayda (logo noktası, kenar parıltısı, kıymık, odak).
   Kart: iki köşesi (sol üst, sağ alt) pahlı Liquid Glass; pah boşluklarında küçük cam kıymıklar. Kenar çizgisi + kırpma JS ile ölçüye göre çizilir
   (giris-cam.js); JS yoksa polygon yedek kırpma. Ağır backdrop-filter YALNIZ kartta (hareketli katmanlarda yok). */

:root {
  --gcam-zemin: #F6EFE3;
  --gcam-ink: #15120E; --gcam-ink-2: #574A38; --gcam-ink-3: #7A6B57;
  --gcam-altin: #B8925A; --gcam-altin-koyu: #66491B; --gcam-bronz: #9A7438;
  --gcam-cam: linear-gradient(160deg, rgba(255, 253, 248, .80) 0%, rgba(255, 250, 241, .62) 55%, rgba(252, 246, 236, .70) 100%);
  --gcam-blur: blur(18px) saturate(160%);
  --gcam-kenar-1: rgba(255, 255, 255, .95); --gcam-kenar-2: rgba(200, 160, 98, .75); --gcam-kenar-3: rgba(255, 255, 255, .35);
  --gcam-golge: rgba(70, 50, 20, .30);
  --gcam-alan: rgba(255, 255, 255, .72); --gcam-alan-kenar: rgba(110, 84, 40, .22); --gcam-alan-odak: #FFFFFF;
  --gcam-dug: #15120E; --gcam-dug-yazi: #FFFFFF; --gcam-dug-parilti: rgba(232, 196, 138, .55);
  --gcam-ikincil: rgba(21, 18, 14, .06); --gcam-ikincil-yazi: #15120E;
  --gcam-hata-zemin: rgba(196, 0, 26, .09); --gcam-hata: #A3001A;
  --gcam-ok-zemin: rgba(28, 116, 48, .10); --gcam-ok: #155C26;
  --gcam-baglanti: #66491B;
  --gcam-halka: rgba(184, 146, 90, .55); --gcam-halka-ic: rgba(255, 255, 255, .85);
  --gcam-kiymik-1: rgba(255, 255, 255, .95); --gcam-kiymik-2: rgba(232, 214, 184, .55);
  --gcam-odak: rgba(184, 146, 90, .60);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]):not([data-theme="light"]) {
    --gcam-zemin: #0B0A08;
    --gcam-ink: #F7F1E8; --gcam-ink-2: #CFC4B3; --gcam-ink-3: #A99C89;
    --gcam-altin: #D4B07A; --gcam-altin-koyu: #E2C48C; --gcam-bronz: #C9A063;
    --gcam-cam: linear-gradient(160deg, rgba(38, 34, 29, .70) 0%, rgba(22, 20, 17, .56) 55%, rgba(30, 27, 23, .64) 100%);
    --gcam-blur: blur(18px) saturate(140%);
    --gcam-kenar-1: rgba(255, 240, 214, .40); --gcam-kenar-2: rgba(212, 176, 122, .75); --gcam-kenar-3: rgba(255, 240, 214, .10);
    --gcam-golge: rgba(0, 0, 0, .65);
    --gcam-alan: rgba(255, 255, 255, .06); --gcam-alan-kenar: rgba(255, 236, 200, .16); --gcam-alan-odak: rgba(255, 255, 255, .10);
    --gcam-dug: #F7F1E8; --gcam-dug-yazi: #15120E; --gcam-dug-parilti: rgba(212, 176, 122, .55);
    --gcam-ikincil: rgba(255, 255, 255, .08); --gcam-ikincil-yazi: #F7F1E8;
    --gcam-hata-zemin: rgba(255, 123, 115, .14); --gcam-hata: #FFA39C;
    --gcam-ok-zemin: rgba(48, 209, 88, .14); --gcam-ok: #7BE495;
    --gcam-baglanti: #E2C48C;
    --gcam-halka: rgba(212, 176, 122, .60); --gcam-halka-ic: rgba(255, 236, 200, .40);
    --gcam-kiymik-1: rgba(255, 240, 214, .55); --gcam-kiymik-2: rgba(120, 104, 84, .30);
    --gcam-odak: rgba(212, 176, 122, .70); --gcam-parilti: rgba(255, 240, 214, .07);
  }
}
:root[data-tema="koyu"], :root[data-theme="dark"] {
  --gcam-zemin: #0B0A08;
  --gcam-ink: #F7F1E8; --gcam-ink-2: #CFC4B3; --gcam-ink-3: #A99C89;
  --gcam-altin: #D4B07A; --gcam-altin-koyu: #E2C48C; --gcam-bronz: #C9A063;
  --gcam-cam: linear-gradient(160deg, rgba(38, 34, 29, .70) 0%, rgba(22, 20, 17, .56) 55%, rgba(30, 27, 23, .64) 100%);
  --gcam-blur: blur(18px) saturate(140%);
  --gcam-kenar-1: rgba(255, 240, 214, .40); --gcam-kenar-2: rgba(212, 176, 122, .75); --gcam-kenar-3: rgba(255, 240, 214, .10);
  --gcam-golge: rgba(0, 0, 0, .65);
  --gcam-alan: rgba(255, 255, 255, .06); --gcam-alan-kenar: rgba(255, 236, 200, .16); --gcam-alan-odak: rgba(255, 255, 255, .10);
  --gcam-dug: #F7F1E8; --gcam-dug-yazi: #15120E; --gcam-dug-parilti: rgba(212, 176, 122, .55);
  --gcam-ikincil: rgba(255, 255, 255, .08); --gcam-ikincil-yazi: #F7F1E8;
  --gcam-hata-zemin: rgba(255, 123, 115, .14); --gcam-hata: #FFA39C;
  --gcam-ok-zemin: rgba(48, 209, 88, .14); --gcam-ok: #7BE495;
  --gcam-baglanti: #E2C48C;
  --gcam-halka: rgba(212, 176, 122, .60); --gcam-halka-ic: rgba(255, 236, 200, .40);
  --gcam-kiymik-1: rgba(255, 240, 214, .55); --gcam-kiymik-2: rgba(120, 104, 84, .30);
  --gcam-odak: rgba(212, 176, 122, .70); --gcam-parilti: rgba(255, 240, 214, .07);
}

/* ---------- ipek zemin (tuval; JS çizer, yoksa durağan gradyan) ---------- */
.gcam-ipek { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; display: block;
  background: radial-gradient(80vmax 50vmax at 15% 20%, color-mix(in srgb, var(--gcam-altin) 22%, transparent), transparent 70%), var(--gcam-zemin); }

/* ---------- sahne (yönetim sayfasında gövdeyi ortalar; sitede içerik akışında) ---------- */
.gcam-sahne { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 16px 40px; }

/* ---------- kart ---------- */
.gcam { --gcam-pah: 30px; --gcam-r: 26px; position: relative; width: min(410px, 100%); color: var(--gcam-ink); isolation: isolate; }
@media (max-width: 420px) { .gcam { --gcam-pah: 26px; --gcam-r: 22px; } }
.gcam-golge { position: absolute; inset: 10px 4px -14px; z-index: -1; filter: blur(22px); opacity: .9; pointer-events: none; }
.gcam-golge > i { position: absolute; inset: 0; background: var(--gcam-golge); border-radius: var(--gcam-r);
  clip-path: polygon(var(--gcam-pah) 0, 100% 0, 100% calc(100% - var(--gcam-pah)), calc(100% - var(--gcam-pah)) 100%, 0 100%, 0 var(--gcam-pah)); }
.gcam-kart { position: relative; overflow: hidden; border-radius: var(--gcam-r); background: var(--gcam-cam);
  -webkit-backdrop-filter: var(--gcam-blur); backdrop-filter: var(--gcam-blur);
  clip-path: polygon(var(--gcam-pah) 0, 100% 0, 100% calc(100% - var(--gcam-pah)), calc(100% - var(--gcam-pah)) 100%, 0 100%, 0 var(--gcam-pah)); }
/* üstten inen yumuşak cam parıltısı (durağan) */
.gcam-kart::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(172deg, var(--gcam-parilti, rgba(255, 255, 255, .34)) 0%, rgba(255, 255, 255, 0) 32%), radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--gcam-altin) 10%, transparent), transparent 60%); }
.gcam-ic { position: relative; z-index: 1; padding: 30px 28px 26px; }
@media (max-width: 420px) { .gcam-ic { padding: 26px 20px 22px; } }
.gcam-kenar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.gcam-kenar path { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.gcam-kenar .gcam-kenar-ic { stroke: rgba(255, 255, 255, .10); stroke-width: 1; }

/* pah boşluklarındaki cam kıymıklar */
.gcam-kiymik { position: absolute; width: calc(var(--gcam-pah) - 7px); height: calc(var(--gcam-pah) - 7px); z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, var(--gcam-kiymik-1) 0%, var(--gcam-kiymik-2) 50%, color-mix(in srgb, var(--gcam-altin) 85%, transparent) 100%);
  filter: drop-shadow(0 2px 4px rgba(60, 40, 10, .18)); }
.gcam-k1 { left: -3px; top: -3px; clip-path: polygon(0 0, 100% 0, 0 100%); border-top-left-radius: 6px; transform-origin: 33% 33%; }
.gcam-k2 { right: -3px; bottom: -3px; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 6px; transform-origin: 67% 67%;
  background: linear-gradient(315deg, var(--gcam-kiymik-1) 0%, var(--gcam-kiymik-2) 50%, color-mix(in srgb, var(--gcam-altin) 85%, transparent) 100%); }

/* değişim anında ortada nabız atan cam halka */
.gcam-halka { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; z-index: 1; pointer-events: none; opacity: 0; }
.gcam-halka i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--gcam-halka);
  box-shadow: inset 0 0 18px var(--gcam-halka-ic), 0 0 22px color-mix(in srgb, var(--gcam-altin) 30%, transparent); }
.gcam-halka i:nth-child(2) { inset: 26px; border-color: var(--gcam-halka-ic); }
.gcam-halka i:nth-child(3) { inset: 56px; border: 0; background: radial-gradient(circle at 35% 30%, var(--gcam-halka-ic), color-mix(in srgb, var(--gcam-altin) 35%, transparent) 70%); box-shadow: none; }

/* ---------- içerik ---------- */
.gcam-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 18px; color: var(--gcam-ink); }
.gcam-logo svg { width: 46px; height: 46px; display: block; }
.gcam-logo .gcam-nokta { fill: var(--gcam-altin); }
.gcam-logo b { font: 700 13px/1 var(--font-display, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif); letter-spacing: .22em; }
.gcam-logo small { font-size: 11.5px; color: var(--gcam-ink-2); letter-spacing: .02em; }
.gcam-panel { display: block; }
.gcam-panel[hidden] { display: none !important; }
.gcam-panel h1, .gcam-panel h2 { margin: 0; text-align: center; font: 700 25px/1.15 var(--font-display, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif); letter-spacing: -.02em; color: var(--gcam-ink); }
.gcam-alt-baslik { margin: 6px 0 18px; text-align: center; font-size: 14px; line-height: 1.45; color: var(--gcam-ink-2); }
.gcam-form { display: grid; gap: 14px; margin: 0; }
.gcam-et { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--gcam-ink-2); }
.gcam-et > span:first-child { padding-left: 2px; }
.gcam-girdi { position: relative; display: block; }
.gcam-girdi > svg.gcam-ik { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--gcam-ink-3); pointer-events: none; transition: color .2s; }
.gcam-girdi:focus-within > svg.gcam-ik { color: var(--gcam-altin-koyu); }
.gcam input.gcam-in, .gcam .gcam-girdi input { width: 100%; min-height: 50px; padding: 12px 14px 12px 44px; border-radius: 15px; border: 1px solid var(--gcam-alan-kenar); background: var(--gcam-alan);
  color: var(--gcam-ink); font-family: inherit; font-size: 16px; font-weight: 400; line-height: 1.3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); outline: none; transition: border-color .2s, background-color .2s; }
.gcam .gcam-girdi input::placeholder { color: var(--gcam-ink-3); opacity: 1; }
.gcam .gcam-girdi input:focus, .gcam .gcam-girdi input:focus-visible { background: var(--gcam-alan-odak); border-color: var(--gcam-bronz); box-shadow: 0 0 0 3px var(--gcam-odak); }
.gcam .gcam-girdi.gcam-sifre input { padding-right: 50px; }
.gcam .gcam-girdi input.kod-giris { padding-left: 14px; }
.gcam-goz { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--gcam-ink-2);
  display: grid; place-items: center; cursor: pointer; padding: 0; margin: 0; }
.gcam-goz svg { width: 20px; height: 20px; }
.gcam-goz:hover { background: var(--gcam-ikincil); }
.gcam-goz:focus-visible { outline: 3px solid var(--gcam-odak); outline-offset: 0; }
.gcam-goz .gcam-goz-kapali { display: none; }
.gcam-goz[aria-pressed="true"] .gcam-goz-acik { display: none; }
.gcam-goz[aria-pressed="true"] .gcam-goz-kapali { display: block; }

.gcam-dug { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; margin: 4px 0 0; padding: 12px 20px;
  border: 0; border-radius: 999px; background: var(--gcam-dug); color: var(--gcam-dug-yazi); font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 color-mix(in srgb, var(--gcam-altin) 55%, transparent), 0 8px 22px rgba(30, 20, 5, .22);
  transition: transform .18s cubic-bezier(.32, .72, 0, 1), box-shadow .2s; }
.gcam-dug::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 34%; pointer-events: none; transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, var(--gcam-dug-parilti), transparent); }
.gcam-dug:hover { transform: translateY(-1px); }
.gcam-dug:hover::after { animation: gcam-sheen 1.1s cubic-bezier(.32, .72, 0, 1); }
.gcam-dug:active { transform: translateY(0) scale(.985); }
.gcam-dug:disabled { opacity: .7; cursor: progress; background: var(--gcam-ikincil); color: var(--gcam-ink-2); box-shadow: none; transform: none; }
.gcam-dug:focus-visible { outline: 3px solid var(--gcam-odak); outline-offset: 3px; }
.gcam-dug svg { width: 18px; height: 18px; }
.gcam-dug.ikincil { background: var(--gcam-ikincil); color: var(--gcam-ikincil-yazi); box-shadow: inset 0 0 0 1px var(--gcam-alan-kenar); }
@keyframes gcam-sheen { to { transform: translateX(560%) skewX(-18deg); } }

.gcam-hata, .gcam .error { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gcam-hata-zemin); color: var(--gcam-hata); font-size: 14px; line-height: 1.4; }
.gcam .hata:empty, .gcam-hata:empty { display: none; }
.gcam .hata { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gcam-hata-zemin); color: var(--gcam-hata); font-size: 14px; }
.gcam .ok { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--gcam-ok-zemin); color: var(--gcam-ok); font-size: 14px; }
.gcam-satir { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.gcam-satir.ortala { justify-content: center; }
.gcam a, .gcam-bag { color: var(--gcam-baglanti); font-weight: 600; text-decoration: none; }
.gcam a:hover, .gcam-bag:hover { text-decoration: underline; text-underline-offset: 3px; }
.gcam-bag { border: 0; background: none; padding: 10px 4px; margin: 0; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.gcam a:focus-visible, .gcam-bag:focus-visible { outline: 3px solid var(--gcam-odak); outline-offset: 2px; border-radius: 8px; }
.gcam-not { color: var(--gcam-ink-2); font-size: 13px; }
.gcam-ayrac { display: flex; align-items: center; gap: 12px; color: var(--gcam-ink-2); font-size: 12.5px; margin: 4px 0; }
.gcam-ayrac::before, .gcam-ayrac::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gcam-alan-kenar), transparent); }
.gcam .onay { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--gcam-ink-2); }
.gcam .onay input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--gcam-bronz); }
.gcam-bilgi { display: grid; gap: 12px; margin: 0 0 6px; padding: 0; list-style: none; }
.gcam-bilgi li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14.5px; line-height: 1.45; color: var(--gcam-ink); }
.gcam-bilgi li > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; color: var(--gcam-altin-koyu);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gcam-altin) 60%, transparent); background: color-mix(in srgb, var(--gcam-altin) 10%, transparent); }
.gcam-alt { margin: 16px 0 0; text-align: center; font-size: 12px; color: var(--gcam-ink-2); }
.gcam-kod { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--gcam-ikincil); }

/* kartın altındaki avantaj şeridi (site) */
.gcam-avantaj { width: min(410px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.gcam-avantaj li { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: 18px; color: var(--gcam-ink);
  background: color-mix(in srgb, var(--gcam-zemin) 70%, transparent); box-shadow: inset 0 0 0 1px var(--gcam-alan-kenar); }
.gcam-avantaj svg { width: 20px; height: 20px; color: var(--gcam-altin-koyu); }
.gcam-avantaj b { font-size: 12.5px; line-height: 1.25; }
.gcam-avantaj small { font-size: 11px; color: var(--gcam-ink-2); line-height: 1.3; }

/* ilk açılış: kart yumuşakça kalkar (sarmalda YALNIZ transform; saydamlık camın kendisinde — ataya opacity verilirse backdrop-filter bir an kaybolur) */
.gcam.gcam-giris-anim { animation: gcam-kalk .75s cubic-bezier(.32, .72, 0, 1) both; }
.gcam.gcam-giris-anim > .gcam-kart, .gcam.gcam-giris-anim > .gcam-golge, .gcam.gcam-giris-anim > .gcam-kenar { animation: gcam-sol .6s ease-out both; }
.gcam.gcam-giris-anim > .gcam-k1 { animation: gcam-kiymik-gel .9s .15s cubic-bezier(.32, .72, 0, 1) both; }
.gcam.gcam-giris-anim > .gcam-k2 { animation: gcam-kiymik-gel2 .9s .15s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes gcam-kalk { from { transform: translateY(16px) scale(.97); } }
@keyframes gcam-sol { from { opacity: 0; } }
@keyframes gcam-kiymik-gel { from { opacity: 0; transform: translate(-12px, -12px) rotate(-40deg); } }
@keyframes gcam-kiymik-gel2 { from { opacity: 0; transform: translate(12px, 12px) rotate(-40deg); } }
.gcam-logo .gcam-nokta { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .gcam.gcam-giris-anim, .gcam.gcam-giris-anim > * { animation: none; }
  .gcam-dug, .gcam-dug:hover { transition: none; transform: none; }
  .gcam-dug:hover::after { animation: none; }
}
@media (max-width: 360px) { .gcam-avantaj { grid-template-columns: 1fr; } .gcam-avantaj li { grid-template-columns: 24px 1fr; justify-items: start; text-align: left; } .gcam-avantaj li small { grid-column: 2; } }