/* ============================================================
   Excel Sınıfı — Design System / Kok Degiskenler
   Palet: Yesil - Kirik Beyaz (bone) - Siyah (ink)
   ============================================================ */

:root{
  /* Yesil skalasi */
  --green-900:#052018;
  --green-800:#08301F;
  --green-700:#0C4A32;
  --green-600:#11694A;
  --green-500:#178C5E;
  --green-400:#22B277;
  --green-300:#3FD696;
  --green-200:#8CEFC4;
  --green-100:#DDFBEC;
  --green-glow:rgba(63,214,150,.35);

  /* Kirik beyaz (bone) skalasi */
  --bone-50:#FDFCF8;
  --bone-100:#F8F5ED;
  --bone-200:#F1ECE0;
  --bone-300:#E7E0CF;
  --bone-400:#D9D0BA;
  --bone-500:#C4B99F;

  /* Siyah (ink) skalasi */
  --ink-900:#070808;
  --ink-850:#0C0E0E;
  --ink-800:#121515;
  --ink-700:#1B1F1F;
  --ink-600:#2A2F2E;
  --ink-500:#414847;
  --ink-400:#6B7472;
  --ink-300:#98A19E;
  --ink-200:#C3CAC7;

  /* Anlamsal */
  --bg:var(--bone-100);
  --bg-alt:var(--bone-200);
  --surface:#FFFFFF;
  --text:var(--ink-800);
  --text-soft:var(--ink-400);
  --line:rgba(7,8,8,.10);
  --line-soft:rgba(7,8,8,.06);
  --brand:var(--green-600);
  --brand-hi:var(--green-400);
  --danger:#C4362F;
  --warn:#C98A17;
  --star:#E8A33D;

  /* Tipografi */
  --f-display:'Sora','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

  /* Olcek */
  --shell:1280px;
  --gut:clamp(16px,4vw,40px);
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px; --r-pill:999px;

  /* Golge */
  --sh-1:0 1px 2px rgba(7,8,8,.05), 0 2px 8px rgba(7,8,8,.04);
  --sh-2:0 4px 14px rgba(7,8,8,.07), 0 14px 40px rgba(7,8,8,.06);
  --sh-3:0 18px 50px rgba(7,8,8,.14), 0 4px 12px rgba(7,8,8,.06);
  --sh-green:0 14px 34px rgba(17,105,74,.28);

  /* Hareket */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.18s var(--e-soft);
  --t:.32s var(--e-out);
  --t-slow:.62s var(--e-out);

  --header-h:82px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--f-body);font-size:16px;line-height:1.65;
  font-weight:400;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.12;letter-spacing:-.03em}
p{margin:0 0 1em}
table{border-collapse:collapse;width:100%}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}
::selection{background:var(--green-300);color:var(--ink-900)}
:focus-visible{outline:2px solid var(--green-500);outline-offset:3px;border-radius:6px}

/* Ince, marka renkli kaydirma cubugu */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--bone-200)}
*::-webkit-scrollbar-thumb{background:var(--ink-300);border-radius:99px;border:2px solid var(--bone-200)}
*::-webkit-scrollbar-thumb:hover{background:var(--green-600)}

/* ---------- Yerlesim yardimcilari ---------- */
.shell{width:min(100% - (var(--gut)*2),var(--shell));margin-inline:auto}
.shell-wide{width:min(100% - (var(--gut)*2),1560px);margin-inline:auto}
.row{display:flex;align-items:center}
.between{justify-content:space-between}
.gap-s{gap:10px}.gap{gap:18px}.gap-l{gap:32px}
.grid{display:grid;gap:24px}
.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}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}

/* ---------- Bolum basliklari ---------- */
.section{padding:clamp(56px,7vw,110px) 0;position:relative}
.section--tight{padding:clamp(40px,5vw,72px) 0}
.section--ink{background:var(--ink-900);color:var(--bone-200)}
.section--ink h2,.section--ink h3{color:var(--bone-50)}
.section--bone{background:var(--bone-200)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--green-600);
  padding:7px 14px;border:1px solid rgba(17,105,74,.24);border-radius:var(--r-pill);
  background:rgba(34,178,119,.08);
}
.section--ink .eyebrow{color:var(--green-300);border-color:rgba(63,214,150,.28);background:rgba(63,214,150,.08)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(34,178,119,.18)}

.s-head{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:clamp(28px,4vw,54px);flex-wrap:wrap}
.s-head__text{max-width:660px}
.s-title{font-size:clamp(28px,4vw,46px);margin:16px 0 0}
.s-title em{font-style:normal;color:var(--brand);position:relative;white-space:nowrap}
.section--ink .s-title em{color:var(--green-300)}
.s-sub{margin:14px 0 0;color:var(--text-soft);font-size:16.5px;max-width:60ch}
.section--ink .s-sub{color:var(--ink-200)}

/* ---------- Butonlar ---------- */
.btn{
  --btn-bg:var(--green-600);--btn-fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--r-pill);
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:600;font-size:15px;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform var(--t-fast),box-shadow var(--t),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,.32) 48%,transparent 76%);
  transform:translateX(-120%);transition:transform .7s var(--e-out);
}
.btn:hover::after{transform:translateX(120%)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-green)}
.btn:active{transform:translateY(0)}
.btn--dark{--btn-bg:var(--ink-900);--btn-fg:var(--bone-100)}
.btn--dark:hover{box-shadow:0 14px 34px rgba(7,8,8,.28)}
.btn--light{--btn-bg:var(--bone-100);--btn-fg:var(--ink-900)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink-800);border-color:var(--line)}
.btn--ghost:hover{--btn-bg:var(--ink-900);--btn-fg:var(--bone-100);border-color:var(--ink-900);box-shadow:var(--sh-2)}
.section--ink .btn--ghost{--btn-fg:var(--bone-200);border-color:rgba(248,245,237,.24)}
.section--ink .btn--ghost:hover{--btn-bg:var(--bone-100);--btn-fg:var(--ink-900)}
.btn--sm{padding:10px 18px;font-size:13.5px}
.btn--lg{padding:17px 34px;font-size:16px}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn .ico{width:18px;height:18px;flex:none}

.link-arrow{display:inline-flex;align-items:center;gap:9px;font-weight:600;color:var(--brand);font-size:15px}
.link-arrow svg{transition:transform var(--t);width:18px;height:18px}
.link-arrow:hover svg{transform:translateX(5px)}
.section--ink .link-arrow{color:var(--green-300)}

/* ---------- Rozetler / etiketler ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--bone-300);color:var(--ink-700);
}
.tag--green{background:rgba(34,178,119,.14);color:var(--green-700)}
.tag--ink{background:var(--ink-900);color:var(--bone-100)}
.tag--fire{background:linear-gradient(120deg,#C4362F,#E2622A);color:#fff}
.tag--gold{background:linear-gradient(120deg,#C98A17,#E8B84B);color:#33240A}

.chip{
  display:inline-flex;align-items:center;gap:8px;padding:9px 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);
  font-size:13.5px;font-weight:500;color:var(--ink-600);transition:all var(--t-fast);cursor:pointer;
}
.chip:hover{border-color:var(--green-500);color:var(--green-700);transform:translateY(-1px)}
.chip.is-active{background:var(--ink-900);color:var(--bone-100);border-color:var(--ink-900)}

/* ---------- Formlar ---------- */
.field{display:block;margin-bottom:18px}
.field__label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--ink-700)}
.field__label span{color:var(--danger)}
.input,.select,.textarea{
  width:100%;padding:14px 16px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:15px;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-300)}
.input:focus,.select:focus,.textarea:focus{
  outline:0;border-color:var(--green-500);box-shadow:0 0 0 4px rgba(34,178,119,.14);
}
.textarea{min-height:140px;resize:vertical}
.select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7472' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:44px;
}
.check{display:flex;align-items:flex-start;gap:11px;font-size:14px;color:var(--ink-600);cursor:pointer;margin-bottom:14px}
.check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--green-600);cursor:pointer}
.field-note{font-size:12.5px;color:var(--text-soft);margin-top:7px}

/* ---------- Uyari kutulari ---------- */
.alert{display:flex;gap:12px;padding:14px 18px;border-radius:var(--r-sm);font-size:14.5px;margin-bottom:20px;border:1px solid transparent;align-items:flex-start}
.alert svg{flex:none;width:20px;height:20px;margin-top:1px}
.alert--ok{background:rgba(34,178,119,.10);border-color:rgba(34,178,119,.30);color:var(--green-700)}
.alert--err{background:rgba(196,54,47,.08);border-color:rgba(196,54,47,.26);color:#8E2721}
.alert--info{background:rgba(7,8,8,.04);border-color:var(--line);color:var(--ink-600)}

/* ---------- Yildiz / puan ---------- */
.stars{display:inline-flex;gap:2px;color:var(--star)}
.stars svg{width:14px;height:14px}
.rating-txt{font-size:12.5px;color:var(--text-soft);font-weight:500}

/* ---------- Ortak dekor ---------- */
.noise::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
}
.glow-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}

/* Giris animasyonlari */
[data-anim]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--e-out),transform .8s var(--e-out)}
[data-anim].in{opacity:1;transform:none}
[data-anim="fade"]{transform:none}
[data-anim="left"]{transform:translateX(-34px)}
[data-anim="right"]{transform:translateX(34px)}
[data-anim="zoom"]{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-anim]{opacity:1;transform:none}
}