/* ===========================================================================
   GİRİŞ — RENKLİ HÜCRE (2026-11-06)
   Ekran dört hücreli logo: sol üst sosyal medya (pembe, kavisli köşe), sağ üst
   ekip (mavi, daire köşe), sol alt YZ temsilci (mor, konuşma kuyruğu), sağ alt
   santral (kehribar). Form ortadaki kartta. Yazı kavisli köşeden uzak durur.
   Telefonda hücreler üstte 2x2 küçük karo, kart altta.
   =========================================================================== */
body.gh { background: var(--bg); min-height: 100dvh; margin: 0; }
.gh-dort { position: fixed; inset: 12px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; z-index: 0; }
.gh-h { position: relative; overflow: hidden; padding: 40px; color: #fff; display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: scale(.97); animation: ghHucre .8s var(--e-out) forwards; }
.gh-h:nth-child(2) { animation-delay: .07s; } .gh-h:nth-child(3) { animation-delay: .14s; } .gh-h:nth-child(4) { animation-delay: .21s; }
@keyframes ghHucre { to { opacity: 1; transform: none; } }
.gh-h::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 15% 10%, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.gh-h1 { background: linear-gradient(150deg, #FF7A93, #E8335A); border-radius: 120px 26px 26px 26px; }
.gh-h4 { background: linear-gradient(150deg, #5CCBFF, #0B8FD6); border-radius: 26px clamp(140px, 17vw, 240px) 26px 26px; align-items: flex-end; justify-content: flex-end; text-align: right; }
.gh-h2 { background: linear-gradient(150deg, #9C85FF, #6142F0); border-radius: 26px 26px 26px 6px; justify-content: flex-end; }
.gh-h3 { background: linear-gradient(150deg, #FFBE5C, #F08A00); border-radius: 26px 26px 120px 26px; justify-content: flex-end; align-items: flex-end; text-align: right; }
.gh-ad { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; font: 800 clamp(20px, 2vw, 26px)/1 var(--font-display); letter-spacing: -.03em; }
.gh-ad > span { width: 42px; height: 42px; border-radius: 34% 12% 12% 12%; display: grid; place-items: center; background: rgba(255,255,255,.22); }
.gh-ad .icon { width: 21px; height: 21px; }
.gh-h p { position: relative; z-index: 1; margin: 0; max-width: 30ch; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.92); }
.gh-an { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; color: #0D1220;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); max-width: 300px; text-align: left;
  opacity: 0; transform: translateY(8px); animation: ghAn .6s var(--e-out) .6s forwards; }
.gh-h2 .gh-an { animation-delay: .75s; } .gh-h3 .gh-an { animation-delay: .9s; } .gh-h4 .gh-an { animation-delay: 1.05s; }
@keyframes ghAn { to { opacity: 1; transform: none; } }
.gh-an b { display: block; font-size: 13px; line-height: 1.25; }
.gh-an small { display: block; font-size: 12px; color: #5E6779; }
.gh-ik { width: 32px; height: 32px; border-radius: 30% 11% 11% 11%; display: grid; place-items: center; flex: 0 0 auto; }
.gh-ik .icon { width: 16px; height: 16px; }
.gh-ig { background: #FFEEF2; color: #E1306C; }
.gh-an time { font: 700 12.5px/1 var(--font-body); color: #9F5300; margin-left: 4px; }
.gh-nokta { width: 9px; height: 9px; border-radius: 50%; background: #FF9F1C; flex: 0 0 auto; animation: ghZil 1.4s infinite; }
@keyframes ghZil { 0% { box-shadow: 0 0 0 0 rgba(255,159,28,.6); } 70% { box-shadow: 0 0 0 7px rgba(255,159,28,0); } 100% { box-shadow: 0 0 0 0 rgba(255,159,28,0); } }

/* ---- Ortadaki kart */
.gh-sahne { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 40px 16px; }
.gh-kart { width: min(440px, 100%); background: var(--card); color: var(--text); border-radius: 22px; padding: 30px 30px 22px; display: flex; flex-direction: column; gap: 20px;
  box-shadow: 0 0 0 8px rgba(255,255,255,.5), 0 40px 90px -30px rgba(13,18,32,.55), 0 2px 8px rgba(13,18,32,.08);
  opacity: 0; transform: translateY(10px) scale(.985); animation: ghKart .6s var(--e-out) .15s forwards; }
@keyframes ghKart { to { opacity: 1; transform: none; } }
.gh-logo { display: flex; align-items: center; justify-content: center; gap: 10px; }
.gh-logo svg { width: 36px; height: 36px; }
.gh-logo b { font: 800 22px/1 var(--font-display); letter-spacing: -.035em; }
.gh-logo img { max-height: 44px; max-width: 200px; object-fit: contain; }
.gh-bas { text-align: center; }
.gh-bas h1 { font: 800 clamp(26px, 3vw, 30px)/1.1 var(--font-display); letter-spacing: -.035em; }
.gh-bas p { margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.gh-kart .flash { margin: 0; border-radius: 10px; }
.gh-form { display: flex; flex-direction: column; gap: 14px; }
.gh-alan { display: flex; flex-direction: column; gap: 6px; }
.gh-alan label { font-weight: 600; font-size: 13px; }
.gh-kutu { position: relative; display: flex; align-items: center; }
.gh-kutu > .icon { position: absolute; left: 13px; width: 17px; height: 17px; color: #8A93A6; pointer-events: none; }
.gh-kutu input { width: 100%; height: 48px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--card); color: var(--text);
  padding: 0 46px 0 40px; font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.gh-kutu input:focus { outline: none; border-color: var(--h-marka); box-shadow: 0 0 0 4px var(--h-marka-a); }
.gh-goz { position: absolute; right: 6px; width: 36px; height: 36px; border-radius: 8px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: #6B7487; }
.gh-goz:hover { background: var(--surface-3); }
.gh-goz svg { width: 18px; height: 18px; }
.gh-goz[aria-pressed="true"] { color: var(--text); }
.gh-caps { display: none; font-size: 12.5px; color: #9F5300; font-weight: 500; }
.gh-caps.acik { display: block; }
.gh-git { height: 50px; border-radius: 10px; font-size: 15px; justify-content: center; gap: 8px; margin-top: 4px; }
.gh-git .icon { width: 17px; height: 17px; }
.gh-yuk { display: none; gap: 4px; font-style: normal; }
.gh-yuk i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: ghYuk .8s ease-in-out infinite; }
.gh-yuk i:nth-child(2) { animation-delay: .12s; } .gh-yuk i:nth-child(3) { animation-delay: .24s; }
@keyframes ghYuk { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
.gh-git.yukleniyor .gh-yuk { display: inline-flex; }
.gh-git.yukleniyor .icon { display: none; }
.gh-not { margin: 0; font-size: 13.5px; color: var(--muted); text-align: center; line-height: 1.6; }
.gh-not a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-2); }
.gh-not a:hover { text-decoration-color: var(--text); }
.gh-alt { display: flex; align-items: center; justify-content: center; gap: 7px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.gh-alt .icon { width: 15px; height: 15px; color: #14905A; }
html[data-theme="dark"] .gh-kart { box-shadow: 0 0 0 8px rgba(0,0,0,.25), 0 40px 90px -30px rgba(0,0,0,.8); }

@media (max-width: 1100px) { .gh-h p { display: none; } .gh-an { max-width: 230px; } }
@media (max-width: 900px) {
  .gh-dort { position: relative; inset: auto; margin: 12px 12px 0; height: 184px; gap: 8px; }
  .gh-h { padding: 14px; gap: 6px; justify-content: center !important; align-items: center !important; }
  .gh-h1 { border-radius: 64px 18px 18px 18px; } .gh-h4 { border-radius: 18px 80px 18px 18px; }
  .gh-h2 { border-radius: 18px 18px 18px 5px; } .gh-h3 { border-radius: 18px 18px 64px 18px; }
  .gh-ad { font-size: 15px; gap: 7px; } .gh-ad > span { width: 30px; height: 30px; } .gh-ad .icon { width: 16px; height: 16px; }
  .gh-an { display: none; }
  .gh-sahne { min-height: 0; display: block; padding: 12px 12px calc(20px + env(safe-area-inset-bottom)); }
  .gh-kart { padding: 24px 18px 18px; box-shadow: var(--shadow-sm); }
  .gh-logo { display: none; }
  .gh-bas { text-align: left; }
  /* iOS odakta yakınlaştırmasın */
  .gh-kutu input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-h, .gh-an, .gh-kart { animation: none; opacity: 1; transform: none; }
  .gh-nokta, .gh-yuk i { animation: none; }
}

/* ======================================================================= HATA VE GİRİŞ ANİMASYONU (2026-11-06, Hakan)
   Hatalı alan kırmızı + altında neden; bir kez kısa sallanma (geri bildirim).
   E-posta korunur, şifre boşaltılır (JS). Başarıda: düğme tike döner, kart
   kalkar, dört hücre ekranın ortasında logoya toplanır, panel açılır. */
.gh-hata { display: none; font-size: 12.5px; font-weight: 500; color: var(--coral); }
.gh-alan.hata .gh-hata { display: block; }
.gh-alan.hata label { color: var(--coral); }
.gh-alan.hata .gh-kutu input { border-color: var(--coral); box-shadow: 0 0 0 4px var(--coral-tint); }
.gh-alan.hata .gh-kutu > .icon { color: var(--coral); }
.gh-alan.salla .gh-kutu { animation: ghSalla .36s cubic-bezier(.36, .07, .19, .97); }
@keyframes ghSalla { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.gh-ust-hata { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 10px; background: var(--coral-tint); color: var(--coral); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.gh-ust-hata[hidden] { display: none; }
.gh-ust-hata .icon { width: 17px; height: 17px; margin-top: 1px; }
.gh-kutu input[readonly] { background: var(--surface-2); color: var(--muted); }

.gh-git { position: relative; transition: background-color .2s ease, transform .14s var(--e-out); }
.gh-git:disabled { cursor: default; }
/* tik gizli span içinde (hidden SVG'de işlemez); CSS gelmese de görünmez */
.gh-tik-k { display: none; }
.gh-git .gh-tik { display: block; width: 19px; height: 19px; stroke-dasharray: 24; stroke-dashoffset: 24; }
.gh-git.tamam { background: #14905A; box-shadow: 0 8px 18px -8px rgba(20,144,90,.7); }
.gh-git.tamam .icon, .gh-git.tamam .gh-yuk { display: none; }
.gh-git.tamam .gh-tik-k { display: inline-flex; }
.gh-git.tamam .gh-tik { animation: ghTik .32s var(--e-out) .05s forwards; }
@keyframes ghTik { to { stroke-dashoffset: 0; } }

.gh-son { position: fixed; left: 50%; top: 50%; z-index: 5; width: 86px; height: 86px; margin: -43px 0 0 -43px; opacity: 0; transform: scale(.9); pointer-events: none;
  transition: opacity .22s ease, transform .3s var(--e-out); }
.gh-son svg { width: 100%; height: 100%; display: block; }
body.giriliyor .gh-kart { animation: ghKartCik .22s ease-out forwards; }
@keyframes ghKartCik { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px) scale(.97); } }
body.giriliyor .gh-h > * { animation: ghIcerikCik .16s ease-out forwards; }
@keyframes ghIcerikCik { from { opacity: 1; } to { opacity: 0; } }
.gh-dort { transform-origin: center; transition: transform .6s cubic-bezier(.77, 0, .175, 1), opacity .2s ease; }
body.giriliyor .gh-dort { transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sx, .06), var(--sy, .08)); }
body.giriliyor-son .gh-dort { opacity: 0; }
body.giriliyor-son .gh-son { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gh-alan.salla .gh-kutu { animation: none; } .gh-dort, .gh-son { transition: none; } }