/* =========================
   A GRUP SİGORTA — STYLE.CSS (FINAL)
   ========================= */

/* Reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #0f172a;
  background: #f6f8fb;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font-family: inherit; }

/* Theme */
:root{
  --bg: #f6f8fb;
  --card: rgba(255,255,255,.82);
  --line: rgba(15,23,42,.08);
  --muted: rgba(15,23,42,.70);
  --muted2: rgba(15,23,42,.55);

  --dark: #0d1b2a;
  --dark2:#0b1623;

  --radius: 18px;
  --radius2: 14px;

  --shadow: 0 30px 80px rgba(2,6,23,.10), 0 8px 24px rgba(2,6,23,.06);
  --shadow2: 0 18px 55px rgba(2,6,23,.18);

  --ok: #16a34a;
  --err:#dc2626;
  --info:#2563eb;

  --wa: #16a34a;
  --wa2:#0f7a38;

  --focus: rgba(13,27,42,.12);
}

/* Layout helpers */
.container{
  width: min(980px, calc(100% - 36px));
  margin: 0 auto 28px;
  padding: 26px 26px 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.topbarInner{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto;
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.brandRow{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
}
.brandLogo{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(180deg, #0d1b2a 0%, #0a1420 100%);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: .5px;
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}
.brandText{ display: grid; gap: 2px; }
.brandName{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 16px;
}
.brandSub{
  font-size: 13px;
  color: var(--muted2);
  font-weight: 600;
}
.topActions{
  display: flex;
  gap: 10px;
  align-items: center;
}
.topPill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  font-weight: 800;
  font-size: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.topPill:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(2,6,23,.14);
}
.topPill.wa{
  background: linear-gradient(180deg, rgba(22,163,74,.92), rgba(15,122,56,.92));
  color: #fff;
  border-color: rgba(255,255,255,.18);
}

/* scroll glass */
.topbar.isGlass{
  background: rgba(255,255,255,.55);
  border-bottom: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(2,6,23,.08);
}

/* =========================
   HERO
   ========================= */
.hero{
  width: min(1200px, calc(100% - 36px));
  margin: 16px auto 18px;
}
.heroCard{
  border-radius: var(--radius);
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(15,23,42,.06);
  box-shadow: var(--shadow);
  padding: 22px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.heroTitle{
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.3px;
}
.heroHighlight{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(13,27,42,.08);
}
.heroDesc{
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
.heroBadges{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.heroBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(15,23,42,.08);
  color: rgba(15,23,42,.86);
  font-weight: 800;
  font-size: 13px;
}

/* =========================
   HEADINGS + INFO BADGE
   ========================= */
h1{
  margin: 4px 0 2px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.6px;
}
h2{
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 800;
  color: var(--muted2);
}
.badge{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(15,23,42,.08);
  margin: 14px 0 18px;
  color: rgba(15,23,42,.84);
  font-weight: 650;
}
.badge b{ font-weight: 900; }

/* =========================
   FORM
   ========================= */
label{
  display: block;
  font-weight: 900;
  margin: 14px 0 8px;
  font-size: 13px;
  letter-spacing: .2px;
}
.req{ color: #b91c1c; margin-left: 6px; font-weight: 900; }
.hint{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  color: rgba(15,23,42,.75);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.45;
}
.row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
input, select{
  width: 100%;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  color: #0f172a;
  font-weight: 700;
  font-size: 14px;
}
select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(15,23,42,.70) 50%),
    linear-gradient(135deg, rgba(15,23,42,.70) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%,
    0 0;
  background-size: 6px 6px, 6px 6px, 100% 100%;
  background-repeat: no-repeat;
}
input::placeholder{ color: rgba(15,23,42,.35); font-weight: 650; }

input:focus, select:focus{
  outline: none;
  border-color: rgba(13,27,42,.30);
  box-shadow: 0 0 0 4px var(--focus);
}

/* A/B Help Row */
.abHelpRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.abHelpBtn{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.abHelpBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
}

/* Submit Buttons */
#btnSubmit, #btnLive{
  width: 100%;
  margin-top: 16px;
  border-radius: 16px;
  padding: 14px 14px;
  font-weight: 900;
  letter-spacing: .2px;
  cursor: pointer;
  border: 1px solid rgba(15,23,42,.10);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
#btnSubmit{
  background: linear-gradient(180deg, #0d1b2a 0%, #0b1623 100%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}
#btnSubmit:hover{ transform: translateY(-1px); box-shadow: 0 22px 55px rgba(2,6,23,.22); }
#btnLive{
  background: rgba(255,255,255,.92);
  color: #0f172a;
}
#btnLive:hover{ transform: translateY(-1px); }
#btnSubmit:disabled, #btnLive:disabled{
  opacity: .6;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   OUTPUT CARD
   ========================= */
.outCard{
  display: none;
  margin-top: 16px;
  padding: 18px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(15,23,42,.06);
  background: rgba(255,255,255,.80);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.statusOk{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: #0f5132;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.25);
  padding: 8px 12px;
  border-radius: 999px;
}
.statusErr{
  display:block;
  font-weight: 850;
  color: #7f1d1d;
  background: rgba(220,38,38,.10);
  border: 1px solid rgba(220,38,38,.25);
  padding: 12px 14px;
  border-radius: 14px;
}
.cardTop{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.totalBox{
  min-width: 240px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(13,27,42,.04);
}
.totalLbl{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(15,23,42,.65);
}
.totalVal{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -.3px;
  margin-top: 2px;
}
.sectionTitle{
  margin: 16px 0 10px;
  font-weight: 950;
  font-size: 14px;
  letter-spacing: .2px;
  color: rgba(15,23,42,.82);
}
.metaGrid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.meta{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.86);
}
.meta .k{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.60);
}
.meta .v{
  margin-top: 6px;
  font-weight: 900;
  color: rgba(15,23,42,.88);
}
.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 800;
}

/* actions */
.actions{
  margin-top: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.92);
  font-weight: 900;
  cursor: pointer;
}
.pill:hover{
  box-shadow: 0 10px 24px rgba(2,6,23,.10);
  transform: translateY(-1px);
}
.pill:active{ transform: translateY(0); }

/* =========================
   MODAL (A/B)
   ========================= */
.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 200;
}
.modal{
  width: min(1000px, 100%);
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 90px rgba(2,6,23,.28);
  overflow: hidden;
}
.modalHeader{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  font-weight: 950;
}
.modalClose{
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.90);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
}
.modalBody{ padding: 14px 16px 16px; }

.abGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.abCard{
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.90);
  padding: 14px 14px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.abCard:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 45px rgba(2,6,23,.14);
}
.abBadge{
  display:inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(13,27,42,.06);
  font-weight: 950;
  font-size: 12px;
  margin-bottom: 10px;
}
.abCard ul{
  margin: 10px 0 12px;
  padding-left: 18px;
  color: rgba(15,23,42,.78);
  font-weight: 650;
  line-height: 1.42;
}
.abPickRow{
  display:flex;
  justify-content: flex-end;
}
.abPickBtn{
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  font-weight: 950;
  cursor: pointer;
}
.abSelectedBadge{
  position:absolute;
  top: 12px;
  right: 12px;
  display:none;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(22,163,74,.14);
  border: 1px solid rgba(22,163,74,.25);
  color: rgba(21,128,61,.95);
  font-weight: 950;
  font-size: 12px;
}
.abCard.active{
  border-color: rgba(22,163,74,.35);
  box-shadow: 0 20px 55px rgba(22,163,74,.12);
}
.abCard.active .abSelectedBadge{ display:block; }

/* =========================
   CONTACT POPUP (15sn)
   ========================= */
.contactPop{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(560px, calc(100% - 36px));
  border-radius: 18px;
  background: rgba(13,27,42,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(2,6,23,.30);
  color: rgba(255,255,255,.92);
  padding: 14px 14px;
  display: none;
  z-index: 220;
}
.contactPop.show{ display: block; }
.popTop{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.popTitle{
  font-weight: 950;
  font-size: 18px;
  margin-bottom: 4px;
}
.popSub{
  color: rgba(255,255,255,.72);
  font-weight: 650;
  font-size: 13px;
  line-height: 1.45;
}
.popClose{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
}
.popBtns{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0 10px;
}
.popBtn{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  padding: 12px 12px;
  font-weight: 950;
  cursor: pointer;
}
.popBtn.wa{
  background: linear-gradient(180deg, rgba(22,163,74,.96), rgba(15,122,56,.96));
  color: #fff;
}
.popBtn.send{
  background: linear-gradient(180deg, rgba(22,163,74,.80), rgba(15,122,56,.80));
  color: #fff;
}
.popBtn.call{
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  color: #fff;
  border-color: rgba(255,255,255,.12);
}
.popMeta{
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.5;
}
.popMeta a{ color: rgba(255,255,255,.92); text-decoration: underline; }

/* =========================
   TOAST
   ========================= */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.86);
  color: #fff;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  display: none;
  z-index: 400;
}
.toast.show{ display:block; }

/* =========================
   FOOTER (MINI)
   ========================= */
.siteFooter{
  width: min(1200px, calc(100% - 36px));
  margin: 0 auto 22px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  border-top: 1px solid rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 18px 50px rgba(2,6,23,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(15,23,42,.75);
  font-weight: 800;
  font-size: 13px;
}
.siteFooter a{
  color: rgba(15,23,42,.88);
  text-decoration: underline;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 900px){
  .topbarInner{ gap: 10px; }
  .brandRow{ min-width: 180px; }
  .topPill{ padding: 10px 12px; font-size: 13px; }
  .heroTitle{ font-size: 22px; }
  h1{ font-size: 28px; }
}
@media (max-width: 720px){
  .topbarInner{
    flex-direction: column;
    align-items: stretch;
  }
  .topActions{
    justify-content: space-between;
  }
  .row{ grid-template-columns: 1fr; }
  .metaGrid{ grid-template-columns: 1fr; }
  .abGrid{ grid-template-columns: 1fr; }
  .heroCard{ padding: 18px; }
  .container{ padding: 18px; }
  .popBtns{ grid-template-columns: 1fr; }
  .popBtn.call{ grid-column: auto; }
}
/* =========================
   ELITE PACK (EK CSS) — EN ALTA YAPIŞTIR
   ========================= */

/* 1) Başlıklara ince gradient text */
h1, .heroTitle{
  background: linear-gradient(90deg, #0d1b2a 0%, #1f2937 45%, #0d1b2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2, .heroDesc{
  color: rgba(15,23,42,.72);
}

/* 2) Kartlara premium grain/doku (çok hafif) */
.heroCard, .container, .outCard, .modal{
  position: relative;
  overflow: hidden;
}
.heroCard::after,
.container::after,
.outCard::after,
.modal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* grain + soft highlight */
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(900px 380px at 90% 20%, rgba(255,255,255,.14), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity: .35; /* çok abartma */
  mix-blend-mode: overlay;
}

/* 3) Butonlara parlak highlight (primary + popup buttonlar) */
#btnSubmit,
.popBtn.wa,
.popBtn.send,
.popBtn.call{
  position: relative;
  overflow: hidden;
}

#btnSubmit::before,
.popBtn.wa::before,
.popBtn.send::before,
.popBtn.call::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width: 80%;
  height: 200%;
  transform: rotate(22deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.18) 30%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.18) 70%,
    transparent 100%
  );
  opacity: .55;
  pointer-events:none;
  transition: transform .55s ease, opacity .55s ease;
}

#btnSubmit:hover::before,
.popBtn.wa:hover::before,
.popBtn.send:hover::before,
.popBtn.call:hover::before{
  transform: translateX(140%) rotate(22deg);
  opacity: .7;
}

/* Secondary button (AJAX) daha elit hover */
#btnLive{
  background: rgba(255,255,255,.85);
  border-color: rgba(15,23,42,.12);
}
#btnLive:hover{
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
}

/* 4) Popup slide-in animasyon */
@keyframes slideInUpSoft{
  from{ transform: translateY(16px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.contactPop.show{
  animation: slideInUpSoft .28s ease-out;
}

/* 5) Extra: topPill ikon/hover daha premium */
.topPill{
  position: relative;
  overflow: hidden;
}
.topPill::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(240px 80px at 20% 0%, rgba(255,255,255,.40), transparent 60%);
  opacity:.35;
}

/* 6) Küçük erişilebilirlik iyileştirmesi */
:focus-visible{
  outline: 3px solid rgba(56,189,248,.55);
  outline-offset: 2px;
}
/* =========================
   ELITE PACK (EK CSS) — EN ALTA YAPIŞTIR
   ========================= */

/* 1) Başlıklara ince gradient text */
h1, .heroTitle{
  background: linear-gradient(90deg, #0d1b2a 0%, #1f2937 45%, #0d1b2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
h2, .heroDesc{
  color: rgba(15,23,42,.72);
}

/* 2) Kartlara premium grain/doku (çok hafif) */
.heroCard, .container, .outCard, .modal{
  position: relative;
  overflow: hidden;
}
.heroCard::after,
.container::after,
.outCard::after,
.modal::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  /* grain + soft highlight */
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(900px 380px at 90% 20%, rgba(255,255,255,.14), transparent 60%),
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 2px,
      transparent 6px
    );
  opacity: .35; /* çok abartma */
  mix-blend-mode: overlay;
}

/* 3) Butonlara parlak highlight (primary + popup buttonlar) */
#btnSubmit,
.popBtn.wa,
.popBtn.send,
.popBtn.call{
  position: relative;
  overflow: hidden;
}

#btnSubmit::before,
.popBtn.wa::before,
.popBtn.send::before,
.popBtn.call::before{
  content:"";
  position:absolute;
  top:-60%;
  left:-30%;
  width: 80%;
  height: 200%;
  transform: rotate(22deg);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.18) 30%,
    rgba(255,255,255,.35) 50%,
    rgba(255,255,255,.18) 70%,
    transparent 100%
  );
  opacity: .55;
  pointer-events:none;
  transition: transform .55s ease, opacity .55s ease;
}

#btnSubmit:hover::before,
.popBtn.wa:hover::before,
.popBtn.send:hover::before,
.popBtn.call:hover::before{
  transform: translateX(140%) rotate(22deg);
  opacity: .7;
}

/* Secondary button (AJAX) daha elit hover */
#btnLive{
  background: rgba(255,255,255,.85);
  border-color: rgba(15,23,42,.12);
}
#btnLive:hover{
  box-shadow: 0 18px 40px rgba(2,6,23,.12);
}

/* 4) Popup slide-in animasyon */
@keyframes slideInUpSoft{
  from{ transform: translateY(16px); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.contactPop.show{
  animation: slideInUpSoft .28s ease-out;
}

/* 5) Extra: topPill ikon/hover daha premium */
.topPill{
  position: relative;
  overflow: hidden;
}
.topPill::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(240px 80px at 20% 0%, rgba(255,255,255,.40), transparent 60%);
  opacity:.35;
}

/* 6) Küçük erişilebilirlik iyileştirmesi */
:focus-visible{
  outline: 3px solid rgba(56,189,248,.55);
  outline-offset: 2px;
}
/* =========================
   ULTRA PREMIUM PACK (EK CSS) — EN ALTA YAPIŞTIR
   ========================= */

/* 1) Kartlara kenar ışığı (border glow) + daha güçlü glass */
.heroCard, .container, .outCard, .modal{
  background: rgba(255,255,255,.74) !important;
  border: 1px solid rgba(255,255,255,.55) !important;
  box-shadow: 0 40px 120px rgba(2,6,23,.12), 0 14px 40px rgba(2,6,23,.08) !important;
}

.heroCard::before,
.container::before,
.outCard::before,
.modal::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg,
    rgba(13,27,42,.22) 0%,
    rgba(255,255,255,.55) 25%,
    rgba(37,99,235,.18) 55%,
    rgba(255,255,255,.45) 75%,
    rgba(13,27,42,.18) 100%
  );
  opacity:.45;
  filter: blur(10px);
  z-index: 0;
}

.heroCard > *, .container > *, .outCard > *, .modal > *{
  position: relative;
  z-index: 1;
}

/* 2) Inputlara soft inner shadow + daha premium odak */
input, select{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
input:focus, select:focus{
  border-color: rgba(37,99,235,.28) !important;
  box-shadow:
    0 0 0 4px rgba(37,99,235,.10),
    0 18px 45px rgba(2,6,23,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
}

/* 3) Primary butonda micro-animasyon + daha “premium” gradient */
#btnSubmit{
  background: linear-gradient(180deg, #111827 0%, #0b1623 100%) !important;
  box-shadow: 0 22px 55px rgba(2,6,23,.22) !important;
}
#btnSubmit:hover{
  transform: translateY(-2px) scale(1.01);
}
#btnSubmit:active{
  transform: translateY(0px) scale(0.995);
}

/* 4) Pill butonlara modern hover */
.pill{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pill:hover{
  border-color: rgba(37,99,235,.20);
  box-shadow: 0 16px 38px rgba(2,6,23,.12);
}

/* 5) Hero badge daha şık */
.heroBadge{
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* 6) Popup daha “app-like” + daha yumuşak görünüm */
.contactPop{
  background: rgba(13,27,42,.92) !important;
  box-shadow: 0 40px 120px rgba(0,0,0,.38) !important;
}
.popBtn{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.popBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  filter: brightness(1.03);
}
.popBtn:active{
  transform: translateY(0px);
}

/* 7) Sayfa arkaplanına premium gradient dokunuş */
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(13,27,42,.10), transparent 60%),
    radial-gradient(900px 420px at 10% 10%, rgba(37,99,235,.07), transparent 55%),
    radial-gradient(900px 420px at 90% 25%, rgba(22,163,74,.05), transparent 55%),
    #f6f8fb !important;
}

/* 8) Küçük “parlaklık” efekti (çok hafif) */
.heroCard, .container, .outCard{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* =========================
   PREMIUM NETLİK DÜZELTME
   ========================= */

/* Kart glow'u yumuşat */
.heroCard::before,
.container::before,
.outCard::before,
.modal::before{
  opacity: .18 !important;   /* önce .45 idi */
  filter: blur(6px) !important;
}

/* Grain efektini hafiflet */
.heroCard::after,
.container::after,
.outCard::after,
.modal::after{
  opacity: .18 !important;   /* önce .35 idi */
}

/* Arka planı biraz daha temiz yap */
body{
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(13,27,42,.06), transparent 60%),
    #f6f8fb !important;
}

/* Başlık gradienti biraz daha koyu ve net */
h1, .heroTitle{
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 40%, #0f172a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Kart içeriğini daha keskin göster */
.container,
.outCard,
.heroCard{
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Buton parlaklığı azalt (daha kurumsal görünüm) */
#btnSubmit::before,
.popBtn::before{
  opacity: .35 !important;
}
/* =========================================
   ELIT UPGRADE PACK (append to style.css)
   ========================================= */

/* 1) Başlıklara ince gradient text */
h1, .brandName, .heroTitle {
  background: linear-gradient(90deg, #0b1220 0%, #223a5e 45%, #0b1220 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 2) Kartlara premium grain/doku + daha “glass” hissi */
.container,
.heroCard,
.outCard,
.modal,
.contactPop {
  position: relative;
  overflow: hidden;
}

/* Grain overlay (çok hafif) */
.container::after,
.heroCard::after,
.outCard::after,
.modal::after,
.contactPop::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08; /* istersen .05 yap */
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.25) 0 2px, transparent 3px);
  mix-blend-mode: overlay;
  filter: blur(.2px);
}

/* Kart kenarlarını biraz daha premium */
.container,
.heroCard,
.outCard {
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 18px 60px rgba(2, 6, 23, .10);
}

/* 3) Butonlara parlak highlight (hover ile) */
button, .pill, .topPill, .heroBadge {
  position: relative;
  overflow: hidden;
}

/* Parlak çizgi efekti */
button::before,
.pill::before,
.topPill::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,.55) 45%,
    transparent 100%);
  transform: rotate(18deg);
  opacity:0;
  transition: opacity .25s ease;
}

/* Hover’da çizgi “geçsin” */
button:hover::before,
.pill:hover::before,
.topPill:hover::before{
  opacity:1;
  animation: shineMove .85s ease forwards;
}

@keyframes shineMove{
  0%   { left:-70%; }
  100% { left:140%; }
}

/* Buton hover derinlik */
button:hover, .pill:hover, .topPill:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(2, 6, 23, .16);
}

/* 4) Popup’a slide-in animasyon */
.contactPop{
  transform: translateX(24px) translateY(12px);
  opacity: 0;
  transition: opacity .25s ease;
  will-change: transform, opacity;
}

.contactPop.show{
  opacity: 1;
  animation: popSlideIn .38s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes popSlideIn{
  0%   { transform: translateX(28px) translateY(12px); }
  100% { transform: translateX(0) translateY(0); }
}

/* 5) Topbar “glass” daha premium */
.topbar.isGlass{
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* 6) Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion: reduce){
  button:hover, .pill:hover, .topPill:hover{ transform:none; }
  button::before, .pill::before, .topPill::before{ animation:none; }
  .contactPop.show{ animation:none; }
}
/* =========================================
   PREMIUM METAL BADGE – TOPLAM PRİM
   ========================================= */

/* Toplam prim kutusu */
.totalBox,
.premiumBox,
[class*="TOPLAM"],
[class*="toplam"]{
  position: relative;
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  color: #fff !important;
  border-radius: 16px;
  padding: 18px 22px;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 18px 45px rgba(2,6,23,.25);
  border: 1px solid rgba(255,255,255,.08);
}

/* İçte metal yansıma efekti */
.totalBox::before,
.premiumBox::before,
[class*="TOPLAM"]::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.18) 35%,
    rgba(255,255,255,.08) 50%,
    transparent 70%
  );
  opacity:.6;
  pointer-events:none;
}

/* Başlık kısmı */
.totalBox small,
.premiumBox small{
  display:block;
  font-size:12px;
  letter-spacing:.8px;
  text-transform:uppercase;
  opacity:.75;
}

/* Tutar yazısı */
.totalBox strong,
.premiumBox strong{
  display:block;
  font-size:26px;
  font-weight:700;
  letter-spacing:.5px;
  margin-top:4px;
  background: linear-gradient(90deg,#ffffff,#e2e8f0,#ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Hover’da hafif ışık hareketi */
.totalBox:hover::before,
.premiumBox:hover::before{
  animation: metalShine 1.2s ease forwards;
}

@keyframes metalShine{
  0%   { transform: translateX(-40%); }
  100% { transform: translateX(120%); }
}
<script>
document.addEventListener("DOMContentLoaded", function(){

  function animateValue(el, start, end, duration){
    let startTime = null;

    function animation(currentTime){
      if(!startTime) startTime = currentTime;
      const progress = Math.min((currentTime - startTime) / duration, 1);
      const value = Math.floor(progress * (end - start) + start);

      el.textContent = value.toLocaleString('tr-TR') + " TL";

      if(progress < 1){
        requestAnimationFrame(animation);
      }
    }

    requestAnimationFrame(animation);
  }

  // TOPLAM PRİM yazısını bul
  const premiumElements = document.querySelectorAll("*");

  premiumElements.forEach(el => {
    if(el.textContent.includes("TL") && el.textContent.match(/\d/)){
      
      let raw = el.textContent.replace(/[^\d,]/g, "");
      raw = raw.replace(/\./g, "").replace(",", ".");
      let value = parseFloat(raw);

      if(!isNaN(value) && value > 0){
        el.textContent = "0 TL";
        animateValue(el, 0, value, 1200); // 1.2 saniye
      }
    }
  });

});
</script>
/* =========================
   ELIT PACK (v1) - EN ALTA EKLE
   ========================= */

/* 1) Başlıklar: ince gradient text */
h1, .brandName, .heroTitle {
  background: linear-gradient(90deg, rgba(13,27,42,1), rgba(56,189,248,.9), rgba(13,27,42,1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 2) Kartlara premium grain / doku */
.container, .heroCard, .outCard, .modal, .contactPop {
  position: relative;
  overflow: hidden;
}

.container::before,
.heroCard::before,
.outCard::before,
.modal::before,
.contactPop::before {
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.08; /* doku şiddeti */
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.45) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 80%, rgba(255,255,255,.30) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 90%, rgba(0,0,0,.35) 0 1px, transparent 2px);
  background-size: 120px 120px, 140px 140px, 160px 160px, 180px 180px;
  filter: blur(.2px);
}

/* 3) Butonlara parlak highlight + sheen (ışık geçişi) */
button, .pill, .topPill, .popBtn {
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

button::before,
.pill::before,
.topPill::before,
.popBtn::before {
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(circle at 30% 10%, rgba(255,255,255,.65), transparent 55%);
  opacity: .0;
  transition: opacity .22s ease;
  pointer-events:none;
}

button:hover::before,
.pill:hover::before,
.topPill:hover::before,
.popBtn:hover::before {
  opacity: .55;
}

/* Işık sweep */
button::after,
.pill::after,
.topPill::after,
.popBtn::after {
  content:"";
  position:absolute;
  top:-120%;
  left:-60%;
  width:50%;
  height:320%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(25deg);
  opacity:.0;
  transition: opacity .2s ease;
  pointer-events:none;
}

button:hover::after,
.pill:hover::after,
.topPill:hover::after,
.popBtn:hover::after {
  opacity: .9;
  animation: sheen 900ms ease forwards;
}

@keyframes sheen {
  from { left:-60%; }
  to   { left:140%; }
}

/* Primary butonları biraz daha premium */
#btnSubmit {
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
#btnSubmit:hover { transform: translateY(-1px); }
#btnLive:hover { transform: translateY(-1px); }

/* 4) Popup animasyon (slide-in) */
.contactPop {
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
  will-change: transform, opacity;
}

.contactPop.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 5) Premium rakam parıltısı (TOPLAM PRİM) */
.premium-amount {
  position: relative;
  display: inline-block;
}

.premium-amount::after {
  content:"";
  position:absolute;
  inset:-6px -10px;
  background: radial-gradient(circle at 30% 40%, rgba(56,189,248,.22), transparent 60%);
  filter: blur(8px);
  opacity:.9;
  z-index:-1;
}
/* ===========================
   ELIT PREMIUM PACK (ADD-ON)
   =========================== */

/* 1) Başlıklara ince gradient text */
h1, .heroTitle, .brandName{
  background: linear-gradient(90deg, #0d1b2a 0%, #1d4ed8 45%, #0d1b2a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 2) Kartlara hafif premium grain / doku */
.heroCard, .container, .outCard, .modal, .contactPop{
  position: relative;
  overflow: hidden;
}
.heroCard::after, .container::after, .outCard::after, .modal::after, .contactPop::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.10;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.55), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.35), transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* 3) Butonlara parlak highlight + premium hover */
#btnSubmit, .pill, .popBtn{
  position: relative;
  overflow: hidden;
}
#btnSubmit::before, .pill::before, .popBtn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  opacity:.0;
  transition: opacity .18s ease;
}
#btnSubmit:hover::before, .pill:hover::before, .popBtn:hover::before{
  opacity:.9;
  animation: shine 1.1s ease forwards;
}
@keyframes shine{
  from{ left:-60%; }
  to{ left:120%; }
}

/* 4) Toplam Prim kutusu - glass badge */
.totalBox{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
}

/* 5) Premium tutar artarken glow + hafif pulse */
.premium-amount{
  position: relative;
  font-weight: 900;
  letter-spacing: .2px;
  text-shadow: 0 8px 20px rgba(29,78,216,.20);
}
.premium-amount.animating{
  animation: premiumPulse 1.4s ease-in-out;
}
@keyframes premiumPulse{
  0%   { text-shadow: 0 0 0 rgba(29,78,216,0); transform: translateY(0); }
  40%  { text-shadow: 0 14px 35px rgba(29,78,216,.35); transform: translateY(-1px); }
  100% { text-shadow: 0 8px 20px rgba(29,78,216,.20); transform: translateY(0); }
}

/* 6) Popup slide-in + yumuşak animasyon */
.contactPop{
  transform: translateY(18px);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease;
}
.contactPop.show{
  transform: translateY(0);
  opacity: 1;
}

/* 7) Popup arkasına blur hissi (body’ye hafif karartma) */
body.pop-open::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,.22);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9998;
}
.contactPop{ z-index: 9999; }

/* 8) Safe-area (iPhone alt boşluk) */
.contactPop{
  bottom: calc(16px + env(safe-area-inset-bottom));
}