/* Yeni-nesil CLI kodlama teması — ponytail.dev tarzı, scroll'lu README.md görünümü. */
/* Crimson Noir — %82 bg / %10 surface / %5 text / %3 accent(kırmızı) */
:root, :root[data-theme="dark"] {
  --bg: #0b0b0d;
  --bg2: #111114;
  --text: #f2f2f4;
  --muted: #b6b7bd;
  --border: #313139;
  --green: #d7263d;   /* primary accent */
  --orange: #ff5a6e;  /* keyword/cursor accent */
  --string: #8fd97a;  /* code string, kept off the red so JSON stays readable */
  --card: #18181c;
  --code: #0b0b0d;
}
:root[data-theme="light"] {
  --bg: #f4f4f5;
  --bg2: #e8e8ea;
  --text: #17171a;
  --muted: #5a5b63;
  --border: #d8d8dc;
  --green: #b71c34;
  --orange: #d7263d;
  --string: #2f7d4f;
  --card: #ffffff;
  --code: #f0eff0;
}

/* JetBrains Mono — self-hosted (variable woff2, latin + latin-ext / Türkçe) */
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: italic; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root { --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 13.25px; }  /* bir tık daha küçük, keskin */
body {
  background: var(--bg); color: var(--text);
  font-family: var(--mono);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--green); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* macOS pencere chrome */
.chrome {
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg2); position: sticky; top: 0; z-index: 10;
}
.dots { display: flex; gap: .5rem; }
.dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.dots .r { background: #ff5f56; } .dots .y { background: #ffbd2e; } .dots .g { background: #27c93f; }
.tab { color: var(--green); font-size: .9rem; }
.toggle {
  margin-left: auto; cursor: pointer; background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 6px; padding: .3rem .7rem;
  font: inherit; font-size: .82rem;
}
.toggle:hover { color: var(--text); border-color: var(--muted); }

/* HERO */
.hero { max-width: 900px; margin: 0 auto; padding: 6rem 2rem 5rem; }
/* girişte satır satır yukarıdan aşağı belir */
.hero > * { opacity: 0; animation: rise .55s ease forwards; }
.hero .brand       { animation-delay: .10s; }
.hero .lead        { animation-delay: .45s; }
.hero .comment     { animation-delay: .80s; }
.hero .scroll-hint { animation-delay: 1.15s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero > * { opacity: 1; animation: none; }
}
.brand {
  font-size: clamp(2.8rem, 9vw, 5rem); font-weight: 700;
  letter-spacing: -1px; line-height: 1; margin-bottom: 1.75rem;
}
.logo { color: var(--green); margin-right: .15em; }
.cursor { color: var(--orange); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lead { font-size: clamp(1.3rem, 3vw, 1.7rem); font-weight: 600; line-height: 1.35; }
.comment { color: var(--muted); margin-top: 1.4rem; max-width: 46rem; }
.scroll-hint {
  display: inline-block; margin-top: 2.5rem; color: var(--green);
  font-size: .9rem; opacity: .85;
}
.scroll-hint:hover { opacity: 1; }

/* SECTIONS */
.wrap { max-width: 900px; margin: 0 auto; padding: 4.5rem 2rem; }
.wrap.alt { background: var(--bg2); max-width: none; }
.wrap.alt > * { max-width: 900px; margin-left: auto; margin-right: auto; }
.hh { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .6rem; }
.hh::after { content: ""; flex: 1; height: 1px; background: var(--border); }  /* markdown hr hissi */
.hh .hash { color: var(--green); }
.hh .count { color: var(--muted); font-weight: 400; }
.big { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 600; margin-bottom: 1.75rem; line-height: 1.4; }

/* CODE BLOCK */
.code {
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--code); margin: 1rem 0;
}
.code-tab {
  padding: .5rem 1rem; font-size: .82rem; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--bg2);
}
.code pre {
  padding: 1.25rem; font-size: .9rem; line-height: 1.7;
  overflow-x: auto; white-space: pre; font-family: inherit;
}
.code .c { color: var(--muted); }        /* comment */
.code .k { color: var(--orange); }        /* key */
.code .g { color: var(--string); }        /* string literal */
.code .o { color: #f4a261; }              /* number/null */
.prompt2 { color: var(--muted); }
.chev { color: var(--green); }

/* LADDER */
.ladder { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.ladder li {
  display: grid; grid-template-columns: 2.2rem auto; align-items: baseline;
  gap: .25rem 1rem; padding: 1rem 1.2rem;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
}
.ladder .n { color: var(--green); font-weight: 700; }
.ladder .t { color: var(--text); font-weight: 700; font-size: 1.05rem; }
.ladder .d { grid-column: 2; color: var(--muted); font-size: .92rem; }

/* GRID / CARDS (demolar + paketler) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.card {
  display: flex; flex-direction: column; gap: .45rem;
  padding: 1.4rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--card); transition: border-color .15s ease, transform .1s ease;
}
a.card:hover { border-color: var(--green); transform: translateY(-3px); }
.card .cat { font-size: .72rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orange); }
.card .name { font-size: 1.25rem; font-weight: 700; }
.card .path { font-size: .85rem; color: var(--muted); }

.pkgs { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pkg { position: relative; }
.pkg .price { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: .25rem 0 .5rem; letter-spacing: -.5px; }
.pkg .price small { font-size: .82rem; color: var(--muted); font-weight: 400; letter-spacing: 0; }
.pkg .badge {
  position: absolute; top: -.7rem; right: 1rem;
  background: var(--green); color: #fff; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: .18rem .65rem;
}
.pkg ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.pkg ul li { color: var(--muted); font-size: .92rem; padding-left: 1.1rem; position: relative; }
.pkg ul li::before { content: "❯"; color: var(--green); position: absolute; left: 0; }
.pkg.feat { border-color: var(--green); }

/* bakım tablosu (ilk kurulum + yıllık) */
.maint-h { margin-top: 2rem; }
.maint { width: 100%; max-width: 520px; border-collapse: collapse; margin-top: 1rem; font-size: .95rem; }
.maint th, .maint td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); }
.maint th { color: var(--muted); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; }
.maint td.p { color: var(--orange); text-transform: uppercase; letter-spacing: 1px; font-size: .8rem; }
.maint td:not(.p) { color: var(--text); font-variant-numeric: tabular-nums; }
.maint th:not(:first-child), .maint td:not(.p) { text-align: right; }
.maint tr:last-child td { border-bottom: 0; }

.cta-code { max-width: 620px; }

/* FOOTER */
.foot {
  border-top: 1px solid var(--border); padding: 3rem 2rem;
  font-size: .85rem; color: var(--muted); text-align: center;
}
.foot-quote { color: var(--green); margin-bottom: .75rem; font-size: 1rem; }

@media (max-width: 560px) {
  .chrome .tab { display: none; }
  .hero { padding: 4rem 1.25rem 3rem; }
  .wrap { padding: 3rem 1.25rem; }
}

/* ── Kartvizit yan panel ── */
.cv-wrap {
  position: fixed; top: 0; right: 0;
  height: 100vh; display: flex; flex-direction: row-reverse;
  align-items: center; z-index: 50;
}
.cv-strip {
  width: 5px; height: 100vh;
  background: var(--green); opacity: .5;
  transition: opacity .15s; cursor: pointer; flex-shrink: 0;
}
.cv-wrap:hover .cv-strip { opacity: 1; }

.cv-panel {
  width: 0; overflow: hidden;
  transition: width .3s cubic-bezier(.4,0,.2,1);
  background: var(--bg2); border-left: 1px solid var(--border);
  height: 100vh; display: flex; align-items: center; justify-content: center;
}
.cv-wrap:hover .cv-panel { width: calc(85.6mm + 52px); }

/* Kart — ters tema */
.cv-card {
  --cv-bg:     #ffffff; --cv-bg2: #f0f0f2;
  --cv-text:   #17171a; --cv-muted: #5a5b63;
  --cv-border: #d8d8dc; --cv-accent: #b71c34;
  --cv-kw:     #d7263d; --cv-str: #2f7d4f;
}
[data-theme="light"] .cv-card {
  --cv-bg:     #0b0b0d; --cv-bg2: #111114;
  --cv-text:   #f2f2f4; --cv-muted: #b6b7bd;
  --cv-border: #313139; --cv-accent: #d7263d;
  --cv-kw:     #ff5a6e; --cv-str: #8fd97a;
}
.cv-card {
  width: 85.6mm; height: 54mm; flex-shrink: 0;
  background: var(--cv-bg); border: 1px solid var(--cv-border);
  border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column; font-family: var(--mono);
}

/* Chrome */
.cv-chrome {
  display: flex; align-items: center; gap: 3px;
  padding: 2mm 3mm; background: var(--cv-bg2);
  border-bottom: .5pt solid var(--cv-border); flex-shrink: 0;
}
.cv-dots { display: flex; gap: 2.5px; }
.cv-dot  { width: 4.5px; height: 4.5px; border-radius: 50%; }
.cv-dot.r { background: #ff5f56; }
.cv-dot.y { background: #ffbd2e; }
.cv-dot.g { background: #27c93f; }
.cv-ctab  { font-size: 3pt; color: var(--cv-muted); margin-left: 4px; }

/* Gövde */
.cv-body { flex: 1; display: flex; }
.cv-left {
  flex: 1; padding: 2.5mm 3.5mm 3mm;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: .5pt solid var(--cv-border);
}

.cv-name {
  font-size: 11pt; font-weight: 700;
  letter-spacing: -.4px; line-height: 1;
  color: var(--cv-text); display: flex; align-items: center; gap: 1px;
}
.cv-logo   { color: var(--cv-accent); }
.cv-cursor { color: var(--cv-kw); animation: blink 1.1s steps(1) infinite; }

.cv-subtitle { font-size: 4.5pt; color: var(--cv-muted); margin-top: 1.2mm; }
.cv-hash { color: var(--cv-accent); }

.cv-person { display: flex; flex-direction: column; gap: .6mm; }
.cv-fullname { font-size: 7.5pt; font-weight: 700; color: var(--cv-text); }
.cv-jobtitle { font-size: 4.5pt; color: var(--cv-muted); }

.cv-contacts { display: flex; flex-direction: column; gap: 1mm; }
.cv-row {
  font-size: 4pt; display: flex; align-items: baseline; gap: 1px;
  color: var(--cv-text); white-space: nowrap;
}
.cv-row-web { font-size: 4pt; }
.cv-k  { color: var(--cv-kw); }
.cv-cl { color: var(--cv-muted); margin: 0 1.5px; }
.cv-v  { color: var(--cv-str); }

/* QR */
.cv-right {
  width: 27mm; flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.5mm; background: var(--cv-bg2);
}
#cv-qr canvas, #cv-qr img { width: 20mm !important; height: 20mm !important; display: block; }
[data-theme="light"] #cv-qr canvas { filter: invert(1); }
.cv-ql { font-size: 5pt; color: var(--cv-muted); text-align: center; }

.cv-accent {
  height: 2px;
  background: linear-gradient(90deg, var(--cv-accent) 0%, #ff5a6e 100%);
  flex-shrink: 0;
}