/* =====================================================================
   BOLUNMUS GIRIS EKRANI
   Sol: beyaz form paneli.  Sag: koyu sahne + arac animasyonu.
   Tum gorseller SVG/CSS; dis dosya ya da betik yuklenmez.
   ===================================================================== */

.gr-body{margin:0;background:#fff;min-height:100vh}

.gr-duzen{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  min-height:100vh
}

/* ---------------------------------------------------------------- SOL */
.gr-sol{
  display:flex;flex-direction:column;min-width:0;
  padding:clamp(22px,3vw,40px) clamp(20px,4vw,64px)
}
.gr-marka{display:flex;align-items:center;gap:10px}
.gr-marka img{height:38px;width:auto;display:block}
.gr-etiket{
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
  color:var(--brand-700);background:var(--brand-soft);
  border:1px solid rgba(255,201,38,.5);
  padding:3px 10px;border-radius:999px;white-space:nowrap
}

.gr-form-alan{flex:1;display:grid;place-items:center;padding:32px 0}
.gr-form-ic{width:100%;max-width:430px}

.gr-eyebrow{
  margin:0 0 10px;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-700)
}
.gr-h1{margin:0 0 8px;font-size:clamp(1.7rem,3.2vw,2.15rem);line-height:1.15;letter-spacing:-.02em}
.gr-alt{margin:0 0 26px;color:var(--muted);font-size:.95rem}

/* Alanlar */
.gr-alan{margin-bottom:16px}
.gr-lbl{display:block;font-size:.83rem;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.gr-kutu{position:relative;display:flex;align-items:center}
.gr-kutu input{
  width:100%;padding:13px 14px 13px 44px;font-size:.95rem;
  border:1.5px solid var(--line);border-radius:14px;background:#fbfcfd;
  color:var(--ink);transition:border-color .15s,box-shadow .15s,background .15s
}
.gr-kutu input:focus{
  outline:none;background:#fff;border-color:var(--brand);
  box-shadow:0 0 0 4px var(--brand-ring)
}
.gr-kutu input::placeholder{color:#93a1b3}
.gr-ikon{
  position:absolute;left:15px;display:grid;place-items:center;
  color:var(--muted-2);pointer-events:none;line-height:0
}
.gr-kutu:focus-within .gr-ikon{color:var(--brand-700)}
.gr-goz{
  position:absolute;right:8px;display:grid;place-items:center;
  width:34px;height:34px;border:0;background:none;cursor:pointer;
  color:var(--muted-2);border-radius:9px
}
.gr-goz:hover{background:var(--line-2);color:var(--ink-2)}
.gr-goz:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

.gr-hatirla{display:flex;align-items:flex-start;gap:9px;font-size:.86rem;color:var(--ink-2);margin:4px 0 20px;line-height:1.45}
.gr-hatirla input{width:17px;height:17px;accent-color:var(--brand);margin:2px 0 0;flex:none}

/* Kayıt formu ek parçaları */
.gr-ikili{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.gr-ikili{grid-template-columns:1fr;gap:0}}

.gr-kutu select{
  width:100%;padding:13px 14px 13px 44px;font-size:.95rem;
  border:1.5px solid var(--line);border-radius:14px;background:#fbfcfd;
  color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:38px
}
.gr-kutu select:focus{outline:none;background-color:#fff;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}

.gr-hata{margin:-10px 0 14px;font-size:.8rem;font-weight:700;color:var(--err)}
.gr-not{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;
  padding:10px 12px;border-radius:12px;line-height:1.45;
  background:var(--info-soft);color:#12518f;font-size:.8rem;font-weight:600
}
.gr-not svg{flex:none;margin-top:1px}

/* Bireysel / Kurumsal seçimi */
.gr-segment{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gr-segment input{position:absolute;opacity:0;width:0;height:0}
.gr-segment label{
  display:grid;place-items:center;padding:12px 10px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:14px;background:#fbfcfd;
  font-size:.88rem;font-weight:700;color:var(--ink-2);transition:.15s;text-align:center
}
.gr-segment label:hover{border-color:var(--brand-600)}
.gr-segment input:checked + label{
  border-color:var(--brand);background:var(--brand-soft);color:var(--brand-700)
}
.gr-segment input:focus-visible + label{outline:3px solid var(--brand-ring);outline-offset:2px}

/* Uzun kayıt formunda sol sütun kaydırılabilir kalsın */
.gr-form-alan{align-items:start}

/* Koyu ana dugme — referanstaki gibi tam genislik ve ok isareti */
.gr-dugme{
  width:100%;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 20px;border:0;border-radius:14px;cursor:pointer;
  background:var(--logo-ink);color:#fff;font:inherit;font-weight:800;font-size:.98rem;
  transition:transform .12s,box-shadow .18s,background .18s;
  box-shadow:0 8px 20px -10px rgba(15,23,42,.7)
}
.gr-dugme:hover{background:#22262e;box-shadow:0 12px 26px -10px rgba(15,23,42,.75)}
.gr-dugme:active{transform:translateY(1px)}
.gr-dugme:focus-visible{outline:3px solid var(--brand-ring);outline-offset:2px}
.gr-dugme span{transition:transform .18s}
.gr-dugme:hover span{transform:translateX(3px)}

.gr-baglantilar{margin-top:20px;font-size:.9rem;color:var(--muted);text-align:center}
.gr-baglantilar a{font-weight:700}
.gr-baglantilar p{margin:0 0 6px}

.gr-dip{
  font-size:.8rem;color:var(--muted-2);padding-top:14px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
}
.gr-yapimci{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--muted-2);font-size:.72rem;opacity:.8;transition:opacity .18s
}
.gr-yapimci:hover,.gr-yapimci:focus-visible{opacity:1}
.gr-yapimci img{height:21px;width:auto;display:block}
@media (max-width:640px){
  .gr-dip{justify-content:center;text-align:center}
}

.gr-sol .alert{margin-bottom:18px;border-radius:14px}

/* ---------------------------------------------------------------- SAG */
.gr-sag{
  position:relative;overflow:hidden;color:#fff;
  background:#0d0f13;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:clamp(30px,4vw,58px) clamp(26px,4vw,58px)
}
/* Marka isigi — referanstaki ates parlamasinin karsiligi */
.gr-sag::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 420px at 78% 96%, rgba(255,201,38,.22), transparent 66%),
    radial-gradient(560px 320px at 12% 4%, rgba(255,201,38,.07), transparent 64%);
  pointer-events:none
}
.gr-sag-ic{position:relative;z-index:2;max-width:520px}

.gr-durum{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:#e8edf5;font-size:.73rem;font-weight:800;letter-spacing:.1em;
  padding:8px 16px;border-radius:999px
}
.gr-durum i{width:8px;height:8px;border-radius:50%;background:#22c55e;flex:none;
  box-shadow:0 0 0 4px rgba(34,197,94,.18)}

.gr-sahne-h{
  margin:26px 0 14px;font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.08;
  letter-spacing:-.03em;font-weight:800
}
.gr-sahne-h em{color:var(--brand);font-style:normal}
.gr-sahne-p{margin:0 0 6px;color:#c2cad6;font-size:1.02rem;line-height:1.55;max-width:34ch}
.gr-sahne-kim{margin:0;color:#7d8798;font-size:.86rem}

.gr-saat-kart{
  display:inline-flex;align-items:center;gap:18px;margin-top:28px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  border-radius:18px;padding:16px 26px
}
.gr-saat{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.gr-selam{display:block;color:var(--brand);font-weight:800;font-size:.92rem}
.gr-dilim{display:block;color:#9aa3b2;font-size:.71rem;font-weight:800;letter-spacing:.09em}

/* ------------------------------------------------------------ SAHNE
   Uzun pozlama isik izleri. Bilerek SOYUT: elle cizilmis bir arac
   figuru ne kadar iyi cizilirse cizilsin cizgi film gibi durur.
   Burada arac yok — gece yolunda uzun pozlamada kalan far ve stop
   izleri var.

   IZLER HIC KAYBOLMAZ. Ilk denemede izler ekran disindan girip
   ekran disina cikiyordu; sahne cogu anda BOS gorunuyordu ve giris
   ekrani "yuklenmemis" izlenimi veriyordu. Simdi hepsi sahnede
   duruyor, yalnizca yavasca suzuluyor ve parlaklikari degisiyor.
   -------------------------------------------------------------------- */
.gr-sahne{
  position:absolute;left:0;right:0;bottom:0;height:min(62%,460px);
  z-index:1;pointer-events:none;overflow:hidden
}

/* Ufuk parlamasi — sahnenin isik kaynagi, sahnenin ICINDE duruyor */
.gr-ufuk{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(170%,1060px);height:min(105%,470px);
  background:radial-gradient(closest-side,
      rgba(255,201,38,.42), rgba(255,160,40,.16) 46%, transparent 74%);
  filter:blur(20px)
}

/* Asfalt — sahnenin dibinde koyu bir zemin ve ince yansima */
.gr-zemin{
  position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg, rgba(10,12,16,0) 0%, #0a0c10 62%);
  overflow:hidden
}
.gr-hat{
  position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,201,38,.35),transparent)
}

/* Isik izleri */
.gr-izler{position:absolute;inset:0}
.gr-iz{
  position:absolute;height:4px;border-radius:99px;
  transform-origin:center;
  animation:grSuz 9s ease-in-out infinite alternate
}
/* Far izleri — soguk beyaz */
.gr-iz-far{
  top:44%;left:-6%;width:64%;
  background:linear-gradient(90deg,transparent,rgba(255,248,225,.98) 45%,rgba(255,255,255,.4) 72%,transparent);
  box-shadow:0 0 34px rgba(255,238,190,.75);
  filter:blur(2px);transform:rotate(-2.4deg)
}
.gr-iz-2{
  top:56%;left:16%;width:52%;height:3px;
  animation-duration:11s;animation-delay:-3s;
  filter:blur(3px);transform:rotate(-1.2deg);opacity:.7
}
/* Stop izleri — sicak kirmizi */
.gr-iz-stop{
  top:66%;left:22%;width:58%;
  background:linear-gradient(90deg,transparent,rgba(255,96,64,.9) 40%,rgba(255,150,70,.4) 74%,transparent);
  box-shadow:0 0 36px rgba(255,100,55,.55);
  filter:blur(2.5px);transform:rotate(1.8deg);
  animation-duration:12s;animation-delay:-6s
}
.gr-iz-4{
  top:76%;left:6%;width:46%;height:3px;
  animation-duration:10s;animation-delay:-2s;
  filter:blur(3.5px);transform:rotate(1deg);opacity:.6
}
/* Ince marka izi — sahneyi markaya baglar */
.gr-iz-ince{
  top:34%;left:34%;width:40%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,201,38,.95) 50%,transparent);
  box-shadow:0 0 28px rgba(255,201,38,.75);
  filter:blur(1.5px);transform:rotate(-3deg);
  animation-duration:8s;animation-delay:-4s
}

/* Ust kenari panele karistiran YUMUSAK gecis.
   Once burada tam opak bir katman vardi ve sahnenin yarisini
   siliyordu; artik yalnizca ilk %18'i yumusatiyor. */
.gr-perde{
  position:absolute;inset:0;
  background:linear-gradient(180deg, #0d0f13 0%, rgba(13,15,19,.55) 10%, transparent 26%)
}

@keyframes grSuz{
  0%  {transform:translateX(-3%)  scaleX(.94); opacity:.55}
  50% {transform:translateX(2%)   scaleX(1.03);opacity:1}
  100%{transform:translateX(5%)   scaleX(.97); opacity:.7}
}

/* --------------------------------------------------------- DAR EKRAN */
@media (max-width:980px){
  .gr-duzen{grid-template-columns:1fr}
  /* Sahne altta ve kisa: telefonda formun altinda ince bir serit
     olarak duruyor, formu asagi itmiyor. */
  .gr-sag{min-height:290px;order:2;justify-content:center}
  .gr-sol{order:1}
  .gr-sahne{height:58%}
  .gr-saat-kart{margin-top:20px}
}
@media (max-width:560px){
  .gr-sag{min-height:240px}
  .gr-sahne-h{font-size:1.7rem}
  .gr-sahne-p{font-size:.94rem}
}

/* Hareketi azalt: her sey durur, sahne yine gorunur kalir. */
@media (prefers-reduced-motion:reduce){
  .gr-iz{animation:none;opacity:.85}
}