/* nCoach tanitim — design system for the pages built on the shared vocabulary
   (nova.html, kurumsal.html). Palette follows the site-wide navy + gold + cyan. */
@import url("shared.css");

:root{
  --gold:var(--t-accent); --gold-300:var(--t-gold-grad-a); --gold-700:var(--t-gold-grad-b);
  --cyan:var(--t-cyan-ink); --cyan-300:var(--t-cyan-ink); --cyan-700:var(--t-cyan-ink);

  --bg:var(--t-bg);
  --surface:var(--t-surface);
  --surface-solid:var(--t-surface-solid);
  --line:var(--t-line);
  --line-strong:var(--t-line-strong);
  --ink:var(--t-ink);
  --ink-soft:var(--t-ink-soft);
  --ink-dim:var(--t-ink-dim);
  --accent:var(--t-accent);
  --accent-ink:var(--t-on-accent);
  --glow:var(--t-glow);

  --w:1180px;
  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:28px;
  --f-body:var(--t-font-body);
  --f-display:var(--t-font-display);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
/* Odak halkasi burada DEGIL: theme.css'te, cunku bu dosyayi dort sayfa
   bagliyor, theme.css'i on dokuz sayfa da bagliyor. */

.wrap{width:min(100% - 40px,var(--w));margin-inline:auto}
.wrap-narrow{width:min(100% - 40px,760px);margin-inline:auto}
.page{position:relative;z-index:2}

/* section rail */
.rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:30}
.rail ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rail a{display:flex;align-items:center;gap:8px;justify-content:flex-end;text-decoration:none;color:var(--ink-dim);font-size:11.5px}
.rail a:hover{color:var(--ink)}
.rail-label{opacity:0;transition:opacity .15s ease}
.rail a:hover .rail-label,.rail a:focus-visible .rail-label{opacity:1}
.rail-tick{width:18px;height:2px;background:var(--line-strong);border-radius:2px}
.rail a:hover .rail-tick{background:var(--accent)}
@media (max-width:1280px){.rail{display:none}}

.crumbs{margin-top:16px;font-size:13px;color:var(--ink-dim)}
.crumbs ol{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-strong)}
.crumbs a{text-decoration:none;color:var(--ink-dim);display:inline-block;padding:6px 0}
.crumbs a:hover{color:var(--ink)}

/* ---------- headings & sections (dense rhythm) ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);padding:6px 13px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);margin:0 0 14px;
}
h1{font-family:var(--f-display);font-weight:700;font-size:clamp(32px,4.8vw,52px);line-height:1.08;letter-spacing:-.02em;margin:0;max-width:22ch}
h2{font-family:var(--f-display);font-weight:700;font-size:clamp(24px,3vw,36px);line-height:1.14;letter-spacing:-.02em;margin:0 0 10px}
h3{font-size:18.5px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
h4{font-size:16px;font-weight:600;margin:0 0 6px}
.lede{margin:12px 0 0;max-width:64ch;font-size:clamp(16.5px,1.3vw,18.5px);line-height:1.68;color:var(--ink-soft)}
.muted{color:var(--ink-soft)}
.small{font-size:13.5px}
.mt-l{margin-top:18px}
.note{font-size:14.5px;color:var(--ink-dim);border-left:2px solid var(--accent);padding:10px 14px;background:var(--surface);border-radius:0 var(--r-sm) var(--r-sm) 0}

.page-head{padding:52px 0 8px}
.section{padding:clamp(48px,6vw,88px) 0}
.section-head{max-width:64ch;margin-bottom:26px}

/* ---------- layers, cards, grids ---------- */
.layer{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:clamp(22px,3vw,36px);margin-bottom:20px}
.layer-tag{font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 14px}
.layer-tag b{color:var(--accent);margin-right:6px}
.icon-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-strong);color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);margin-bottom:14px}
.icon-badge svg{width:21px;height:21px}

.grid{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:22px 22px 24px}
.card p{margin:0 0 8px;font-size:15.3px;line-height:1.62}
.card p:last-child{margin-bottom:0}
.card-lift{transition:border-color .2s ease, transform .2s ease}
.card-lift:hover{border-color:var(--line-strong);transform:translateY(-3px)}

.tick-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.tick-list li{position:relative;padding-left:24px;font-size:15.3px;color:var(--ink-soft);line-height:1.58}
.tick-list li::before{content:"";position:absolute;left:2px;top:9px;width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--gold-300),var(--gold));box-shadow:0 0 8px rgba(212,175,55,.4)}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* nova meter */
.nova-meter{margin:6px 0 12px}
.nova-meter .label{display:block;font-size:12.5px;color:var(--ink-dim);letter-spacing:.06em;text-transform:uppercase;font-weight:700;margin-bottom:7px}
.nova-meter .bar{display:block;height:6px;border-radius:999px;background:color-mix(in srgb, var(--ink) 10%, transparent);overflow:hidden}
.nova-meter .bar > span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--gold))}

/* quote */
blockquote.quote{margin:0;border:1px solid var(--line-strong);border-radius:var(--r-xl);padding:clamp(24px,3.4vw,40px);background:radial-gradient(90% 130% at 8% 0%, rgba(12,182,234,.14), transparent 62%), var(--surface)}
blockquote.quote p{margin:0;font-family:var(--f-display);font-size:clamp(19px,2.2vw,25px);line-height:1.5}
blockquote.quote > footer{margin-top:12px;font-size:13.5px;color:var(--ink-dim)}

/* cta band + buttons */
.cta-band{border:1px solid var(--line-strong);border-radius:var(--r-xl);padding:clamp(26px,4vw,46px);text-align:center;background:radial-gradient(90% 130% at 50% 0%, rgba(212,175,55,.12), transparent 62%), var(--surface)}
.cta-band p{max-width:56ch;margin:12px auto 0;color:var(--ink-soft)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 21px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;border:1px solid transparent;cursor:pointer;transition:transform .18s ease, box-shadow .18s ease}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(135deg,var(--t-gold-grad-a),var(--t-gold-grad-b));color:var(--t-on-accent);box-shadow:0 10px 34px rgba(212,175,55,.26)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(212,175,55,.34)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:color-mix(in srgb, var(--bg) 45%, transparent)}
.btn-ghost:hover{border-color:var(--ink-dim);transform:translateY(-2px)}

/* forms */
form .field{display:grid;gap:6px;margin-bottom:14px;text-align:left}
form label{font-size:13.5px;font-weight:600;color:var(--ink-soft)}
/* Kenarlik alanin tek gorsel siniri; dekoratif --line-strong degil, 3:1
   tasiyan --t-field-line kullanilir (WCAG 2.1 SC 1.4.11). */
form input,form textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--t-field-line);
  background:color-mix(in srgb, var(--bg) 55%, transparent);color:var(--ink);font:inherit;font-size:15px;
}
form input::placeholder,form textarea::placeholder{color:var(--ink-dim)}
form textarea{min-height:110px;resize:vertical}
/* Odak halkasi ayrica yazilmiyor: theme.css'teki site geneli kural gecerli,
   boylece girdiler sitenin geri kalaniyla ayni halkayi tasiyor. */
.form-note{font-size:13px;color:var(--ink-dim)}

/* Gonder dugmesi kaynakta disabled; betik yuklenince aciliyor. Kapali hali
   tiklanabilir gorunmesin diye. */
.btn[disabled]{cursor:not-allowed;opacity:.6;transform:none;box-shadow:none}
.btn[disabled]:hover{transform:none;box-shadow:none}

.form-noscript{
  margin:0 0 20px;padding:16px 18px;border-radius:var(--r-sm);text-align:left;
  border:1px solid var(--t-accent-line);background:var(--t-accent-soft);
}
.form-noscript p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-soft)}
.form-noscript p + p{margin-top:8px}
.form-noscript strong{color:var(--ink);font-weight:600}
.form-noscript a{color:var(--t-accent-bright);text-decoration:none;border-bottom:1px solid var(--t-accent-line)}
.form-noscript a:hover{border-bottom-color:var(--gold-300)}

/* Betik DUSTUGUNDE gorunur kalan satir. Gonder dugmesi kaynakta disabled
   (assets/js/site.js yuklenmeden form tarayicinin varsayilaniyla gonderilirse
   girilen bilgiler adres cubuguna duserdi) ve site.js 404 donerse ya da ag
   kesilirse dugme KALICI kapali kalir. <noscript> bu durumda GORUNMEZ, cunku
   yalnizca JS tumden kapaliyken calisir; kullanici da yalnizca soluk bir dugme
   gorurdu. Bu satir baslangicta gorunur, site.js dugmeyi actiginda gizlenir —
   yani "betik dustu" hali kullaniciya gorunur oluyor. */
.form-pending{
  margin:0 0 14px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--t-line);background:var(--t-panel);
  font-size:14.5px;line-height:1.7;color:var(--ink-soft);
}
.form-pending strong{color:var(--ink);font-weight:600}
.form-pending a{color:var(--t-accent-bright);text-decoration:none;border-bottom:1px solid var(--t-accent-line)}
.form-pending a:hover{border-bottom-color:var(--gold-300)}

/* reveal
   EMNIYET: acilma sinifini (.in) site.js takiyor. Betik JS ACIKKEN dusebilir
   (404, ag kesintisi, eklenti) ve o durumda html.no-js kapisi calismaz —
   bolumler kalici gorunmez kalirdi. Bu yuzden acilma bir zaman asimina da
   bagli: site.js kosarsa ILK isi html'e "js-reveal" takmak ve emniyeti
   devreden cikarmak; kosmazsa 3 sn sonra metin kendiliginden acilir. */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease, transform .5s ease}
html:not(.js-reveal) .reveal{animation:reveal-safety 1ms linear 3s forwards}
@keyframes reveal-safety{to{opacity:1;transform:none}}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
html.no-js .reveal{opacity:1;transform:none}

@media (max-width:560px){
  body{font-size:16px}
  .page-head{padding:32px 0 4px}
  .section{padding:26px 0}
  
}