/* ragip.net · Portfolio Ragıp Alkan
   Sistema: negro / naranja / amarillo · Space Grotesk + Inter + JetBrains Mono
   Grilla: 12 columnas · contenedor 1248 px (1440 − 2×96) · calle 24 px */
:root{
  --negro:#0B0B0C; --naranja:#FF7A00; --amarillo:#FFC21A; --blanco:#F5F5F0;
  --grafito:#17171A; --acero:#26262B; --gris:#9A9AA3; --gris2:#5E5E66;
  --f-tit:'Space Grotesk',system-ui,sans-serif; --f-txt:'Inter',system-ui,sans-serif; --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --wrap:1248px; --gut:24px; --pad:96px; --r:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--negro);color:#fff;font-family:var(--f-txt);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-tit);margin:0;line-height:1.1}
p{margin:0}
.mono{font-family:var(--f-mono)}
.wrap{width:min(var(--wrap),100% - 48px);margin-inline:auto}

/* ---------- botones ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:6px;font:700 15px var(--f-mono);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:filter .2s,background .2s,color .2s}
.btn--primary{background:var(--naranja);color:var(--negro)}
.btn--primary:hover{filter:brightness(1.1)}
.btn--outline{border-color:var(--amarillo);color:var(--amarillo);background:transparent}
.btn--outline:hover{background:var(--amarillo);color:var(--negro)}
.btn--ghost{border-color:var(--naranja);color:var(--naranja);height:48px;padding:0 22px}
.btn--ghost:hover{background:var(--naranja);color:var(--negro)}
.btn--block{width:100%;height:64px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--acero)}
.nav__in{height:80px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand span{display:flex;flex-direction:column;line-height:1.2}
.brand b{font:700 19px var(--f-tit)}
.brand small{font:12px var(--f-mono);color:var(--gris)}
.nav__links{display:flex;align-items:center;gap:36px}
.nav__links a:not(.btn){font-weight:500;font-size:15px;color:var(--gris);text-decoration:none;position:relative;padding:6px 0}
.nav__links a:not(.btn):hover,.nav__links a.active{color:#fff}
.nav__links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--naranja)}
.nav__toggle{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:10px}
.nav__toggle span{display:block;height:2px;background:#fff;margin:6px 0;transition:.25s}

/* ---------- secciones ---------- */
.sec{padding:120px 0}
.dark{background:var(--negro);color:#fff}
.light{background:var(--blanco);color:var(--negro)}
.trama{position:relative;isolation:isolate}
.trama::before{content:"";position:absolute;inset:0;z-index:-1;background:url(../img/trama-seccion.svg) center/cover no-repeat;opacity:.8}
.trama--hero::before{background-image:url(../img/trama-hero.svg)}
.label{font:700 15px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--naranja);margin-bottom:16px}
h2{font-size:clamp(40px,5vw,72px);letter-spacing:-.02em}
h2::after{content:"";display:block;width:82px;height:6px;background:var(--amarillo);margin-top:20px}
.display::after{display:none}

/* ---------- hero ---------- */
.hero{padding:72px 0 96px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--negro) 0%,rgba(11,11,12,.85) 38%,rgba(11,11,12,0) 70%)}
.hero__grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--gut);align-items:center}
.tag{color:var(--naranja);font-size:18px;margin-bottom:12px}
.hero h1{font-size:clamp(52px,7.4vw,104px);line-height:.88;letter-spacing:-.03em}
.o{color:var(--naranja)}
.hero__rol{font:500 clamp(28px,3vw,40px) var(--f-tit);color:var(--amarillo);margin-top:24px}
.hero__words{color:var(--gris);letter-spacing:.06em;margin-top:6px}
.hero__lead{font-size:20px;color:#D6D6DA;max-width:620px;margin-top:28px}
.hero__btns{display:flex;flex-wrap:wrap;gap:var(--gut);margin-top:40px}
.hero__btns .btn{height:72px;min-width:200px}
.hero__art{position:relative;display:grid;justify-items:center}
.hero__iso{width:min(456px,100%);height:auto;position:relative}
.halo{position:absolute;top:0;left:50%;width:min(504px,108%);aspect-ratio:1;transform:translate(-50%,-24px);border-radius:50%;border:1px solid rgba(255,194,26,.18)}
.halo::after{content:"";position:absolute;inset:36px;border-radius:50%;border:1px dashed rgba(255,122,0,.35)}
.code{width:100%;margin-top:24px;background:var(--grafito);border:1px solid var(--acero);border-radius:var(--r);padding:16px 24px 20px}
.code__bar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.code__bar i{width:10px;height:10px;border-radius:50%;background:var(--naranja)}
.code__bar i:nth-child(2){background:var(--amarillo)}.code__bar i:nth-child(3){background:var(--gris2)}
.code__bar span{margin-left:auto;font:12px var(--f-mono);color:var(--gris)}
.code pre{margin:0;font:15px/1.55 var(--f-mono);color:#E6E6E6;white-space:pre-wrap}
.code .k,.code .n{color:var(--naranja)}.code .s{color:var(--amarillo)}

/* ---------- sobre mí ---------- */
.about{display:grid;grid-template-columns:5fr 1fr 6fr;gap:var(--gut);margin-top:72px}
.about blockquote{margin:0;font:500 clamp(26px,2.6vw,34px)/1.3 var(--f-tit);color:var(--negro)}
.about__txt{grid-column:3}
.about__txt p{font-size:18px;color:#2A2A2E;margin-bottom:24px}
.about__txt b{color:var(--negro)}
.stats{list-style:none;padding:0;margin:72px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.stats li{border-top:2px solid var(--negro);padding-top:12px}
.stats b{display:block;font:700 72px/1 var(--f-tit);color:var(--naranja)}
.stats span{display:block;font:14px var(--f-mono);color:#4A4A50;margin-top:16px}

/* ---------- chip (circuito integrado) ---------- */
.chip{position:relative;display:inline-grid;place-items:center;width:72px;height:72px;flex:none;background:url(../img/iconos/contenedor-chip.svg) center/100% no-repeat}
.chip img{width:29px;height:29px}
.chip b{font:700 16px var(--f-mono);color:var(--amarillo)}
.chip--s{width:48px;height:48px}.chip--s img{width:20px;height:20px}

/* ---------- formación ---------- */
.timeline{list-style:none;padding:0;margin:72px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut);position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:35px;border-top:2px dashed var(--naranja);z-index:0}
.timeline li{position:relative}
.timeline .chip{background-color:var(--negro);border-radius:12px}
.timeline b{display:block;color:var(--amarillo);font-size:16px;margin-top:24px}
.timeline h3{font-size:20px;font-weight:500;margin-top:6px;line-height:1.25}
.timeline p{color:var(--gris);font-size:15px;margin-top:8px}
.sub{font-size:28px;font-weight:500;margin:96px 0 24px}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.card{background:var(--grafito);border:1px solid var(--acero);border-radius:var(--r);padding:24px}
.card header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.card h4{font-size:22px}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--acero);font-size:15px;font-weight:500;color:#E2E2E6}
.list em{font:normal 13px var(--f-mono);color:var(--naranja);white-space:nowrap}
.list--ic li{justify-content:flex-start;align-items:center}
.list--ic img{width:22px;height:22px}

/* ---------- experiencia ---------- */
.jobs{list-style:none;padding:0;margin:72px 0 0}
.jobs li{display:grid;grid-template-columns:3fr 5fr 4fr;gap:var(--gut);padding:24px 0;border-top:1px solid #CFCFC6}
.jobs li:last-child{border-bottom:1px solid #CFCFC6}
.jobs .mono{font-weight:700;font-size:16px;color:#2A2A2E;padding-left:22px;position:relative}
.jobs .mono::before{content:"";position:absolute;left:0;top:7px;width:10px;height:10px;border-radius:50%;background:var(--negro)}
.jobs .now .mono{color:var(--naranja)}.jobs .now .mono::before{background:var(--naranja)}
.jobs h3{font-size:21px;line-height:1.25}
.jobs .co{font-size:14px;font-weight:500;color:#6A6A70;margin-top:4px}
.jobs li>p{font-size:15px;color:#2A2A2E}

/* ---------- proyectos ---------- */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:72px}
.proj{background:var(--grafito);border:1px solid var(--acero);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.proj:hover{border-color:var(--naranja);transform:translateY(-4px)}
.proj__img{display:block;height:264px;overflow:hidden;background:var(--acero);border-bottom:3px solid var(--naranja)}
.proj__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s}
.proj:hover .proj__img img{transform:scale(1.03)}
.proj__img--crop img{object-position:center bottom}
.proj__img--app{position:relative;display:grid;justify-items:center;padding-top:24px;background:var(--negro) url(../img/trama-tile.svg) center/cover}
.proj__img--app::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:rgba(255,122,0,.18);top:-40px}
.phone{position:relative;width:150px;height:326px;background:var(--negro);border-radius:22px;padding:6px}
.phone img{border-radius:16px;height:100%;object-fit:cover;object-position:top}
.proj:hover .phone img{transform:none}
.proj__body{padding:24px;display:flex;flex-direction:column;gap:8px;flex:1}
.kicker{font-size:13px;font-weight:500;color:var(--amarillo);text-transform:uppercase;letter-spacing:.06em}
.proj h3{font-size:24px}
.proj__body>p:not(.kicker):not(.stack){font-size:14px;color:var(--gris)}
.stack,.link{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:var(--naranja);text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- habilidades ---------- */
.skills{display:grid;grid-template-columns:8fr 4fr;gap:var(--gut);margin-top:72px}
.grp{font-size:15px;font-weight:700;color:var(--naranja);text-transform:uppercase;letter-spacing:.08em;margin:0 0 20px}
.sk{list-style:none;padding:0;margin:0 0 56px;display:grid;grid-template-columns:repeat(7,82px);gap:24px}
.sk li{display:flex;flex-direction:column;font:600 14px var(--f-txt);color:var(--negro)}
.sk .chip{margin-bottom:12px}
.sk .chip b{font-size:15px}
.lv{display:flex;gap:2px;margin-top:8px;height:5px;font-style:normal}
.lv::before,.lv::after,.lv{--on:var(--naranja);--off:#D3D3CB}
.lv{background:linear-gradient(90deg,var(--c1) 0 26px,transparent 26px 28px,var(--c2) 28px 54px,transparent 54px 56px,var(--c3) 56px 82px);width:82px;border-radius:2px}
.lv[data-l="1"]{--c1:var(--on);--c2:var(--off);--c3:var(--off)}
.lv[data-l="2"]{--c1:var(--on);--c2:var(--on);--c3:var(--off)}
.lv[data-l="3"]{--c1:var(--on);--c2:var(--on);--c3:var(--on)}
.sk small{font:11px var(--f-mono);color:#6A6A70;margin-top:8px}
.skills__side{display:flex;flex-direction:column;gap:var(--gut)}
.card--dark{background:var(--negro);border:0;color:#fff}

/* ---------- contacto ---------- */
.contact{display:grid;grid-template-columns:6fr 1fr 5fr;gap:var(--gut)}
.contact>div:last-child{grid-column:3}
.display{font-size:clamp(56px,7.4vw,104px);line-height:.88;letter-spacing:-.03em}
.y{color:var(--amarillo)}
.contact__list{list-style:none;padding:0;margin:56px 0 0;display:grid;gap:24px}
.contact__list li{display:flex;align-items:center;gap:24px;font-size:20px;font-weight:500}
.contact__list a{text-decoration:none}.contact__list a:hover{color:var(--amarillo)}
.form-wrap{background:var(--grafito);border:1px solid var(--acero);border-radius:var(--r);padding:32px;align-self:start;margin-top:56px}
.form{display:grid;gap:20px}
.form__hint{color:var(--amarillo);font-size:14px}
.form label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--gris)}
.form input,.form textarea{width:100%;background:var(--negro);border:1px solid var(--acero);border-radius:6px;color:#fff;font:16px var(--f-txt);padding:14px 16px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,122,0,.2)}
.form .invalid{border-color:#ff5a5a}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__error{color:#ff8a8a;font-size:14px}
.form button[disabled]{opacity:.6;cursor:wait}
.thanks{text-align:center;padding:24px 8px;display:grid;justify-items:center;gap:16px;outline:none}
.thanks h3{font-size:34px;color:var(--amarillo)}
.thanks p{color:#D6D6DA;max-width:360px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:120px;padding-top:24px;border-top:1px solid var(--acero);font-size:14px;color:var(--gris)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  :root{--pad:48px}
  .nav__links{gap:22px}
  .sk{grid-template-columns:repeat(auto-fill,82px)}
  .skills{grid-template-columns:1fr}
  .skills__side{display:grid;grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:flex-start;gap:0;background:var(--negro);border-bottom:1px solid var(--acero);padding:8px 24px 24px;transform:translateY(-120%);transition:transform .3s;z-index:-1}
  .nav__links a:not(.btn){font-size:18px;padding:14px 0;width:100%;border-bottom:1px solid var(--acero)}
  .nav__links .btn{margin-top:16px}
  .nav.open .nav__links{transform:none}
  .nav.open .nav__toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav.open .nav__toggle span:nth-child(2){opacity:0}
  .nav.open .nav__toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .sec{padding:88px 0}
  .hero__grid,.about,.contact{grid-template-columns:1fr}
  .about__txt,.contact>div:last-child{grid-column:auto}
  .hero__art{order:-1;max-width:360px;margin-inline:auto}
  .halo{display:none}
  .hero::after{background:rgba(11,11,12,.7)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .timeline{grid-template-columns:1fr 1fr;row-gap:48px}
  .timeline::before{display:none}
  .cards3,.projects{grid-template-columns:1fr 1fr}
  .jobs li{grid-template-columns:1fr;gap:8px}
}
@media (max-width:600px){
  body{font-size:16px}
  .hero__btns .btn{flex:1 1 100%;min-width:0;height:60px}
  .stats b{font-size:56px}
  .timeline,.cards3,.projects,.skills__side{grid-template-columns:1fr}
  .sk{grid-template-columns:repeat(auto-fill,82px);gap:20px 16px}
  .form-wrap{padding:24px}
  .contact__list li{font-size:17px;gap:16px}
  .contact__list .chip{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

[hidden]{display:none!important}

/* ---------- selector de idioma ---------- */
.langs{display:flex;gap:4px;font:700 12px var(--f-mono);border:1px solid var(--acero);border-radius:6px;padding:3px}
.langs a{padding:6px 10px;border-radius:4px;color:var(--gris);text-decoration:none;letter-spacing:.06em}
.langs a:hover{color:#fff}
.langs a.cur{background:var(--acero);color:var(--amarillo)}
@media (max-width:900px){.nav__links .langs{margin-top:16px}.nav__links .langs a{padding:8px 12px;font-size:14px}}