/* =========================================================
   Mak Dekorasyon — Ana Sayfa (Gelişmiş UI • Mobile-First)
   - Animasyonlu sabit pembe arka plan (kesilme yok)
   - Cam (glass) dropzone + gradient "ışıklı" kenar
   - Hover/dragover parıltı, shine efekti, erişilebilir odak
   - Yükleme listesi & butonlar modern
   - Dark mode ve reduced motion desteği
   ========================================================= */

/* ---------- Değişkenler ---------- */
:root{
  --ink:#0e1320;
  --muted:#6b7280;
  --card:#ffffff;

  --brand:#7c3aed;   /* mor */
  --brand2:#ec4899;  /* pembe */
  --brand3:#f97316;  /* sıcak vurgu (turuncu) */

  --border:#efeafe;
  --shadow:0 10px 28px rgba(16,24,40,.12);
  --shadow-lg:0 22px 54px rgba(16,24,40,.18);

  --radius:18px;
  --radius-sm:12px;

  --bg1:#f7edff;    /* açık lila */
  --bg2:#ffe8f3;    /* açık pembe */
  --bg3:#fff3f9;    /* beyaz-pembe */
}

/* ---------- Reset / Genel ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:var(--ink);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  line-height:1.5;
  -webkit-tap-highlight-color: transparent;
  background:#fff;
}

/* =========================================================
   SABİT & ANİMASYONLU ARKA PLAN
   ========================================================= */
.bg{
  position:fixed; inset:-24vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1200px 780px at 110% -10%, var(--bg1) 0%, transparent 65%),
    radial-gradient(1200px 780px at  -10%  0%, var(--bg2) 0%, transparent 65%),
    radial-gradient(1400px 900px  at  50% 120%, var(--bg3) 0%, transparent 60%);
  opacity:.95;
  animation: bgFloat 24s ease-in-out infinite alternate;
}
@keyframes bgFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}
.bg::before{
  content:"";
  position:absolute; inset:-10vmax;
  background:
    radial-gradient(1000px 1000px at 50% -20%, rgba(255,255,255,.55), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='.045' viewBox='0 0 32 32'><defs><pattern id='d' width='16' height='16' patternUnits='userSpaceOnUse'><circle cx='1' cy='1' r='1' fill='%23000000'/></pattern></defs><rect width='100%' height='100%' fill='url(%23d)'/></svg>");
  border-radius: 50%;
  filter: blur(30px);
}

/* ---------- Konteyner / Hero ---------- */
.container{
  width:100%; max-width:980px; margin:0 auto;
  padding: max(16px, env(safe-area-inset-top))
           max(16px, env(safe-area-inset-right))
           max(28px, env(safe-area-inset-bottom))
           max(16px, env(safe-area-inset-left));
}
.hero{ text-align:center; padding:18px 0 8px; }
.brand{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.rings{ width:64px; height:64px; filter: drop-shadow(0 6px 16px rgba(124,58,237,.25)); }
.titles h1{
  margin:.15rem 0; line-height:1.2;
  font-size: clamp(22px, 5.5vw, 36px);
  letter-spacing:.2px;
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.titles p{
  margin:.4rem 0 0; color:var(--muted);
  font-size: clamp(14px, 3.8vw, 16px);
}

/* ---------- Kart (Cam/Glass) ---------- */
.card.glass{
  margin-top:16px; padding:20px; border-radius:var(--radius);
  background: rgba(255,255,255,.62);
  border:1px solid var(--border);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: var(--shadow);
}

/* =========================================================
   DROPZONE — Parıltılı gradient kenar + shine efekti
   ========================================================= */
.dropzone{
  position:relative;
  border-radius: calc(var(--radius) + 2px);
  padding:26px; text-align:center; outline:none;
  background: rgba(255,255,255,.70);
  box-shadow: 0 6px 24px rgba(124,58,237,.12);
  transition: .2s transform, .2s box-shadow, .2s background;
  touch-action: manipulation;
  overflow:hidden;
}
.dropzone::before{
  content:"";
  position:absolute; inset:0; border-radius: inherit; padding:2px;
  background: conic-gradient(from 0deg, var(--brand), var(--brand2), var(--brand3), var(--brand));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.9; filter: blur(.2px);
  animation: ringSpin 16s linear infinite;
}
.dropzone::after{
  content:"";
  position:absolute; left:-40%; top:-120%;
  width:80%; height:300%;
  background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.55) 50%, transparent 58%);
  transform: rotate(8deg);
  animation: shine 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes ringSpin{ to{ transform: rotate(360deg); } }
@keyframes shine{
  0%, 75%{ transform: translate3d(0,0,0) rotate(8deg); opacity:.0; }
  93%{ transform: translate3d(140%,0,0) rotate(8deg); opacity:.35; }
  100%{ transform: translate3d(160%,0,0) rotate(8deg); opacity:0; }
}
.dropzone:hover{ transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.dropzone:focus-visible, .dropzone.dragover{
  background: rgba(250,245,255,.8);
  box-shadow: 0 12px 38px rgba(124,58,237,.22);
}

/* İçerik */
.dz-icon{ display:flex; justify-content:center; }
.dz-icon svg{ filter: drop-shadow(0 6px 14px rgba(124,58,237,.30)); }
.dz-title{ font-weight:800; margin-top:10px; font-size: clamp(16px, 4.2vw, 18px); letter-spacing:.2px; }
.dz-sub{ color:var(--muted); margin:6px 0; }
.dz-note{ color:var(--muted); font-size:12px; margin-top:8px; }

/* ---------- Butonlar ---------- */
.btn{
  appearance:none; border:0; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:800;
  background:#fff; box-shadow: 0 6px 20px rgba(16,24,40,.08);
  transition:.18s transform, .18s box-shadow, .18s filter;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: linear-gradient(90deg, var(--brand), var(--brand2) 60%, var(--brand3));
  color:#fff;
  box-shadow: 0 10px 28px rgba(236,72,153,.24), 0 2px 6px rgba(16,24,40,.06) inset;
}
.btn.primary:disabled{ opacity:.55; cursor:not-allowed; }

/* ---------- Yükleme Listesi ---------- */
.file-list{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.file-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
  padding:10px; border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
  border:1px solid #f1eefb;
}
.thumb{
  width:56px; height:56px; border-radius:10px; object-fit:cover;
  background:linear-gradient(135deg, #efe9ff, #ffeaf3);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:#5b21b6;
  box-shadow: inset 0 0 0 1px #efeafe;
}
.meta .name{ font-weight:700; font-size:14px; }
.meta .size{ color:var(--muted); font-size:12px; }
.progress{ height:8px; background:#f3f4f6; border-radius:999px; overflow:hidden; margin-top:6px; }
.bar{ height:100%; width:0%; background: linear-gradient(90deg, #a78bfa, #fb7185); transition: width .2s ease; }

.badge{ font-size:12px; border-radius:999px; padding:4px 8px; color:#6b7280; background:#f1f5f9; }
.badge.ok{ color:#065f46; background:#ecfdf5; }
.badge.err{ color:#7f1d1d; background:#fef2f2; }
.badge.wait{ color:#78350f; background:#fff7ed; }

.actions{
  display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; flex-wrap:wrap;
}
.hint{ color:var(--muted); font-size:12px; }

/* ---------- Footer ---------- */
.foot{ text-align:center; color:var(--muted); margin-top:18px; }
.foot a{ color:inherit; text-decoration:underline; }

/* ---------- Toast ---------- */
.toast{
  position: fixed; left:50%; transform:translateX(-50%);
  bottom:24px; background:#111827; color:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); font-size:14px;
}

/* ---------- Mobil Optimizasyonları ---------- */
@media (max-width:560px){
  .file-item{ grid-template-columns:48px 1fr; }
  .thumb{ width:48px; height:48px; border-radius:9px; }
  .btn{ width:100%; }
  .actions{ justify-content:stretch; }
}

/* ---------- Hover destekli cihazlar ---------- */
@media (hover:hover){
  .file-item:hover{ box-shadow: var(--shadow-lg); border-color:#e1dafc; }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* ---------- Dark Mode ---------- */
@media (prefers-color-scheme: dark){
  .bg{
    background:
      radial-gradient(1200px 780px at 110% -10%, rgba(246,237,255,.22) 0%, transparent 65%),
      radial-gradient(1200px 780px at  -10%  0%, rgba(255,232,243,.22) 0%, transparent 65%),
      radial-gradient(1400px 900px  at  50% 120%, rgba(255,243,249,.18) 0%, transparent 60%);
    opacity:.88;
  }
  .card.glass{
    background: rgba(26,19,32,.68);
    border-color:#2a1c34;
    box-shadow:none;
  }
  .dropzone{ background: rgba(255,255,255,.06); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
  .dz-note, .dz-sub, .hint, .foot{ color:#c9c2d1; }
  .file-item{ background:#1a1320; border-color:#2a1c34; }
  .thumb{ background:linear-gradient(135deg, #20162a, #1a1320); color:#cabdf5; }
  .meta .size{ color:#a59db2; }
}

/* =========================================================
   KUTLAMA MODALI + UÇAN KALPLER
   - app.js değişmeden toast metni "tamamlandı" iken tetiklenir
   ========================================================= */
.modal{
  position: fixed; inset:0; z-index: 10000;
  display:none; align-items:center; justify-content:center;
}
.modal.open{ display:flex; }
.modal-backdrop{
  position:absolute; inset:0; background: rgba(6,8,15,.6); backdrop-filter: blur(2px);
}
.modal-card{
  position:relative; z-index:1;
  width:min(92vw, 640px);
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff, #fff6fb);
  border:1px solid #ffe3f0;
  box-shadow: 0 24px 80px rgba(16,24,40,.28), 0 8px 18px rgba(16,24,40,.12);
  overflow:hidden;
  padding: 28px 22px 30px;
  text-align:center;
}
.modal-body h3{
  margin:0 0 6px 0; font-size: clamp(20px, 4.8vw, 26px);
  background:linear-gradient(90deg, var(--brand2), var(--brand3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.modal-body p{ margin:.2rem 0 1rem; color:var(--muted); }
.modal-close{
  position:absolute; top:10px; right:10px;
  width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(0,0,0,.06); background:#fff; cursor:pointer;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
}
.modal-close:hover{ filter:brightness(0.98); }

/* Uçan kalpler */
.hearts{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
}
.heart{
  position:absolute; bottom:-24px;
  width:22px; height:22px;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 20%, transparent 21%),
    radial-gradient(circle at 70% 30%, #fff 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 65%, var(--brand2) 0 60%, transparent 61%);
  transform: rotate(45deg);
  opacity: .9;
  animation-name: heartFloat;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes heartFloat{
  0%{ transform: translateY(0) rotate(45deg) scale(0.9); opacity:.0; }
  8%{ opacity:.9; }
  100%{ transform: translateY(-115%) rotate(45deg) scale(1.15); opacity:0; }
}

/* Dark mode modal */
@media (prefers-color-scheme: dark){
  .modal-backdrop{ background: rgba(0,0,0,.55); }
  .modal-card{
    background: linear-gradient(180deg, #1d1020, #180f1a);
    border-color: #2a1c34;
    box-shadow: 0 28px 90px rgba(0,0,0,.55);
  }
  .modal-close{ background:#1f1624; color:#fff; border-color:#34233d; }
  .modal-body p{ color:#c9c2d1; }
}

/* Reduced motion: kalpleri sabit göster */
@media (prefers-reduced-motion: reduce){
  .heart{ animation:none !important; opacity:.9; }
}
/* === Soft Pembe Arka Plan — Override (index için) === */
:root{
  /* Bulut renklerini daha pembe & daha açık yapıyoruz */
  --bg1:#ffe6f2;   /* açık pembe-lila */
  --bg2:#ffeaf4;   /* soft pembe */
  --bg3:#fff5f9;   /* beyaza çok yakın pembe */
}

/* Bulutların yayılımını biraz artır, daha homojen pembe hissi */
.bg{
  opacity:.98; /* biraz daha belirgin */
  animation: bgFloat 26s ease-in-out infinite alternate; /* daha yavaş */
  background:
    radial-gradient(1200px 820px at 110% -10%, var(--bg1) 0%, transparent 68%),
    radial-gradient(1200px 820px at  -10%  0%, var(--bg2) 0%, transparent 68%),
    radial-gradient(1600px 1000px at  50% 120%, var(--bg3) 0%, transparent 62%);
}

/* Üstüne çok hafif pembe film ekleyelim (kontrastı bozmaz) */
.bg::before{
  background:
    radial-gradient(1000px 1000px at 50% -20%, rgba(255,192,203,.40), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='.04' viewBox='0 0 32 32'><defs><pattern id='d' width='16' height='16' patternUnits='userSpaceOnUse'><circle cx='1' cy='1' r='1' fill='%23000000'/></pattern></defs><rect width='100%' height='100%' fill='url(%23d)'/></svg>");
  filter: blur(28px);
}

/* Dark mode'da pembe çok baskın olmasın, hafifçe kıs */
@media (prefers-color-scheme: dark){
  .bg{
    opacity:.9;
    background:
      radial-gradient(1200px 820px at 110% -10%, rgba(255,210,226,.20) 0%, transparent 68%),
      radial-gradient(1200px 820px at  -10%  0%, rgba(255,218,234,.18) 0%, transparent 68%),
      radial-gradient(1600px 1000px at  50% 120%, rgba(255,235,242,.16) 0%, transparent 62%);
  }
  .bg::before{
    background:
      radial-gradient(1000px 1000px at 50% -20%, rgba(255,192,203,.18), transparent 60%),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' opacity='.035' viewBox='0 0 32 32'><defs><pattern id='d' width='16' height='16' patternUnits='userSpaceOnUse'><circle cx='1' cy='1' r='1' fill='%23000000'/></pattern></defs><rect width='100%' height='100%' fill='url(%23d)'/></svg>");
  }
}