:root{
  --ink:#0F3D3E; --ink-soft:#3C5F5F; --cream:#FBF8F2; --card:#fff;
  --tint:#E8F0EE; --gold:#C9A15A; --gold-soft:#EFE1C4; --coral:#C1533E; --line:#DDE4E0;
  --radius:14px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Inter',system-ui,sans-serif;min-height:100vh;padding:28px 16px 56px}
.wrap{max-width:560px;margin:0 auto}
.wrap.wide{max-width:1040px}
.brand{margin-bottom:18px}
.brand h1{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;margin:0;letter-spacing:-.01em}
.brand span{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}
.wave{height:6px;margin-bottom:24px}
.wave svg{display:block;width:100%;height:6px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px}
.card h2{font-family:'Fraunces',Georgia,serif;font-size:21px;font-weight:600;margin:0 0 6px}
.sub{font-size:14px;color:var(--ink-soft);line-height:1.5;margin:0 0 22px}
.field{margin-bottom:20px}
.label{display:block;font-size:14.5px;font-weight:500;margin:0 0 8px}
.label .req{color:var(--coral);margin-left:2px}
input[type=text],input[type=tel],input[type=password],input[type=search],select,textarea{
  width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff}
textarea{resize:vertical;min-height:92px;line-height:1.5}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.stars{display:flex;gap:4px}
.star{background:none;border:none;padding:2px;font-size:36px;line-height:1;cursor:pointer;color:#D8D2C2;transition:transform .1s}
.star.on{color:var(--gold)}
.star:hover{transform:scale(1.1)}
.star:focus-visible{outline:2px solid var(--gold);border-radius:6px}
.star-hint{font-size:12px;color:var(--ink-soft);margin-top:4px;display:flex;justify-content:space-between;max-width:210px}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:15px;background:#fff}
.choice:has(input:checked){border-color:var(--gold);background:var(--gold-soft)}
.choice input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.err{font-size:13px;color:var(--coral);margin-top:6px;display:none}
.field.invalid .err{display:block}
.field.invalid input[type=text],.field.invalid input[type=tel],.field.invalid textarea{border-color:var(--coral)}
.banner{display:none;margin:0 0 14px;padding:11px 13px;border-radius:10px;background:#FBEAE6;color:var(--coral);font-size:14px}
.banner.show{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn{padding:11px 18px;border-radius:10px;border:1px solid var(--line);background:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink)}
.btn:hover{background:var(--tint)}
.btn-dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn-dark:hover{background:var(--ink);opacity:.92}
.btn-block{width:100%;padding:14px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.thanks{text-align:center}
.thanks-icon{width:56px;height:56px;border-radius:50%;background:var(--tint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:26px}
.links{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.link{display:block;padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:var(--tint);color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.link:hover{background:var(--gold-soft)}

/* Admin */
.login{max-width:340px;margin:12vh auto 0;text-align:center}
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.bar .grow{flex:1;min-width:150px}
.bar select{width:auto;min-width:160px;font-size:14px;padding:9px 11px}
.bar input[type=search]{font-size:14px;padding:9px 11px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--tint);border-radius:10px;padding:13px 15px}
.stat .num{font-family:'Fraunces',Georgia,serif;font-size:25px;font-weight:600}
.stat .lbl{font-size:11.5px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em}
.dist{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.dist h3{margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft)}
.dist-row{display:grid;grid-template-columns:minmax(120px,200px) 1fr 34px;gap:10px;align-items:center;font-size:13.5px;margin-bottom:6px}
.dist-track{height:8px;background:var(--tint);border-radius:4px;overflow:hidden}
.dist-fill{height:100%;background:var(--gold)}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:#fff}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
td.long{white-space:normal;min-width:200px;max-width:320px}
th{background:var(--tint);font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-soft);position:sticky;top:0}
.gold{color:var(--gold)}
.empty{text-align:center;padding:48px 20px;color:var(--ink-soft);background:#fff;border:1px solid var(--line);border-radius:10px}
.hidden{display:none!important}

/* ================= Süsleme & animasyonlar (sadece survey sayfası) ================= */
.bg-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wrap{position:relative;z-index:1}
.float{position:absolute;bottom:-60px;opacity:0;animation:rise linear infinite}
.float svg{display:block;width:100%;height:100%}
@keyframes rise{
  0%{transform:translateY(0) rotate(0);opacity:0}
  10%{opacity:.5}
  90%{opacity:.5}
  100%{transform:translateY(-115vh) rotate(40deg);opacity:0}
}

/* Mascot */
.mascot-row{display:flex;align-items:center;gap:24px;margin-bottom:6px}
.mascot{position:relative;width:64px;height:64px;flex:none;perspective:300px;animation:bob 3.2s ease-in-out infinite}
.mascot .spin{width:100%;height:100%;animation:spin 6s ease-in-out infinite;transform-style:preserve-3d}
.mascot svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 4px 6px rgba(15,61,62,.18))}
.mascot .blink{transform-origin:50% 38px;animation:blink 4.5s infinite}
.sparkle{position:absolute;width:14px;height:14px;color:var(--gold);animation:twinkle 2.4s ease-in-out infinite}
.sparkle.s1{top:-4px;right:-6px}
.sparkle.s2{bottom:6px;left:-10px;width:10px;height:10px;animation-delay:.8s}
.sparkle.s3{top:14px;right:-14px;width:8px;height:8px;animation-delay:1.5s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes spin{0%,70%{transform:rotateY(0)}90%,100%{transform:rotateY(360deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes twinkle{0%,100%{transform:scale(.3) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}
.mascot.big{width:96px;height:96px;margin:0 auto 14px}
.mascot.big .spin{animation:spin 2.2s ease-in-out infinite}

/* Animated wave */
.wave svg path{stroke-dasharray:14 8;animation:dash 2.5s linear infinite}
@keyframes dash{to{stroke-dashoffset:-44}}

/* Entrances */
.card{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1) both}
.field{animation:fadeUp .5s cubic-bezier(.2,.8,.2,1) both}
form .field:nth-child(1){animation-delay:.15s}
form .field:nth-child(2){animation-delay:.22s}
form .field:nth-child(3){animation-delay:.29s}
form .field:nth-child(4){animation-delay:.36s}
form .field:nth-child(5){animation-delay:.43s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Stars + mood face */
.star.on{animation:starPop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--i,0) * 55ms);text-shadow:0 0 12px rgba(201,161,90,.6)}
@keyframes starPop{0%{transform:scale(.4) rotate(-30deg)}60%{transform:scale(1.35) rotate(10deg)}100%{transform:scale(1) rotate(0)}}
.mood{display:none;align-items:center;gap:10px;margin-top:10px;font-size:14px;color:var(--ink-soft);font-weight:500}
.mood.show{display:flex;animation:fadeUp .3s both}
.mood svg{width:44px;height:44px;animation:moodPop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes moodPop{0%{transform:scale(.3) rotate(-25deg)}100%{transform:scale(1) rotate(0)}}

/* Choices */
.choice{transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.choice:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(15,61,62,.08)}
.choice:has(input:checked){animation:choiceSel .3s ease}
@keyframes choiceSel{50%{transform:scale(1.02)}}

/* Button shine */
.btn-dark.btn-block{position:relative;overflow:hidden;transition:transform .15s}
.btn-dark.btn-block:hover{transform:translateY(-1px)}
.btn-dark.btn-block::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}

/* Thanks */
.thanks .mascot.big{animation:bob 2.4s ease-in-out infinite}
.check-badge{position:absolute;right:-8px;bottom:-2px;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;border:3px solid #fff;animation:badgeIn .7s .3s cubic-bezier(.3,1.8,.5,1) both}
@keyframes badgeIn{from{transform:scale(0) rotate(-90deg)}to{transform:scale(1) rotate(0)}}
.confetti{position:fixed;top:-14px;width:9px;height:14px;z-index:50;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--dx,0),110vh,0) rotate(var(--rot,720deg));opacity:.9}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bg-layer,.sparkle,.confetti{display:none!important}
}