/* ================================================================
   Lead Magnet (Ucretsiz Rehber) - hero karti + form modali
   Markup: templates/sector.php (rehberi olan sektorlerde render edilir)
   JS:     /assets/js/components/guide-magnet.js
   API:    /api/submit-guide.php

   Kart: site dark temasi, neon vurgulu, dikkat cekici.
   Modal: acik krem tema (dark site uzerinde kontrast - teklif modali kurali).
   ================================================================ */

/* ---------- HERO KARTI ---------- */
.gm-card{
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 34px auto 0;
  padding: 20px 24px;
  max-width: 720px;
  background: linear-gradient(135deg, rgba(19,27,48,.92), rgba(13,20,40,.88));
  border: 1px solid rgba(34,211,238,.28);
  border-radius: var(--radius-lg, 22px);
  box-shadow: 0 0 0 1px rgba(34,211,238,.08), 0 18px 50px rgba(0,0,0,.45), 0 0 38px rgba(34,211,238,.12);
  overflow: hidden;
  animation: gmFloat 5s ease-in-out infinite;
}
@keyframes gmFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce){
  .gm-card{ animation: none; }
}
/* isik suzmesi (shine sweep) */
.gm-card::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(34,211,238,.10) 48%, rgba(255,255,255,.07) 52%, transparent 65%);
  transform: translateX(-100%);
  animation: gmShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gmShine{
  0%, 55%{ transform: translateX(-100%); }
  85%, 100%{ transform: translateX(100%); }
}

.gm-cover{
  position: relative;
  flex: 0 0 92px;
  width: 92px; height: 124px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--grad-brand, linear-gradient(135deg,#024da1,#22d3ee));
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  transform: rotate(-3deg);
  display: grid; place-items: center;
}
.gm-cover img{ width:100%; height:100%; object-fit: cover; }
.gm-cover svg{ width: 38px; height: 38px; stroke: #fff; opacity:.92; }
.gm-fmt{
  position: absolute; right: 6px; bottom: 6px;
  padding: 2px 7px;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #06121c;
  background: var(--neon, #22d3ee);
  border-radius: 5px;
}

.gm-body{ flex: 1 1 auto; min-width: 0; }
.gm-badge{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px;
  font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--neon, #22d3ee);
  background: rgba(34,211,238,.10);
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 999px;
  text-transform: uppercase;
}
.gm-pulse{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--neon, #22d3ee);
  box-shadow: 0 0 0 0 rgba(34,211,238,.6);
  animation: gmPulse 1.6s ease-out infinite;
}
@keyframes gmPulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,211,238,.55); }
  70%{ box-shadow: 0 0 0 9px rgba(34,211,238,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,211,238,0); }
}
.gm-title{
  margin: 10px 0 6px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 19px; font-weight: 700; line-height: 1.3;
  color: var(--text, #e6ebf5);
  text-wrap: balance; /* satirlari dengeler, tek kelime alta dusmez */
}
.gm-desc{
  margin: 0 0 8px;
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-muted, #94a3b8);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.gm-meta{
  font-size: 12px;
  color: var(--text-dim, #64748b);
}
.gm-meta strong{ color: var(--text-muted, #94a3b8); font-weight: 600; }

.gm-btn{
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---------- MODAL (acik krem tema) ---------- */
.gm-modal{
  position: fixed; inset: 0; z-index: 9100;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.gm-modal.is-open{ display: flex; }
body.gm-open{ overflow: hidden; }

.gm-backdrop{
  position: absolute; inset: 0;
  background: rgba(2,4,10,.74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  animation: gmFadeIn .22s ease forwards;
}
@keyframes gmFadeIn{ to{ opacity: 1; } }

.gm-dialog{
  position: relative;
  width: min(450px, 100%);
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px); /* mobil tarayici cubugu/klavyesi icin */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fbf9f5;
  color: #1c2433;
  border-radius: 22px;
  box-shadow: 0 40px 90px rgba(2,8,23,.6), 0 0 0 1px rgba(255,255,255,.5) inset;
  padding: 26px 30px 28px;
  transform: translateY(14px) scale(.985);
  opacity: 0;
  animation: gmRise .32s cubic-bezier(.2,.7,.2,1) .04s forwards;
}
@keyframes gmRise{ to{ transform: translateY(0) scale(1); opacity: 1; } }
/* ust ince marka aksani - kose yaricapi kadar iceri alindi ki yuvarlak
   koselerin disina tasmasin (iOS overflow kirpma sorunu). */
.gm-dialog::before{
  content: ""; position: absolute; top: 0; left: 22px; right: 22px;
  height: 3px;
  background: linear-gradient(90deg, #024da1, #22d3ee, #38bdf8);
  border-radius: 0 0 3px 3px;
}

.gm-close{
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(28,36,51,.05);
  color: #6b7488;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gm-close svg{ width: 17px; height: 17px; }
.gm-close:hover{ background: rgba(28,36,51,.11); color: #1c2433; transform: rotate(90deg); }

.gm-m-head{ display: flex; gap: 16px; align-items: center; margin: 6px 0 20px; padding-right: 34px; }
.gm-m-cover{
  flex: 0 0 64px; width: 64px; height: 86px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg,#024da1,#22d3ee);
  display: grid; place-items: center;
  box-shadow: 0 10px 22px rgba(2,77,161,.28);
  transform: rotate(-3deg);
}
.gm-m-cover img{ width: 100%; height: 100%; object-fit: cover; }
.gm-m-cover svg{ width: 26px; height: 26px; stroke: #fff; }
.gm-m-headtext{ min-width: 0; }
.gm-m-eyebrow{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.4px;
  color: #0891b2; text-transform: uppercase;
}
.gm-m-dot{ width: 6px; height: 6px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.gm-m-title{
  margin: 6px 0 0;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 18px; font-weight: 700; line-height: 1.28; color: #101826;
  text-wrap: balance; /* satirlari dengeler, tek kelime alta dusmez */
}
.gm-m-tag{
  display: inline-block; margin-top: 8px;
  padding: 3px 10px;
  font-size: 11px; font-weight: 600; color: #3c4555;
  background: rgba(2,77,161,.07);
  border-radius: 6px;
}

.gm-form .gm-field{ margin-bottom: 13px; }
.gm-form label{
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: #3c4555;
}
.gm-input{ position: relative; }
.gm-input-ic{
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: #9aa1b0; pointer-events: none;
  transition: color .15s ease;
}
.gm-form input[type="text"],
.gm-form input[type="email"],
.gm-form input[type="tel"]{
  width: 100%;
  padding: 12px 14px 12px 40px;
  font-size: 14.5px; font-family: inherit;
  color: #131b2c;
  background: #fff;
  border: 1px solid #e2dccf;
  border-radius: 11px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.gm-form input::placeholder{ color: #b3b9c4; }
.gm-form input:focus{
  border-color: #0891b2;
  box-shadow: 0 0 0 3px rgba(8,145,178,.13);
}
.gm-input:focus-within .gm-input-ic{ color: #0891b2; }
.gm-form input.gm-err{ border-color: #dc2626; }
.gm-input:has(input.gm-err) .gm-input-ic{ color: #dc2626; }

.gm-kvkk{
  display: flex; gap: 11px; align-items: flex-start;
  margin: 15px 0 18px; padding: 12px 14px;
  font-size: 12px; line-height: 1.55; color: #5b6474;
  background: #fff; border: 1px solid #e2dccf; border-radius: 11px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.gm-kvkk:hover{ border-color: #c3cad6; }
.gm-kvkk:has(input:checked){ border-color: #0891b2; background: rgba(8,145,178,.05); }
/* ozel onay kutusu - native checkbox'i gizleyip belirgin bir kutu cizer */
.gm-kvkk input{
  appearance: none; -webkit-appearance: none;
  flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0;
  border: 2px solid #c4ccd9; border-radius: 5px; background: #fff;
  cursor: pointer; position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.gm-kvkk input:hover{ border-color: #0891b2; }
.gm-kvkk input:checked{
  background-color: #0891b2; border-color: #0891b2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 11px 11px; background-position: center; background-repeat: no-repeat;
}
.gm-kvkk input:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(8,145,178,.22); }
.gm-kvkk a{ color: #0891b2; text-decoration: underline; font-weight: 600; }
.gm-kvkk.gm-err{ border-color: #dc2626; background: rgba(220,38,38,.04); color: #b91c1c; }
.gm-kvkk.gm-err input{ border-color: #dc2626; }

.gm-submit{
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  padding: 15px 20px;
  font-size: 15px; font-weight: 700; font-family: inherit;
  color: #fff;
  background: linear-gradient(135deg, #024da1, #0891b2);
  border-radius: 13px;
  box-shadow: 0 12px 28px rgba(8,145,178,.32);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.gm-submit svg{ width: 18px; height: 18px; transition: transform .2s ease; }
.gm-submit:hover{ transform: translateY(-1px); box-shadow: 0 16px 34px rgba(8,145,178,.4); }
.gm-submit:hover svg{ transform: translateX(3px); }
.gm-submit[disabled]{ opacity: .6; transform: none; cursor: wait; }
.gm-submit[disabled] svg{ display: none; }

.gm-trust{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
  margin: 16px 0 0;
}
.gm-trust span{
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; color: #6b7488;
}
.gm-trust svg{ width: 14px; height: 14px; color: #0891b2; }

.gm-note{
  margin: 14px 0 0; text-align: center;
  font-size: 11.5px; line-height: 1.55; color: #9aa1b0;
}
.gm-alert{
  display: none;
  margin: 0 0 12px; padding: 10px 14px;
  font-size: 13px; line-height: 1.5;
  color: #991b1b; background: #fee2e2;
  border-radius: 10px;
}
.gm-alert.is-show{ display: block; }

/* basari ekrani */
.gm-success{ text-align: center; padding: 14px 4px 6px; }
.gm-success .gm-check{
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(8,145,178,.10);
  display: grid; place-items: center;
}
.gm-success .gm-check svg{ width: 30px; height: 30px; stroke: #0891b2; }
.gm-success h3{
  margin: 0 0 8px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 19px; color: #131b2c;
}
.gm-success p{ margin: 0 0 6px; font-size: 13.5px; line-height: 1.6; color: #5b6474; }
.gm-success .gm-spam{ font-size: 12px; color: #8a92a3; max-width: 30ch; margin-left: auto; margin-right: auto; text-wrap: balance; }

/* ---------- MOBIL ---------- */
@media (max-width: 640px){
  .gm-card{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    margin-top: 26px;
  }
  .gm-cover{ flex-basis: 72px; width: 72px; height: 98px; }
  .gm-body{ flex: 1 1 calc(100% - 92px); }
  .gm-btn{ flex: 1 1 100%; text-align: center; }
  .gm-title{ font-size: 16.5px; }

  /* Modali ortalamak yerine ustten hizala: klavye acilinca KVKK + buton
     klavyenin arkasinda kalmasin, dialog rahatca kaydirilabilsin. */
  .gm-modal{ align-items: flex-start; padding: 12px; }
  .gm-dialog{
    padding: 22px 20px 22px;
    max-height: calc(100dvh - 24px);
    width: 100%;
  }
  .gm-m-cover{ flex-basis: 56px; width: 56px; height: 76px; }
  .gm-m-title{ font-size: 16.5px; }
}