@view-transition { navigation: auto; }
html { -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { background: #F4EFEA; color: #16110F; font-family: Inter, system-ui, sans-serif; animation: page-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
.heading { font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.glass { background: rgba(255,255,255,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.press { transition: transform .2s ease; }
.press:active { transform: scale(.96); }
.nav-label { max-width: 0; opacity: 0; margin-left: 0; overflow: hidden; white-space: nowrap; transition: all .38s cubic-bezier(.2,.8,.2,1); }
.nav-on .nav-label { max-width: 110px; opacity: 1; margin-left: 8px; }

/* Kaydırınca beliren öğeler: <div data-reveal data-delay="120"> */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* Sepete uçan damla + püskürtme */
.q-orb { position: fixed; z-index: 90; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; will-change: transform; }
.q-mist { position: fixed; z-index: 89; border-radius: 50%; pointer-events: none; filter: blur(3px); animation: q-mist 1s ease-out forwards; }
@keyframes q-mist { from { opacity: .85; transform: translate(0,0) scale(.4); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(var(--s)); } }
.q-bump { animation: q-bump .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes q-bump { 0% { transform: scale(1); } 35% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1); } }

/* Başarı onayı: halka + tik çizimi */
.q-ring { stroke-dasharray: 189; stroke-dashoffset: 189; animation: q-draw .8s .1s ease-out forwards; }
.q-tick { stroke-dasharray: 50; stroke-dashoffset: 50; animation: q-draw .5s .75s ease-out forwards; }
@keyframes q-draw { to { stroke-dashoffset: 0; } }

/* Konfeti */
.q-conf { position: fixed; z-index: 95; top: -12px; width: 9px; height: 14px; pointer-events: none; animation: q-fall var(--t) linear forwards; }
@keyframes q-fall { to { transform: translate3d(var(--x), 105vh, 0) rotate(var(--r)); opacity: .9; } }

/* Alt sayfa (sheet) */
.q-sheet-back { position: fixed; inset: 0; z-index: 70; background: rgba(22,17,15,.45); opacity: 0; transition: opacity .3s; backdrop-filter: blur(4px); }
.q-sheet { position: fixed; z-index: 71; left: 50%; bottom: 0; width: min(100%, 560px); max-height: 88vh; overflow: auto; background: #fff; border-radius: 32px 32px 0 0; transform: translate(-50%, 100%); transition: transform .45s cubic-bezier(.2,.8,.2,1); padding: 24px; }
.q-sheet-back.on { opacity: 1; }
.q-sheet.on { transform: translate(-50%, 0); }
@media (min-width: 1024px) { .q-sheet { bottom: 50%; border-radius: 32px; transform: translate(-50%, 60%) scale(.95); opacity: 0; } .q-sheet.on { transform: translate(-50%, 50%); opacity: 1; } }

/* Form alanları */
.q-field { position: relative; }
.q-field input, .q-field textarea, .q-field select { width: 100%; border-radius: 20px; border: 1.5px solid transparent; background: #fff; padding: 22px 18px 8px; font-size: 15px; font-weight: 600; outline: none; transition: border-color .2s, box-shadow .2s; }
.q-field textarea { resize: none; }
.q-field label { position: absolute; left: 18px; top: 17px; font-size: 15px; font-weight: 500; color: #6E655F; pointer-events: none; transition: all .2s; transform-origin: left top; }
.q-field input:focus, .q-field textarea:focus, .q-field select:focus { border-color: #16110F; box-shadow: 0 6px 18px rgba(22,17,15,.08); }
.q-field input:focus + label, .q-field input:not(:placeholder-shown) + label,
.q-field textarea:focus + label, .q-field textarea:not(:placeholder-shown) + label,
.q-field select + label { top: 7px; font-size: 11px; font-weight: 700; }
.q-field.err input, .q-field.err textarea { border-color: #E5365C; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}