/* Ridvan personal profile — monochrome, responsive, no build step required */
:root {
  color-scheme: dark;
  --bg: #080809;
  --surface: rgba(15,15,16,.84);
  --surface-strong: rgba(17,17,18,.96);
  --surface-soft: rgba(255,255,255,.035);
  --border: rgba(255,255,255,.105);
  --border-hover: rgba(255,255,255,.22);
  --text: #f0f0f0;
  --muted: #96969b;
  --subtle: #6e6e74;
  --wallpaper-image: none;
  --shadow: 0 22px 80px rgba(0,0,0,.38);
  --radius: 17px;
  font-family: "Manrope", system-ui, sans-serif;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9e9e9;
  --surface: rgba(255,255,255,.82);
  --surface-strong: rgba(255,255,255,.96);
  --surface-soft: rgba(0,0,0,.035);
  --border: rgba(0,0,0,.11);
  --border-hover: rgba(0,0,0,.23);
  --text: #171719;
  --muted: #606067;
  --subtle: #82828a;
  --shadow: 0 22px 70px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font-size: 14px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
.wallpaper {
  position: fixed; inset: 0; z-index: -4; background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.11), transparent 45%),
    radial-gradient(ellipse at 15% 75%, rgba(255,255,255,.045), transparent 30%),
    linear-gradient(135deg,#171719 0%,#080809 48%,#151516 100%),
    var(--wallpaper-image);
  background-size: cover; background-position: center; filter: grayscale(1);
  transform: scale(1.035);
}
.wallpaper::before, .wallpaper::after { content:""; position:absolute; inset:0; }
.wallpaper::before {
  opacity:.22; background-image:
    linear-gradient(120deg,transparent 0 30%,rgba(255,255,255,.08) 30.1%,transparent 30.3%),
    radial-gradient(ellipse at 80% 30%,transparent 0 25%,rgba(0,0,0,.6) 65%);
}
.wallpaper::after {
  opacity:.16; background-image: repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px);
}
.wallpaper-video { display:none; position:fixed; z-index:-5; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) brightness(.42); }
.wallpaper-video.visible { display:block; }
.wallpaper-shade { position:fixed; z-index:-3; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.27),rgba(0,0,0,.63)); pointer-events:none; }
:root[data-theme="light"] .wallpaper-shade { background:linear-gradient(180deg,rgba(245,245,245,.45),rgba(235,235,235,.68)); }
.grain { position:fixed; z-index:10; inset:0; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E"); }
.theme-toggle { position:fixed; z-index:20; top:22px; right:24px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:999px; background:var(--surface); backdrop-filter:blur(14px); cursor:pointer; color:var(--muted); transition:.2s; }
.theme-toggle:hover { color:var(--text); border-color:var(--border-hover); transform:translateY(-1px); }
.theme-toggle .icon { width:16px; height:16px; }
:root[data-theme="dark"] .theme-toggle [data-icon="moon"], :root[data-theme="light"] .theme-toggle [data-icon="sun"] { color:var(--text); }
.icon { display:inline-block; width:17px; height:17px; flex:none; }
.page-shell { width:min(760px, calc(100% - 36px)); margin:0 auto; padding:62px 0 26px; position:relative; }
.surface, .content-card { background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.profile-card { overflow:hidden; border-radius:20px; animation:rise .65s cubic-bezier(.2,.7,.2,1) both; }
.banner { height:176px; position:relative; overflow:hidden; background:
  linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.2)),
  radial-gradient(ellipse at 75% 30%,rgba(255,255,255,.19),transparent 20%),
  url("./assets/banner.svg"),linear-gradient(125deg,#373739 0%,#18181a 45%,#29292b 100%); background-size:cover; background-position:center; }
.banner::before { content:""; position:absolute; inset:0; opacity:.32; background:
  repeating-linear-gradient(115deg,transparent 0 36px,rgba(255,255,255,.07) 37px,transparent 39px),
  linear-gradient(90deg,transparent,rgba(0,0,0,.35)); }
.banner::after { content:""; position:absolute; inset:auto 0 0; height:55%; background:linear-gradient(transparent,rgba(0,0,0,.32)); }
.banner-mark { position:absolute; right:22px; bottom:13px; z-index:1; color:rgba(255,255,255,.23); font-size:27px; font-weight:800; letter-spacing:-3px; }
.banner-mark span { color:rgba(255,255,255,.65); }
.profile-main { position:relative; padding:0 30px 23px; text-align:center; }
.avatar-wrap { width:104px; height:104px; margin:-52px auto 10px; position:relative; z-index:2; padding:5px; border-radius:50%; background:var(--surface-strong); border:1px solid var(--border-hover); box-shadow:0 7px 24px rgba(0,0,0,.35); }
.avatar { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; background:#272729; }
.presence-dot { position:absolute; right:3px; bottom:7px; width:15px; height:15px; border-radius:50%; background:#777; border:3px solid var(--surface-strong); }
.presence-dot.online { background:#a7a7a7; box-shadow:0 0 0 4px rgba(255,255,255,.07); }
.presence-dot.idle { background:#c0c0c0; }
.presence-dot.dnd { background:#696969; }
.identity h1 { margin:0; font-size:26px; line-height:1.25; letter-spacing:-1.1px; font-weight:800; }
.name-line { display:flex; align-items:center; justify-content:center; gap:7px; }
.verified { display:inline-flex; color:var(--muted); }
.verified .icon { width:16px; height:16px; }
.handle { margin:3px 0 0; color:var(--muted); font:12px "DM Mono",monospace; letter-spacing:.02em; }
.typewriter { min-height:21px; margin:13px auto 0; color:var(--muted); font:11px "DM Mono",monospace; letter-spacing:.01em; }
.caret { display:inline-block; height:12px; border-left:1px solid var(--text); margin-left:3px; vertical-align:-2px; animation:blink 1s steps(2,start) infinite; }
.social-row { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin:17px 0 16px; }
.social-link { width:35px; height:35px; display:grid; place-items:center; color:var(--muted); border:1px solid var(--border); border-radius:10px; background:var(--surface-soft); transition:transform .2s,border-color .2s,color .2s,background .2s; }
.social-link .icon { width:16px; height:16px; }
.social-link:hover { color:var(--text); border-color:var(--border-hover); background:rgba(255,255,255,.09); transform:translateY(-3px); }
.profile-meta { display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; }
.profile-meta span { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); background:var(--surface-soft); font:10px "DM Mono",monospace; }
.profile-meta .icon { width:13px; height:13px; }
.profile-nav { display:flex; gap:4px; padding:5px; margin:13px 0; border-radius:13px; animation:rise .7s .08s both; }
.tab-button { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:700; transition:.2s; }
.tab-button .icon { width:15px; height:15px; }
.tab-button:hover { color:var(--text); background:var(--surface-soft); }
.tab-button.active { color:var(--text); background:rgba(255,255,255,.085); border-color:var(--border); box-shadow:inset 0 1px rgba(255,255,255,.06); }
.tab-panel { min-height:320px; opacity:1; transform:translateY(0); }
.tab-panel.enter { animation:tab-in .28s ease both; }
.home-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(220px,.9fr); gap:12px; }
.main-column,.side-column { display:grid; align-content:start; gap:12px; }
.content-card { border-radius:var(--radius); padding:18px; box-shadow:0 12px 42px rgba(0,0,0,.14); }
.section-heading { display:flex; align-items:center; gap:9px; margin-bottom:14px; min-width:0; }
.section-heading > .icon { color:var(--muted); width:16px; height:16px; }
.section-heading h2 { margin:0; font-size:13px; font-weight:800; letter-spacing:-.2px; }
.eyebrow { margin-left:auto; color:var(--subtle); font:9px "DM Mono",monospace; letter-spacing:.1em; white-space:nowrap; }
.bio-copy { color:var(--muted); font-size:12px; line-height:1.8; margin:0 0 11px; white-space:pre-line; }
.bio-copy:last-child { margin-bottom:0; }
.body-copy { color:var(--muted); font-size:12px; line-height:1.8; margin:0; }
.muted { color:var(--muted); }
.mono { font-family:"DM Mono",monospace; }
.history-list { display:grid; gap:0; }
.history-item { display:flex; align-items:flex-start; gap:12px; justify-content:space-between; padding:13px 0; border-top:1px solid var(--border); }
.history-item:first-child { border-top:0; padding-top:0; }
.history-item:last-child { padding-bottom:0; }
.history-copy { min-width:0; }
.history-copy h3 { font-size:11px; margin:0 0 3px; }
.history-copy p { margin:0; }
.history-copy .muted { font-size:10px; }
.history-desc { color:var(--muted); font-size:11px; line-height:1.65; margin-top:7px !important; }
.period { flex:none; color:var(--muted); border:1px solid var(--border); border-radius:99px; padding:4px 7px; font:9px "DM Mono",monospace; white-space:nowrap; }
.discord-person { display:flex; align-items:center; gap:11px; margin:4px 0 13px; }
.discord-avatar { width:43px; height:43px; border-radius:50%; object-fit:cover; background:var(--surface-soft); border:1px solid var(--border); padding:2px; }
.discord-avatar.placeholder { display:grid; place-items:center; color:var(--muted); }
.discord-user strong { font-size:11px; }
.status-line { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; margin:4px 0 0; }
.status-dot { width:7px; height:7px; border-radius:50%; background:#858585; }
.status-dot.online { background:#bdbdbd; }.status-dot.idle { background:#a2a2a2; }.status-dot.dnd { background:#666; }
.presence-label { margin-left:auto; color:var(--subtle); font:9px "DM Mono",monospace; }
.activity-line { display:flex; align-items:flex-start; gap:7px; padding:9px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--muted); font-size:10px; line-height:1.5; }
.activity-line .icon { width:13px; height:13px; }
.text-button { display:inline-flex; align-items:center; gap:6px; border:0; padding:8px 0 0; background:transparent; color:var(--muted); font-size:10px; font-weight:700; cursor:pointer; }
.text-button:hover { color:var(--text); }
.text-button .icon { width:13px; height:13px; }
.detail-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:10px; }
.detail-row:first-of-type { border-top:0; }
.detail-row a { display:inline-flex; align-items:center; gap:4px; font-weight:700; }
.detail-row .icon { width:11px; height:11px; }
.tag-cloud { display:flex; flex-wrap:wrap; gap:6px; }
.tag { display:inline-flex; padding:5px 8px; border:1px solid var(--border); border-radius:6px; color:var(--muted); background:var(--surface-soft); font:9px "DM Mono",monospace; }
.panel-heading { margin:4px 2px 14px; }
.panel-heading h2 { font-size:15px; }
.section-subtitle { margin:-5px 0 14px; color:var(--muted); font-size:11px; line-height:1.65; }
.featured-inner { padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); }
.featured-label,.repo-kicker { color:var(--subtle); font:9px "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }
.featured-inner h3 { font-size:18px; margin:7px 0; letter-spacing:-.5px; }
.featured-inner p { max-width:650px; color:var(--muted); font-size:12px; line-height:1.75; margin:0 0 13px; }
.featured-inner .text-button { margin-top:13px; padding:8px 11px; border:1px solid var(--border); border-radius:8px; }
.repo-grid,.legacy-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.repo-card,.legacy-project { display:flex; flex-direction:column; min-width:0; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface-soft); transition:transform .2s,border-color .2s,background .2s; }
.repo-card:hover,.legacy-project:hover { transform:translateY(-2px); border-color:var(--border-hover); background:rgba(255,255,255,.055); }
.repo-top,.legacy-project-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.repo-top .icon,.legacy-project-top .icon { color:var(--subtle); width:14px; height:14px; }
.repo-card h3,.legacy-project h3 { font-size:12px; margin:4px 0 0; overflow-wrap:anywhere; }
.repo-card p,.legacy-project p { flex:1; color:var(--muted); font-size:10px; line-height:1.7; margin:11px 0 13px; }
.repo-stats { display:flex; flex-wrap:wrap; align-items:center; gap:11px; padding-top:9px; border-top:1px solid var(--border); color:var(--muted); font:9px "DM Mono",monospace; }
.repo-stats span { display:inline-flex; align-items:center; gap:4px; }
.repo-stats .icon { width:11px; height:11px; }
.repo-updated { margin-left:auto; color:var(--subtle); }
.repo-topics { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.repo-topics span { color:var(--subtle); font:8px "DM Mono",monospace; }
.state-box { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:9px; min-height:105px; padding:18px; border:1px dashed var(--border); border-radius:11px; color:var(--muted); font-size:11px; text-align:center; }
.error-state { flex-direction:column; }
.spin { animation:spin 1.1s linear infinite; }
.skills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.skill-category .section-heading { align-items:flex-start; }
.skill-category .section-heading h2 { line-height:1.5; }
.skill-list { display:grid; gap:15px; }
.skill-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:7px; color:var(--muted); font-size:10px; }
.skill-label strong { color:var(--text); font:10px "DM Mono",monospace; }
.skill-track { height:4px; border-radius:99px; overflow:hidden; background:rgba(128,128,128,.17); }
.skill-track span { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#777,#d4d4d4); }
.skill-note p { color:var(--muted); font-size:11px; line-height:1.8; margin:0; }
.large-tags .tag { padding:7px 10px; font-size:10px; }
.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.contact-item { min-width:0; display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--border); border-radius:11px; background:var(--surface-soft); transition:border-color .2s,transform .2s; }
.contact-item:hover { border-color:var(--border-hover); transform:translateY(-1px); }
.contact-item.disabled { opacity:.5; }
.contact-icon { display:grid; place-items:center; width:33px; height:33px; flex:none; border:1px solid var(--border); border-radius:9px; color:var(--muted); }
.contact-copy { min-width:0; flex:1; display:grid; gap:3px; }
.contact-copy strong { font-size:11px; }
.contact-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font:9px "DM Mono",monospace; }
.copy-button,.contact-open { display:inline-flex; align-items:center; justify-content:center; gap:5px; flex:none; border:1px solid var(--border); border-radius:7px; background:transparent; padding:6px 8px; color:var(--muted); font-size:9px; cursor:pointer; }
.copy-button:hover,.contact-open:hover { color:var(--text); border-color:var(--border-hover); }
.copy-button .icon,.contact-open .icon { width:12px; height:12px; }
.not-set { color:var(--subtle); font:8px "DM Mono",monospace; }
.site-footer { display:flex; justify-content:center; align-items:center; gap:9px; margin-top:21px; color:var(--subtle); font:9px "DM Mono",monospace; letter-spacing:.09em; }
.footer-separator { opacity:.45; }
.toast { position:fixed; z-index:30; left:50%; bottom:25px; transform:translate(-50%,12px); opacity:0; pointer-events:none; padding:10px 14px; border:1px solid var(--border-hover); border-radius:9px; color:var(--text); background:var(--surface-strong); box-shadow:var(--shadow); font-size:11px; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@keyframes rise { from {opacity:0;transform:translateY(12px)} to {opacity:1;transform:translateY(0)} }
@keyframes tab-in { from {opacity:0;transform:translateY(7px)} to {opacity:1;transform:translateY(0)} }
@keyframes blink { to {visibility:hidden} }
@keyframes spin { to {transform:rotate(360deg)} }
@media (max-width:680px) {
  .page-shell { width:min(100% - 24px,560px); padding-top:64px; }
  .theme-toggle { top:12px; right:12px; }
  .banner { height:132px !important; }
  .profile-main { padding:0 15px 18px; }
  .avatar-wrap { width:88px; height:88px; margin-top:-44px; }
  .identity h1 { font-size:23px; }
  .typewriter { font-size:9px; min-height:18px; }
  .social-row { gap:6px; margin:14px 0; }
  .social-link { width:34px; height:34px; }
  .profile-meta { gap:5px; }
  .profile-meta span { font-size:9px; padding:5px 8px; }
  .home-grid { grid-template-columns:1fr; }
  .side-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .discord-card { grid-column:1/-1; }
  .content-card { padding:15px; }
}
@media (max-width:460px) {
  .page-shell { width:calc(100% - 20px); padding-top:60px; }
  .profile-card { border-radius:15px; }
  .profile-main { padding-left:12px; padding-right:12px; }
  .profile-nav { gap:2px; padding:4px; }
  .tab-button { flex-direction:column; gap:4px; min-height:49px; font-size:9px; }
  .tab-button .icon { width:15px; height:15px; }
  .side-column,.skills-grid,.repo-grid,.legacy-grid,.contact-grid { grid-template-columns:1fr; }
  .history-item { flex-direction:column; gap:7px; }
  .period { align-self:flex-start; }
  .section-heading { gap:7px; }
  .eyebrow { font-size:8px; }
  .site-footer { font-size:8px; gap:6px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Terminal treatment: flat monochrome surfaces, no glow, blur or glossy lighting. */
:root {
  --bg: #050505;
  --surface: #090909;
  --surface-strong: #0d0d0d;
  --surface-soft: #0b0b0b;
  --border: #303030;
  --border-hover: #777;
  --text: #ededed;
  --muted: #a0a0a0;
  --subtle: #707070;
  --shadow: none;
  --radius: 5px;
  font-family: "DM Mono", "Consolas", monospace;
}
:root[data-theme="light"] {
  --bg: #f2f2f2;
  --surface: #fff;
  --surface-strong: #fff;
  --surface-soft: #f7f7f7;
  --border: #c9c9c9;
  --border-hover: #555;
  --text: #111;
  --muted: #505050;
  --subtle: #777;
  --shadow: none;
}
body { font-family: "DM Mono", "Consolas", monospace; }
.wallpaper {
  background: #050505;
  filter: none;
  transform: none;
}
.wallpaper::before, .wallpaper::after { display: none; }
.wallpaper-shade { background: rgba(0,0,0,.18); }
:root[data-theme="light"] .wallpaper { background: #ededed; }
:root[data-theme="light"] .wallpaper-shade { background: rgba(255,255,255,.18); }
.grain { display: none; }
.surface, .content-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.profile-card, .profile-nav, .content-card, .repo-card, .legacy-project,
.contact-item, .social-link, .tab-button, .avatar-wrap, .theme-toggle,
.profile-meta span, .period, .contact-icon, .copy-button, .contact-open,
.featured-inner .text-button, .toast { border-radius: 4px; }
.profile-card, .profile-nav { animation: none; }
.banner {
  background: url("./assets/banner.jpg") center 46% / cover no-repeat #111;
}
.banner::before, .banner::after { display: none; }
.banner-mark { display: none; }
.avatar-wrap {
  background: var(--surface);
  border: 1px solid var(--border-hover);
  box-shadow: none;
}
.presence-dot.online { box-shadow: none; }
.identity h1 { font-family: "DM Mono", monospace; font-size: 22px; font-weight: 500; letter-spacing: -.7px; }
.handle, .typewriter, .profile-meta span, .eyebrow, .period,
.repo-stats, .repo-topics span, .site-footer, .not-set { font-family: "DM Mono", monospace; }
.typewriter { color: var(--muted); }
.caret { animation: none; }
.theme-toggle { background: var(--surface); }
.theme-toggle:hover, .social-link:hover, .tab-button:hover,
.contact-item:hover, .repo-card:hover, .legacy-project:hover {
  transform: none;
  box-shadow: none;
  background: var(--surface-soft);
}
.social-link, .contact-item, .repo-card, .legacy-project, .tab-button,
.copy-button, .contact-open, .theme-toggle { transition: color .12s, border-color .12s, background .12s; }
.tab-button.active { background: var(--surface-soft); border-color: var(--border-hover); box-shadow: none; }
.content-card { box-shadow: none; }
.skill-track { background: #242424; border-radius: 0; }
.skill-track span { background: #bdbdbd; border-radius: 0; }
:root[data-theme="light"] .skill-track { background: #ddd; }
:root[data-theme="light"] .skill-track span { background: #333; }
.repo-card, .legacy-project { background: transparent; }
.contact-item { background: transparent; }
.toast { box-shadow: none; }
@keyframes rise { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
@keyframes tab-in { from { opacity: 1; transform: none; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .tab-panel.enter { animation: none; }
}