/* ============================================================
   Mehmet Selim Şenoğlu — Portfolio
   ============================================================ */

:root{
  --bg:            #0a0a0c;
  --bg-alt:        #0e0e12;
  --surface:       #131318;
  --surface-2:     #17171e;
  --line:          rgba(255,255,255,.08);
  --line-strong:   rgba(255,255,255,.16);

  --text:          #e8e8ec;
  --text-dim:      #a0a0ab;
  --text-faint:    #6c6c78;

  --accent:        #e8952f;
  --accent-2:      #f7c26b;
  --accent-soft:   rgba(232,149,47,.12);

  --radius:        14px;
  --radius-sm:     10px;
  --nav-h:         68px;

  --ease:          cubic-bezier(.22,.61,.36,1);
  --maxw:          1180px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* KRİTİK: [hidden] öznitelikli her eleman, üzerinde display:flex/grid
   tanımlayan bir class olsa bile (ör. .project-modal, .cropper-modal)
   kesin olarak gizlensin. Aksi halde tarayıcının varsayılan
   `[hidden]{display:none}` kuralı ile bizim class kuralımız EŞİT
   özgüllükte olduğundan, sırada sonra gelen kural kazanıp elemanı görünmez
   ama hâlâ tıklamaları yutan (position:fixed; inset:0) bir katman olarak
   ekranda bırakabiliyor — sitede "hiçbir şeye tıklanamama" bunun sonucu. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-.02em; font-weight:700; }
p{ margin:0 0 1rem; }
ul{ margin:0; padding:0; list-style:none; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
}

::selection{ background:var(--accent); color:#0a0a0c; }

/* scrollbar */
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#2a2a33; border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a45; }

/* ============================================================
   NAVBAR
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(10,10,12,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.nav.is-scrolled{
  background:rgba(10,10,12,.88);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:100%; max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.nav__brand{
  font-size:.82rem; font-weight:600; letter-spacing:.01em;
  color:var(--text); white-space:nowrap;
}
.nav__brand-sep{ color:var(--text-faint); margin-inline:2px; }
.nav__brand-role{ color:var(--text-dim); font-weight:400; }

.nav__links{ display:flex; align-items:center; gap:clamp(14px,2.2vw,30px); }
.nav__link{
  position:relative;
  font-size:.85rem; font-weight:500;
  color:var(--text-dim);
  padding:6px 0;
  transition:color .25s var(--ease);
}
.nav__link::after{
  content:''; position:absolute; left:50%; bottom:0;
  width:0; height:2px; border-radius:2px;
  background:var(--accent);
  transform:translateX(-50%);
  transition:width .3s var(--ease);
}
.nav__link:hover{ color:var(--text); }
.nav__link.is-active{ color:var(--text); }
.nav__link.is-active::after{ width:18px; }

.nav__burger{
  display:none;
  width:40px; height:40px;
  background:none; border:1px solid var(--line);
  border-radius:9px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  padding:0;
}
.nav__burger span{
  display:block; width:17px; height:1.6px; border-radius:2px;
  background:var(--text);
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(22px,3.5vh,44px);
  padding:calc(var(--nav-h) + 20px) 0 60px;
  overflow:hidden;
  background:radial-gradient(130% 90% at 50% -10%, #101320 0%, #0a0a0c 62%);
}

/* ---------- ortam ---------- */
.scene{ position:absolute; inset:0; z-index:1; pointer-events:none; }

.scene__glow{ position:absolute; border-radius:50%; filter:blur(50px); }
.scene__glow--blue{
  left:-16%; top:4%;
  width:62vw; height:62vw; max-width:840px; max-height:840px;
  background:radial-gradient(circle, rgba(70,120,255,.28), rgba(70,120,255,.07) 45%, transparent 70%);
}
.scene__glow--purple{
  right:-14%; top:-6%;
  width:56vw; height:56vw; max-width:780px; max-height:780px;
  background:radial-gradient(circle, rgba(150,85,255,.28), rgba(150,85,255,.07) 45%, transparent 70%);
}
.scene__waves{
  position:absolute; inset:0; width:100%; height:100%;
  filter:blur(1.2px) drop-shadow(0 0 14px rgba(90,130,255,.5));
  opacity:.7;
}
.scene__desk{
  position:absolute; left:0; right:0; bottom:0; height:30%;
  background:
    linear-gradient(to bottom, rgba(28,20,14,0) 0%, rgba(34,24,17,.9) 34%, rgba(10,8,6,1) 100%),
    linear-gradient(100deg, rgba(120,80,45,.16), rgba(60,40,25,.05) 60%);
}
.scene__spill{
  position:absolute; left:50%; bottom:8%; transform:translateX(-50%);
  width:min(70vw,860px); height:16vh;
  background:radial-gradient(ellipse at center, rgba(232,149,47,.16), transparent 68%);
  filter:blur(24px);
}
/* ---------- MacBook ---------- */
.stage{
  position:relative; z-index:2;
  width:100%;
  display:flex; justify-content:center;
  padding-inline:16px;
}
.mac{
  --w:max(280px, min(88vw, 940px, calc((100svh - 300px) * 1.28)));
  width:var(--w);
  position:relative;
  /* Uzak ama yüksek bakış açısı: kapalı kapak tabanın üstünde ince bir
     dilim gibi dursun, genişliği şişmesin. */
  perspective:calc(var(--w)*7.2);
  perspective-origin:50% -85%;
}

/* ---- kapak ---- */
.mac__lid{
  position:relative;
  width:100%;
  aspect-ratio:16/10.5;
  /* açılış animasyonu: kapalıyken klavyenin üstünde, menteşeden öne açılır */
  z-index:2;
  transform-style:preserve-3d;
  transform-origin:bottom center;
  transform:rotateX(-88deg);
  will-change:transform;
  animation:lidOpen 1.5s cubic-bezier(.45,.05,.2,1) .35s forwards;
  padding:calc(var(--w)*.0125) calc(var(--w)*.0125) calc(var(--w)*.026);
  border-radius:calc(var(--w)*.0165) calc(var(--w)*.0165) calc(var(--w)*.004) calc(var(--w)*.004);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) calc(var(--w)*.004)),
    linear-gradient(162deg,#54575f 0%,#2b2d33 18%,#1c1e23 55%,#212328 78%,#3c3f47 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 calc(var(--w)*-.0015) 0 rgba(0,0,0,.6),
    0 calc(var(--w)*.028) calc(var(--w)*.06) calc(var(--w)*-.03) rgba(0,0,0,.85);
}
/* kapağın alüminyum sırtı — yalnızca kapak kapalıyken görünür */
.mac__lidBack{
  position:absolute; inset:0;
  border-radius:inherit;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  background:linear-gradient(200deg,#42454e 0%,#2a2c33 38%,#1d1f24 72%,#33363d 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}
/* ekranı çevreleyen siyah çerçeve */
.mac__screen{
  position:relative;
  backface-visibility:hidden;
  width:100%; height:100%;
  border-radius:calc(var(--w)*.0075);
  overflow:hidden;
  background:#050506;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,1),
    inset 0 0 calc(var(--w)*.02) rgba(0,0,0,.9);
}
/* kamera çentiği */
.mac__notch{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:calc(var(--w)*.09); height:calc(var(--w)*.016);
  border-radius:0 0 calc(var(--w)*.005) calc(var(--w)*.005);
  background:#050506;
  z-index:4;
}
.mac__notch::after{
  content:''; position:absolute; left:50%; top:38%; transform:translateX(-50%);
  width:calc(var(--w)*.0045); aspect-ratio:1; border-radius:50%;
  background:#15161a;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
/* cam yansıması */
.mac__glare{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 20%, transparent 40%),
    radial-gradient(120% 60% at 80% -10%, rgba(150,120,255,.07), transparent 60%);
}
/* ekranın altındaki çene: gerçek MacBook'ta model adının yazdığı yer */
/* çene şeridi = .mac__lid'in alt padding'i (~.026*w); metni bu şeridin
   tam ortasına oturt: line-height:1 ile kutu yüksekliğini font-size'a
   sabitleyip kalan boşluğu iki tarafa eşit dağıt */
.mac__brand{
  position:absolute; left:50%; bottom:calc(var(--w)*.00725); transform:translateX(-50%);
  font-size:calc(var(--w)*.0115); line-height:1; letter-spacing:.04em;
  color:#6c6f77;
  z-index:2;
}

/* ---- ekran içeriği ---- */
.mini{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--w)*.03) calc(var(--w)*.06);
  text-align:left;
  overflow:hidden;
}
.mini__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:calc(var(--w)*.05) calc(var(--w)*.05);
  mask-image:radial-gradient(ellipse 85% 95% at 32% 50%, #000 18%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 85% 95% at 32% 50%, #000 18%, transparent 78%);
}
.mini__glow{
  position:absolute; left:-18%; top:2%;
  width:62%; aspect-ratio:1;
  background:radial-gradient(circle, rgba(232,149,47,.10), transparent 60%);
  filter:blur(calc(var(--w)*.025));
}
.mini__hi,.mini__name,.mini__role{ position:relative; margin:0; }
.mini__hi{ font-size:calc(var(--w)*.038); font-weight:300; color:#b6b6c0; line-height:1.3; }
.mini__name{
  font-size:calc(var(--w)*.062); font-weight:800; line-height:1.18;
  background:linear-gradient(96deg,var(--accent) 6%,var(--accent-2) 55%,var(--accent) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.05em;
}
.mini__role{ font-size:calc(var(--w)*.0165); color:#a0a0ab; margin-top:calc(var(--w)*.014); }
.mini__role i{ color:var(--accent); font-style:normal; margin-inline:.4em; }

/* ---- taban ---- */
.mac__baseWrap{
  position:relative;
  z-index:1;              /* kapalı kapak klavyenin üstünde kalsın */
  height:calc(var(--w)*.122);
}
/* menteşe */
.mac__hinge{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:74%; height:calc(var(--w)*.007);
  border-radius:0 0 calc(var(--w)*.004) calc(var(--w)*.004);
  background:linear-gradient(#111214,#1d1f23);
  z-index:2;
}
.mac__deck{
  position:absolute; left:50%; top:calc(var(--w)*.004);
  width:100%; height:calc(var(--w)*.42);
  transform:translateX(-50%) perspective(calc(var(--w)*7)) rotateX(76deg);
  transform-origin:top center;
  border-radius:0 0 calc(var(--w)*.026) calc(var(--w)*.026);
  background:
    /* ekranın klavyeye vuran sıcak ışığı */
    radial-gradient(70% 90% at 50% 0%, rgba(232,149,47,.10), transparent 62%),
    linear-gradient(#3a3d44,#2a2c32 38%,#1b1d21 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
/* klavye yuvası */
.mac__kb{
  position:absolute; inset:6% 7.5% 44%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:.9%;
  border-radius:.5%;
  background:#0b0c0e;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.8);
}
.mac__kb .row{
  --n:14;
  height:15.5%;
  border-radius:1px;
  background:repeating-linear-gradient(90deg,
    #464951 0 calc(100% / var(--n) - .55%),
    transparent calc(100% / var(--n) - .55%) calc(100% / var(--n)));
}
.mac__kb .row--fn{ --n:13; height:10%; }
.mac__kb .row--n2{ --n:14; }
.mac__kb .row--n3{ --n:13; }
.mac__kb .row--n4{ --n:12; }
.mac__kb .row--last{ --n:11; }
.mac__kb .space{
  position:absolute; left:50%; bottom:.9%; transform:translateX(-50%);
  width:34%; height:15.5%;
  border-radius:1px;
  background:#464951;
}
.mac__pad{
  position:absolute; left:50%; bottom:5%; transform:translateX(-50%);
  width:31%; height:34%;
  border-radius:.6%;
  background:linear-gradient(#2c2e34,#212328);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}
/* ön kenar */
.mac__lip{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:106.2%; height:calc(var(--w)*.0135);
  border-radius:0 0 calc(var(--w)*.0075) calc(var(--w)*.0075);
  background:linear-gradient(#4b4e56 0%,#33353b 32%,#1d1f23 72%,#121316 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 calc(var(--w)*.012) calc(var(--w)*.03) rgba(0,0,0,.7);
}
/* parmak girintisi */
.mac__lip::after{
  content:''; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:13%; height:46%;
  border-radius:0 0 40% 40%;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.15));
}
.mac__shadow{
  position:absolute; left:50%; bottom:calc(var(--w)*-.035); transform:translateX(-50%);
  width:92%; height:calc(var(--w)*.055);
  background:radial-gradient(ellipse at center, rgba(0,0,0,.8), transparent 70%);
  filter:blur(calc(var(--w)*.012));
  z-index:-1;
}
/* masaya düşen yansıma */
.mac__reflect{
  position:absolute; left:50%; top:100%; transform:translateX(-50%);
  width:106%; height:calc(var(--w)*.16);
  background:linear-gradient(180deg, rgba(120,124,134,.20), rgba(120,124,134,.05) 32%, transparent 72%);
  filter:blur(calc(var(--w)*.006));
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  pointer-events:none;
  z-index:-1;
}

/* ============================================================
   AÇILIŞ ANİMASYONU — kapak açılır, ekran yanar, isim gelir
   ============================================================ */
/* kapalıyken kapak klavyenin üstünde durur, menteşeden öne doğru açılır */
@keyframes lidOpen{
  0%  { transform:rotateX(-88deg); }
  55% { transform:rotateX(-6deg); }
  78% { transform:rotateX(2.5deg); }
  100%{ transform:rotateX(0deg); }
}
/* ekranın yanma parlaması */
.mac__power{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 55%, #fff, rgba(255,255,255,.35) 55%, transparent 78%);
  opacity:0;
  animation:powerOn .85s ease-out 1.5s forwards;
}
@keyframes powerOn{
  0%  { opacity:0;   transform:scaleY(.02); }
  14% { opacity:.62; transform:scaleY(1); }
  100%{ opacity:0;   transform:scaleY(1); }
}
/* ekran içeriği */
.mini__grid,.mini__glow{
  opacity:0;
  animation:fadeIn .8s ease 1.62s forwards;
}
.mini__hi   { animation:riseIn .65s var(--ease) 1.75s both; }
.mini__name { animation:riseIn .65s var(--ease) 1.9s  both; }
.mini__role { animation:riseIn .65s var(--ease) 2.05s both; }

@keyframes fadeIn{ to{ opacity:1; } }
@keyframes riseIn{
  from{ opacity:0; transform:translateY(calc(var(--w)*.018)); }
  to  { opacity:1; transform:none; }
}
/* gölge, yansıma ve masaya vuran ışık kapakla birlikte belirir */
.mac__shadow  { opacity:.25; animation:fadeIn 1s   ease 1s   forwards; }
.mac__reflect { opacity:0;   animation:fadeIn 1s   ease 1.2s forwards; }
.scene__spill { opacity:0;   animation:fadeIn 1.1s ease 1.6s forwards; }

/* masa üstündeki butonlar en son */
.hero__bottom .reveal{ transition-delay:2.2s; }

/* ---------- masa üstü içerik ---------- */
.hero__bottom{
  position:relative; z-index:3;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(20px,4vw,54px);
  text-align:center;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }


/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:13px 28px;
  border-radius:999px;
  font-size:.88rem; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn--primary{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  color:#16100a;
  box-shadow:0 8px 26px -12px rgba(232,149,47,.75);
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -12px rgba(232,149,47,.85); }
.btn--ghost{
  border-color:var(--line-strong); color:var(--text);
  background:rgba(255,255,255,.02);
}
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* ============================================================
   SECTION SHELL
   ============================================================ */
.section{ padding:clamp(72px,10vw,120px) 0; position:relative; }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); }

.section__head{ margin-bottom:clamp(38px,5vw,58px); }
.section__num{
  display:block;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem; letter-spacing:.22em;
  color:var(--accent);
  margin-bottom:10px;
}
.section__title{
  font-size:clamp(1.55rem,3.6vw,2.35rem);
  text-transform:uppercase; letter-spacing:.01em;
  position:relative; display:inline-block; padding-bottom:14px;
}
.section__title::after{
  content:''; position:absolute; left:0; bottom:0;
  width:52px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
.section__sub{ color:var(--text-dim); margin:12px 0 0; max-width:56ch; font-size:.95rem; }

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(32px,5vw,68px);
  align-items:stretch;   /* sağ sütun soldaki metinle aynı toplam yüksekliğe gerilir */
}
.about__text p{ color:var(--text-dim); }
.about__text .lead{ color:var(--text); font-size:1.03rem; }

.about__facts{
  margin-top:30px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.about__facts li{
  background:var(--surface);
  padding:16px 18px;
  display:flex; flex-direction:column; gap:4px;
}
.about__facts .k{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint);
}
.about__facts .v{ font-size:.92rem; font-weight:500; display:flex; align-items:center; gap:8px; }

.about__skills-title{
  font-size:1.5rem; font-weight:800; letter-spacing:-.01em;
  background:linear-gradient(96deg,var(--accent) 10%,var(--accent-2) 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:0 0 22px;
}

/* kategori kutuları: yan yana değil, alt alta tek sütun */
.skills-grid{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.skill-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.skill-card:hover{ border-color:var(--line-strong); background:var(--surface-2); }
.skill-card__label{
  display:block;
  font-size:.8rem; font-weight:700; color:var(--text);
}

/* ============================================================
   PROJECTS
   ============================================================ */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;
}
.card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex; flex-direction:column;
  overflow:hidden;
  cursor:pointer;
  transition:transform .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.card::before{
  content:''; position:absolute; inset:0 0 auto 0; height:2px; z-index:1;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); background:var(--surface-2); }
.card:hover::before{ transform:scaleX(1); }

/* proje kapak fotoğrafı (admin panelinden yüklenir); yoksa kart eskisi
   gibi düz ◆ ikonuyla başlar */
.card__cover{
  position:relative;
  width:100%; aspect-ratio:16/10;
  overflow:hidden;
  background:var(--surface-2);
}
.card__cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .45s var(--ease);
}
.card:hover .card__cover img{ transform:scale(1.045); }

/* hover'da kapak üzerinde beliren "View Project →" rozeti */
.card__view{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,12,.55);
  opacity:0; transition:opacity .3s var(--ease);
  color:#fff; font-size:.85rem; font-weight:600; letter-spacing:.01em;
}
.card:hover .card__view{ opacity:1; }

.card__body{
  padding:24px 24px 20px;
  display:flex; flex-direction:column; flex:1;
}
.card__icon{ display:block; color:var(--accent); font-size:1.05rem; margin-bottom:14px; }
.card__title{ font-size:1.16rem; margin-bottom:10px; }
.card__desc{ color:var(--text-dim); font-size:.9rem; flex:1; }
.card__tags{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 0; }
.card__tags span{
  font-size:.7rem; padding:4px 10px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent);
  font-family:'JetBrains Mono',monospace;
}
/* ============================================================
   PROJECT DETAIL MODAL
   ============================================================ */
body.no-scroll{ overflow:hidden; }

.project-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(16px,4vw,40px);
}
.project-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,6,8,.78);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease);
}
.project-modal__panel{
  position:relative;
  width:100%; max-width:1040px; max-height:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
  opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .32s var(--ease), transform .32s var(--ease);
}
.project-modal.is-open .project-modal__backdrop{ opacity:1; }
.project-modal.is-open .project-modal__panel{ opacity:1; transform:none; }

.project-modal__scroll{
  max-height:min(86vh,900px);
  overflow-y:auto;
  padding:clamp(24px,4vw,44px);
}
.project-modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line); color:var(--text-dim);
  cursor:pointer; font-size:.95rem;
  transition:all .2s var(--ease);
}
.project-modal__close:hover{ border-color:var(--accent); color:var(--accent); }
.project-modal__back{
  background:none; border:none; padding:0; margin-bottom:22px;
  font-size:.85rem; color:var(--text-dim); cursor:pointer;
  transition:color .2s var(--ease);
}
.project-modal__back:hover{ color:var(--accent); }

.project-modal__grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,48px);
  align-items:start;
}
.project-modal__title{ font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 14px; }

.project-modal__badges{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:18px; }
.pm-badge{
  font-size:.72rem; font-weight:600; padding:5px 12px; border-radius:999px;
  background:var(--surface-2); color:var(--text-dim); border:1px solid var(--line);
}
.pm-badge--accent{ background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.pm-note{ font-size:.82rem; color:var(--text-faint); }

.project-modal__desc{ color:var(--text-dim); font-size:.96rem; line-height:1.8; margin:0 0 22px; }

.project-modal__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px; }
.pm-action{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 18px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--line-strong);
  color:var(--text); font-size:.84rem; font-weight:600;
  transition:all .2s var(--ease);
}
.pm-action:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.pm-action__ico{ width:16px; height:16px; display:flex; }
.pm-action__ico svg{ width:100%; height:100%; }

.project-modal__subhead{
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 12px;
}
.project-modal__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.project-modal__tags span{
  font-size:.74rem; padding:5px 12px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent);
  font-family:'JetBrains Mono',monospace;
}

.project-modal__meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden;
}
.project-modal__meta div{ background:var(--bg); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.project-modal__meta .k{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint);
}
.project-modal__meta .v{ font-size:.88rem; font-weight:600; }

.project-modal__media{
  position:sticky; top:0;
  border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface-2);
  /* Kırpma aracının varsayılan (yatay) çıktısıyla aynı oran — panelden
     "Portrait" seçilen projelerde .is-portrait ile 4:5'e döner (bkz.
     script.js openProjectModal, admin.js cropper). Oranlar uyuşmazsa
     object-fit:cover görseli aşırı yakınlaştırıp kenarlardan keser. */
  aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
}
.project-modal__media.is-portrait{ aspect-ratio:4/5; max-width:420px; margin-inline:auto; }
.project-modal__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.project-modal__mediaEmpty{ color:var(--text-faint); font-size:2rem; }

@media (max-width:760px){
  .project-modal__grid{ grid-template-columns:1fr; }
  .project-modal__media{ order:-1; position:static; }
  .project-modal__media.is-portrait{ max-width:280px; }
  .project-modal__meta{ grid-template-columns:1fr 1fr; }
}
@media (max-width:480px){
  .project-modal__meta{ grid-template-columns:1fr; }
}

/* ============================================================
   LINKS
   ============================================================ */
/* dördü tek sırada, kare kartlar */
.links{
  display:grid;
  /* minmax(0,…): uzun e-posta metni sütunu genişletip taşmasın */
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px);
}
.linkcard{
  position:relative;
  aspect-ratio:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(12px,1.4vw,18px);
  padding:clamp(16px,2vw,26px);
  text-align:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.linkcard:hover{
  border-color:var(--accent);
  background:var(--surface-2);
  transform:translateY(-4px);
}
.linkcard__ico{
  width:clamp(48px,5vw,62px); aspect-ratio:1;
  display:grid; place-items:center;
  border-radius:16px;
  background:var(--accent-soft);
  color:var(--accent);
  transition:background .28s var(--ease), color .28s var(--ease), transform .28s var(--ease);
}
.linkcard__ico svg{ width:54%; height:54%; display:block; }
.linkcard:hover .linkcard__ico{
  background:var(--accent); color:#16100a;
  transform:scale(1.06);
}
.linkcard__body{ display:flex; flex-direction:column; gap:5px; min-width:0; max-width:100%; }
.linkcard__body strong{ font-size:.96rem; font-weight:600; }
.linkcard__body em{
  font-style:normal; font-size:.74rem; color:var(--text-faint);
  line-height:1.5; overflow-wrap:break-word;  /* uzun e-posta <wbr> ile @ öncesinden sarar */
}
.linkcard__arrow{
  position:absolute; top:14px; right:16px;
  font-size:.9rem; color:var(--text-faint);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.linkcard:hover .linkcard__arrow{ color:var(--accent); transform:translate(2px,-2px); }

/* ============================================================
   WORK / TIMELINE
   ============================================================ */
.timeline{
  position:relative;
  padding-left:30px;
  max-width:800px;
}
.timeline::before{
  content:''; position:absolute; left:5px; top:6px; bottom:6px;
  width:1px;
  background:linear-gradient(to bottom,var(--accent),var(--line),transparent);
}
.tl{ position:relative; padding-bottom:42px; }
.tl:last-child{ padding-bottom:0; }
.tl__dot{
  position:absolute; left:-30px; top:7px;
  width:11px; height:11px; border-radius:50%;
  background:var(--bg-alt);
  border:2px solid var(--accent);
  box-shadow:0 0 0 4px rgba(232,149,47,.09);
}
.tl__date{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:.72rem; letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:6px;
}
.tl__role{ font-size:1.1rem; margin-bottom:4px; }
.tl__co{ display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:10px; }
.tl__co i{ color:var(--text-faint); font-style:normal; margin-inline:4px; }
.tl__desc{ color:var(--text-dim); font-size:.9rem; max-width:62ch; }
.tl__tags{ display:flex; flex-wrap:wrap; gap:7px; }
.tl__tags span{
  font-size:.7rem; padding:4px 10px; border-radius:6px;
  border:1px solid var(--line); color:var(--text-faint);
  font-family:'JetBrains Mono',monospace;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px,5vw,60px);
  align-items:start;
}
.contact__side h3{ font-size:1.5rem; margin-bottom:14px; }
.contact__side p{ color:var(--text-dim); max-width:44ch; }
.contact__list{ margin-top:28px; display:flex; flex-direction:column; gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; }
.contact__list li{
  background:var(--surface); padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.contact__list span{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-faint);
}
.contact__list a{
  font-size:.88rem; color:var(--text);
  display:flex; align-items:center; gap:8px;
  transition:color .2s var(--ease);
  word-break:break-all; text-align:right;
}
.contact__list a:hover{ color:var(--accent); }

.contact__form{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(22px,3vw,30px);
}
.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--text-faint); margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 15px;
  color:var(--text);
  font-family:inherit; font-size:.92rem;
  resize:vertical;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{ color:#4d4d58; }
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.field input.is-error,.field textarea.is-error{ border-color:#e05252; }
.form__note{
  margin:14px 0 0; font-size:.82rem; min-height:1.2em; color:var(--text-dim);
}
.form__note.is-ok{ color:#3ddc84; }
.form__note.is-bad{ color:#e05252; }

/* ============================================================
   FOOTER + TO TOP
   ============================================================ */
.footer{ border-top:1px solid var(--line); padding:26px 0; background:var(--bg-alt); }
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
  font-size:.8rem; color:var(--text-faint);
}
.footer__made{ color:var(--text-faint); transition:color .2s var(--ease); }
.footer__made:hover{ color:var(--accent); }

.totop{
  position:fixed; right:24px; bottom:24px; z-index:90;
  width:42px; height:42px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--surface); border:1px solid var(--line);
  color:var(--text-dim);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:all .3s var(--ease);
}
.totop.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.totop:hover{ border-color:var(--accent); color:var(--accent); }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.09s; }
.reveal[data-delay="2"]{ transition-delay:.18s; }
.reveal[data-delay="3"]{ transition-delay:.27s; }
.reveal[data-delay="4"]{ transition-delay:.36s; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }

  /* animasyon kapalıyken açılış sahnesi bitmiş halde durmalı */
  .mac__lid{ transform:none; }
  .mac__power{ display:none; }
  /* not: shadow/reflect/spill kendi translateX(-50%) değerlerini korumalı */
  .mini__grid,.mini__glow,.mac__shadow,.mac__reflect,.scene__spill{ opacity:1; }
  .mini__hi,.mini__name,.mini__role{ opacity:1; transform:none; }
  .hero__bottom .reveal{ transition-delay:0s; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .about,.contact{ grid-template-columns:1fr; }
}

@media (max-width:820px){
  .nav__burger{ display:flex; }
  .nav__brand-role,.nav__brand-sep{ display:none; }

  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,10,12,.97);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:8px 0 16px;
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:all .3s var(--ease);
  }
  .nav__links.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .nav__link{
    padding:14px clamp(20px,5vw,40px);
    font-size:.95rem;
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .nav__link::after{ left:clamp(20px,5vw,40px); transform:none; }
  .nav__link.is-active::after{ width:16px; }
}

@media (max-width:760px){
  .mac__lid{ aspect-ratio:16/10.6; }
  .hero__bottom{ flex-direction:column; gap:24px; }
  .links{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:560px){
  .about__facts{ grid-template-columns:1fr; }
  .btn{ padding:12px 22px; }
  .hero__actions .btn{ flex:1 1 auto; }
  .contact__list li{ flex-direction:column; align-items:flex-start; gap:4px; }
  .contact__list a{ text-align:left; }
  .footer__inner{ justify-content:center; text-align:center; }
}