/* ============================================================
   استایل اختصاصی صفحه‌ها
   ============================================================ */

/* ---------- صفحهٔ نخست ---------- */
.home-hero{display:grid;grid-template-columns:1fr 400px;gap:44px;align-items:center}
.home-copy .greet{font-family:var(--font-head);font-weight:900;font-size:30px;line-height:1.6;margin:24px 0 16px}
.home-copy .lead{max-width:52ch}
.home-copy .lead + .lead{margin-top:10px}
.btns{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}
.home-photo{background:var(--mint)}
.home-photo img{width:100%;height:auto}

.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:18px 0;border-inline-end:1px solid var(--line)}
.stats div:last-child{border-inline-end:0}
.stats .n{font-family:var(--font-head);font-weight:900;font-size:2.5rem;color:var(--mint);line-height:.9;margin-top:20px}
.stats .l{font-size:.66rem;letter-spacing:.14em;color:var(--mut);margin-top:8px;margin-bottom:6px}

.four{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.four .c{background:var(--bg);padding:22px}
.four .c span{font-family:'JetBrains Mono',monospace;font-size:.64rem;color:var(--mint)}
.four .c b{display:block;font-family:var(--font-head);font-weight:900;font-size:.98rem;margin-top:8px}
.four .c i{display:block;font-style:normal;font-size:.74rem;color:var(--mut);margin-top:4px;line-height:1.8}

.go{display:grid;gap:0}
.go a{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:16px;
  padding:16px 4px;border-bottom:1px solid var(--line);transition:.2s}
.go a:first-child{border-top:1px solid var(--line)}
.go a:hover{background:rgba(61,220,132,.06);padding-inline-start:14px}
.go .gn{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--mint)}
.go b{font-family:var(--font-head);font-weight:900;font-size:1.1rem}
.go i{display:block;font-style:normal;font-size:.74rem;color:var(--mut);margin-top:2px}
.go em{font-style:normal;color:var(--mint)}

/* ---------- رزومه ---------- */
.resume-hero{display:grid;grid-template-columns:400px 1fr;gap:40px;align-items:center;margin-bottom:34px}
.resume-hero .frame{background:var(--mint);border-radius:14px}
.resume-name{font-family:var(--font-head);font-weight:900;font-size:2.4rem;line-height:1.25;margin-bottom:6px}
.resume-role{color:var(--mint);font-size:.82rem;letter-spacing:.04em;margin-bottom:16px}
.resume-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 22px;font-size:.78rem;color:#c9c4ba}
.resume-meta span{display:block;font-size:.62rem;color:var(--mut);letter-spacing:.1em;margin-bottom:2px}

.sec-title{display:flex;align-items:baseline;gap:14px;margin:38px 0 6px}
.sec-title .num{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--mint)}
.sec-title h2{font-size:1.6rem}
.sec-sub{color:var(--mut);font-size:.8rem;margin-bottom:12px;max-width:60ch}

.skillrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.skillrow span{border:1px solid var(--line);border-radius:100px;padding:6px 14px;font-size:.72rem;color:#c9c4ba}
.skillrow span:hover{border-color:var(--mint);color:var(--mint)}

/* ---------- گالری ---------- */
.gal-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.tabs{display:flex;gap:8px}
.tabs button{border:1px solid var(--line);padding:8px 16px;font-size:.74rem;border-radius:100px;transition:.2s}
.tabs button.on{background:var(--mint);color:#141412;border-color:var(--mint);font-weight:700}
.tabs button:hover:not(.on){border-color:var(--mint);color:var(--mint)}

.gal{columns:3;column-gap:12px}
.gal .it{break-inside:avoid;margin-bottom:12px;border-radius:10px;overflow:hidden;background:#141412;position:relative}
.gal .it img{width:100%;height:auto;display:block}
.gal .it .cap{position:absolute;inset-inline:0;bottom:0;padding:20px 12px 10px;font-size:.66rem;
  background:linear-gradient(0deg,rgba(10,10,9,.85),transparent);opacity:0;transition:.25s}
.gal .it:hover .cap{opacity:1}
.gal-empty{border:1px dashed #3d3d37;border-radius:14px;padding:52px 20px;text-align:center;color:var(--mut)}
.gal-empty b{display:block;font-family:var(--font-head);font-weight:900;font-size:1.1rem;color:var(--cream);margin-bottom:6px}

/* ---------- ریمیکس‌ها ---------- */
.music-hero{display:grid;grid-template-columns:1fr 372px;gap:40px;align-items:center;margin-bottom:22px}
.music-hero h1{font-family:var(--font-head);font-weight:900;font-size:78px;letter-spacing:-.02em;line-height:.9}
.music-hero h1 em{color:var(--mint)}
.music-note{font-family:var(--font-head);font-weight:900;font-size:24px;line-height:1.7;margin-top:18px;max-width:36ch}
.music-sub{color:#c9c4ba;font-size:.86rem;margin-top:10px;max-width:44ch}

/* دیسک */
.discwrap{justify-self:center;position:relative;width:340px;height:340px;flex:0 0 auto}
.disc{position:absolute;inset:0;border-radius:50%;background:var(--mint);
  box-shadow:0 26px 70px rgba(61,220,132,.2),inset 0 0 0 1px rgba(0,0,0,.06);
  animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.disc{animation:none}}
.disc .ring{position:absolute;border-radius:50%;border:1px solid rgba(10,26,18,.3);top:50%;left:50%;transform:translate(-50%,-50%)}
.disc .ring.solid{border-color:rgba(10,26,18,.16)}
.disc .gloss{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 210deg,rgba(255,255,255,.3),rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.2));
  mix-blend-mode:soft-light}
.disc .sm{position:absolute;top:24px;left:0;right:0;text-align:center;font-family:var(--font-display);
  font-size:36px;line-height:1;color:var(--bg);opacity:.92}
.hole{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:164px;height:164px;border-radius:50%;
  background:#12140f;display:grid;place-items:center;z-index:3;
  box-shadow:inset 0 0 0 6px rgba(0,0,0,.28),inset 0 6px 18px rgba(0,0,0,.55)}
.hole img{width:158px;height:158px;object-fit:contain}

/* دو پرسونا */
.people{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:26px}
.pc{position:relative}
.pc .shot{position:relative;border-radius:14px;overflow:hidden;background:#111310}
.pc .shot img{width:100%;height:auto;display:block}
.pc .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.pc .foot b{font-family:var(--font-head);font-weight:900;font-size:1.16rem}
.pc .foot .rl{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.2em;color:var(--mint);margin-top:2px}
.pc .foot img{height:40px;width:auto}
.pc .foot img.tall{height:58px}

/* پلی‌لیست */
.player{border:1px solid var(--line);border-radius:12px;padding:12px 16px;display:flex;
  gap:14px;align-items:center;background:rgba(35,35,32,.6);
  position:sticky;top:76px;z-index:20;backdrop-filter:blur(10px);margin-bottom:14px}
.player .cover{width:44px;height:44px;border-radius:6px;object-fit:cover;flex:0 0 auto}
.player .meta{flex:1 1 auto;min-width:0}
.player .meta b{font-family:var(--font-head);font-weight:900;font-size:.9rem;display:block}
.player .meta span{font-size:.64rem;color:var(--mut)}
.player .bar{height:4px;background:#3a3a34;border-radius:100px;position:relative;cursor:pointer;margin-top:6px}
.player .bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;background:var(--mint);border-radius:100px;width:0%}
.player .ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.player .ctrl button{width:34px;height:34px;border-radius:50%;border:1px solid #46463f;display:grid;place-items:center;color:var(--cream);font-size:.72rem;transition:.2s}
.player .ctrl button:hover{border-color:var(--mint);color:var(--mint)}
.player .ctrl .play{width:42px;height:42px;background:var(--mint);border-color:var(--mint);color:#141412;font-size:.9rem}
.player .ctrl .play:hover{background:var(--mint2);color:#141412}
.player .time{font-family:'JetBrains Mono',monospace;font-size:.58rem;color:var(--mut);flex:0 0 auto;text-align:center}

.tracks .tr{display:grid;grid-template-columns:46px 62px 1fr auto;gap:14px;align-items:center;
  padding:10px 6px;border-bottom:1px solid var(--line);transition:.2s;cursor:pointer}
.tracks .tr:first-child{border-top:1px solid var(--line)}
.tracks .tr:hover{background:rgba(61,220,132,.05)}
.tracks .tr.on{background:rgba(61,220,132,.09)}
.tracks .tr .n{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--mint)}
.tracks .tr img{width:62px;height:62px;object-fit:cover;border-radius:6px}
.tracks .tr b{font-family:var(--font-head);font-weight:900;font-size:.98rem;display:block}
.tracks .tr small{font-size:.66rem;color:var(--mut)}
.tracks .tr .dl{width:34px;height:34px;border-radius:50%;border:1px solid #46463f;display:grid;place-items:center;color:var(--mint)}
.tracks .tr .dl:hover{background:var(--mint);color:#141412;border-color:var(--mint)}

.tg-cta{display:grid;place-items:center;margin:26px 0 8px;position:relative}
.tg-cta a{width:64px;height:64px;border-radius:50%;border:1px solid #46463f;display:grid;place-items:center;
  color:var(--mint);transition:.25s;position:relative}
.tg-cta a:hover{background:var(--mint);color:#141412;border-color:var(--mint);transform:translateY(-3px)}
.tg-cta a svg{width:30px;height:30px}
.tg-cta .lbl{position:absolute;bottom:-26px;font-size:.74rem;color:var(--mint);opacity:0;transition:.25s;white-space:nowrap}
.tg-cta:hover .lbl{opacity:1;bottom:-30px}

/* ---------- نمونه‌کار ---------- */
.pf{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.pf .c{border:1px solid var(--line);border-radius:12px;padding:18px;transition:.25s}
.pf .c:hover{border-color:var(--mint);transform:translateY(-3px)}
.pf .c .badge{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--mint);letter-spacing:.16em}
.pf .c b{display:block;font-family:var(--font-head);font-weight:900;font-size:1.02rem;margin:8px 0 5px}
.pf .c p{font-size:.74rem;color:var(--mut);line-height:1.85}
.pf-empty{border:1px dashed #3d3d37;border-radius:14px;padding:34px 22px;text-align:center;color:var(--mut);margin-top:22px}

/* ---------- تماس ---------- */
.contact-wrap{display:grid;grid-template-columns:420px 1fr;gap:38px;align-items:start}
.phone{
  position:relative;border-radius:34px;overflow:hidden;border:1px solid #3a3a34;
  background:#101010;aspect-ratio:9/16;max-width:420px
}
.phone .bgimg{position:absolute;inset:0;width:100%;height:56%;object-fit:cover;object-position:center 18%}
.phone .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.5) 0%,rgba(10,10,9,0) 22%,#101010 54%,#101010 100%)}
.phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:92px;height:20px;
  background:#0a0a09;border-radius:100px;z-index:3}
.phone .content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px 16px 20px;gap:12px}
.phone .status{position:absolute;top:34px;inset-inline:0;text-align:center;z-index:3;
  font-family:var(--font-head);font-weight:900;font-size:.8rem;color:#fff;letter-spacing:.02em;opacity:.95}
.apps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px}
.apps a{display:grid;justify-items:center;gap:6px}
.apps a .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  color:var(--mint);transition:.2s}
.apps a:hover .ic{background:var(--mint);color:#141412;border-color:var(--mint);transform:translateY(-2px)}
.apps a .ic svg{width:26px;height:26px}
.apps a span{font-size:.6rem;color:#e8e4da;text-align:center}

.survey{background:rgba(20,20,18,.86);border:1px solid #3d3d37;border-radius:16px;padding:14px}
.survey b{display:block;font-family:var(--font-head);font-weight:900;font-size:.9rem;margin-bottom:10px}
.survey .opts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.survey .opts button{border:1px solid #4a4a44;border-radius:8px;padding:8px 4px;font-size:.68rem;color:var(--cream);transition:.2s}
.survey .opts button:hover{border-color:var(--mint);color:var(--mint)}
.survey .opts button.on{background:var(--mint);border-color:var(--mint);color:#141412;font-weight:700}
.survey .res{margin-top:12px;display:grid;gap:6px}
.survey .res .r{display:grid;grid-template-columns:44px 1fr 34px;gap:8px;align-items:center;font-size:.6rem;color:#cfcabf}
.survey .res .bar{height:6px;background:#332f2a;border-radius:100px;overflow:hidden}
.survey .res .bar i{display:block;height:100%;background:var(--mint);width:0%;transition:.5s;border-radius:100px}
.survey .thanks{font-size:.62rem;color:var(--mint);margin-top:8px;display:none}

.contact-side h2{margin-bottom:8px}
.contact-side .lead{max-width:48ch}
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.cgrid a{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;align-items:center;gap:10px;transition:.2s}
.cgrid a:hover{border-color:var(--mint);background:rgba(61,220,132,.05)}
.cgrid a .ic{width:34px;height:34px;border-radius:9px;background:rgba(61,220,132,.12);display:grid;place-items:center;color:var(--mint);flex:0 0 auto}
.cgrid a .ic svg{width:18px;height:18px}
.cgrid a b{font-family:var(--font-head);font-weight:900;font-size:.82rem;display:block}
.cgrid a small{font-size:.64rem;color:var(--mut)}

/* ---------- واکنش‌گرا ---------- */
@media(max-width:900px){
  .home-hero{grid-template-columns:1fr;gap:18px}
  .home-hero .frame{max-width:300px;margin:0 auto}
  .home-photo{order:-1}
  .resume-hero{grid-template-columns:1fr;gap:18px}
  .resume-hero .frame{max-width:320px}
  .music-hero{grid-template-columns:1fr;gap:22px}
  .music-hero h1{font-size:46px}
  .music-note{font-size:18px;max-width:100%}
  .discwrap{width:250px;height:250px;justify-self:center}
  .hole{width:122px;height:122px}
  .hole img{width:118px;height:118px}
  .disc .sm{font-size:26px;top:18px}
  .people{grid-template-columns:1fr;gap:22px}
  .pf{grid-template-columns:1fr}
  .contact-wrap{grid-template-columns:1fr;gap:24px}
  .phone{max-width:100%;border-radius:26px;aspect-ratio:auto;min-height:640px}
  .cgrid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .four{grid-template-columns:1fr 1fr}
  .stats .n{font-size:1.7rem;margin-top:14px}
  .stats .l{font-size:.54rem;letter-spacing:.02em}
  .stats div{padding:12px 6px}
  .home-copy .greet{font-size:21px;margin-top:16px}
  .gal{columns:2;column-gap:8px}
  .gal .it{margin-bottom:8px}
  .resume-name{font-size:1.6rem}
  .resume-meta{grid-template-columns:1fr 1fr;gap:8px 14px;font-size:.7rem}
  .sec-title h2{font-size:1.25rem}
  .player{flex-wrap:wrap;gap:10px;padding:10px 12px}
  .player .cover{width:40px;height:40px}
  .player .ctrl{width:100%;justify-content:center;order:3;margin-top:2px}
  .player .time{display:none}
  .tracks .tr{grid-template-columns:34px 52px 1fr auto;gap:9px}
  .tracks .tr img{width:52px;height:52px}
  .tracks .tr b{font-size:.82rem}
  .tracks .tr small{font-size:.56rem}
  .apps a .ic{width:46px;height:46px;border-radius:12px}
  .apps a .ic svg{width:23px;height:23px}
  .apps a span{font-size:.54rem}
}


/* قاب یکسان سه عکس در نسخهٔ وب — صفحهٔ نخست، رزومه، تماس */
@media(min-width:901px){
  .home-hero .frame{width:400px;height:533px;background:#3DDB84;
    border-radius:14px;display:flex;align-items:center;justify-content:center}
  .resume-hero .frame{width:400px;height:500px;background:#3DDB84;
    border-radius:14px;display:flex;align-items:center;justify-content:center}
  .home-hero .frame img,.resume-hero .frame img{width:100%;height:100%;object-fit:contain;object-position:center}
  .home-hero{grid-template-columns:1fr 400px}
}