/* ═══════════════════════════════════════════════════════════════
   EXCEL EXPORT BUTTON + UPSELL MODAL
   ═══════════════════════════════════════════════════════════════ */

/* Export buton — Yeşil gradient, Excel ikonu ile */
.export-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 16px;
  background:linear-gradient(135deg,rgba(16,185,129,.14) 0%,rgba(16,185,129,.06) 100%);
  border:1px solid rgba(16,185,129,.28);
  border-radius:10px;
  color:#10B981;
  font-family:inherit;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:all .2s ease-out;
  white-space:nowrap;
}
.export-btn:hover{
  background:linear-gradient(135deg,rgba(16,185,129,.22) 0%,rgba(16,185,129,.12) 100%);
  border-color:rgba(16,185,129,.5);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,185,129,.18);
}
.export-btn:active{transform:translateY(0)}
.export-btn svg{flex-shrink:0}
/* Starter kullanıcısında kilit görünümü — buton görünür ama "Pro" rozeti var */
.export-btn.is-locked{
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.08);
  color:var(--text-secondary);
}
.export-btn.is-locked:hover{
  background:rgba(200,245,49,.08);
  border-color:rgba(200,245,49,.3);
  color:var(--accent);
}
.export-btn-pro-tag{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  margin-left:4px;
  font-size:.6rem;
  font-weight:900;
  letter-spacing:.4px;
  background:linear-gradient(135deg,#C8F531,#98BE1C);
  color:#0C0E10;
  border-radius:4px;
  text-transform:uppercase;
}

/* PDF buton varyantı — Excel yeşilinden ayırt etmek için turuncu/kırmızı.
   Excel "veri çıkışı" (yeşil), PDF "belge çıkışı" (turuncu) okuması net. */
.export-btn.pdf-btn-variant{
  background:linear-gradient(135deg,rgba(251,146,60,.14) 0%,rgba(251,146,60,.06) 100%);
  border-color:rgba(251,146,60,.32);
  color:#FB923C;
}
.export-btn.pdf-btn-variant:hover{
  background:linear-gradient(135deg,rgba(251,146,60,.22) 0%,rgba(251,146,60,.12) 100%);
  border-color:rgba(251,146,60,.5);
  box-shadow:0 4px 12px rgba(251,146,60,.18);
}

/* Detail panel header'daki export butonu kompakt */
.detail-export-btn{
  padding:7px 12px;
  font-size:.72rem;
  margin-right:8px;
}
@media (max-width:640px){
  .detail-export-btn span{display:none}
  .detail-export-btn{padding:7px 9px}
}

/* ═══════════════════════════════════════════════════════════════
   OTP MODAL — Şifre sıfırlama 3-step flow
   ═══════════════════════════════════════════════════════════════ */
.otp-modal{
  width:100%;
  max-width:460px;
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:20px;
  padding:36px 32px 28px;
  position:relative;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:upsellSlideIn .4s var(--ease-bounce,cubic-bezier(0.34,1.56,0.64,1));
}
@media (max-width:480px){
  .otp-modal{padding:30px 22px 24px}
}

/* STEP DOTS */
.otp-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:24px;
  user-select:none;
}
.otp-step-dot{
  display:flex;
  align-items:center;
  justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  border:1.5px solid var(--border);
  color:var(--text-dim);
  font-size:.78rem;
  font-weight:800;
  transition:all .25s ease-out;
  flex-shrink:0;
}
.otp-step-dot.active{
  background:rgba(200,245,49,0.15);
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 0 0 4px rgba(200,245,49,0.08);
}
.otp-step-dot.done{
  background:var(--accent);
  border-color:var(--accent);
  color:#FFFFFF;
}
.otp-step-line{
  width:38px;
  height:1.5px;
  background:var(--border);
  border-radius:1px;
}

/* HEAD */
.otp-head{
  text-align:center;
  margin-bottom:26px;
}
.otp-head-icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:72px;height:72px;
  background:rgba(200,245,49,0.1);
  border:1px solid rgba(200,245,49,0.28);
  border-radius:18px;
  color:var(--accent);
  margin-bottom:14px;
  box-shadow:0 0 24px rgba(200,245,49,0.12);
}
.otp-head-title{
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:-0.4px;
  color:var(--text-primary);
  line-height:1.2;
  margin-bottom:8px;
}
.otp-head-sub{
  font-size:.84rem;
  font-weight:500;
  color:var(--text-secondary);
  line-height:1.5;
}
.otp-head-sub b{color:var(--text-primary);font-weight:700}

/* BODY */
.otp-body{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* EMAIL INPUT */
.otp-email-input{
  font-size:.95rem;
  padding:14px 16px;
  text-align:center;
}

/* DIGIT INPUTS (6 segmented) */
.otp-digit-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:4px 0 8px;
}
@media (max-width:420px){
  .otp-digit-row{gap:6px}
}
.otp-digit-input{
  width:48px;
  height:60px;
  border-radius:12px;
  background:rgba(255,255,255,0.03);
  border:2px solid var(--border);
  color:var(--text-primary);
  font-family:inherit;
  font-size:1.6rem;
  font-weight:900;
  text-align:center;
  caret-color:var(--accent);
  transition:all .15s ease-out;
  -webkit-appearance:none;
  appearance:none;
  outline:none;
  letter-spacing:-0.5px;
}
@media (max-width:420px){
  .otp-digit-input{width:40px;height:52px;font-size:1.3rem}
}
.otp-digit-input:focus{
  border-color:var(--accent);
  background:rgba(200,245,49,0.06);
  box-shadow:0 0 0 4px rgba(200,245,49,0.08);
  transform:translateY(-1px);
}
.otp-digit-input:not(:placeholder-shown),
.otp-digit-input[value]:not([value=""]){
  border-color:rgba(200,245,49,0.5);
  background:rgba(200,245,49,0.04);
}
.otp-shake{animation:otpShake .5s ease-in-out}
@keyframes otpShake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-8px)}
  40%,80%{transform:translateX(8px)}
}

/* ERROR MESSAGE */
.otp-error{
  background:rgba(255,79,79,0.08);
  border:1px solid rgba(255,79,79,0.25);
  border-radius:8px;
  padding:8px 12px;
  font-size:.78rem;
  font-weight:700;
  color:#FF6B6B;
  text-align:center;
}

/* PRIMARY BUTTON */
.otp-primary-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:14px 20px;
  background:linear-gradient(135deg,#C8F531,#98BE1C);
  color:#0C0E10;
  border:none;
  border-radius:12px;
  font-family:inherit;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.2px;
  cursor:pointer;
  transition:all .2s ease-out;
  box-shadow:0 6px 18px rgba(200,245,49,.25);
  margin-top:6px;
}
.otp-primary-btn:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(200,245,49,.4);
}
.otp-primary-btn:active{transform:translateY(0)}
.otp-primary-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
  box-shadow:none;
  background:rgba(255,255,255,0.06);
  color:var(--text-dim);
}

/* SECONDARY LINKS */
.otp-bottom-link{
  text-align:center;
  font-size:.82rem;
  color:var(--text-dim);
  font-weight:500;
  margin-top:4px;
}
.otp-link-btn{
  background:none;
  border:none;
  color:var(--accent);
  font-family:inherit;
  font-size:inherit;
  font-weight:700;
  cursor:pointer;
  padding:0;
  text-decoration:none;
  transition:color .15s;
}
.otp-link-btn:hover{color:#98BE1C;text-decoration:underline}
.otp-back-link{
  text-align:center;
  margin-top:8px;
}
.otp-link-btn-secondary{
  background:none;
  border:none;
  color:var(--text-dim);
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
  cursor:pointer;
  padding:6px 12px;
  border-radius:6px;
  transition:all .15s;
}
.otp-link-btn-secondary:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,0.04);
}

/* PASSWORD STRENGTH */
.otp-pw-strength{
  background:rgba(255,255,255,0.02);
  border-radius:8px;
  padding:8px 12px;
  margin-top:-4px;
}
.otp-pw-strength-bar{
  height:4px;
  background:rgba(255,255,255,0.06);
  border-radius:2px;
  overflow:hidden;
  margin-bottom:6px;
}
.otp-pw-strength-fill{
  height:100%;
  width:0%;
  background:#FF4F4F;
  border-radius:2px;
  transition:width .3s ease-out,background .3s ease-out;
}
.otp-pw-strength-label{
  font-size:.7rem;
  font-weight:700;
  color:var(--text-dim);
  text-align:right;
}

/* SUCCESS STATE */
.otp-success{
  text-align:center;
  padding:8px 0;
}
.otp-success-icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:96px;height:96px;
  background:rgba(16,185,129,0.08);
  border:1px solid rgba(16,185,129,0.3);
  border-radius:50%;
  margin-bottom:18px;
  animation:otpSuccessPop .6s var(--ease-bounce,cubic-bezier(0.34,1.56,0.64,1));
}
@keyframes otpSuccessPop{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
.otp-success-title{
  font-size:1.5rem;
  font-weight:900;
  letter-spacing:-0.4px;
  color:#10B981;
  margin-bottom:8px;
}
.otp-success-text{
  font-size:.88rem;
  line-height:1.55;
  color:var(--text-secondary);
  font-weight:500;
}

/* ─── UPSELL MODAL ─── */
.upsell-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:var(--z-detail-modal,10200); /* [D2b cila] eski --z-modal 9500 panel arkasında kalıyordu (§4.1) */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  animation:upsellFadeIn .25s ease-out;
}
@keyframes upsellFadeIn{
  from{opacity:0}
  to{opacity:1}
}
.upsell-modal{
  width:100%;
  max-width:480px;
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:20px;
  padding:32px 28px;
  text-align:center;
  box-shadow:var(--shadow-2xl,0 24px 48px rgba(0,0,0,.6));
  animation:upsellSlideIn .35s var(--ease-bounce,cubic-bezier(0.34,1.56,0.64,1));
}
@keyframes upsellSlideIn{
  from{opacity:0;transform:translateY(24px) scale(0.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.upsell-modal-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:88px;
  height:88px;
  margin:0 auto 20px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(200,245,49,.12),rgba(200,245,49,.04));
  border:1px solid rgba(200,245,49,.28);
  color:var(--accent);
  box-shadow:0 0 32px rgba(200,245,49,.18);
  animation:upsellIconPulse 2.4s ease-in-out infinite;
}
@keyframes upsellIconPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 24px rgba(200,245,49,.18)}
  50%{transform:scale(1.06);box-shadow:0 0 40px rgba(200,245,49,.35)}
}
.upsell-modal-title{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:8px;
}
.upsell-modal-feature{
  font-size:1.4rem;
  font-weight:900;
  letter-spacing:-0.4px;
  color:var(--text-primary);
  margin-bottom:14px;
  line-height:1.2;
}
.upsell-modal-desc{
  font-size:.9rem;
  font-weight:500;
  line-height:1.55;
  color:var(--text-secondary);
  margin-bottom:24px;
  letter-spacing:.1px;
}
.upsell-modal-desc b{color:var(--accent);font-weight:800}
.upsell-modal-tiers{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:24px;
  flex-wrap:wrap;
}
.upsell-tier-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:12px 18px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  min-width:110px;
}
.upsell-tier-pill.featured{
  background:linear-gradient(135deg,rgba(200,245,49,.08),rgba(200,245,49,.02));
  border-color:rgba(200,245,49,.32);
  box-shadow:0 4px 18px rgba(200,245,49,.12);
}
.upsell-tier-name{
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text-secondary);
}
.upsell-tier-pill.featured .upsell-tier-name{color:var(--accent)}
.upsell-tier-price{
  font-size:1.05rem;
  font-weight:900;
  color:var(--text-primary);
  letter-spacing:-0.3px;
}
.upsell-tier-price small{
  font-size:.62rem;
  font-weight:600;
  color:var(--text-dim);
  margin-left:2px;
}
.upsell-modal-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.upsell-btn-secondary,
.upsell-btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:13px 20px;
  font-family:inherit;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.2px;
  border-radius:11px;
  cursor:pointer;
  transition:all .2s ease-out;
  flex:1;
  min-width:140px;
  border:none;
}
.upsell-btn-secondary{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
}
.upsell-btn-secondary:hover{
  background:rgba(255,255,255,.04);
  color:var(--text-primary);
  border-color:var(--border-strong);
}
.upsell-btn-primary{
  background:linear-gradient(135deg,#C8F531,#98BE1C);
  color:#0C0E10;
  box-shadow:0 6px 18px rgba(200,245,49,.25);
}
.upsell-btn-primary:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(200,245,49,.4);
}
.upsell-btn-primary:active{transform:translateY(0)}

@media (max-width:480px){
  .upsell-modal{padding:24px 20px}
  .upsell-modal-feature{font-size:1.2rem}
  .upsell-modal-icon{width:72px;height:72px}
  .upsell-modal-actions{flex-direction:column}
  .upsell-btn-secondary,.upsell-btn-primary{width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES + SUPPORT CENTER MODAL'LARI
   ═══════════════════════════════════════════════════════════════ */
.legal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,0.78);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:9700;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
  animation:upsellFadeIn .3s ease-out;
  overflow-y:auto;
}
.legal-modal,
.support-modal{
  width:100%;
  max-width:760px;
  max-height:calc(100vh - 48px);
  background:var(--bg-card);
  border:1px solid var(--border-strong);
  border-radius:18px;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  animation:upsellSlideIn .4s var(--ease-bounce);
}
.legal-close{
  position:absolute;
  top:14px;right:14px;
  width:36px;height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-family:inherit;
  font-size:1rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
  z-index:10;
}
.legal-close:hover{
  background:rgba(255,79,79,.12);
  border-color:rgba(255,79,79,.3);
  color:var(--red,#FF4F4F);
  transform:rotate(90deg);
}

/* LEGAL HEAD */
.legal-head{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px 28px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(200,245,49,0.04),transparent);
  flex-shrink:0;
}
.legal-head-icon{
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,245,49,0.1);
  border:1px solid rgba(200,245,49,0.25);
  border-radius:14px;
  color:var(--accent);
  flex-shrink:0;
}
.legal-head-text{flex:1;min-width:0}
.legal-head-title{
  font-size:1.3rem;
  font-weight:900;
  letter-spacing:-0.4px;
  color:var(--text-primary);
  line-height:1.2;
  margin-bottom:4px;
}
.legal-head-sub{
  font-size:.78rem;
  font-weight:600;
  color:var(--text-dim);
  letter-spacing:.2px;
}

/* LEGAL BODY */
.legal-body{
  padding:24px 28px;
  overflow-y:auto;
  flex:1;
}
.legal-section{
  margin-bottom:24px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.legal-section:last-child{border-bottom:none}
.legal-section-title{
  font-size:.95rem;
  font-weight:800;
  color:var(--accent);
  margin-bottom:10px;
  letter-spacing:-0.2px;
}
.legal-section-text{
  font-size:.86rem;
  line-height:1.65;
  color:var(--text-secondary);
  font-weight:500;
}
.legal-updated{
  margin-top:8px;
  padding:10px 14px;
  background:rgba(255,255,255,0.02);
  border-radius:8px;
  font-size:.74rem;
  color:var(--text-dim);
  font-style:italic;
  text-align:center;
  font-weight:600;
}

/* SUPPORT CENTER */
.support-hero{
  text-align:center;
  padding:32px 28px 24px;
  background:linear-gradient(180deg,rgba(200,245,49,0.08),transparent);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.support-hero-icon{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:72px;height:72px;
  background:rgba(200,245,49,0.1);
  border:1px solid rgba(200,245,49,0.3);
  border-radius:18px;
  color:var(--accent);
  margin-bottom:14px;
  animation:upsellIconPulse 3s ease-in-out infinite;
}
.support-hero-title{
  font-size:1.6rem;
  font-weight:900;
  letter-spacing:-0.5px;
  color:var(--text-primary);
  line-height:1.1;
  margin-bottom:6px;
}
.support-hero-sub{
  font-size:.88rem;
  font-weight:600;
  color:var(--text-secondary);
}

/* SUPPORT QUICK CARDS */
.support-quick-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:18px 28px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.support-quick-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:inherit;
  transition:all .2s;
  cursor:pointer;
  min-width:0;
}
a.support-quick-card:hover{
  background:rgba(200,245,49,0.05);
  border-color:rgba(200,245,49,0.25);
  transform:translateY(-1px);
}
.support-quick-icon{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(200,245,49,0.08);
  border-radius:9px;
  color:var(--accent);
  flex-shrink:0;
}
.support-quick-text{flex:1;min-width:0}
.support-quick-label{
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-dim);
  margin-bottom:2px;
}
.support-quick-value{
  font-size:.78rem;
  font-weight:700;
  color:var(--text-primary);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width:640px){
  .support-quick-row{grid-template-columns:1fr;padding:14px 18px}
}

/* SUPPORT BODY */
.support-body{
  padding:24px 28px;
  overflow-y:auto;
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media (max-width:760px){
  .support-body{grid-template-columns:1fr;gap:20px;padding:18px}
}
.support-section{}
.support-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  font-weight:800;
  color:var(--accent);
  margin-bottom:14px;
  text-transform:uppercase;
  letter-spacing:.5px;
}

/* FAQ */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.faq-item{
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
  transition:border-color .2s;
}
.faq-item[open]{
  border-color:rgba(200,245,49,0.25);
  background:rgba(200,245,49,0.02);
}
.faq-q{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  font-size:.82rem;
  font-weight:700;
  color:var(--text-primary);
  cursor:pointer;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{color:var(--accent)}
.faq-chevron{
  flex-shrink:0;
  color:var(--text-dim);
  transition:transform .25s ease-out;
  margin-top:2px;
}
.faq-item[open] .faq-chevron{
  transform:rotate(180deg);
  color:var(--accent);
}
.faq-a{
  padding:0 14px 14px 14px;
  font-size:.78rem;
  line-height:1.6;
  color:var(--text-secondary);
  font-weight:500;
}

/* SUPPORT FORM */
.support-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
/* Support body single-column variant (FAQ kaldırıldı, sadece form) */
.support-body.support-body-single{
  grid-template-columns:1fr;
  max-width:580px;
  margin:0 auto;
}
.support-faq-inline{
  background:none;
  border:none;
  color:var(--accent);
  font-family:inherit;
  font-size:inherit;
  font-weight:700;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}
.support-faq-inline:hover{color:#98BE1C}

/* ABOUT HERO */
.about-hero{
  background:linear-gradient(135deg,rgba(200,245,49,0.06),rgba(200,245,49,0.01));
  border:1px solid rgba(200,245,49,0.18);
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:24px;
}
.about-hero-title{
  font-size:1.35rem;
  font-weight:900;
  letter-spacing:-0.4px;
  color:var(--accent);
  line-height:1.2;
  margin-bottom:10px;
}
.about-hero-text{
  font-size:.95rem;
  line-height:1.65;
  color:var(--text-secondary);
  font-weight:500;
}

/* FAQ BOTTOM CTA */
.faq-bottom-cta{
  margin-top:24px;
  padding:18px 20px;
  background:rgba(200,245,49,0.04);
  border:1px solid rgba(200,245,49,0.2);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.faq-bottom-text{
  font-size:.88rem;
  font-weight:700;
  color:var(--text-primary);
}
.faq-bottom-cta .btn-accent{
  flex-shrink:0;
}
@media (max-width:480px){
  .faq-bottom-cta{flex-direction:column;align-items:stretch;text-align:center}
}
.support-submit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:6px;
  padding:12px 18px;
  font-size:.85rem;
  font-weight:800;
}
.support-form-note{
  font-size:.7rem;
  color:var(--text-dim);
  text-align:center;
  margin-top:8px;
  line-height:1.5;
}
.support-form-note b{color:var(--accent)}

/* SUPPORT SUCCESS STATE */
.support-success{
  text-align:center;
  padding:20px 16px;
  background:rgba(16,185,129,0.04);
  border:1px solid rgba(16,185,129,0.2);
  border-radius:12px;
}
.support-success-icon{
  margin-bottom:12px;
  animation:upsellIconPulse 2s ease-in-out infinite;
}
.support-success-title{
  font-size:1.05rem;
  font-weight:900;
  color:#10B981;
  margin-bottom:8px;
}
.support-success-text{
  font-size:.82rem;
  line-height:1.55;
  color:var(--text-secondary);
  font-weight:500;
}

/* ═══════════════════════════════════════════════════════════════
   OTP — 6-box input, status row, cooldown button
   ═══════════════════════════════════════════════════════════════ */
.otp-box-row{
  display:flex;justify-content:center;gap:8px;
  margin-bottom:14px;
}
.otp-box{
  width:48px;height:56px;
  background:rgba(255,255,255,.04);
  border:1.5px solid var(--border);
  border-radius:12px;
  font-family:'SF Mono','Monaco','Consolas',monospace;
  font-size:1.5rem;font-weight:800;
  text-align:center;color:var(--text-primary);
  outline:none;
  transition:border-color .18s,background .18s,transform .15s;
  caret-color:var(--accent);
}
.otp-box:focus{
  border-color:var(--accent);
  background:rgba(200,245,49,.06);
  box-shadow:0 0 0 3px rgba(200,245,49,.12);
}
.otp-box.otp-filled{
  border-color:rgba(200,245,49,.4);
  background:rgba(200,245,49,.04);
}
.otp-box.otp-error{
  border-color:var(--red)!important;
  background:rgba(255,80,80,.06)!important;
  color:var(--red);
  animation:otpErrorPulse .42s ease;
}
.otp-box.otp-success{
  border-color:var(--green,#10B981)!important;
  background:rgba(16,185,129,.08)!important;
  color:var(--green,#10B981);
}
.otp-box:disabled{
  opacity:.5;cursor:not-allowed;
  background:rgba(255,255,255,.02);
}
@keyframes otpErrorPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
.otp-shake{
  animation:otpShake .42s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes otpShake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}

/* Status row — expiry timer + attempts counter */
.otp-status-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:14px;
  padding:9px 12px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  border-radius:9px;
  font-size:.78rem;
  flex-wrap:wrap;
}
.otp-status-item{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-secondary);font-weight:700;letter-spacing:.2px;
}
.otp-status-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--green,#10B981);
  box-shadow:0 0 6px var(--green,#10B981);
  animation:otpDotPulse 2s ease-in-out infinite;
}
@keyframes otpDotPulse{
  0%,100%{opacity:1}
  50%{opacity:.4}
}
#otpTimer.otp-status-urgent{color:var(--orange)}
#otpTimer.otp-status-urgent .otp-status-dot{
  background:var(--orange);box-shadow:0 0 6px var(--orange);
  animation-duration:1s;
}
#otpTimer.otp-status-expired{color:var(--red)}
#otpTimer.otp-status-expired .otp-status-dot{
  background:var(--red);box-shadow:0 0 6px var(--red);
  animation:none;
}
.otp-status-attempts{color:var(--orange)}
.otp-status-attempts strong{color:var(--red);font-weight:800}

/* Resend button row */
.otp-resend-row{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
  padding:8px 0;
}
.otp-resend-btn{
  background:rgba(200,245,49,.06);
  border:1px solid rgba(200,245,49,.25);
  border-radius:8px;
  padding:7px 14px;
  font-family:inherit;font-size:.78rem;font-weight:700;
  color:var(--accent);
  cursor:pointer;letter-spacing:.2px;
  transition:all .15s;
}
.otp-resend-btn:hover:not(:disabled){
  background:rgba(200,245,49,.12);
  border-color:rgba(200,245,49,.5);
}
.otp-resend-btn:disabled{
  opacity:.5;cursor:not-allowed;
  color:var(--text-dim);
  background:rgba(255,255,255,.02);
  border-color:var(--border);
}

@media (max-width:480px){
  .otp-box{width:42px;height:50px;font-size:1.25rem}
  .otp-box-row{gap:6px}
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM CONFIRM DIALOG — drop-in replacement for window.confirm
   ═══════════════════════════════════════════════════════════════ */
.kp-confirm-overlay{
  position:fixed;inset:0;
  z-index:99999;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
/* Anında görünür — opacity geçişi YOK. Backdrop blur ve dialog
   tıklama anında geliyor; sadece dialog kutusu spring ile boy gösteriyor. */
.kp-confirm-overlay.show{display:flex}
.kp-confirm-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.kp-confirm-dialog{
  position:relative;
  width:100%;max-width:400px;
  background:var(--bg-sidebar,#1a1a22);
  border:1px solid var(--border);
  border-radius:18px;
  padding:24px 22px 18px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  /* Subtle elevation only — no harsh shadow per project spec */
  box-shadow:none;
  transform:scale(.94) translateY(8px);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
}
.kp-confirm-overlay.show .kp-confirm-dialog{transform:scale(1) translateY(0)}
.kp-confirm-dialog.is-danger{
  border-color:rgba(255,80,80,.35);
}
.kp-confirm-icon{
  font-size:2.2rem;
  margin-bottom:4px;
  filter:grayscale(.1);
}
.kp-confirm-title{
  font-size:1.05rem;font-weight:800;
  color:var(--text-primary);
  letter-spacing:-0.3px;text-align:center;
  line-height:1.35;
}
.kp-confirm-message{
  font-size:.85rem;font-weight:500;
  color:var(--text-secondary);
  text-align:center;
  line-height:1.55;
  margin-top:2px;
  max-width:320px;
}
.kp-confirm-actions{
  display:flex;gap:10px;
  width:100%;
  margin-top:16px;
}
.kp-confirm-cancel,
.kp-confirm-ok{
  flex:1;
  padding:11px 16px;
  border-radius:11px;
  font-family:inherit;
  font-size:.86rem;font-weight:700;letter-spacing:.1px;
  cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s;
  outline:none;
  border:1px solid var(--border);
}
.kp-confirm-cancel:focus,.kp-confirm-cancel:focus-visible,
.kp-confirm-ok:focus,.kp-confirm-ok:focus-visible{
  outline:none;box-shadow:none;
}
.kp-confirm-cancel{
  background:rgba(255,255,255,.04);
  color:var(--text-secondary);
}
.kp-confirm-cancel:hover{
  background:rgba(255,255,255,.08);
  color:var(--text-primary);
}
.kp-confirm-cancel:active{transform:scale(.97)}
.kp-confirm-ok{
  background:rgba(200,245,49,.1);
  border-color:rgba(200,245,49,.35);
  color:var(--accent);
}
.kp-confirm-ok:hover{
  background:rgba(200,245,49,.18);
  border-color:rgba(200,245,49,.55);
}
.kp-confirm-ok:active{transform:scale(.97)}
/* Danger variant — red action button for destructive operations like Sil */
.kp-confirm-ok-danger{
  background:rgba(255,80,80,.1);
  border-color:rgba(255,80,80,.35);
  color:var(--red,#ff5050);
}
.kp-confirm-ok-danger:hover{
  background:rgba(255,80,80,.18);
  border-color:rgba(255,80,80,.55);
}
.toast.success{border-left:4px solid var(--green);color:var(--green)}
.toast.error{border-left:4px solid var(--red);color:var(--red)}
.toast.info{border-left:4px solid var(--blue);color:var(--blue)}
.toast.show{transform:translateX(0)}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.content>*{animation:fadeIn .4s ease both}
.content>*:nth-child(1){animation-delay:.05s}
.content>*:nth-child(2){animation-delay:.1s}
.content>*:nth-child(3){animation-delay:.15s}

/* RESPONSIVE */
@media(max-width:1024px){.stats-row{grid-template-columns:1fr 1fr}.summary-row{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.content{padding:20px}.summary-row{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr}.detail-panel{width:100%}.form-row{grid-template-columns:1fr}.settings-grid{grid-template-columns:1fr}.topbar{padding:16px 20px}.search-box{min-width:140px}}
@media(max-width:360px){.sidebar{display:none}}


/* Detay paneli (10100) İÇİNDEN açılan statik not modalları — §2.4-3 kuralı:
   z-index >= 10200 olmalı, yoksa panelin arkasında görünmez açılıyorlar
   (2026-07-07 fix: Açıklama butonu 'çalışmıyor' görünüyordu;
    2026-07-09 A14 taraması: taskModal + taskViewModal da aynı gizli bug'ı
    taşıyordu — takvim sekmesi panel içi, görev modalları listede yoktu) */
/* [C3] son iki statik istisna da kalktı — not modalları artık kp fabrikasında (10200 varsayılan) */
/* [C1] 2026-07-12: listedeki diğer 10 modal kp fabrikasına taşındı (fabrika
   varsayılanı zaten --z-detail-modal 10200) — istisnaları kaldırıldı.
   Kalan ikili hâlâ statik iskelet (çekirdek load-time listener kümesi). */
/* 2026-07-10 A17 taraması: measureModal + measurePreviewModal da listeden
   atlanmıştı — ölçüm modalı panelin arkasında görünmez açılıyor, 'Geri' ile
   panel kapanınca ortaya çıkıyordu (Kaydet de selectedClientId=null yüzünden
   sessiz kalıyordu) */

/* ─── KP MODAL FABRİKASI (Faz C-0, 2026-07-12 — js/modal.js) ───
   Overlay'in kendi sınıfı: çekirdek ESC handler'ı .modal-overlay.active
   aradığından çakışmaz (kpConfirm emsali). İç kart mevcut .modal ailesini
   aynen kullanır → statik haliyle piksel eşliği. Animasyon yalnızca
   opacity/transform — backdrop-filter YASAK (§4.5). */
.kp-modal-overlay{position:fixed;inset:0;z-index:var(--z-detail-modal,10200);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s ease}
.kp-modal-overlay.kp-open{opacity:1}
.kp-modal-overlay .modal{transform:translateY(14px) scale(.98);transition:transform .3s cubic-bezier(.25,.46,.45,.94)}
.kp-modal-overlay.kp-open .modal{transform:translateY(0) scale(1)}

.kp-mockpay .modal{text-align:center} /* [C2] mockPaymentModal — eski inline stilin karşılığı */