:root{
  --bg:#181818;
  --bg-2:#1c1c1c;
  --bg-3:#141414;
  --bg-tab:#1f1f1f;
  --border:#2a2a2a;
  --text:#d4d4d4;
  --text-dim:#8a8a8a;
  --blue:#569cd6;
  --lightblue:#9cdcfe;
  --string:#ce9178;
  --green:#6a9955;
  --yellow:#dcdcaa;
  --num:#b5cea8;
  --sb-bg:#007acc;
  --active-bg:#2a2d2e;
  --ff-mono:'JetBrains Mono', Consolas, monospace;
  --ff-ui:'Inter', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;background:var(--bg);color:var(--text);overflow:hidden;}
body{font-family:var(--ff-ui);font-size:14px;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}
::selection{background:#264f78;}

.ide{height:100vh;height:100dvh;display:flex;flex-direction:column;}

/* ---------- title bar ---------- */
.titlebar{
  flex:0 0 auto;height:34px;background:var(--bg-3);display:flex;align-items:center;
  padding:0 12px;gap:16px;border-bottom:1px solid var(--border);
}
.titlebar-dots{display:flex;gap:8px;}
.dot{width:12px;height:12px;border-radius:50%;}
.dot.red{background:#ff5f56;}
.dot.yellow{background:#ffbd2e;}
.dot.green{background:#27c93f;}
.titlebar-title{flex:1;text-align:center;font-size:0.78rem;color:var(--text-dim);}
.titlebar-right{display:flex;align-items:center;gap:10px;}
.lang-toggle{
  color:var(--text-dim);font-size:0.72rem;font-weight:600;letter-spacing:0.3px;
  border:1px solid var(--border);padding:4px 10px;border-radius:3px;transition:color .2s ease,border-color .2s ease;
}
.lang-toggle:hover{color:var(--text);border-color:#454545;}
.lang-toggle.is-en{color:var(--sb-bg);border-color:var(--sb-bg);}
.sidebar-toggle{display:none;color:var(--text-dim);font-size:1rem;width:32px;}
.sidebar-overlay{display:none;}

/* ---------- ide body ---------- */
.ide-body{flex:1;min-height:0;display:flex;}

/* ---------- activity bar ---------- */
.activitybar{
  flex:0 0 48px;background:var(--bg-3);display:flex;flex-direction:column;
  align-items:center;padding-top:12px;gap:4px;border-right:1px solid var(--border);
}
.ab-icon{
  width:48px;height:44px;display:flex;align-items:center;justify-content:center;
  color:var(--text-dim);border-left:2px solid transparent;transition:color .2s ease;
}
.ab-icon:hover{color:var(--text);}
.ab-icon.active{color:var(--text);border-left-color:var(--sb-bg);}
.ab-icon:disabled{cursor:default;opacity:0.5;}

/* ---------- sidebar ---------- */
.sidebar{
  flex:0 0 250px;background:var(--bg-2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-height:0;
}
.sidebar-header{padding:14px 18px 8px;font-size:0.72rem;letter-spacing:1px;color:var(--text-dim);font-weight:600;}
.sidebar-folder{padding:4px 18px;font-size:0.78rem;font-weight:700;color:var(--text);letter-spacing:0.3px;}
.file-tree{list-style:none;flex:1;min-height:0;overflow-y:auto;padding:2px 0 8px;}
.file-item{
  display:flex;align-items:center;gap:8px;padding:5px 18px 5px 30px;font-size:0.86rem;
  color:var(--text-dim);cursor:pointer;white-space:nowrap;border-left:2px solid transparent;
}
.file-item:hover{background:#232323;color:var(--text);}
.file-item.active{background:var(--active-bg);color:var(--text);}
.file-icon{width:20px;flex-shrink:0;font-size:0.72rem;font-weight:700;text-align:center;}
.icon-js{color:#f1e05a;}
.icon-ts,.icon-tsx{color:#3178c6;font-size:0.66rem;}
.icon-md{color:#519aba;font-size:0.9rem;}
.folder-item{display:flex;align-items:center;gap:8px;padding:5px 18px;font-size:0.78rem;color:var(--text-dim);font-weight:600;}
.folder-icon{width:14px;flex-shrink:0;font-size:0.75rem;}
.sidebar-hint{padding:10px 18px;font-size:0.7rem;color:var(--text-dim);border-top:1px solid var(--border);}

.sidebar-panel{display:flex;flex-direction:column;flex:1;min-height:0;}
.sidebar-panel[hidden]{display:none;}

.search-box{padding:8px 12px;}
.search-box input{
  width:100%;background:#202020;border:1px solid #303030;color:var(--text);
  padding:6px 10px;font-size:0.82rem;font-family:var(--ff-ui);border-radius:2px;
}
.search-box input:focus{outline:1px solid var(--sb-bg);}
.search-results{flex:1;min-height:0;overflow-y:auto;padding:4px 0 12px;}
.search-empty{padding:8px 18px;font-size:0.78rem;color:var(--text-dim);}
.search-group{padding:6px 12px 2px;font-size:0.72rem;color:var(--text-dim);font-weight:600;letter-spacing:0.3px;}
.search-hit{
  display:block;padding:6px 18px;font-size:0.8rem;color:var(--text-dim);cursor:pointer;
  font-family:var(--ff-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.search-hit:hover{background:#232323;color:var(--text);}
.search-hit mark{background:#613214;color:#ffd28a;border-radius:2px;}
.search-count{color:var(--text-dim);font-weight:400;}

/* ---------- editor area ---------- */
.editor-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;}
.tabbar{
  flex:0 0 auto;display:flex;background:var(--bg-2);border-bottom:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{display:none;}
.tab{
  flex:1 1 0;min-width:0;display:flex;align-items:center;gap:5px;padding:7px 8px;font-size:0.75rem;
  color:var(--text-dim);background:var(--bg-tab);border-right:1px solid var(--border);cursor:pointer;
  border-top:2px solid transparent;white-space:nowrap;overflow:hidden;
}
.tab:hover{color:var(--text);}
.tab.active{background:var(--bg);color:var(--text);border-top-color:var(--sb-bg);}
.tab-close{opacity:0;font-size:0.9rem;margin-left:4px;}
.tab:hover .tab-close, .tab.active .tab-close{opacity:0.6;}

.editor-toolbar{
  flex:0 0 auto;display:flex;justify-content:flex-end;padding:6px 12px;
  background:var(--bg);border-bottom:1px solid var(--border);
}
.editor-toolbar[hidden]{display:none;}
.run-btn{
  display:flex;align-items:center;gap:5px;background:none;color:#89d185;border:none;
  padding:4px 8px;font-size:0.8rem;font-weight:500;cursor:pointer;border-radius:3px;
  transition:background .15s ease,color .15s ease;
}
.run-btn:hover{background:rgba(137,209,133,0.12);color:#a6e6a2;}
.run-triangle{font-size:0.7rem;}

/* floating debug toolbar — mimics VS Code's real run/debug pill */
.debug-toolbar{
  position:absolute;top:10px;left:50%;transform:translateX(-50%) translateY(0) scale(1);z-index:30;
  display:flex;align-items:center;gap:2px;background:#232323;border:1px solid #333333;
  border-radius:6px;padding:3px 4px;box-shadow:0 4px 14px rgba(0,0,0,0.55);
  opacity:1;transition:opacity .2s ease,transform .2s cubic-bezier(.4,0,.2,1);
}
.debug-toolbar.closing{opacity:0;transform:translateX(-50%) translateY(-10px) scale(0.9);}
.debug-toolbar[hidden]{display:none;}
.dbg-icon{
  width:26px;height:24px;display:flex;align-items:center;justify-content:center;
  color:#cccccc;font-size:0.75rem;border-radius:4px;
}
.dbg-icon:hover{background:#3a3a3a;color:#fff;}
.dbg-stop{color:#f14c4c;font-variant-emoji:text;}
.dbg-stop:hover{background:rgba(241,76,76,0.18);color:#ff6b6b;}
.dbg-sep{width:1px;height:16px;background:#3a3a3a;margin:0 3px;}

.editor-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:auto;background:var(--bg);}

/* ---------- preview panel (Run output) ---------- */
.preview-panel{flex:1;min-height:0;overflow-y:auto;background:var(--bg);padding:20px 24px 40px;display:none;opacity:1;transition:opacity .2s ease;}
.preview-panel.visible{display:block;}
.preview-panel.closing{opacity:0;}
.preview-header{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;
  font-family:var(--ff-mono);font-size:0.82rem;color:var(--green);flex-wrap:wrap;gap:10px;
}
.preview-ok{color:var(--text-dim);margin-left:10px;}
.preview-back{
  background:none;border:1px solid var(--border);color:var(--text-dim);padding:6px 14px;
  border-radius:3px;font-size:0.78rem;cursor:pointer;font-family:var(--ff-ui);
}
.preview-back:hover{color:var(--text);border-color:#454545;}
.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px;}
.preview-card{
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,border-color .2s ease;
  animation:cardIn .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.preview-card:nth-child(1){animation-delay:.02s;}
.preview-card:nth-child(2){animation-delay:.06s;}
.preview-card:nth-child(3){animation-delay:.1s;}
.preview-card:nth-child(4){animation-delay:.14s;}
.preview-card:nth-child(5){animation-delay:.18s;}
.preview-card:nth-child(6){animation-delay:.22s;}
.preview-card:nth-child(n+7){animation-delay:.26s;}
.preview-card:hover{transform:translateY(-4px);border-color:#3a3a3a;}
.preview-card.clickable{cursor:pointer;}
.preview-card.clickable:hover{border-color:#5599ff;box-shadow:0 6px 18px rgba(0,0,0,0.35);}
.preview-card img{width:100%;height:140px;object-fit:cover;background:#000;display:block;}
.cert-placeholder{
  width:100%;height:140px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a2a1a 0%,#1a1a2e 100%);
  color:var(--green);opacity:0.7;
}
.preview-card-body{padding:14px 16px;}
.preview-card h3{font-size:0.92rem;font-weight:600;margin-bottom:6px;font-family:var(--ff-ui);color:var(--text);}
.preview-meta{display:block;font-size:0.7rem;color:var(--sb-bg);margin-bottom:8px;font-weight:600;font-family:var(--ff-ui);}
.preview-card p{font-size:0.8rem;color:var(--text-dim);line-height:1.5;font-family:var(--ff-ui);}

/* ---------- project detail page ---------- */
.detail-back{
  background:none;border:1px solid var(--border);color:var(--text-dim);padding:7px 16px;
  border-radius:4px;font-size:0.8rem;font-family:var(--ff-ui);cursor:pointer;margin-bottom:20px;
}
.detail-back:hover{color:var(--text);border-color:#454545;}
.project-detail{
  max-width:720px;margin:0 auto;background:var(--bg-2);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;animation:cardIn .35s cubic-bezier(.16,1,.3,1) both;
}
.project-detail img{width:100%;max-height:320px;object-fit:cover;background:#000;display:block;}
.detail-codeblock{
  font-family:var(--ff-mono);font-size:0.85rem;line-height:1.7;padding:20px 24px 24px;
  background:var(--bg);overflow-x:auto;
}
.detail-codeblock .line-num{flex:0 0 34px;padding-right:14px;}

/* ---------- contact preview ---------- */
.contact-preview{max-width:560px;margin:0 auto;animation:cardIn .35s cubic-bezier(.16,1,.3,1) both;}
.contact-header{margin-bottom:24px;}
.contact-header h2{font-size:1.25rem;font-weight:700;font-family:var(--ff-ui);color:var(--text);margin-bottom:5px;}
.contact-header p{font-size:0.83rem;color:var(--text-dim);font-family:var(--ff-ui);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.contact-card{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  border-left:3px solid var(--accent,var(--border));
  padding:12px 14px;text-decoration:none;
  transition:border-color .18s,background .18s,transform .15s;
  position:relative;overflow:hidden;
}
.contact-card:hover{background:var(--active-bg);border-color:var(--accent,#454545);transform:translateY(-1px);}
.contact-icon{
  width:34px;height:34px;border-radius:8px;
  background:color-mix(in srgb,var(--accent,var(--blue)) 12%,transparent);
  display:flex;align-items:center;justify-content:center;
  color:var(--accent,var(--blue));flex-shrink:0;
}
.contact-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.contact-label{font-size:0.68rem;color:var(--text-dim);font-family:var(--ff-ui);font-weight:600;text-transform:uppercase;letter-spacing:.07em;}
.contact-value{font-size:0.8rem;color:var(--text);font-family:var(--ff-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.contact-arrow{font-size:0.8rem;color:var(--text-dim);margin-left:auto;flex-shrink:0;opacity:0;transition:opacity .15s,transform .15s;}
.contact-card:hover .contact-arrow{opacity:1;transform:translate(2px,-2px);}
.editor-code{font-family:var(--ff-mono);font-size:0.88rem;line-height:1.65;padding:14px 0 40vh;min-width:max-content;}

.code-line{display:flex;}
.line-num{
  flex:0 0 56px;text-align:right;padding-right:18px;color:var(--text-dim);opacity:0.55;
  user-select:none;font-size:0.85rem;
}
.line-content{padding-right:40px;white-space:pre;color:var(--text);}
.code-line.active-line{background:#2a2d2e;}
.code-line.active-line .line-num{color:var(--text);opacity:0.9;}
.code-line.flash{animation:lineFlash 1.4s ease;}
@keyframes lineFlash{
  0%{background:#613214;}
  100%{background:transparent;}
}

.cursor-blink{display:inline-block;width:7px;height:15px;background:var(--text);vertical-align:text-bottom;animation:blink 1s step-end infinite;margin-left:1px;}
@keyframes blink{50%{opacity:0;}}

/* syntax token colors */
.tok-kw{color:var(--blue);}
.tok-str{color:var(--string);}
.tok-com{color:var(--green);font-style:italic;}
.tok-key{color:var(--lightblue);}
.tok-num{color:var(--num);}
.tok-fn{color:var(--yellow);}
.tok-md-h{color:var(--blue);font-weight:700;}
.tok-md-quote{color:var(--green);}
.md-file-link{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;}
.md-file-link:hover{color:#ffd28a;}

/* ---------- terminal ---------- */
.terminal-panel{
  flex:0 0 220px;border-top:1px solid var(--border);background:var(--bg-3);
  display:flex;flex-direction:column;animation:termSlideUp .22s cubic-bezier(.16,1,.3,1);
}
.terminal-panel[hidden]{display:none;}
@keyframes termSlideUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.terminal-header{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg-2);border-bottom:1px solid var(--border);padding:0 12px;height:32px;flex-shrink:0;
}
.terminal-tabs{display:flex;gap:0;}
.terminal-tab{
  font-size:0.72rem;font-family:var(--ff-ui);font-weight:600;color:var(--text);
  padding:0 14px;height:32px;display:flex;align-items:center;
  border-bottom:2px solid var(--sb-bg);letter-spacing:.03em;
}
.terminal-close{
  background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.8rem;
  padding:4px 6px;border-radius:3px;line-height:1;
}
.terminal-close:hover{background:var(--active-bg);color:var(--text);}
.terminal-body{
  flex:1;overflow-y:auto;padding:10px 16px 16px;font-family:var(--ff-mono);font-size:0.8rem;
  line-height:1.7;color:var(--text);
}
.term-line{display:flex;gap:10px;white-space:pre;}
.term-prompt{color:var(--green);flex-shrink:0;}
.term-cmd{color:var(--text);}
.term-hash{color:var(--yellow);flex-shrink:0;}
.term-date{color:var(--text-dim);flex-shrink:0;}
.term-msg{color:var(--text);}
.term-msg .term-tag{color:var(--blue);}
.term-cursor{display:inline-block;width:8px;height:1.1em;background:var(--text);opacity:0.8;animation:blink 1s step-end infinite;vertical-align:text-bottom;}

/* ---------- minimap ---------- */
.minimap{flex:0 0 60px;background:var(--bg);border-left:1px solid var(--border);opacity:0.6;overflow:hidden;padding:14px 6px;}
.minimap-line{height:2px;background:var(--text-dim);opacity:0.4;margin-bottom:3px;border-radius:1px;}

/* ---------- status bar ---------- */
.statusbar{
  flex:0 0 22px;background:var(--sb-bg);display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;font-size:0.72rem;color:#fff;
}
.sb-left,.sb-right{display:flex;gap:16px;align-items:center;}
.sb-item{opacity:0.95;}
.sb-cv{font-weight:600;}
.sb-cv:hover{text-decoration:underline;}
.sb-copy{opacity:0.7;font-size:0.68rem;}
.sb-ticker{
  font-weight:600;font-variant-numeric:tabular-nums;transition:opacity .35s ease,transform .35s ease;
  transform:translateY(0);
}
.sb-ticker.fade{opacity:0;transform:translateY(3px);}
.sb-ticker .tick-up{color:#b8ffb0;}
.sb-ticker .tick-down{color:#ffd0d0;}
.ticker-link{color:inherit;text-decoration:underline;cursor:pointer;}
.ticker-link:hover{opacity:0.8;}
.code-line[data-href]{cursor:pointer;}
.code-line[data-href] .tok-str{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--string);}
.code-line[data-href]:hover .tok-str{opacity:0.75;}
.detail-link{color:var(--string);text-decoration:underline;cursor:pointer;}
.detail-link:hover{opacity:0.75;}
.detail-link-btn{display:inline-block;margin-top:12px;padding:7px 14px;border:1px solid var(--string);color:var(--string);border-radius:4px;font-size:0.78rem;font-family:var(--font-mono);text-decoration:none;word-break:break-all;}
.detail-link-btn:hover{background:rgba(206,145,120,0.12);}

/* ---------- responsive ---------- */

/* Tablet */
@media (max-width:900px){
  .minimap{display:none;}
  .sidebar{flex-basis:210px;}
}

@media (max-width:720px){
  .sidebar{flex-basis:180px;}
  .preview-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .contact-grid{grid-template-columns:1fr;}
}

/* Mobile */
@media (max-width:600px){
  html,body{overflow:hidden;}

  .sidebar-toggle{display:block;}

  /* Collapse activity bar */
  .activitybar{
    flex:0 0 0;width:0;min-width:0;overflow:hidden;border:none;padding:0;
  }

  /* Sidebar becomes a slide-in drawer */
  .sidebar{
    position:fixed;
    top:34px;bottom:22px;left:0;
    z-index:20;
    width:80vw;max-width:280px;
    flex:none;
    transform:translateX(-110%);
    transition:transform .25s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 20px rgba(0,0,0,0.5);
  }
  .sidebar.open{transform:translateX(0);}

  /* Overlay behind drawer */
  .sidebar-overlay{display:none;}
  .sidebar-overlay.open{
    display:block;
    position:fixed;
    top:34px;bottom:22px;left:0;right:0;
    background:rgba(0,0,0,0.45);
    z-index:19;
  }

  /* Editor takes full width */
  .editor-area{flex:1;width:100%;min-width:0;}

  /* Titlebar */
  .titlebar-title{font-size:0.68rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;}

  /* ---- Hamburger sağda sabit ---- */
  .titlebar-right{margin-left:auto;flex-shrink:0;}

  /* ---- TABS: 2 satıra sar, 4'er tab ---- */
  .tabbar{flex-wrap:wrap;overflow-x:hidden;}
  .tab{
    flex:1 1 25%;          /* 4 tab = 1 satır */
    min-width:0;max-width:none;
    font-size:0.68rem;padding:5px 6px;gap:3px;
    overflow:hidden;
  }
  .tab > span:not(.file-icon):not(.tab-close){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    min-width:0;flex:1;
    display:inline-block;
  }
  .tab-close{display:none;}

  /* ---- RUN butonu: tabbarın yanında değil, kendi ince şeridinde ---- */
  .editor-toolbar{padding:2px 8px;min-height:0;}
  .run-btn{font-size:0.72rem;padding:2px 8px;}

  /* ---- EDITOR: taşmayı kapat, satırları sar ---- */
  .editor-scroll{overflow-x:hidden;}
  .editor-code{
    font-size:0.8rem;line-height:1.55;
    min-width:0;          /* max-content'i iptal et */
    width:100%;
    padding-bottom:20vh;
  }
  .code-line{flex-wrap:nowrap;min-width:0;}
  .line-num{flex:0 0 32px;padding-right:6px;font-size:0.75rem;}
  .line-content{
    white-space:pre-wrap;
    overflow-wrap:break-word;
    word-break:normal;
    padding-right:8px;
    min-width:0;flex:1;
  }

  /* Preview panel */
  .preview-panel{padding:14px 12px 30px;}
  .preview-grid{grid-template-columns:1fr;}
  .preview-card img{height:120px;}

  /* Detail page */
  .detail-codeblock{font-size:0.76rem;padding:12px 14px 16px;line-height:1.6;overflow-x:auto;}
  .project-detail img{max-height:180px;}
  .detail-back{font-size:0.75rem;padding:6px 12px;margin-bottom:14px;}

  /* Contact */
  .contact-grid{grid-template-columns:1fr;}
  .contact-preview{max-width:100%;}

  /* Terminal */
  .terminal-panel{flex:0 0 160px;}
  .terminal-body{font-size:0.72rem;}

  /* Status bar */
  .sb-left .sb-item:nth-child(2){display:none;}
  .sb-ticker{display:none;}
  .sb-copy{display:none;}
  .sb-right .sb-item:not(.sb-cv){display:none;}
  .statusbar{padding:0 8px;}

  /* Debug toolbar */
  .debug-toolbar{top:6px;}
}

@media (max-width:380px){
  .titlebar-title{display:none;}
  .tab{min-width:65px;font-size:0.65rem;padding:5px 6px;}
  .editor-code{font-size:0.75rem;}
  .lang-toggle{font-size:0.65rem;padding:3px 7px;}
}