/* ===== FUZEM BABALAR GÜNÜ POP-UP — CSS ===== */
/* Bu dosyayı TSoft dosya yöneticisine yükleyin (örn. /Data/EditorFiles/tasarim/) */
/* ve sayfaya şu şekilde ekleyin:                                                 */
/* <link rel="stylesheet" href="/Data/EditorFiles/tasarim/babalar-gunu-popup.css"> */

:root{
  --fz-sari:#f9b233;        /* marka sarısı (logo ikonu) */
  --fz-sari-koyu:#e89c1c;
  --fz-antrasit:#3f4145;    /* marka yazı rengi (FUZEM) */
  --fz-gri:#6c7079;
  --fz-acik:#f4f5f7;
}

/* ---------- OVERLAY ---------- */
.fz-overlay{
  position:fixed; inset:0; z-index:99999;
  background:rgba(45,47,52,.45); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fzFade .3s ease;
}
@keyframes fzFade{0%{opacity:0}100%{opacity:1}}

/* ---------- POPUP ---------- */
.fz-popup{
  position:relative; width:100%; max-width:400px;
  background:#fff; border-radius:18px; padding:34px 32px 30px;
  text-align:center; overflow:hidden;
  box-shadow:0 24px 60px rgba(45,47,52,.28);
  border-top:5px solid var(--fz-sari);
  font-family:'Poppins',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  animation:fzPop .45s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes fzPop{0%{transform:translateY(28px) scale(.96);opacity:0}100%{transform:none;opacity:1}}

.fz-ribbon{
  display:inline-block; background:var(--fz-sari); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:.4px;
  padding:7px 18px; border-radius:999px; margin-bottom:18px;
  box-shadow:0 6px 16px rgba(249,178,51,.35);
}
.fz-logo{height:34px; width:auto; display:block; margin:0 auto 16px}

.fz-title{font-size:23px; line-height:1.35; font-weight:600; color:var(--fz-antrasit); margin:0 0 12px}
.fz-amount{color:var(--fz-sari-koyu); font-weight:800; font-size:27px; white-space:nowrap}
.fz-tl{font-size:15px; vertical-align:super; margin-left:1px}
.fz-text{font-size:14px; line-height:1.6; color:var(--fz-gri); margin:0 0 22px}
.fz-text strong{color:var(--fz-antrasit); font-weight:600}

.fz-code-label{
  font-size:11px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:#9aa0ab; margin-bottom:9px;
}
.fz-code-box{
  display:flex; align-items:center; justify-content:center;
  border:2px dashed var(--fz-sari); background:#fffaf0;
  border-radius:12px; padding:14px; margin-bottom:14px;
}
.fz-code{
  font-size:28px; font-weight:800; letter-spacing:6px; color:var(--fz-antrasit);
  font-family:'Courier New',monospace; padding-left:6px;
}

/* kopyala butonu — altta, tam genişlik */
.fz-copy{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  border:none; cursor:pointer; color:#fff; font-size:15px; font-weight:600;
  padding:15px; border-radius:12px;
  background:var(--fz-antrasit);
  transition:.2s;
}
.fz-copy:hover{background:#2c2e31; transform:translateY(-1px)}
.fz-copy:active{transform:translateY(0)}
.fz-copy.copied{background:#2e9e57}

.fz-close{
  position:absolute; top:12px; right:14px; z-index:3;
  width:32px; height:32px; border:none; border-radius:50%;
  background:var(--fz-acik); color:#8a8f99; font-size:21px; line-height:1; cursor:pointer;
  transition:.2s;
}
.fz-close:hover{background:#e7e9ee; color:#555; transform:rotate(90deg)}

/* ---------- LAUNCHER WIDGET (kare kart) ---------- */
.fz-launcher{
  position:fixed; right:22px; bottom:22px; z-index:99998;
  width:210px;
  display:flex; flex-direction:column; gap:10px;
  background:#fff; border:1px solid #ececef;
  border-top:4px solid var(--fz-sari);
  border-radius:16px; padding:16px;
  box-shadow:0 12px 32px rgba(45,47,52,.18);
  font-family:'Poppins',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  animation:fzSlideIn .45s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes fzSlideIn{0%{transform:translateY(80px);opacity:0}100%{transform:none;opacity:1}}

.fz-launcher-open{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px;
  border:none; background:none; cursor:pointer; padding:0;
}
.fz-launcher-icon{
  font-size:20px; font-weight:800; width:44px; height:44px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--fz-sari); color:#fff; border-radius:12px;
  box-shadow:0 6px 14px rgba(249,178,51,.35);
}
.fz-launcher-title{color:var(--fz-antrasit); font-size:14px; font-weight:600; line-height:1.25}
.fz-launcher-amount{color:var(--fz-sari-koyu); font-size:13px; font-weight:700; font-style:normal; line-height:1.3}

.fz-launcher-codebox{
  text-align:center; font-size:12px; color:var(--fz-gri); font-weight:500;
  background:#fffaf0; border:1.5px dashed var(--fz-sari);
  border-radius:10px; padding:8px;
}
.fz-launcher-codebox strong{color:var(--fz-sari-koyu); font-weight:800; letter-spacing:2px; font-size:14px}

.fz-launcher-copy{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:7px;
  border:none; cursor:pointer; color:#fff; background:var(--fz-antrasit);
  border-radius:10px; padding:11px; font-size:13px; font-weight:600;
  transition:background .2s;
}
.fz-launcher-copy:hover{background:#2c2e31}
.fz-launcher-copy.copied{background:#2e9e57}

/* widget üzerinde hafif nabız (dikkat çekmek için) */
.fz-launcher::after{
  content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(249,178,51,.5); animation:fzPulse 2.2s infinite;
}
@keyframes fzPulse{
  0%{box-shadow:0 0 0 0 rgba(249,178,51,.4)}
  70%{box-shadow:0 0 0 14px rgba(249,178,51,0)}
  100%{box-shadow:0 0 0 0 rgba(249,178,51,0)}
}

/* ---------- MOBİL ---------- */
@media(max-width:480px){
  .fz-popup{padding:32px 22px 24px}
  .fz-title{font-size:20px}
  .fz-amount{font-size:23px}
  .fz-code{font-size:25px; letter-spacing:4px}
  .fz-launcher{right:14px; bottom:14px; width:185px; padding:14px}
}