/* ============================================================================
   narch.tech — Vitrin Tasarım Sistemi (girizgah v0.1)
   3 mevcut marka sistemini uzlaştırır:
     · apex splash  (#0b0b0e / #c0934e / Georgia)
     · MARKA-ICERIK-KIT (#0a0a0c · bordo #8e1f2e · altın #c6984e · Cormorant+Manrope)
     · narchos landing (altın→teal #c0934e→#3fa8bf imza-çizgisi)
   İmza-slogan: "Anlatmıyoruz. Hayal ettirmiyoruz. Deneyimletiyoruz."
   NOT: fontlar TUR-2'de self-host edildi (_brand/fonts/ + fonts.css). Dış font isteği kalmadı.
   ========================================================================== */

@import url('fonts.css'); /* self-host woff2 (latin+latin-ext) — TUR-2, dış istek 0 */

:root{
  /* zemin & yüzey */
  --bg:#0a0a0c;
  --bg-2:#0e0e12;
  --surface:#131318;
  --surface-2:#191921;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* mürekkep */
  --ink:#f4f0e9;
  --ink-2:#cfc9c0;
  --muted:#a39d94;
  --faint:rgba(255,255,255,.42);

  /* aksanlar */
  --gold:#c6984e;
  --gold-bright:#e3bd76;
  --gold-deep:#8a6a32;
  --bordo:#8e1f2e;
  --bordo-bright:#b62a3d;
  --teal:#3fa8bf;

  /* imza gradyan (altın→teal) */
  --imza:linear-gradient(90deg,var(--gold),var(--teal));
  --imza-yumusak:linear-gradient(120deg,rgba(198,152,78,.16),rgba(63,168,191,.14));

  /* tipografi */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,'SF Pro Text','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;

  /* ritim */
  --kenar:clamp(20px,5vw,64px);
  --kesit:clamp(64px,10vw,140px);
  --yuvarlak:14px;
  --yuvarlak-s:9px;
  --gecis:.25s cubic-bezier(.4,0,.2,1);
  --golge:0 24px 60px -28px rgba(0,0,0,.7);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-weight:400;line-height:1.65;font-size:16px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas,model-viewer{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(198,152,78,.28);color:#fff}

/* ---- tipografik ölçek ---- */
.display{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.01em}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,6vw,4.6rem);line-height:1.05;letter-spacing:-.015em}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,4vw,3rem);line-height:1.12}
h3{font-family:var(--sans);font-weight:700;font-size:1.18rem;letter-spacing:-.01em}
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold)}
.lead{font-size:clamp(1.05rem,2vw,1.32rem);color:var(--ink-2);font-weight:300;line-height:1.6}
.muted{color:var(--muted)}
.cizgi{width:56px;height:2px;background:var(--imza);border-radius:2px}
.cizgi.orta{margin-left:auto;margin-right:auto}

/* ---- yerleşim ---- */
.kucuk{max-width:760px}
.orta-genislik{max-width:1000px}
.kap{max-width:1200px;margin-inline:auto;padding-inline:var(--kenar)}
.kesit{padding-block:var(--kesit)}
.merkez{text-align:center}
.grid{display:grid;gap:22px}
@media(min-width:640px){.grid.iki{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.grid.uc{grid-template-columns:repeat(3,1fr)}.grid.dort{grid-template-columns:repeat(4,1fr)}}

/* ---- üst çubuk ---- */
.ustbar{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
  background:rgba(10,10,12,.72);border-bottom:1px solid var(--line)}
.ustbar .kap{display:flex;align-items:center;justify-content:space-between;padding-block:16px}
.logo{font-family:var(--serif);font-weight:600;font-size:1.35rem;letter-spacing:-.01em}
.logo .tech{color:var(--gold);font-style:italic}
.ustbar nav{display:flex;gap:26px;align-items:center;font-size:.9rem;color:var(--ink-2)}
.ustbar nav a{transition:color var(--gecis)}
.ustbar nav a:hover{color:var(--gold-bright)}
@media(max-width:720px){.ustbar nav a.gizle-mobil{display:none}}

/* ---- düğmeler ---- */
.dugme{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:13px 24px;border-radius:var(--yuvarlak-s);cursor:pointer;transition:all var(--gecis);
  border:1px solid transparent;white-space:nowrap}
.dugme.dolu{background:var(--gold);color:#161009}
.dugme.dolu:hover{background:var(--gold-bright);transform:translateY(-2px)}
.dugme.hat{border-color:var(--line-2);color:var(--ink)}
.dugme.hat:hover{border-color:var(--gold);color:var(--gold-bright)}
.dugme .ok{transition:transform var(--gecis)}
.dugme:hover .ok{transform:translateX(4px)}

/* ---- rozet ---- */
.rozet{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 13px;border-radius:100px;
  border:1px solid var(--line-2);color:var(--muted)}
.rozet .nokta{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.rozet.canli{color:#7fd6a3;border-color:rgba(127,214,163,.3)}
.rozet.canli .nokta{background:#5fce8a;box-shadow:0 0 0 0 rgba(95,206,138,.6);animation:nabiz 2s infinite}
.rozet.yakinda{color:var(--gold);border-color:rgba(198,152,78,.32)}
.rozet.yakinda .nokta{background:var(--gold)}
@keyframes nabiz{0%{box-shadow:0 0 0 0 rgba(95,206,138,.5)}70%{box-shadow:0 0 0 7px rgba(95,206,138,0)}100%{box-shadow:0 0 0 0 rgba(95,206,138,0)}}

/* ---- kartlar ---- */
.kart{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--yuvarlak);padding:28px;transition:all var(--gecis);overflow:hidden}
.kart:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--golge)}
.kart::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:var(--imza);
  opacity:0;transition:opacity var(--gecis)}
.kart:hover::before{opacity:1}
.kart .ust{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.kart h3{margin-bottom:8px}
.kart p{color:var(--muted);font-size:.95rem;line-height:1.6}
.kart .ikon{font-size:1.7rem;line-height:1}
.kart.link{cursor:pointer}
.kart .git{margin-top:18px;font-size:.82rem;font-weight:600;color:var(--gold);
  display:inline-flex;align-items:center;gap:6px}
.kart .git .ok{transition:transform var(--gecis)}
.kart.link:hover .git .ok{transform:translateX(4px)}

/* özellik kutucuğu */
.ozellik{padding:24px;border:1px solid var(--line);border-radius:var(--yuvarlak);background:var(--bg-2)}
.ozellik .ikon{font-size:1.5rem;margin-bottom:12px}
.ozellik h3{font-size:1.02rem;margin-bottom:7px}
.ozellik p{color:var(--muted);font-size:.9rem}

/* ---- hero ---- */
.hero{position:relative;padding-block:clamp(80px,14vw,180px);overflow:hidden}
.hero::after{content:'';position:absolute;top:-30%;right:-10%;width:60vw;height:60vw;max-width:720px;max-height:720px;
  background:radial-gradient(circle,rgba(198,152,78,.12),transparent 62%);pointer-events:none;z-index:0}
.hero .kap{position:relative;z-index:1}
.hero .kicker{margin-bottom:22px;display:inline-block}
.hero h1{margin-bottom:22px;max-width:14ch}
.hero .lead{max-width:52ch;margin-bottom:36px}
.hero .aksiyon{display:flex;gap:14px;flex-wrap:wrap}

/* ---- şerit / demo ---- */
.serit{background:var(--bg-2);border-block:1px solid var(--line)}
.gorsel-cerceve{border:1px solid var(--line);border-radius:var(--yuvarlak);overflow:hidden;background:var(--surface);
  aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:var(--faint);
  font-family:var(--mono);font-size:.8rem;text-align:center;position:relative}
.gorsel-cerceve::before{content:'';position:absolute;inset:0;background:var(--imza-yumusak);opacity:.5}
.gorsel-cerceve span{position:relative;z-index:1}

/* ---- CTA bölümü ---- */
.cta{background:linear-gradient(160deg,var(--surface),var(--bg-2));border:1px solid var(--line);
  border-radius:var(--yuvarlak);padding:clamp(36px,6vw,72px);text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--imza)}
.cta h2{margin-bottom:16px}
.cta .lead{margin:0 auto 30px;max-width:46ch}
.cta .aksiyon{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- alt bilgi ---- */
.altbilgi{border-top:1px solid var(--line);background:var(--bg-2)}
.altbilgi .kap{padding-block:52px;display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
.altbilgi .logo{margin-bottom:12px}
.altbilgi p{color:var(--muted);font-size:.86rem;max-width:34ch}
.altbilgi .baglar{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:.88rem;color:var(--ink-2)}
.altbilgi .baglar a{transition:color var(--gecis)}
.altbilgi .baglar a:hover{color:var(--gold-bright)}
.altbilgi .telif{width:100%;border-top:1px solid var(--line);padding-top:22px;margin-top:8px;
  font-size:.76rem;color:var(--faint);letter-spacing:.03em}

/* ---- geri bağlantısı ---- */
.geri{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);
  margin-bottom:30px;transition:color var(--gecis)}
.geri:hover{color:var(--gold-bright)}

/* ---- yavaş belirme (hafif) ---- */
@media(prefers-reduced-motion:no-preference){
  .bel{opacity:0;transform:translateY(16px);animation:belir .7s forwards}
  @keyframes belir{to{opacity:1;transform:none}}
  .g1{animation-delay:.05s}.g2{animation-delay:.13s}.g3{animation-delay:.21s}.g4{animation-delay:.29s}
}

/* Dar ekran (≤380px) — 7-Ağu-2026, USTABAŞI. Yalnız bu bantta etkili;
   380px üstünde hiçbir yerleşimi değiştiremez. Kök neden: .dugme sabit
   padding + uppercase, 320px sınıfı ekranda kapsayıcıyı taşırıyordu. */
@media(max-width:380px){.dugme{padding:12px 15px;font-size:.76rem;white-space:normal;text-align:center}}