/* ==========================================================================
   PAWNEST — TASARIM SİSTEMİ v2  (yenilenmiş, premium)
   Renk, tipografi, boşluk, gölge, radius, dark/light. Tek kaynak.
   ========================================================================== */

:root {
  /* --- Marka (teal-emerald, zenginleştirilmiş) --- */
  --brand-50:  #ecfdf7;
  --brand-100: #d0f7ea;
  --brand-200: #a3efd8;
  --brand-300: #66e0c1;
  --brand-400: #2fcaa8;
  --brand-500: #10b394;  /* ana marka */
  --brand-600: #059478;
  --brand-700: #077562;
  --brand-800: #0a5d4f;
  --brand-900: #0b4d43;

  /* --- CatCoin / oyunlaştırma (sıcak altın) --- */
  --gold-300: #fcd982;
  --gold-400: #fbc650;
  --gold-500: #f5a623;
  --gold-600: #d98511;

  /* --- Sıcak vurgu / sevgi (mercan-şeftali) --- */
  --coral-400: #ff9a7a;
  --coral-500: #fb7355;
  --coral-600: #e94f34;

  /* --- Durum --- */
  --success: #12a150;
  --warning: #f5a623;
  --danger:  #e5484d;
  --info:    #2f6feb;

  /* --- Nötr / yüzeyler (sıcak, LIGHT) --- */
  --bg:        #faf8f4;   /* sıcak krem zemin */
  --surface:   #ffffff;
  --surface-2: #f4f1ea;
  --border:    #eae5db;
  --ink:       #1a1512;   /* sıcak koyu */
  --ink-soft:  #5c534c;
  --ink-mute:  #9b9188;

  /* --- Tipografi --- */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-lg:1.125rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:3.75rem;

  /* --- Boşluk (4px tabanlı) --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px;

  /* --- Radius (daha yuvarlak, modern) --- */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:999px;

  /* --- Gölgeler (yumuşak, katmanlı, hafif sıcak) --- */
  --shadow-sm: 0 1px 2px rgba(26,21,18,.05), 0 2px 6px rgba(26,21,18,.05);
  --shadow-md: 0 4px 10px rgba(26,21,18,.06), 0 8px 24px rgba(26,21,18,.07);
  --shadow-lg: 0 10px 24px rgba(26,21,18,.08), 0 20px 48px rgba(26,21,18,.10);
  --shadow-xl: 0 24px 64px rgba(26,21,18,.16);
  --shadow-brand: 0 10px 26px rgba(16,179,148,.32);
  --shadow-gold: 0 10px 26px rgba(245,166,35,.32);
  --shadow-glow: 0 0 0 4px var(--brand-100);

  /* --- Hareket --- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --t-fast:.15s; --t-base:.28s; --t-slow:.5s;

  --container: 1180px;
  --header-h: 74px;
}

/* --- DARK --- */
[data-theme="dark"] {
  --bg:        #0c1418;
  --surface:   #121e23;
  --surface-2: #1a2930;
  --border:    #26383f;
  --ink:       #eaf1f0;
  --ink-soft:  #a7b6b7;
  --ink-mute:  #6b7d80;
  --brand-500: #2fd4b3;
  --brand-600: #16b394;
  --brand-50:  rgba(47,212,179,.10);
  --brand-100: rgba(47,212,179,.16);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.55);
  --shadow-xl: 0 28px 72px rgba(0,0,0,.62);
  --shadow-glow: 0 0 0 4px rgba(47,212,179,.18);
}

/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body); background:var(--bg); color:var(--ink);
  line-height:1.65; font-size:var(--text-base); -webkit-font-smoothing:antialiased;
  transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease);
  overflow-x:hidden;
  background-image:
    radial-gradient(60% 40% at 100% 0%, rgba(16,179,148,.05), transparent 60%),
    radial-gradient(50% 40% at 0% 100%, rgba(245,166,35,.05), transparent 60%);
  background-attachment:fixed;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
ul{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:800;line-height:1.12;letter-spacing:-.025em;color:var(--ink)}

/* ===== TİPOGRAFİ ===== */
.h1{font-size:clamp(2.5rem,5.5vw,4.25rem);letter-spacing:-.035em}
.h2{font-size:clamp(1.9rem,3.8vw,2.75rem);letter-spacing:-.03em}
.h3{font-size:var(--text-2xl)}
.h4{font-size:var(--text-xl)}
.lead{font-size:clamp(1.08rem,2vw,1.32rem);color:var(--ink-soft);line-height:1.6}
.muted{color:var(--ink-soft)}
.tiny{font-size:var(--text-sm);color:var(--ink-mute)}
.text-brand{color:var(--brand-600)}
.text-gold{color:var(--gold-600)}
.center{text-align:center}

/* ===== DÜZEN ===== */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}
.container-sm{max-width:760px}
.section{padding-block:clamp(52px,9vw,112px)}
.section-tight{padding-block:clamp(32px,5vw,56px)}
.grid{display:grid;gap:var(--s-6)}
.flex{display:flex}
.between{display:flex;align-items:center;justify-content:space-between}
.items-center{align-items:center}
.gap-2{gap:var(--s-2)}.gap-3{gap:var(--s-3)}.gap-4{gap:var(--s-4)}.gap-6{gap:var(--s-6)}
.wrap{flex-wrap:wrap}
.mt-2{margin-top:var(--s-2)}.mt-4{margin-top:var(--s-4)}.mt-6{margin-top:var(--s-6)}.mt-8{margin-top:var(--s-8)}.mt-12{margin-top:var(--s-12)}
.mb-2{margin-bottom:var(--s-2)}.mb-4{margin-bottom:var(--s-4)}.mb-6{margin-bottom:var(--s-6)}.mb-8{margin-bottom:var(--s-8)}
.hidden{display:none!important}

/* Bölüm başlığı */
.section-head{max-width:660px;margin:0 auto var(--s-12);text-align:center}
.section-head .eyebrow{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-weight:700;
  font-size:var(--text-sm);color:var(--brand-700);text-transform:uppercase;letter-spacing:.1em;
  background:var(--brand-50);padding:7px 15px;border-radius:var(--r-full);margin-bottom:var(--s-5);
  border:1px solid var(--brand-100);
}

/* Erişilebilirlik */
:focus-visible{outline:3px solid var(--brand-400);outline-offset:2px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-60px;background:var(--brand-600);color:#fff;padding:10px 16px;border-radius:var(--r-md);z-index:2000;transition:top var(--t-fast)}
.skip-link:focus{top:12px}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}