/* =====================================================================
   Shablon 3 — DARK & BOLD: maskulin, keskin kontrast, UPPERCASE tipografiya
   v2:
   - KUN rejimi qo'shildi (qog'oz + oltin) — avval faqat Tun bor edi
   - Ikkala rejimda ham jasur identitet: chamfer tugmalar, PORTFOLIO watermark,
     oltin nur chizig'i, brutal offset-soyalar, romb timeline nuqtalari
   ===================================================================== */
:root{
  --display:'Oswald',sans-serif;
  --font:'Rubik',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.9,.25,1);
  --r:14px; --btn-r:8px; --ava-r:18px;
}

/* ---------------- TUN — imzo "Dark & Bold" palitra ---------------- */
html[data-theme="dark"],:root{
  --bg:#0b0b0d; --card:#141418; --card2:#1b1b21; --line:#2c2c36;
  --ink:#f6f5f1; --muted:#9a9aa4;
  --accent:#f2b73d; --accent-ink:#171310; --accent-soft:rgba(242,183,61,.16);
  --shadow:0 26px 70px -22px rgba(0,0,0,.85);
  color-scheme:dark;
}

/* ---------------- KUN — qog'oz + oltin: keskinlik saqlanadi ---------------- */
html[data-theme="light"]{
  --bg:#f4f2ec; --card:#ffffff; --card2:#efece4; --line:#ddd8ca;
  --ink:#17150c; --muted:#6f6b5c;
  --accent:#d99b16; --accent-ink:#ffffff; --accent-soft:rgba(217,155,22,.13);
  --shadow:0 24px 60px -28px rgba(60,45,5,.28);
  color-scheme:light;
}

/* ---------------- Jasur tipografiya (ikkala rejim) ---------------- */
.tpl-bold h1,.tpl-bold h2,.tpl-bold h3,.tpl-bold h4{font-family:var(--display)}
.tpl-bold .pf-name{text-transform:uppercase;font-weight:700;letter-spacing:.025em}
html[data-theme="dark"] .tpl-bold .pf-name{text-shadow:0 8px 44px rgba(0,0,0,.6)}
.tpl-bold .pf-brand{text-transform:uppercase;letter-spacing:.06em;display:inline-flex;align-items:center}
.tpl-bold .pf-brand::before{content:"";width:.5em;height:.5em;background:var(--accent);
  margin-right:.45em;flex:none}
.tpl-bold .pf-tagline{text-transform:uppercase;letter-spacing:.14em;font-size:1rem;font-weight:500}
.tpl-bold .tl-item h4{text-transform:uppercase;letter-spacing:.05em;font-size:1rem}
.tpl-bold .tl-date{letter-spacing:.16em}
.tpl-bold .cslide blockquote{font-family:var(--display);text-transform:uppercase;
  font-weight:500;letter-spacing:.03em}

/* ---------------- Hero dekor: PORTFOLIO watermark + oltin nur ---------------- */
.tpl-bold .pf-hero-in{position:relative;z-index:1}
.tpl-bold .pf-hero::before{
  content:"PORTFOLIO";position:absolute;left:50%;top:47%;z-index:0;
  pointer-events:none;user-select:none;
  transform:translate(-50%,-55%) rotate(-3deg);
  font-family:var(--display);font-weight:700;text-transform:uppercase;white-space:nowrap;
  font-size:clamp(4rem,16.5vw,12.5rem);letter-spacing:.05em;line-height:1;
  color:color-mix(in srgb,var(--ink) 6%,transparent);
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--ink) 13%,transparent);
}
.tpl-bold .pf-hero::after{
  content:"";position:absolute;left:-12%;right:-12%;bottom:6%;height:90px;z-index:0;
  pointer-events:none;transform:rotate(-3deg);
  background:linear-gradient(90deg,transparent 12%,
    color-mix(in srgb,var(--accent) 15%,transparent) 50%,transparent 88%);
}
html[data-theme="dark"] .tpl-bold .pf-hero::after{
  background:linear-gradient(90deg,transparent 12%,
    color-mix(in srgb,var(--accent) 22%,transparent) 50%,transparent 88%);
}
.tpl-bold .pf-ava-ring{animation:none;border-width:3px;inset:-10px}
html[data-theme="dark"] .tpl-bold .pf-ava,
html[data-theme="dark"] .tpl-bold .pf-ava-let{box-shadow:0 0 36px -8px rgba(242,183,61,.4)}
html[data-theme="light"] .tpl-bold .pf-ava,
html[data-theme="light"] .tpl-bold .pf-ava-let{box-shadow:0 16px 38px -16px rgba(60,45,5,.35)}

/* ---------------- H2 — oltin kvadrat bullet + qalin chiziq ---------------- */
.tpl-bold .pf-h2{text-transform:uppercase;letter-spacing:.06em}
.tpl-bold .pf-h2::before{content:"";width:.5em;height:.5em;background:var(--accent);flex:none}
.tpl-bold .pf-h2::after{height:3px;background:linear-gradient(90deg,var(--accent) -10%,var(--line))}

/* ---------------- Tugmalar — chamfer (kesilgan burchak) uslub ---------------- */
.tpl-bold .btn{font-family:var(--display);text-transform:uppercase;letter-spacing:.09em}
.tpl-bold .btn:not(.cv-pulse){
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.tpl-bold .cv-pulse{font-family:var(--display);text-transform:uppercase;letter-spacing:.09em}

/* ---------------- Kichik elementlar — bir xil keskinlik ---------------- */
.tpl-bold .icon-btn{border-radius:8px}
.tpl-bold .view-chip{border-radius:8px}
.tpl-bold .soc{border-radius:8px}
.tpl-bold .soc:hover{background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);transform:translateY(-4px)}
.tpl-bold .chip,.tpl-bold .pj-tags span{font-family:var(--display);
  text-transform:uppercase;letter-spacing:.06em}
.tpl-bold .pj-tags span{border-radius:6px}
.tpl-bold .cslider-btn{border-radius:8px}
.tpl-bold .cslider-dots button{border-radius:2px}
.tpl-bold .cform .field{border-radius:8px}
.tpl-bold .pst{border-radius:8px}

/* ---------------- Timeline — romb nuqtalar ---------------- */
.tpl-bold .tl-dot{border-radius:2px;transform:rotate(45deg)}

/* ---------------- Kartalar — brutal offset-soya hover'da ---------------- */
.tpl-bold .pj-card:hover{
  transform:translateY(-6px) skewY(-.5deg);border-color:var(--accent);
  box-shadow:9px 9px 0 0 color-mix(in srgb,var(--accent) 26%,transparent),var(--shadow);
}
.tpl-bold .cslide,.tpl-bold .cform{border-radius:10px}

/* ---------------- Nav — skrolldagi oltin chiziq ---------------- */
.tpl-bold .pf-nav{border-bottom:2px solid transparent}
.tpl-bold .pf-nav.is-scrolled{border-bottom:2px solid var(--accent)}

/* ---------------- Footer — keskin yakun ---------------- */
.tpl-bold .pf-foot{border-top:3px solid var(--line)}