/* sefacotur.com — design system
   Concept: "tek kare karikatür" — Turkish single-panel cartoon tradition.
   Every section is a bordered panel with a caption line beneath it,
   the way a cartoon panel carries its punchline. One bold signature
   element (the ink stamp) carries all the visual risk; everything
   else stays quiet. See /CLAUDE.md for the full rationale. */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/bricolage-800-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/bricolage-800-latin-ext.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:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plexsans-400-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plexsans-400-latin-ext.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:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/plexsans-600-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/plexsans-600-latin-ext.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:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plexmono-400-latin.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/plexmono-400-latin-ext.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{
  --paper:#F7F5F0;
  --paper-raised:#FFFFFE;
  --ink:#17140F;
  --ink-soft:#58513F;
  --stamp:#C23B1F;
  --stamp-ink:#8E2B15;
  --line:#DAD5C6;
  --focus:#1C4FBF;
  --dot:rgba(23,20,15,0.06);
  --stamp-fill:rgba(194,59,31,0.07);
  --font-display:'Bricolage Grotesque', ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-body:'IBM Plex Sans', ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#131110; --paper-raised:#1A1815; --ink:#F1ECDF; --ink-soft:#B7AD95;
    --stamp:#FF7A52; --stamp-ink:#FFB199; --line:#332E24; --focus:#7FA6FF;
    --dot:rgba(241,236,223,0.06); --stamp-fill:rgba(255,122,82,0.08);
  }
}
:root[data-theme="dark"]{
  --paper:#131110; --paper-raised:#1A1815; --ink:#F1ECDF; --ink-soft:#B7AD95;
  --stamp:#FF7A52; --stamp-ink:#FFB199; --line:#332E24; --focus:#7FA6FF;
  --dot:rgba(241,236,223,0.06); --stamp-fill:rgba(255,122,82,0.08);
}
:root[data-theme="light"]{
  --paper:#F7F5F0; --paper-raised:#FFFFFE; --ink:#17140F; --ink-soft:#58513F;
  --stamp:#C23B1F; --stamp-ink:#8E2B15; --line:#DAD5C6; --focus:#1C4FBF;
  --dot:rgba(23,20,15,0.06); --stamp-fill:rgba(194,59,31,0.07);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0);
  background-size:22px 22px;
}
img{max-width:100%;display:block;}
a{color:inherit;}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

.page{max-width:840px;margin:0 auto;padding:28px 24px 80px;}
.page--wide{max-width:1040px;}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 2px 22px;border-bottom:1px solid var(--line);margin-bottom:34px;
  gap:16px;flex-wrap:wrap;
}
.nav-mark{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-0.02em;text-decoration:none;color:var(--ink);}
.nav-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.nav-links a{color:var(--ink-soft);text-decoration:none;font-size:0.92rem;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .15s ease,border-color .15s ease;}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);border-color:var(--stamp);}
.nav-links a[aria-current="page"]{color:var(--ink);border-color:var(--ink);}
.nav-right{display:flex;align-items:center;gap:10px;}
.theme-toggle,.lang-switch{
  font-family:var(--font-mono);font-size:0.78rem;letter-spacing:.04em;
  background:none;border:1px solid var(--line);color:var(--ink-soft);
  padding:5px 10px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block;
  transition:border-color .15s ease,color .15s ease;
}
.theme-toggle:hover,.lang-switch:hover,.theme-toggle:focus-visible,.lang-switch:focus-visible{border-color:var(--ink);color:var(--ink);}

/* ---------- panel system ---------- */
.panel{position:relative;background:var(--paper-raised);border:1px solid var(--line);border-radius:2px;padding:40px 36px;margin-bottom:22px;}
.panel-caption{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-soft);font-style:italic;margin:10px 4px 0;letter-spacing:.01em;}
.section-title{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-0.01em;margin:0 4px 14px;text-transform:uppercase;color:var(--ink-soft);}
.eyebrow{font-family:var(--font-mono);font-size:0.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--stamp);margin:0 0 10px;}

/* ---------- hero (home page) ---------- */
.hero{padding:56px 40px 44px;overflow:visible;}
.stamp{
  position:absolute;top:-18px;right:28px;width:118px;height:118px;
  border:2.5px solid var(--stamp);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);
  color:var(--stamp);font-family:var(--font-mono);font-size:0.72rem;font-weight:500;
  letter-spacing:.05em;text-align:center;line-height:1.35;text-transform:uppercase;
  background:var(--stamp-fill);
}
.stamp span{padding:0 10px;}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.04;letter-spacing:-0.02em;margin:0 0 20px;max-width:12ch;text-wrap:balance;}
.hero .lede{font-size:1.08rem;color:var(--ink-soft);max-width:46ch;margin:0 0 30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px;}

/* ---------- page header (inner pages) ---------- */
.page-header{padding:44px 40px 36px;}
.page-header .eyebrow{margin-bottom:12px;}
.page-header h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.08;letter-spacing:-0.02em;margin:0 0 16px;text-wrap:balance;}
.page-header .lede{font-size:1.05rem;color:var(--ink-soft);max-width:56ch;margin:0;}

/* ---------- buttons ---------- */
.btn{font-family:var(--font-body);font-weight:600;font-size:0.94rem;padding:12px 22px;border-radius:3px;text-decoration:none;display:inline-block;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease;border:1px solid transparent;cursor:pointer;}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.btn.primary:hover{background:var(--stamp);border-color:var(--stamp);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.ghost:hover{border-color:var(--ink);transform:translateY(-1px);}

/* ---------- project grid + cards ---------- */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.project{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;text-decoration:none;color:inherit;display:block;}
.project:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:3px 3px 0 var(--stamp);}
.project h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:0 0 10px;letter-spacing:-0.01em;}
.project p{margin:0 0 16px;color:var(--ink-soft);font-size:0.95rem;}
.tags{display:flex;flex-wrap:wrap;gap:8px;}
.tags span{font-family:var(--font-mono);font-size:0.72rem;color:var(--ink-soft);border:1px solid var(--line);padding:3px 8px;border-radius:2px;}

/* ---------- project detail page ---------- */
.case-meta{display:flex;flex-wrap:wrap;gap:24px;margin:0 0 8px;}
.case-meta dt{font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--stamp);margin:0 0 4px;}
.case-meta dd{margin:0;font-size:0.92rem;color:var(--ink-soft);}
.case-section{margin-bottom:0;}
.case-section h2{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-0.01em;margin:0 0 14px;}
.case-section p{margin:0 0 14px;color:var(--ink-soft);font-size:1rem;}
.case-section p:last-child{margin-bottom:0;}
.case-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.case-detail-note{background:var(--stamp-fill);border-left:3px solid var(--stamp);padding:16px 20px;border-radius:2px;font-size:0.95rem;color:var(--ink);}

/* ---------- CV page ---------- */
.cv-block{margin-bottom:0;}
.cv-block h2{font-family:var(--font-display);font-weight:800;font-size:1.15rem;letter-spacing:-0.01em;margin:0 0 16px;text-transform:uppercase;color:var(--ink-soft);}
.cv-entry{padding:16px 0;border-top:1px solid var(--line);}
.cv-entry:first-of-type{border-top:none;padding-top:0;}
.cv-entry-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:6px;}
.cv-entry-head h3{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0;}
.cv-entry-when{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-soft);white-space:nowrap;}
.cv-entry p{margin:0;color:var(--ink-soft);font-size:0.95rem;}
.skill-row{display:flex;flex-wrap:wrap;gap:8px;}
.skill-row span{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink);border:1px solid var(--line);padding:5px 10px;border-radius:2px;}

/* ---------- hobbies ---------- */
.hobby-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.hobby-label{font-family:var(--font-mono);font-size:0.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--stamp);display:block;margin-bottom:8px;}
.hobby-item h4{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0 0 8px;}
.hobby-item p{margin:0;color:var(--ink-soft);font-size:0.92rem;}
.pick-list{display:flex;flex-direction:column;gap:20px;}
.pick{padding:18px 0;border-top:1px solid var(--line);}
.pick:first-child{border-top:none;padding-top:0;}
.pick h3{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0 0 6px;}
.pick p{margin:0;color:var(--ink-soft);font-size:0.94rem;}
.pick a{color:var(--stamp);text-decoration:none;border-bottom:1px solid var(--stamp);}

/* ---------- contact ---------- */
.contact h2{font-family:var(--font-display);font-weight:800;font-size:1.6rem;margin:0 0 14px;}
.contact-links{display:flex;gap:20px;flex-wrap:wrap;margin-top:18px;}
.contact-links a{color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--stamp);padding-bottom:2px;}

/* ---------- site footer ---------- */
.site-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:24px 4px 0;margin-top:12px;color:var(--ink-soft);font-size:0.85rem;}
.site-footer a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid transparent;}
.site-footer a:hover{border-color:var(--ink-soft);}

/* ---------- reveal animation
   Default state is fully visible — CSS never hides content by itself.
   JS opts elements INTO a temporary hidden state only if it runs
   successfully, so a slow/blocked script never leaves the page blank. */
[data-reveal]{transition:opacity .6s ease,transform .6s ease;}
[data-reveal].pre-reveal{opacity:0;transform:translateY(14px);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
.stamp.is-stamped{animation:stampDown .5s cubic-bezier(.2,1.4,.4,1) .35s forwards;}
@keyframes stampDown{
  0%{opacity:0;transform:rotate(-9deg) scale(1.6);}
  70%{opacity:1;transform:rotate(-7deg) scale(0.94);}
  100%{opacity:1;transform:rotate(-9deg) scale(1);}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal].pre-reveal{opacity:1;transform:none;}
  .stamp{animation:none;}
  .project:hover,.btn:hover{transform:none;}
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .grid,.case-grid,.hobby-row{grid-template-columns:1fr;}
  .nav-links{gap:14px;}
  .hero,.page-header{padding:36px 22px 30px;}
  .stamp{right:16px;top:-14px;width:96px;height:96px;font-size:0.64rem;}
  .panel{padding:28px 22px;}
}

/* CV — PDF indirme butonu */
.btn-download{
  display:inline-block;font-weight:600;font-size:.94rem;
  color:#fff;background:var(--stamp);text-decoration:none;
  padding:11px 22px;border-radius:100px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 8px 22px var(--stamp-fill);
}
.btn-download:hover{transform:translateY(-2px);box-shadow:0 12px 28px var(--stamp-fill);}

/* ============================================================
   Premium proje kartları — 3B "deck" görünümünün klasik karşılığı.
   Kategori başlıkları + renk aksanlı, tür etiketli, madde işaretli
   kartlar. Açık/koyu tema ikisinde de çalışır (color-mix ile).
   ============================================================ */
.pcat{margin:0 0 40px;}
.pcat-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 4px 18px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.pcat-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.3rem,3vw,1.7rem);letter-spacing:-0.02em;margin:0;color:var(--ink);}
.pcat-head .pcat-tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.pcat-lede{margin:0 4px 20px;color:var(--ink-soft);font-size:1rem;max-width:64ch;line-height:1.5;}

.pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media (max-width:720px){.pcards{grid-template-columns:1fr;}}

.pcard{
  --c:var(--stamp);
  position:relative;display:flex;flex-direction:column;
  background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;
  padding:24px 24px 22px 28px;overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--c);opacity:.9;}
a.pcard:hover{transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--c) 55%, var(--line));
  box-shadow:0 14px 34px color-mix(in srgb, var(--c) 22%, transparent);}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.pcard-kind{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--c);}
.pcard-live{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;
  color:#1f9d57;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pcard-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#25c26b;
  box-shadow:0 0 0 3px color-mix(in srgb,#25c26b 22%,transparent);}
.pcard h3{font-family:var(--font-display);font-weight:800;font-size:1.32rem;letter-spacing:-0.015em;
  margin:0 0 10px;color:var(--ink);line-height:1.1;}
.pcard-desc{margin:0 0 14px;color:var(--ink-soft);font-size:.96rem;line-height:1.5;}
.pcard-points{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px;}
.pcard-points li{position:relative;padding-left:18px;color:var(--ink-soft);font-size:.9rem;line-height:1.45;}
.pcard-points li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;
  border-radius:2px;background:var(--c);}
.pcard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.pcard-tags{display:flex;flex-wrap:wrap;gap:7px;}
.pcard-tags span{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);
  border:1px solid var(--line);padding:4px 9px;border-radius:100px;
  background:color-mix(in srgb, var(--c) 8%, transparent);}
.pcard-go{font-family:var(--font-mono);font-size:.72rem;font-weight:600;color:var(--c);white-space:nowrap;}

/* CV — kategorize yetkinlik grupları (ilk bakışta okunur) */
.skill-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
@media (max-width:640px){.skill-cats{grid-template-columns:1fr;}}
.skill-cat{border:1px solid var(--line);border-radius:10px;padding:18px 18px 16px;background:var(--paper);}
.skill-cat h3{font-family:var(--font-mono);font-size:.74rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stamp);margin:0 0 12px;}
.skill-cat .skill-row{gap:8px;}
.skill-cat .skill-row span{background:var(--paper-raised);}

/* CV — kompakt kurumsal proje listesi */
.cv-projects{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media (max-width:640px){.cv-projects{grid-template-columns:1fr;}}
.cv-proj{position:relative;border:1px solid var(--line);border-radius:9px;padding:15px 16px 15px 20px;background:var(--paper);}
.cv-proj::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--stamp));border-radius:9px 0 0 9px;}
.cv-proj h4{font-family:var(--font-display);font-weight:800;font-size:1rem;margin:0 0 4px;color:var(--ink);letter-spacing:-0.01em;}
.cv-proj p{margin:0;color:var(--ink-soft);font-size:.86rem;line-height:1.4;}

/* ============ HOBİLER ============ */
.hob-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 6px;}
.hob-head h2{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:-0.02em;margin:0;color:var(--ink);}
.hob-note{color:var(--ink-soft);font-size:1rem;line-height:1.55;margin:0 0 20px;max-width:66ch;}
.hob-joke{font-family:var(--font-mono);font-size:.86rem;color:var(--stamp);font-style:italic;margin:14px 2px 0;}

/* Oyunlar — ikon rozetli kartlar */
.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media (max-width:640px){.game-grid{grid-template-columns:repeat(2,1fr);}}
.game{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
  border:1px solid var(--line);border-radius:12px;padding:20px 12px 16px;background:var(--paper);
  transition:transform .16s ease,border-color .16s ease;}
.game:hover{transform:translateY(-3px);border-color:var(--ink);}
.game-ico{font-size:2.2rem;line-height:1;}
.game-name{font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--ink);}
.game-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);letter-spacing:.03em;}

/* Karikatür — sanatçı kredisi (görsel barındırılmaz, linklenir) */
.artist-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (max-width:640px){.artist-grid{grid-template-columns:1fr;}}
.artist{border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;background:var(--paper);}
.artist h3{font-family:var(--font-display);font-weight:800;font-size:1.2rem;margin:0 0 8px;color:var(--ink);}
.artist p{margin:0 0 12px;color:var(--ink-soft);font-size:.94rem;line-height:1.5;}
.artist a{font-family:var(--font-mono);font-size:.74rem;font-weight:600;color:var(--stamp);text-decoration:none;}
.artist a:hover{text-decoration:underline;}

/* Dizi & Film — etiket bulutu */
.chip-list{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font-family:var(--font-body);font-weight:600;font-size:.88rem;color:var(--ink);
  border:1px solid var(--line);border-radius:100px;padding:8px 15px;background:var(--paper-raised);}
.chip.star{border-color:var(--stamp);color:var(--stamp);}

/* Takım — imza espri bloğu */
.team-block{text-align:center;padding:14px 0 4px;}
.team-name{font-family:var(--font-display);font-weight:800;font-size:clamp(2rem,7vw,3.4rem);
  letter-spacing:-0.02em;margin:0 0 8px;color:#f7d000;
  text-shadow:0 2px 0 #1a3a8f, 0 3px 14px rgba(26,58,143,.4);}
.team-line{color:var(--ink-soft);font-size:1.02rem;line-height:1.55;max-width:58ch;margin:0 auto;}

/* ==========================================================================
   v3 eklemeleri — portre, gezi şeridi, prensipler, ekran galerisi, CTA,
   sosyal footer, atlama bağlantısı ve baskı stili.
   Hepsi mevcut panel dilinde: keskin köşe (3px), ince çizgi, damga vurgusu.
   ========================================================================== */

/* Klavye kullanıcısı navigasyonu atlayıp içeriğe geçebilsin */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 3px 0;
  font-family:var(--font-body);font-weight:600;font-size:0.92rem;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ---------- çalışma prensipleri ---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.principle h3{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0 0 8px;letter-spacing:-0.01em;}
.principle p{margin:0;color:var(--ink-soft);font-size:0.94rem;}
.principle .principle-no{
  font-family:var(--font-mono);font-size:0.72rem;color:var(--stamp);
  letter-spacing:.12em;display:block;margin-bottom:10px;
}
@media (max-width:720px){.principles{grid-template-columns:1fr;}}

/* ---------- ekran görüntüsü galerisi ---------- */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;}
.shot{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0;}
.shot img{
  width:100%;height:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--paper-raised);
}
.shot figcaption{font-size:0.82rem;color:var(--ink-soft);line-height:1.45;}
@media (max-width:520px){.shots{grid-template-columns:repeat(2,1fr);}}

/* ---------- kapanış çağrısı ---------- */
/* Ziyaretçi ilgisinin zirvesinde (vaka çalışmasını bitirdiğinde) huni kapanmasın. */
.cta-block h2{font-family:var(--font-display);font-weight:800;font-size:1.3rem;margin:0 0 10px;letter-spacing:-0.015em;}
.cta-block p{margin:0 0 18px;color:var(--ink-soft);max-width:56ch;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

.next-project{
  font-family:var(--font-mono);font-size:0.82rem;color:var(--stamp);
  text-decoration:none;border-bottom:1px solid transparent;
}
.next-project:hover{border-color:var(--stamp);}
.case-nav{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;margin-top:26px;}

/* ---------- sosyal bağlantılar (her sayfanın altında) ---------- */
.site-footer{flex-wrap:wrap;gap:10px 18px;}
.footer-social{display:flex;gap:16px;flex-wrap:wrap;}
.footer-social a{
  font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line);
}
.footer-social a:hover{color:var(--ink);border-color:var(--stamp);}

/* ---------- "şu an ne arıyorum" ---------- */
.looking{border-left:4px solid var(--stamp);padding-left:18px;}
.looking h3{font-family:var(--font-display);font-weight:800;font-size:1.05rem;margin:0 0 8px;}
.looking p{margin:0 0 6px;color:var(--ink-soft);font-size:0.96rem;}
.looking .looking-meta{font-family:var(--font-mono);font-size:0.78rem;color:var(--ink-soft);}

/* ---------- baskı ---------- */
/* CV'nin PDF çıktısı buradan üretiliyor. Koyu tema baskıda hem okunmaz hem
   mürekkep yakar; bu yüzden print içinde token seti açık değerlere sabitlenir. */
@media print{
  :root, :root[data-theme="dark"], :root[data-theme="light"]{
    --paper:#FFFFFF; --paper-raised:#FFFFFF; --ink:#111111; --ink-soft:#3A3A3A;
    --stamp:#B03A1E; --stamp-ink:#8E2B15; --line:#CFCFCF;
    --dot:transparent; --stamp-fill:transparent;
  }
  @page{ margin:14mm 13mm; }
  html,body{background:#fff !important;color:#111 !important;}
  body{background-image:none !important;font-size:10.5pt;line-height:1.5;}
  .nav,.site-footer,.gezi-strip,.cta-block,.btn,.btn-download,.theme-toggle,
  .lang-switch,.skip-link,.case-nav,.shots,.hero-portrait,.stamp{display:none !important;}
  .page{max-width:none;padding:0;}
  .panel{border:none !important;background:none !important;padding:0 0 10pt !important;
         box-shadow:none !important;break-inside:avoid;}
  .panel-caption{display:none;}
  .cv-block{border-top:1px solid #CFCFCF;padding-top:8pt !important;}
  h1{font-size:19pt;margin-bottom:6pt;}
  h2{font-size:12pt;}
  h3{font-size:11pt;}
  .lede{font-size:11pt;}
  a{text-decoration:none;color:#111;}
  h1,h2,h3{break-after:avoid;}
  [data-reveal],.pre-reveal{opacity:1 !important;transform:none !important;}
}

/* Portre panelin altına taşıyor; alt not onun altında kalmasın. */
@media (min-width:641px){
  .hero .panel-caption,
  .page-header .panel-caption{max-width:62%;}
}

/* ==========================================================================
   Hero v4 — "seçim afişi" görüntüsünden karikatür paneline
   Cut-out ayakta duran figür + dönen yuvarlak damga kombinasyonu afiş gibi
   duruyordu. Yerine: künye satırı (damganın işini bilgiyle yapıyor), çerçeveli
   duotone büst (gazete panelindeki basılı fotoğraf) ve gerçek 3B önizleme.
   ========================================================================== */

/* ---------- marka kilidi (nav) ---------- */
.nav-mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);}
.mark-badge{
  flex:0 0 auto;width:30px;height:30px;border-radius:5px;
  border:1.5px solid var(--stamp);color:var(--stamp);
  font-family:var(--font-display);font-weight:800;font-size:.82rem;letter-spacing:-0.04em;
  display:flex;align-items:center;justify-content:center;
  background:var(--stamp-fill);
  transition:background .18s ease,color .18s ease;
}
.nav-mark:hover .mark-badge{background:var(--stamp);color:var(--paper);}
.mark-text{display:flex;flex-direction:column;line-height:1;}
.mark-name{font-family:var(--font-display);font-weight:800;font-size:1.06rem;letter-spacing:-0.02em;}
.mark-role{
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:4px;
}
@media (max-width:560px){ .mark-role{display:none;} .mark-name{font-size:.98rem;} }

/* ---------- hero künyesi ---------- */
/* Dönen "PRODUCT OWNER" damgasının yerini alıyor: aynı alanı kaplıyor ama
   dekor yerine bilgi taşıyor (unvan · şirket · süre). */
.hero-eyebrow{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 20px;
}
.hero-eyebrow::before{
  content:"";width:26px;height:2px;background:var(--stamp);flex:0 0 auto;
}
.hero-eyebrow b{color:var(--stamp);font-weight:500;}

.hero-split{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,40px);align-items:start;}
.hero-split .hero-copy{min-width:0;}

/* ---------- portre paneli ---------- */
/* Kendi çerçevesi ve altında notu olan bir kare: sitenin "her bölüm bir
   karikatür paneli" dilinin birebir uygulaması. */
.portrait-panel{width:clamp(168px,20vw,224px);flex:0 0 auto;}
.portrait-panel img{
  width:100%;height:auto;display:block;
  border:1px solid var(--line);border-radius:3px;
  background:#1C1814;
}
.portrait-cap{
  font-family:var(--font-mono);font-size:.66rem;line-height:1.55;color:var(--ink-soft);
  margin-top:9px;padding-left:9px;border-left:2px solid var(--stamp);
}
@media (max-width:700px){
  .hero-split{grid-template-columns:1fr;}
  .portrait-panel{width:150px;}
}

/* ---------- 3B gezi daveti (önizlemeli) ---------- */
/* Oyun artık kapı değil ödül — ama görünmez de olmamalı: ana sayfada,
   ilk ekranda, gerçek bir dünya karesiyle duruyor. */
.gezi-hero{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:var(--paper-raised);
}
.gezi-shot{position:relative;display:block;min-height:170px;background:#141019;}
.gezi-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.gezi-shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent 55%, color-mix(in srgb, var(--paper-raised) 88%, transparent) 100%);
  pointer-events:none;
}
.gezi-body{padding:22px 24px;display:flex;flex-direction:column;justify-content:center;gap:10px;}
.gezi-body .gezi-tag{
  font-family:var(--font-mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stamp);
}
.gezi-body h3{font-family:var(--font-display);font-weight:800;font-size:1.14rem;margin:0;letter-spacing:-0.015em;}
.gezi-body p{margin:0;color:var(--ink-soft);font-size:.92rem;}
.gezi-body .btn{align-self:flex-start;margin-top:4px;}
@media (max-width:640px){
  .gezi-hero{grid-template-columns:1fr;}
  .gezi-shot{min-height:132px;}
  .gezi-shot::after{background:linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--paper-raised) 85%, transparent) 100%);}
}

/* Hero iki sütuna geçince eski 12ch kısıtı başlığı 6 satıra bölüyordu;
   genişliği artık ızgara sütunu belirliyor. Punto da biraz kısıldı ki
   3B gezi kartı ilk ekranda kalsın. */
.hero{padding:44px 36px 36px;}
.hero-split .hero-copy h1{max-width:none;font-size:clamp(1.9rem,3.9vw,2.85rem);margin-bottom:18px;}
.hero-split .hero-copy .lede{max-width:52ch;margin-bottom:24px;}
.hero-split .hero-copy .panel-caption{max-width:none;margin-top:20px;}
.gezi-hero{margin-top:22px;}

/* Kartın tamamı bağlantı: varsayılan link altı çizgisi başlıkları bozuyordu. */
.gezi-hero{text-decoration:none;color:inherit;transition:border-color .18s ease,box-shadow .18s ease;}
.gezi-hero:hover{border-color:var(--ink);box-shadow:3px 3px 0 var(--stamp);}
.gezi-hero h3,.gezi-hero p,.gezi-hero .gezi-tag{text-decoration:none;}
/* Kare, karakterin ve vitrinin olduğu üst banda göre kırpılsın. */
.gezi-shot img{object-position:center 38%;}
.gezi-hero:hover .btn.primary{background:var(--stamp);border-color:var(--stamp);}
.gezi-hero{margin-bottom:34px;}

/* Künye satırı sarınca "·" satır sonunda öksüz kalıyordu; ayırıcı artık
   kendinden SONRAKİ öğeye bağlı, yani onunla birlikte alt satıra iniyor. */
.hero-eyebrow{gap:4px 12px;}
.hero-eyebrow > *{display:inline-flex;align-items:center;}
.hero-eyebrow > *:not(:first-child)::before{
  content:"·";margin-right:12px;color:var(--line);font-weight:400;
}
@media (max-width:520px){ .hero-eyebrow{font-size:.66rem;letter-spacing:.12em;} }
/* Dar ekranda künye tek satırda kalsın: uzun unvan kısasıyla değişiyor. */
.hero-eyebrow .ey-short{display:none;}
@media (max-width:560px){
  .hero-eyebrow .ey-long{display:none;}
  .hero-eyebrow .ey-short{display:inline-flex;}
  .hero-eyebrow{gap:4px 10px;}
  .hero-eyebrow > *:not(:first-child)::before{margin-right:10px;}
}
/* Uzun varyant gizlense de DOM'da kaldığı için kısa varyant :not(:first-child)
   sayılıyor ve satır başında öksüz bir "·" çıkıyordu. */
@media (max-width:560px){ .hero-eyebrow .ey-short::before{content:none;} }
/* 390px'te üç öğe tek satıra sığmıyor; süre bilgisi zaten giriş metninde
   ("2017'den beri") geçiyor, dar ekranda künyeden düşüyor. */
@media (max-width:560px){ .hero-eyebrow > span:last-child{display:none;} }

/* <figure> tarayıcı varsayılanı olarak margin:1em 40px taşıyor; ızgarada bu
   sütunu 224px yerine 304px yapıp metin sütunundan 80px çalıyordu. */
.portrait-panel{margin:0;}

/* Yayına çıkmak üzere olan ürünler için ikinci durum rozeti.
   "Canlı" yeşilinden ayrı bir renk: mağaza incelemesindeki bir uygulamayı
   canlı göstermek, biri kontrol ettiğinde güveni zedeler. */
.pcard-soon{font-family:var(--font-mono);font-size:.68rem;font-weight:600;letter-spacing:.04em;
  color:#b07a12;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.pcard-soon::before{content:"";width:7px;height:7px;border-radius:50%;background:#e0a33c;
  box-shadow:0 0 0 3px color-mix(in srgb,#e0a33c 22%,transparent);}
@media (prefers-color-scheme:dark){ .pcard-soon{color:#dfab4e;} }
:root[data-theme="dark"] .pcard-soon{color:#dfab4e;}
:root[data-theme="light"] .pcard-soon{color:#b07a12;}

/* Hero'da 3B moda küçük bir davet: kart aşağıda zaten var ama ziyaretçinin
   ilk baktığı yerde de bir kapı olsun. Butonlarla yarışmasın diye düz metin. */
.hero-alt{
  margin:14px 0 0;font-size:.92rem;color:var(--ink-soft);
}
.hero-alt a{
  color:var(--stamp);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--stamp) 40%, transparent);
}
.hero-alt a:hover{border-bottom-color:var(--stamp);}

/* ---------- sayfa başlığı ölçüsü ----------
   .page-header h1'in genişlik sınırı yoktu: başlık paneli kenardan kenara
   tek satırda kat edip inceliyor, altındaki 56ch'lik metinle arasında
   tırtıklı bir sağ kenar bırakıyordu. Ölçü metinle hizalanınca başlık iki
   satıra oturuyor ve blok tek bir sütun gibi okunuyor. */
.page-header h1{max-width:24ch;}