:root{
  --bg-deep:#241033;
  --bg-mid:#3a1a52;
  --bg-soft:#5b2a72;
  --pink:#ff8fc7;
  --pink-light:#ffd6ea;
  --pink-deep:#e85fa8;
  --gold:#f6c453;
  --text:#fff3fb;
  --muted:#d9bfe8;
  --card-bg:rgba(255,255,255,0.06);
  --card-border:rgba(255,255,255,0.14);
}

*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;
  min-height:100vh;
  font-family:'Quicksand',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,143,199,.18), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(246,196,83,.10), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(255,143,199,.14), transparent 50%),
    linear-gradient(160deg, var(--bg-deep), var(--bg-mid) 55%, var(--bg-soft));
  background-attachment:fixed;
  overflow-x:hidden;
}

#bg-decor{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(3px 3px at 10% 20%, var(--pink-light) 0, transparent 60%),
    radial-gradient(2px 2px at 80% 15%, var(--gold) 0, transparent 60%),
    radial-gradient(3px 3px at 60% 70%, var(--pink-light) 0, transparent 60%),
    radial-gradient(2px 2px at 25% 85%, var(--pink) 0, transparent 60%),
    radial-gradient(2px 2px at 90% 60%, var(--gold) 0, transparent 60%);
  opacity:.6;
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.3;} to{opacity:.75;}}

.screen{display:none;position:relative;z-index:1;min-height:100vh;padding:32px 20px 60px;}
.screen.active{display:flex;flex-direction:column;align-items:center;}

.eyebrow{
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  color:var(--pink-light);font-weight:600;margin:0 0 6px;
}
.brand{
  font-family:'Cormorant Garamond',serif;font-weight:700;
  font-size:2.6rem;margin:0 0 4px;
  background:linear-gradient(90deg,var(--pink-light),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand.small{font-size:1.5rem;}
.sub{color:var(--muted);margin:0 0 26px;font-size:.95rem;}

.card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  backdrop-filter:blur(14px);
  border-radius:24px;
  padding:34px 30px;
  width:100%;max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:floatIn .6s cubic-bezier(.2,.8,.2,1);
}
@keyframes floatIn{from{opacity:0;transform:translateY(18px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);}}

.login-card{text-align:center;margin-top:8vh;}

input[type="text"],input[type="password"]{
  width:100%;padding:13px 16px;margin-bottom:12px;
  border-radius:14px;border:1px solid var(--card-border);
  background:rgba(255,255,255,.08);color:var(--text);
  font-family:'Quicksand',sans-serif;font-size:.95rem;outline:none;
  transition:border-color .2s, background .2s;
}
input::placeholder{color:var(--muted);}
input:focus{border-color:var(--pink);background:rgba(255,255,255,.13);}

.btn-primary{
  width:100%;padding:13px 18px;border:none;border-radius:14px;
  background:linear-gradient(90deg,var(--pink-deep),var(--pink));
  color:#2a1030;font-weight:700;font-size:.95rem;cursor:pointer;
  box-shadow:0 8px 22px rgba(232,95,168,.4);
  transition:transform .15s, box-shadow .15s;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,95,168,.5);}
.btn-primary:active{transform:translateY(0);}

.btn-ghost{
  width:100%;padding:11px 18px;margin-top:10px;border-radius:14px;
  background:transparent;border:1px solid var(--card-border);
  color:var(--muted);font-weight:600;cursor:pointer;font-family:'Quicksand',sans-serif;
  transition:border-color .2s, color .2s;
}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink-light);}

.error-text{color:#ff9c9c;font-size:.85rem;min-height:1.2em;margin:10px 0 0;}

.shake{animation:shake .35s;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}

/* HARİTA */
.map-header{
  width:100%;max-width:600px;display:flex;justify-content:space-between;
  align-items:center;margin-bottom:10px;
}
#progress-pill{
  background:rgba(255,255,255,.1);border:1px solid var(--card-border);
  padding:6px 16px;border-radius:999px;font-weight:700;font-size:.85rem;color:var(--gold);
}
.map-hint{color:var(--muted);font-size:.85rem;min-height:1.4em;margin-top:14px;}

#map-scroll{
  position:relative;width:100%;max-width:600px;
  overflow-y:auto;max-height:72vh;border-radius:20px;
  background:rgba(0,0,0,.12);padding:20px 0;
}
#map-path{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;}
#map-nodes{position:relative;width:100%;}

.node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;cursor:pointer;
  width:120px;text-align:center;
}
.node .dot{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:1.3rem;
  border:2px solid var(--card-border);
  transition:transform .2s, box-shadow .2s;
}
.node .label{font-size:.72rem;color:var(--muted);margin-top:6px;line-height:1.2;}

.node.locked .dot{background:rgba(255,255,255,.06);color:var(--muted);cursor:default;}
.node.locked{cursor:default;}
.node.current .dot{
  background:linear-gradient(135deg,var(--pink-deep),var(--pink));
  color:#2a1030;box-shadow:0 0 0 6px rgba(255,143,199,.18);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 6px rgba(255,143,199,.18);}
  50%{box-shadow:0 0 0 12px rgba(255,143,199,.06);}
}
.node.done .dot{
  background:linear-gradient(135deg,#5ce6a0,#2fbf7e);
  color:#0c2c1e;
}
.node:hover .dot{transform:scale(1.08);}

#map-path path{
  fill:none;stroke:var(--card-border);stroke-width:3;
  stroke-dasharray:2 10;stroke-linecap:round;
}

/* SORU / GALERİ başlıkları */
.question-card{margin-top:6vh;}
.question-card h2, .gallery-header h2{
  font-family:'Cormorant Garamond',serif;font-size:1.7rem;margin:0 0 10px;color:var(--pink-light);
}
.question-card p#q-text{color:var(--text);margin-bottom:18px;line-height:1.5;}

.gallery-header{
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:3;width:90%;max-width:600px;text-align:center;
  background:rgba(36,16,51,.62);backdrop-filter:blur(10px);
  border:1px solid var(--card-border);
  padding:12px 22px;border-radius:18px;
}

#gallery-grid{
  position:fixed;inset:0;z-index:1;
  overflow:hidden;pointer-events:none;
}
#gallery-grid .empty-note{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--muted);text-align:center;padding:0 20px;width:80%;
}

.rain-drop{
  position:absolute;top:-28vh;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--card-border);
  background:#000;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
  animation-name:rainDropFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes rainDropFall{
  0%{transform:translateY(0) rotate(var(--rot,0deg));}
  100%{transform:translateY(155vh) rotate(var(--rot,0deg));}
}

.rain-item{
  width:100%;
  height:auto;
  display:block;
  border-radius:14px;
  background:#000;
}
.rain-broken{
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.7rem;text-align:center;padding:10px;
  aspect-ratio:3/4;background:rgba(255,255,255,.08);
  border-radius:14px;width:100%;
}

.gallery-footer{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  z-index:3;width:90%;max-width:900px;display:flex;gap:12px;
}
.gallery-footer .btn-ghost, .gallery-footer .btn-primary{
  width:auto;flex:1;backdrop-filter:blur(8px);
}

/* FİNAL */
#screen-final{justify-content:center;min-height:100vh;overflow:hidden;position:relative;}
#credits-wrap{
  width:100%;max-width:640px;height:70vh;overflow:hidden;position:relative;
  mask-image:linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}
#credits-text{
  position:absolute;top:-100%;left:0;right:0;
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;line-height:2.1;
  text-align:center;white-space:pre-wrap;color:var(--pink-light);
  animation:scrollDown 50s linear forwards;
}
@keyframes scrollDown{
  from{top:-100%;}
  to{top:100%;}
}
.skip-btn{position:fixed;bottom:24px;right:24px;width:auto;padding:10px 20px;}

@media (max-width:480px){
  .brand{font-size:2.1rem;}
  .card{padding:26px 20px;}
  #credits-text{font-size:1.25rem;}
}