:root{
  --ink:#14181D;
  --ink-70:#48535D;
  --ink-45:#79838C;
  --paper:#E4E8EA;
  --surface:#F1F3F4;
  --rule:#C7CED3;
  --amber:#F2A20C;
  --teal:#0B5D5F;
  --teal-deep:#073A3C;
  --maxw:1180px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right, rgba(20,24,29,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,24,29,.055) 1px, transparent 1px),
    linear-gradient(to right, rgba(20,24,29,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,24,29,.10) 1px, transparent 1px);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px;
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
[v-cloak]{display:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* ---------- typography ---------- */
.display{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118,"wght" 800;letter-spacing:-.02em;line-height:.92;text-transform:uppercase;margin:0}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);display:flex;align-items:center;gap:12px;margin:0 0 18px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--ink-45);flex:none}
.eyebrow b{font-weight:600;color:var(--teal)}
h2.sec-title{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 700;font-size:clamp(28px,4.6vw,46px);letter-spacing:-.015em;line-height:1;text-transform:uppercase;margin:0 0 34px;white-space:pre-line}
p{margin:0 0 16px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;background:rgba(228,232,234,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.head-in{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand-name{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.nav{margin-left:auto;display:flex;gap:20px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-70);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--amber);text-decoration:none}
.lang{flex:none;display:flex;border:1px solid var(--ink);font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.1em}
.lang button{background:transparent;border:0;color:var(--ink-70);padding:6px 10px;cursor:pointer;font:inherit;letter-spacing:inherit}
.lang button.on{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero{padding:clamp(46px,7vw,86px) 0 clamp(30px,4vw,44px)}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(46px,8.6vw,104px)}
.hero h1 span{display:block}
.hero h1 .n2{color:var(--teal)}
.role-line{font-family:"IBM Plex Mono",monospace;font-size:clamp(12px,1.6vw,14px);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);margin:22px 0 20px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.role-line i{width:6px;height:6px;background:var(--amber);border-radius:50%;font-style:normal;display:inline-block}
.hero-lead{font-size:clamp(16px,1.9vw,18.5px);color:var(--ink-70);max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:13px 22px;border:1px solid var(--ink);display:inline-flex;align-items:center;gap:9px;cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff}
.btn-ghost{color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- stats ---------- */
.stats{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:rgba(241,243,244,.7)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 0 24px;border-right:1px solid var(--rule)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(26px,3.6vw,40px);line-height:1;letter-spacing:-.02em}
.stat span{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);display:block;margin-top:9px}

/* ---------- sections ---------- */
section{padding:clamp(54px,7.5vw,96px) 0}
.summary-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px)}
.summary-grid p{color:var(--ink-70)}
.facts{border-left:2px solid var(--ink);padding-left:22px;margin:0}
.fact{padding:13px 0;border-bottom:1px dotted var(--rule)}
.fact:last-child{border-bottom:0}
.fact dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45)}
.fact dd{margin:3px 0 0;font-weight:500}

/* ---------- skills ---------- */
.skill-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.skill{background:var(--surface);padding:26px 24px 24px}
.skill h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 700;font-size:17px;text-transform:uppercase;margin:0 0 4px}
.skill .idx{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--amber);letter-spacing:.14em;display:block;margin-bottom:12px}
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none}
.tags li{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-70);border:1px solid var(--rule);padding:4px 9px;background:var(--paper)}

/* ---------- timeline ---------- */
.tl{position:relative;padding-left:clamp(26px,4vw,52px)}
.tl::before{content:"";position:absolute;left:6px;top:10px;bottom:10px;width:1px;background:var(--rule)}
.job{position:relative;padding-bottom:44px}
.job:last-child{padding-bottom:0}
.job::before{content:"";position:absolute;left:calc(-1 * clamp(26px,4vw,52px));top:8px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.job.current::before{background:var(--amber);box-shadow:0 0 0 5px rgba(242,162,12,.22)}
.job-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:4px}
.job-role{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(19px,2.3vw,24px);text-transform:uppercase}
.job-co{font-weight:600;color:var(--teal)}
.job-date{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.08em;color:var(--ink-45);margin-left:auto;white-space:nowrap}
.job-ctx{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-45);margin:0 0 14px;line-height:1.5}
.job ul{margin:0;padding:0;list-style:none}
.job li{position:relative;padding-left:20px;margin-bottom:9px;color:var(--ink-70)}
.job li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--amber)}

/* ---------- projects ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.proj{border:1px solid var(--ink);background:var(--surface);padding:26px 24px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.proj:hover{transform:translateY(-3px);box-shadow:8px 8px 0 rgba(20,24,29,.12)}
.proj .kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:12px}
.proj h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 106,"wght" 700;font-size:19px;margin:0 0 10px;text-transform:uppercase}
.proj p{color:var(--ink-70);font-size:15px;margin:0}
.proj .out{margin-top:16px;padding-top:14px;border-top:1px dotted var(--rule);font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink)}

/* ---------- education ---------- */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px)}
.list-clean{list-style:none;margin:0;padding:0}
.list-clean li{padding:15px 0;border-bottom:1px solid var(--rule);display:flex;gap:16px;align-items:baseline}
.list-clean li:first-child{border-top:1px solid var(--rule)}
.list-clean .t{font-weight:600}
.list-clean .s{display:block;color:var(--ink-45);font-size:14.5px;font-weight:400}
.list-clean .y{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ink-45);white-space:nowrap}
.col-label{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);margin:0 0 10px}

/* ---------- logo kit ---------- */
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.kit-cell{background:var(--surface);padding:30px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;min-height:210px}
.kit-cell.dark{background:var(--ink)}
.kit-cell.amber{background:var(--amber)}
.kit-cap{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-45)}
.kit-cell.dark .kit-cap{color:#8d979f}
.kit-cell.amber .kit-cap{color:#6b4802}
.kit-note{margin-top:22px;font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-45);line-height:1.7}

/* ---------- contact ---------- */
.contact{background:var(--ink);color:var(--paper)}
.contact .eyebrow{color:#7d8892}
.contact .eyebrow::before{background:#7d8892}
.contact h2.sec-title{color:var(--paper)}
.contact a{color:var(--paper)}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px}
.cline{margin:0}
.cline dt{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#7d8892;margin-bottom:6px}
.cline dd{margin:0;font-size:17px;font-weight:500}
.cline dd a:hover{color:var(--amber);text-decoration:none}
.foot{border-top:1px solid #2a3138;margin-top:52px;padding:22px 0 40px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:12px;color:#7d8892}
.foot button{background:none;border:0;color:#7d8892;font:inherit;cursor:pointer;padding:0}
.foot button:hover{color:var(--amber)}

/* ---------- hero diagram ---------- */
.topo{width:100%;height:auto}
.topo .link{stroke:var(--ink);stroke-width:1.1;opacity:.42}
.topo .ring{fill:none;stroke:var(--ink);opacity:.14;stroke-dasharray:3 6}
.topo .node{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.topo .lbl{font-family:"IBM Plex Mono",monospace;font-size:12px;fill:var(--ink-70);letter-spacing:.06em}
.topo .core{fill:var(--ink)}
.topo .core-txt{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 800;font-size:23px;fill:var(--paper);letter-spacing:.06em}
.topo .core-sub{font-family:"IBM Plex Mono",monospace;font-size:9px;fill:var(--amber);letter-spacing:.18em}
.pkt{fill:var(--amber);animation:flow 3.4s linear infinite}
@keyframes flow{from{offset-distance:0%}to{offset-distance:100%}}
.pulse{animation:pulse 3.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.14}50%{opacity:.34}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}


/* =====================================================================
   HAREKET
   ===================================================================== */
.scroll-line{height:2px;background:var(--amber);transform-origin:0 50%;transform:scaleX(0);
  transition:transform .12s linear;will-change:transform}
body.no-motion .scroll-line{display:none}

/* giriş animasyonu: sayfa yüklenince sırayla belirir */
.hero .eyebrow,.hero h1,.hero .role-line,.hero .hero-lead,.hero .cta-row,.hero-art{
  opacity:0;transform:translateY(18px)}
body.loaded .hero .eyebrow{animation:rise .7s .05s both}
body.loaded .hero h1{animation:rise .8s .12s both}
body.loaded .hero .role-line{animation:rise .7s .26s both}
body.loaded .hero .hero-lead{animation:rise .7s .34s both}
body.loaded .hero .cta-row{animation:rise .7s .44s both}
body.loaded .hero-art{animation:rise .9s .3s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
body.no-motion .hero .eyebrow,body.no-motion .hero h1,body.no-motion .hero .role-line,
body.no-motion .hero .hero-lead,body.no-motion .hero .cta-row,body.no-motion .hero-art{
  opacity:1;transform:none;animation:none}

/* kart/etiket kademeli görünme */
.rv .stg{opacity:0;transform:translateY(14px)}
.rv.in .stg{animation:rise .55s both;animation-delay:var(--d,0ms)}
body.no-motion .rv .stg{opacity:1;transform:none;animation:none}

.skill,.proj{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.skill:hover{transform:translateY(-3px)}
.tags li{transition:border-color .2s ease,color .2s ease,transform .2s ease}
.tags li:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-1px)}
.job::before{transition:transform .3s ease,box-shadow .3s ease}
.job:hover::before{transform:scale(1.25)}
.btn,.chip{will-change:transform}

/* =====================================================================
   TEKNOLOJİ ŞERİDİ
   ===================================================================== */
.marquee{margin-top:38px;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:rgba(241,243,244,.6);padding:16px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-row{overflow:hidden;padding:5px 0}
.mq-track{display:flex;gap:12px;width:max-content;animation:slide 46s linear infinite}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:58s}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee.still{-webkit-mask-image:none;mask-image:none}
.marquee.still .mq-track{animation:none;flex-wrap:wrap;width:auto}
body.no-motion .mq-track{animation:none;flex-wrap:wrap;width:auto}
body.no-motion .marquee{-webkit-mask-image:none;mask-image:none}

.chip{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 18px;background:var(--paper);border:1px solid var(--rule);
  font-family:"IBM Plex Mono",monospace;font-size:13px;letter-spacing:.02em;color:var(--ink-70);
  text-decoration:none;transition:border-color .2s ease,color .2s ease,transform .2s ease}
.chip:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);text-decoration:none}
.chip img{height:26px;width:auto;max-width:130px;object-fit:contain;display:block}

/* =====================================================================
   İLETİŞİM FORMU
   ===================================================================== */
.contact-split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,64px);align-items:start}
.form-card{border:1px solid #2c343c;background:#191e24;padding:clamp(20px,3vw,28px)}
.form-title{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 700;
  font-size:19px;text-transform:uppercase;margin:0 0 8px;color:var(--paper)}
.form-note{font-size:14px;color:#939da6;margin:0 0 20px;line-height:1.6}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f{margin-bottom:14px}
.f label{display:block;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:#7d8892;margin-bottom:6px}
.f input,.f textarea{width:100%;font:inherit;font-size:15px;padding:12px 13px;border:1px solid #333c45;
  background:#11151a;color:var(--paper);border-radius:0;box-sizing:border-box;transition:border-color .2s ease}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--amber)}
.f textarea{resize:vertical;min-height:110px;line-height:1.55}
.form-card .btn{border-color:var(--paper);background:var(--paper);color:var(--ink);width:100%;justify-content:center}
.form-card .btn:hover{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.form-card .btn[disabled]{opacity:.6;cursor:default;transform:none}
.form-err{font-family:"IBM Plex Mono",monospace;font-size:12px;color:#ff9d8a;margin:0 0 12px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-done{display:flex;gap:14px;align-items:flex-start;padding:6px 0}
.form-done .tick{flex:none;width:34px;height:34px;border-radius:50%;background:var(--amber);color:var(--ink);
  display:grid;place-items:center;font-size:18px;font-weight:700}
.form-done p{margin:0;color:var(--paper);font-size:15px;line-height:1.6}

/* =====================================================================
   MOBİL MENÜ
   ===================================================================== */
.burger{display:none;flex:none;width:42px;height:42px;background:none;border:1px solid var(--ink);
  cursor:pointer;padding:0;position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);
  transition:transform .28s ease,opacity .2s ease,top .28s ease}
.burger span:nth-child(1){top:13px}
.burger span:nth-child(2){top:20px}
.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){top:20px;transform:rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){top:20px;transform:rotate(-45deg)}
.nav-scrim{position:fixed;inset:0;background:rgba(20,24,29,.45);z-index:40;animation:fadein .25s both}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* =====================================================================
   TABLET VE TELEFON
   ===================================================================== */

/* geniş tablet / küçük dizüstü */
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr .9fr;gap:32px}
  .nav{gap:16px}
  .nav a{font-size:11.5px;letter-spacing:.05em}
}

/* tablet */
@media (max-width:900px){
  .hero{padding-top:40px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero-art{order:-1;max-width:400px;margin:0 auto}
  .hero h1{font-size:clamp(42px,10vw,74px)}
  .hero-lead{max-width:none}
  .summary-grid{grid-template-columns:1fr;gap:30px}
  .facts{border-left:0;border-top:2px solid var(--ink);padding:18px 0 0}
  .two-col{grid-template-columns:1fr;gap:34px}
  .contact-split{grid-template-columns:1fr;gap:34px}
  .stats-in{grid-template-columns:1fr 1fr}
  .stat{padding:20px 0;border-right:1px solid var(--rule)}
  .stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .skill-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .kit{grid-template-columns:1fr 1fr}
}

/* menüyü hamburgere çevir */
@media (max-width:820px){
  .head-in{gap:12px}
  .burger{display:block}
  .nav{position:fixed;top:66px;left:0;right:0;z-index:45;margin:0;
    flex-direction:column;gap:0;background:var(--surface);border-bottom:1px solid var(--rule);
    box-shadow:0 18px 40px rgba(20,24,29,.16);overflow:hidden;
    max-height:0;opacity:0;visibility:hidden;transition:max-height .32s ease,opacity .22s ease,visibility .32s}
  .nav.open{max-height:70vh;opacity:1;visibility:visible;overflow-y:auto}
  .nav a{padding:15px var(--pad);border-bottom:1px solid var(--rule);border-left:3px solid transparent;
    font-size:13px;letter-spacing:.1em;white-space:normal}
  .nav a:hover{border-bottom-color:var(--rule);border-left-color:var(--amber);background:var(--paper)}
  .lang{margin-left:auto}
}

/* telefon */
@media (max-width:620px){
  body{font-size:15.5px;line-height:1.6}
  .site-head{position:sticky}
  .head-in{height:60px}
  .nav{top:60px}
  .brand-name{font-size:13px}
  .hero{padding:26px 0 18px}
  .hero h1{font-size:clamp(36px,12vw,54px);line-height:.95}
  .hero-art{max-width:100%}
  .role-line{font-size:11px;letter-spacing:.1em;gap:8px;margin:16px 0 14px}
  .hero-lead{font-size:15.5px}
  .cta-row{gap:10px}
  .btn{padding:14px 18px;font-size:12px;flex:1 1 auto;justify-content:center;min-height:48px}
  section{padding:44px 0}
  h2.sec-title{font-size:clamp(26px,8vw,34px)}
  .eyebrow{font-size:11px;letter-spacing:.14em}
  .eyebrow::before{width:20px}
  .stats-in{grid-template-columns:1fr}
  .stat{border-right:0;border-bottom:1px solid var(--rule);padding:16px 0}
  .stat:last-child{border-bottom:0}
  .stat b{font-size:30px}
  .skill-grid{grid-template-columns:1fr}
  .skill{padding:20px 18px}
  .tl{padding-left:22px}
  .tl::before{left:4px}
  .job::before{left:-22px;width:11px;height:11px;top:7px}
  .job{padding-bottom:34px}
  .job-role{font-size:18px}
  .job-date{margin-left:0;width:100%;order:3}
  .job li{padding-left:16px;font-size:15px}
  .proj-grid{grid-template-columns:1fr;gap:14px}
  .proj:hover{transform:none;box-shadow:none}
  .list-clean li{flex-wrap:wrap;padding:13px 0}
  .list-clean .y{margin-left:0;width:100%;margin-top:4px}
  .kit{grid-template-columns:1fr}
  .kit-cell{min-height:170px;padding:24px 18px}
  .contact-grid{grid-template-columns:1fr;gap:20px}
  .cline dd{font-size:16px;word-break:break-word}
  .f-row{grid-template-columns:1fr;gap:0}
  .foot{margin-top:34px;padding:18px 0 30px;flex-direction:column;align-items:flex-start;gap:8px}
  .marquee{margin-top:26px;padding:12px 0}
  .chip{min-height:42px;padding:9px 14px;font-size:12px}
  .chip img{height:22px;max-width:104px}
  .mq-track{gap:9px}
}

/* çok küçük ekran */
@media (max-width:380px){
  :root{--pad:16px}
  .hero h1{font-size:34px}
  .btn{width:100%}
}

/* yatay telefon / kısa ekran */
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:20px 0}
  .nav.open{max-height:60vh}
}

/* dokunmatik cihazlarda hover kaynaklı takılmayı önle */
@media (hover:none){
  .skill:hover,.proj:hover,.chip:hover{transform:none;box-shadow:none}
  .marquee:hover .mq-track{animation-play-state:running}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rv{opacity:1;transform:none}
  .rv .stg{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .mq-track{animation:none;flex-wrap:wrap;width:auto}
}

@media print{.site-head,.hero-art,.cta-row,.kit,.admin-fab,.drawer,.scrim{display:none}body{background:#fff}}