/* =====================================================================
   portfolio.css — styles for the home page (index.html)
   ---------------------------------------------------------------------
   1. COLORS & FONTS   <- change the look here
   2. Base text
   3. Page layout (left column + right column)
   4. Sidebar card (name, bullets, buttons, social icons)
   5. Core Expertise
   6. Project blocks (studio header, two columns, info table, links)
   7. Screenshot slider
   8. Small cards (plugins, older projects)
   9. Footer and dark mode button
   10. Mobile
   ===================================================================== */


/* ---------- 1. COLORS & FONTS ---------------------------------------- */
:root {
  --font-text: "Raleway", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Lato", "Helvetica Neue", Arial, sans-serif;

  --page-bg: #ffffff;
  --text: #4a4a4a;            /* normal text */
  --text-strong: #363636;     /* headings and <strong> */
  --name: #3273dc;            /* your name in the sidebar */
  --line: #808080;            /* lines in the sidebar */
  --card-shadow: 0 8px 16px -2px rgba(10,10,10,.1), 0 0 0 1px rgba(10,10,10,.02);

  --social-bg: #ffffff;
  --social-border: #dbdbdb;
  --social-border-hover: #b5b5b5;

  --link-btn-bg: #ebebeb;     /* grey "Related Links" buttons */
  --link-btn-bg-hover: #dcdcdc;
  --link-btn-text: #666666;
  --link-btn-text-hover: #5e5e5e;

  --info-bg: #202223;         /* dark boxes: Project / Mode / Genre ... */
  --info-border: #3a3a3a;
  --info-label: #9a9a9a;
  --info-value: #e8e2d8;

  --slider-frame: #ffffff;
  --slider-bg: #111111;
  --dot: rgba(0,0,0,.5);
  --dot-active: rgba(0,0,0,.9);

  --todo: #b0650c;            /* class="todo": text you still need to write */
}

/* Dark mode colors (used when <html> has class "dark") */
html.dark {
  --page-bg: #242525;
  --text: #b9b1a6;
  --text-strong: #c5beb3;
  --name: #5593cd;
  --line: #676c6d;
  --card-shadow: 0 8px 16px -2px rgba(21,20,20,.1), 0 0 0 1px rgba(21,20,20,.02);

  --social-bg: #242525;
  --social-border: #45494a;
  --social-border-hover: #676c6d;

  --link-btn-bg: #2e3030;
  --link-btn-bg-hover: #373a3a;
  --link-btn-text: #a9a093;
  --link-btn-text-hover: #c5beb3;

  --info-bg: #252626;
  --info-border: #6b6e6f;
  --info-label: #a9a193;
  --info-value: #d9cfbd;

  --slider-frame: #2e3030;
  --dot: rgba(255,255,255,.35);
  --dot-active: rgba(255,255,255,.85);

  --todo: #e0a458;
  color-scheme: dark;
}


/* ---------- 2. Base text --------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 24px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
strong { color: var(--text-strong); font-weight: 700; }
p { margin: 0 0 16px; }
ul { margin: 16px 0 0 32px; padding: 0; }
li { margin-top: 4px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--text-strong); }
h1 { font-size: 32px; line-height: 36px; margin: 20px 0 16px; }
h2 { font-size: 28px; line-height: 31.5px; margin: 12px 0; }
h3 { font-size: 24px; line-height: 27px; margin: 0 0 12px; }
h4 { font-size: 20px; line-height: 22.5px; margin: 12px 0; }
h6 { font-size: 16px; line-height: 18px; margin: 12px 0; }
.todo { color: var(--todo); font-style: italic; }
.center { text-align: center; }
body, a, .link-btn, .social a, .pills a, .info-box { transition: background-color .2s, color .2s, border-color .2s; }


/* ---------- 3. Page layout ------------------------------------------- */
.page { padding: 48px 24px; }
.columns {
  max-width: 1344px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);  /* sidebar 1/4, content 3/4 */
  column-gap: 12px;
  align-items: start;
}
.content-column { min-width: 0; }
.banner { display: block; width: 100%; aspect-ratio: 1026 / 318; object-fit: cover; }
.content { padding: 0 12px; }
.mobile-name { display: none; }
/* Left column follows you while you scroll (desktop only).
   portfolio.js sets --sidebar-top: 24px when it fits the window, otherwise a negative
   value so it first scrolls until its bottom is visible, then stays there. */
.sidebar { position: sticky; top: var(--sidebar-top, 24px); }


/* ---------- 4. Sidebar card ------------------------------------------ */
.profile-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sidebar-card {
  background: var(--page-bg);
  padding: 20px;
  border-radius: 0 0 6px 6px;
  box-shadow: var(--card-shadow);
}
.sidebar-card .name { display: block; font: 700 32px/36px var(--font-heading); color: var(--name); margin: 0 0 4px; }
.sidebar-card .subtitle { font-size: 20px; line-height: 25px; margin: 0 0 24px; }
.sidebar-card ul { margin: 0 0 0 32px; }
.sidebar-card li { margin: 0 0 16px; }
.sidebar-card hr { border: 0; border-top: 2px solid var(--line); margin: 24px 0; }

/* Round outline buttons (Portfolio / Plugins / Resume / Contact) */
.pills { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 8px; }
.pills a {
  display: inline-block; text-align: center;
  border: 2px solid var(--text); border-radius: 9999px;
  padding: 10.67px 21.28px; color: var(--text);
}
.pills a:hover { color: var(--text-strong); border-color: var(--text-strong); }

/* Joined square social icons */
.social { display: flex; margin-top: 28px; }
.social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--social-bg); border: 1px solid var(--social-border);
  margin-left: -1px; color: var(--text-strong); font-size: 18px;
}
.social a:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.social a:last-child { border-radius: 0 4px 4px 0; }
.social a:hover { border-color: var(--social-border-hover); position: relative; }

/* Brand colors on hover (matched by the link address, so no extra classes needed) */
.social a:hover { color: var(--brand, var(--text-strong)); border-color: var(--brand, var(--social-border-hover)); }
.social a[href*="linkedin.com"]  { --brand: #0a66c2; }
.social a[href*="github.com"]    { --brand: #6e5494; }
.social a[href*="youtube.com"]   { --brand: #ff0000; }
.social a[href*="discord"]       { --brand: #5865f2; }
.social a[href*="steamcommunity"]{ --brand: #1b2838; }
.social a[href*="itch.io"]       { --brand: #fa5c5c; }
.social a[href^="mailto:"]       { --brand: #ea4335; }
html.dark .social a[href*="linkedin.com"]  { --brand: #3b8fe0; }
html.dark .social a[href*="github.com"]    { --brand: #a98ad6; }
html.dark .social a[href*="steamcommunity"]{ --brand: #66c0f4; }


/* ---------- 5. Core Expertise ---------------------------------------- */
.expertise {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 60px;
  margin-top: 44px;
}
.expertise > div { margin-bottom: 42px; }
.expertise h3 i { margin-right: 6px; }


/* ---------- 6. Project blocks ---------------------------------------- */
.section-title { margin-top: 56px; }
.project { padding-top: 72px; }
.project.no-header { padding-top: 64px; }  /* a project that sits under the previous header */
/* Divider between blocks: a full line before each company / section header,
   a short centered line between projects that share a header */
.project + .project { margin-top: 72px; border-top: 2px solid var(--line); }
.project + .project.no-header { margin-top: 64px; border-top: 0; position: relative; }
.project + .project.no-header::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 120px; border-top: 2px solid var(--line);
}

/* Centered studio header: logo, studio name, your role */
.studio-header { text-align: center; }
.studio-header h3 { margin: 24px 0 12px; }
.studio-header { margin-bottom: 32px; }   /* space between the header and the project below */
.studio-header h4 { margin: 0; }
.studio-header .dates { margin: 8px 0 0; font-size: 16px; color: var(--text); }   /* (start – end) under the role */
/* Company logo, shown on a black plate so white logos stay visible in light mode.
   "padded" adds room around logos that have no black background of their own. */
.studio-logo { display: block; margin: 0 auto; width: 320px; max-width: 100%; height: auto; background: #000; border-radius: 6px; }
.studio-logo.padded { width: 320px; padding: 26px 34px; }
.studio-logo.small { width: 170px; padding: 26px 40px; }   /* small square-ish logos like Fab */
.letter-logo {   /* round logo with letters, used when there is no logo image */
  width: 110px; height: 110px; margin: 0 auto;
  display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--text-strong);
  font: 700 34px var(--font-heading); color: var(--text-strong);
}

/* Two columns: left = text, right = info boxes + links */
.two-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; align-items: start; }
.cover { display: block; width: 300px; max-width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin: 0 auto; }
.cover.fit { object-fit: contain; background: #000; }
.platforms { display: flex; justify-content: center; gap: 12px; margin: 14px 0 4px; font-size: 26px; color: var(--text-strong); }
.platforms .fa-steam { color: #1b2838; }
.platforms .fa-playstation { color: #003791; }
.platforms .fa-xbox { color: #107c10; }
html.dark .platforms .fa-steam { color: #c7d5e0; }
html.dark .platforms .fa-playstation { color: #4f7fe0; }
.project-title { text-align: center; margin: 8px 0 4px; text-transform: uppercase; }
.project-genre { text-align: center; margin: 8px 0 16px; }
.left h4 { margin: 20px 0 12px; }
.left ul { margin-top: 12px; }

/* Dark info boxes */
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-box { padding: 12px 14px; border: 1px solid var(--info-border); border-radius: 6px; background: var(--info-bg); }
.info-box .label { font-size: 12px; line-height: 18px; color: var(--info-label); text-transform: uppercase; letter-spacing: .08em; }
.info-box .value { margin-top: 4px; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--info-value); }
.info-box .value.todo { color: var(--todo); }

/* YouTube video under the info boxes */
.video { aspect-ratio: 16 / 9; margin-bottom: 8px; }
.video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: 4px; }

/* Grey full-width link buttons */
.related-title { text-align: center; margin: 28px 0 30px; }
.link-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 46px; padding: 11px 20px; margin-bottom: 22px;
  border-radius: 5px; border: 1px solid var(--link-btn-bg);
  background: var(--link-btn-bg) linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.01));
  font-size: 14px; line-height: 20px; color: var(--link-btn-text);
}
/* Hover: fills with the blue of your name, lifts a little and the icon nudges right */
.link-btn { transition: background-color .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.link-btn i { transition: transform .2s; }
.link-btn:hover {
  background-color: var(--name); background-image: none; border-color: var(--name); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 16px -4px var(--name);
}
.link-btn:hover i { transform: translateX(3px); }
html.dark .link-btn { background-image: none; }


/* ---------- 7. Screenshot slider ------------------------------------- */
.slider { margin: 56px 0 60px; }
.slides {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 4px solid var(--slider-frame); border-radius: 4px;
  background: var(--slider-bg);
}
.slides img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;            /* change to "cover" to fill the frame and crop */
  opacity: 0; transition: opacity .6s ease;
}
.slides img.active { opacity: 1; }
.slides .arrow {
  position: absolute; top: 50%; margin-top: -20px; width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer; font-size: 28px;
  color: rgba(255,255,255,.85); opacity: 0; transition: opacity .3s;
}
.slides .prev { left: 10px; }
.slides .next { right: 10px; }
.slides:hover .arrow, .slides .arrow:focus-visible { opacity: 1; }
.dots { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
.dots button {
  width: 11px; height: 11px; padding: 0; border: 0; border-radius: 20px; cursor: pointer;
  background: var(--dot); box-shadow: inset 0 0 3px rgba(0,0,0,.3);
}
.dots button.active { background: var(--dot-active); }


/* ---------- 8. Small cards (plugins, older projects) ----------------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 8px; }
.cards > div { display: flex; flex-direction: column; }
.cards > div p { flex: 1; }
.cards img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cards h4 { text-align: center; margin: 16px 0 4px; }
.cards h6 { text-align: center; margin: 4px 0 12px; }
.cards .link-btn { margin: 0; }
/* Two buttons side by side in a card (Fab Page + YouTube) */
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-row .link-btn { padding: 11px 10px; gap: 8px; }
/* YouTube button: turns YouTube red on hover */
/* GitHub button: turns GitHub purple on hover */
.link-btn.github:hover { background-color: #6e5494; border-color: #6e5494; box-shadow: 0 6px 16px -4px #6e5494; }
/* Disabled button, e.g. "Project Breakdown (Soon)": visible but not clickable */
.link-btn.disabled { opacity: .55; cursor: not-allowed; }
.link-btn.disabled:hover { background: var(--link-btn-bg) linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.01)); border-color: var(--link-btn-bg); color: var(--link-btn-text); transform: none; box-shadow: none; }
.link-btn.disabled:hover i { transform: none; }
html.dark .link-btn.disabled:hover { background-image: none; }
.link-btn.youtube:hover { background-color: #ff0000; border-color: #ff0000; box-shadow: 0 6px 16px -4px #ff0000; }


/* ---------- 9. Footer and dark mode button --------------------------- */
.footer {
  max-width: 1344px; margin: 24px auto 0; padding: 24px 12px 0;
  border-top: 1px solid var(--social-border);
  font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.theme-toggle {
  position: fixed; right: 26px; bottom: 90px; z-index: 10;
  width: 50px; height: 50px; border-radius: 15px; border: 0; cursor: pointer;
  background: #555; color: #fff; font-size: 22px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
html.dark .theme-toggle { background: #fff; color: #7d58e8; }

/* Language button (EN/TR): made by portfolio.js, sits above the dark mode button */
.lang-toggle {
  position: fixed; right: 26px; bottom: 154px; z-index: 10;
  width: 50px; height: 50px; border-radius: 15px; border: 0; cursor: pointer;
  background: #555; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font: 700 13px/1.1 var(--font-heading);
}
.lang-toggle span { opacity: .45; }
.lang-toggle span.on { opacity: 1; }
html.dark .lang-toggle { background: #fff; color: #7d58e8; }

/* Turkish text: a lang="en" element followed by a lang="tr" element are twins, only the current
   language shows. A lang="en" element on its own (a game name, for example) always shows. */
html[lang="tr"] body [lang="en"]:has(+ [lang="tr"]),
html:not([lang="tr"]) body [lang="tr"] { display: none !important; }

/* Back to top button: made by portfolio.js, shows up after scrolling down */
.back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 10;
  width: 50px; height: 50px; border-radius: 15px; border: 0; cursor: pointer;
  background: #555; color: #fff; font-size: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .2s, transform .2s, visibility .2s, background-color .2s, color .2s;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: none; }
html.dark .back-to-top { background: #fff; color: #555; }


/* ---------- 10. Mobile ----------------------------------------------- */
@media (max-width: 1000px) {
  .two-columns { grid-template-columns: minmax(0, 1fr); }
  .two-columns .right { margin-top: 24px; }
  .cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .page { padding: 0 0 32px; }
  .mobile-name { display: block; padding: 6px 12px; font: 700 32px/48px var(--font-heading); color: var(--name); }
  .columns { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; padding: 0 12px; max-width: 366px; width: 100%; margin: 0 auto; }
  .sidebar-card { text-align: center; }
  .sidebar-card ul { margin-left: 0; list-style-position: inside; }
  .content-column { margin-top: 24px; }
  .expertise { grid-template-columns: minmax(0, 1fr); }
  .footer { margin: 24px 12px 0; }
  .theme-toggle { right: 16px; bottom: 80px; }
  .lang-toggle { right: 16px; bottom: 144px; }
  .back-to-top { right: 16px; bottom: 16px; }
}