/* ==========================================================================
   muhammedkeles.com.tr · ortak stil
   Gece pazarı sahnesi, kehribar ışık, krem kağıt. Tüm sayfalar bunu kullanır;
   demolar (ornek/*) kendi içinde bağımsızdır.
   ========================================================================== */
:root{
  --night:#100c08;
  --night-2:#1b1510;
  --card:rgba(24,18,13,.84);
  --card-hi:rgba(38,29,20,.92);
  --edge:rgba(255,226,160,.14);
  --cream:#fff4dc;
  --cream-2:#eadcbf;
  --muted:#b6a78c;
  --paper:#f4ead4;
  --paper-2:#e4d2ab;
  --ink:#1a1206;
  --ink-2:#4a3a22;
  --lemon:#ffd23f;
  --lemon-2:#f2ad00;
  --ember:#ff7a2f;
  --serif:"Fraunces", Georgia, serif;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --sans:"Inter", system-ui, sans-serif;
  --hand:"Caveat", "Segoe Print", cursive;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--night);overflow-x:clip}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,video,svg,iframe{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
::selection{background:var(--lemon);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type */
.serif{font-family:var(--serif);font-weight:900;letter-spacing:-.025em;line-height:.95;font-variation-settings:"opsz" 144, "SOFT" 30}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:.02em}
.hl{color:var(--lemon)}

/* buttons: lit from above, with weight */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 24px;border-radius:14px;border:1px solid transparent;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 180ms var(--ease-out), box-shadow 220ms var(--ease-out), filter 200ms}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-lemon{color:var(--ink);background:linear-gradient(180deg,#ffe57a 0%,#ffd23f 45%,#f2ad00 100%);border-color:#b98400;box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,70,0,.25), 0 10px 26px -10px rgba(242,173,0,.75)}
.btn-lemon:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(120,70,0,.25), 0 16px 34px -10px rgba(242,173,0,.9)}
.btn-dark{color:var(--cream);background:linear-gradient(180deg,#2c231a,#191310);border-color:rgba(255,226,160,.18);box-shadow:inset 0 1px 0 rgba(255,240,200,.08), 0 10px 24px -12px rgba(0,0,0,.8)}
.btn-dark:hover{transform:translateY(-2px);border-color:rgba(255,210,63,.5)}
.btn-ink{color:var(--paper);background:linear-gradient(180deg,#2b2014,#120c06);border-color:#000;box-shadow:inset 0 1px 0 rgba(255,240,200,.12), 0 10px 22px -10px rgba(0,0,0,.6)}
.btn-ink:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}

/* paper: the sepia surface used by panels and receipts */
.paper{color:var(--ink);background-color:var(--paper);background-image:
  radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.55), transparent 60%),
  radial-gradient(ellipse at 100% 100%, rgba(150,110,40,.18), transparent 55%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* mascot */
.pin{overflow:visible}
.pin .lid{transform-box:fill-box;transform-origin:top}
.pin .float{animation:pinFloat 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes pinFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}

@media (prefers-reduced-motion: reduce){
  .pin .float{animation:none}
  .btn{transition:none}
}