/* =====================================================================
   havolalar.uz — Portfel BAZA uslublari (shablonlar buni kengaytiradi)
   Muallif: farik.uz (Farrux Norinovich)
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}

.tpl{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  transition:background .35s,color .35s;
}
.wrap{width:min(1040px,92%);margin-inline:auto}
.muted{color:var(--muted)}
.sm{font-size:.85rem}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.22em}
.ic-when{display:none}
html[data-theme="light"] .ic-when[data-tm="light"],
html[data-theme="dark"] .ic-when[data-tm="dark"]{display:inline-flex}

.btn{display:inline-flex;align-items:center;gap:.55em;justify-content:center;padding:.8em 1.7em;
  border-radius:var(--btn-r,999px);font-weight:600;border:1px solid var(--line);
  background:var(--card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),
  background .3s,border-color .3s,color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96)}
.btn-sm{padding:.5em 1em;font-size:.87rem}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:12px;border:1px solid var(--line);background:var(--card);transition:.25s}
.icon-btn:hover{border-color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.35em .85em;border-radius:999px;
  font-size:.83rem;font-weight:600;background:var(--accent-soft);color:var(--accent)}
.chip-ghost{background:var(--card);border:1px solid var(--line);color:var(--muted)}

/* ---------- Nav ---------- */
.pf-nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb,var(--bg) 80%,transparent);border-bottom:1px solid transparent;
  transition:border-color .3s}
.pf-nav.is-scrolled{border-color:var(--line)}
.pf-nav-in{display:flex;align-items:center;gap:1.2rem;height:62px}
.pf-brand{font-weight:800;font-family:var(--display);font-size:.95rem}
.pf-links{display:flex;gap:.2rem;margin-inline:auto}
.pf-links a{padding:.45em .9em;border-radius:999px;color:var(--muted);font-size:.9rem;font-weight:500;transition:.25s}
.pf-links a:hover,.pf-links a.is-active{color:var(--accent);background:var(--accent-soft)}
.pf-nav-right{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.view-chip{display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border-radius:999px;
  background:var(--card);border:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.view-chip b{color:var(--accent);font-variant-numeric:tabular-nums;transition:transform .3s}
.view-chip b.bump{transform:scale(1.15)}
.view-chip.big{padding:.6em 1.2em;font-size:.95rem}

/* ---------- Hero / About ---------- */
.pf-hero{min-height:calc(100svh - 62px);display:flex;align-items:center;text-align:center;
  padding:4rem 0;position:relative;overflow:hidden}
.pf-hero-in{display:flex;flex-direction:column;align-items:center;gap:1rem}
.pf-ava-wrap{position:relative}
.pf-ava{width:148px;height:148px;border-radius:var(--ava-r,50%);object-fit:cover;position:relative;z-index:1}
.pf-ava-let{display:inline-flex;align-items:center;justify-content:center;font-size:3.4rem;font-weight:800;
  background:var(--accent-soft);color:var(--accent)}
.pf-ava-ring{position:absolute;inset:-9px;border-radius:var(--ava-r,50%);border:2px solid var(--accent);
  animation:ringPulse 3s var(--ease) infinite}
@keyframes ringPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.05);opacity:.4}}
.pf-name{font-family:var(--display);font-size:clamp(2rem,6vw,3.4rem);line-height:1.1;letter-spacing:-.02em}
.pf-tagline{font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--accent);font-weight:600;max-width:52ch}
.pf-loc{display:flex;align-items:center;gap:.4em}
.pf-about{max-width:60ch;color:var(--muted)}

/* Rich formatlash — admin RTE'da yozilgan uslublar shu yerda ham aks etadi */
.pf-about b,.pf-about strong{font-weight:700;color:var(--ink)}
.pf-about blockquote{margin:.7em 0;padding:.35em 1em;text-align:left;max-width:56ch;
  border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;
  font-style:italic}
.pf-about code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--card2);border:1px solid var(--line);border-radius:7px;padding:.08em .45em}
.pf-about a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  transition:opacity .2s}
.pf-about a:hover{opacity:.8}
.pf-about u{text-decoration:underline}
.pf-chips{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}
.pf-socials{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.soc{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--muted);
  transition:transform .3s var(--ease),color .3s,border-color .3s,background .3s}
/* Kafolat: barcha ijtimoiy ikonkalar (fill ham, stroke ham) aniq o'lchamda ko'rinadi */
.soc svg,.soc .ic{width:20px;height:20px;display:block;flex:none;
  stroke:currentColor;fill:currentColor}
.soc svg[fill="none"]{fill:none;stroke:currentColor}
.soc:hover{transform:translateY(-4px) rotate(-4deg);color:var(--accent);border-color:var(--accent)}
.pf-scroll{position:absolute;bottom:26px;left:calc(50% - 20px);width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;color:var(--accent);
  animation:bob 2.2s ease-in-out infinite}
.pf-scroll .ic{transform:rotate(90deg);width:1.5em;height:1.5em}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}

/* ---------- Sections ---------- */
.pf-sec{padding:4.5rem 0}
.pf-h2{font-family:var(--display);font-size:clamp(1.5rem,4vw,2.1rem);margin-bottom:2.2rem;
  display:flex;align-items:center;gap:.7rem}
.pf-h2::after{content:"";flex:1;height:1px;background:var(--line)}
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.tl-title{display:flex;align-items:center;gap:.5em;margin-bottom:1.6rem;color:var(--accent);font-size:1.05rem}

/* Timeline */
.timeline{position:relative;padding-left:1.6rem}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--accent),var(--line))}
.tl-item{position:relative;padding:0 0 1.8rem .9rem}
.tl-dot{position:absolute;left:-1.6rem;top:6px;width:14px;height:14px;border-radius:50%;
  background:var(--bg);border:3px solid var(--accent)}
.tl-date{font-size:.82rem;font-weight:700;color:var(--accent);letter-spacing:.04em;text-transform:uppercase}
.tl-item h4{margin:.25rem 0 .1rem;font-size:1.08rem}
.tl-org{color:var(--ink);opacity:.75;font-weight:500;font-size:.93rem}
.tl-desc{margin-top:.35rem;font-size:.93rem}

/* Lewiyalar grid */
.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.3rem}
.pj-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r,20px);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.pj-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:var(--shadow)}
.pj-imgw{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--card2)}
.pj-img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pj-card:hover .pj-img{transform:scale(1.06)}
.pj-ph{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:2rem}
.pj-ph .ic{width:2.2em;height:2.2em}
.pj-open{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:.4em;
  padding:.5em 1em;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:.85rem;opacity:0;transform:translateY(8px);transition:.3s var(--ease)}
.pj-card:hover .pj-open{opacity:1;transform:none}
.pj-body{padding:1.1rem 1.2rem 1.3rem}
.pj-body h3{font-size:1.08rem;margin-bottom:.3rem}
.pj-body .muted{font-size:.9rem}
.pj-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.8rem}
.pj-tags span{font-size:.76rem;font-weight:600;padding:.3em .75em;border-radius:999px;
  background:var(--accent-soft);color:var(--accent)}

/* ---------- Izohlar barabani ---------- */
.cslider{position:relative;max-width:720px;margin:0 auto 3rem;overflow:hidden;
  border-radius:var(--r,20px)}
.cslider-track{display:flex;transition:transform .55s var(--ease)}
.cslide{flex:0 0 100%;padding:2.4rem 2.2rem;background:var(--card);border:1px solid var(--line);
  text-align:center}
.cslide blockquote{font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:500;line-height:1.55;max-width:46ch;margin:0 auto}
.cslide figcaption{display:flex;align-items:center;gap:.7rem;justify-content:center;margin-top:1.4rem}
.cslide figcaption .muted{font-size:.83rem;display:block;text-align:left}
.ava-let{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;
  justify-content:center;background:var(--accent-soft);color:var(--accent);font-weight:800}
.ava-pic{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none;
  border:1px solid var(--line)}
.cslider-btn{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;
  border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:.25s;z-index:2}
.cslider-btn:hover{border-color:var(--accent);color:var(--accent)}
.cslider-btn.prev{left:10px}.cslider-btn.next{right:10px}
.cslider-dots{display:flex;gap:.45rem;justify-content:center;position:relative;margin-top:1rem}
.cslider-dots button{width:8px;height:8px;border-radius:99px;background:var(--line);
  transition:width .3s var(--ease),background .3s}
.cslider-dots button.is-active{width:26px;background:var(--accent)}
.c-empty{text-align:center;margin-bottom:2.5rem}

/* Izoh formasi */
.cform{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r,20px);padding:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.cform .field{display:flex;align-items:center;gap:.6em;background:var(--card2);
  border:1px solid var(--line);border-radius:14px;padding:.8em 1em;transition:border-color .3s,box-shadow .3s}
.cform .field:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.cform .field .ic{color:var(--muted)}
.cform input,.cform textarea{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);resize:vertical}
.cform .btn{align-self:flex-end}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.field-err{color:var(--danger,#f26d6d);font-size:.86rem}

/* ---------- Footer ---------- */
.pf-foot{border-top:1px solid var(--line);padding:3.5rem 0 2.5rem;text-align:center}
.pf-foot-in{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.pf-foot-ava{width:74px;height:74px;border-radius:50%;object-fit:cover}
.pf-foot .pf-ava-let{font-size:1.7rem}
.pf-foot strong{font-size:1.2rem;font-family:var(--display)}
.pf-credit a{color:var(--accent);font-weight:600}

/* CV pulsatsiya tugmasi */
.cv-pulse{position:relative;background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
  font-weight:700;margin-top:.6rem}
.cv-pulse::before,.cv-pulse::after{content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:2px solid var(--accent);animation:cvPulse 2s ease-out infinite;pointer-events:none}
.cv-pulse::after{animation-delay:1s}
@keyframes cvPulse{from{transform:scale(1);opacity:.8}to{transform:scale(1.35);opacity:0}}
.cv-pulse:hover{filter:brightness(1.07)}

/* ---------- Umumiy effektlar (app.css bilan bir xil) ---------- */
.off-radar{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:1rem;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(10px);text-align:center;padding:1rem}
.off-radar[hidden]{display:none}
.radar-wrap{position:relative;width:130px;height:130px}
.radar-dot{position:absolute;inset:calc(50% - 7px);border-radius:50%;background:var(--danger,#f26d6d)}
.radar-ring{position:absolute;inset:calc(50% - 7px);border-radius:50%;border:2px solid var(--danger,#f26d6d);
  animation:radar 2.4s ease-out infinite}
.radar-ring.r2{animation-delay:.8s}.radar-ring.r3{animation-delay:1.6s}
@keyframes radar{from{transform:scale(.2);opacity:.9}to{transform:scale(4.6);opacity:0}}
.off-radar h3{display:flex;gap:.5em;align-items:center}
.toasts{position:fixed;bottom:1.2rem;left:50%;transform:translateX(-50%);z-index:300;display:flex;
  flex-direction:column;gap:.5rem;pointer-events:none}
.toast{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.7em 1.3em;
  font-weight:600;font-size:.92rem;animation:toastIn .35s var(--ease);box-shadow:var(--shadow)}
@keyframes toastIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
[data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
[data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}
html{scroll-behavior:smooth}

html,body{max-width:100%;overflow-x:clip}

@media (max-width:820px){
  .pf-links{display:none}
  .pf-cols{grid-template-columns:1fr;gap:2rem}
  .cslide{padding:1.8rem 1.2rem}
}
@media (max-width:560px){
  .pj-grid{grid-template-columns:1fr}
  .pf-name{font-size:1.7rem}
  .pf-nav-in{gap:.6rem}
  .view-chip b{font-size:.85rem}
  .cform-row{grid-template-columns:1fr}
  .cslider-btn.prev{left:2px}
  .cslider-btn.next{right:2px}
  .pf-brand{max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- Yulduzli izohlar (landing'ga o'xshash) ---------- */
.pstars{display:flex;align-items:center;gap:.3rem;margin-bottom:.9rem}
.pst{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:10px;border:1px solid var(--line);background:var(--card2);color:var(--muted);
  transition:.18s var(--ease);cursor:pointer}
.pst .ic{width:19px;height:19px;fill:currentColor;stroke:none}
.pst:hover{transform:translateY(-2px);border-color:var(--accent)}
.pst.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.pstars-lab{margin-left:.5rem;font-size:.85rem}
.cstars{display:inline-flex;gap:.15em;margin-bottom:.4rem}
.cst{display:inline-flex;color:var(--line)}
.cst .ic{width:15px;height:15px;fill:currentColor;stroke:none}
.cst.on{color:var(--accent)}
.cform-me{display:flex;align-items:center;gap:.5em;font-size:.92rem;margin:0 0 .8rem;padding:.6em .9em;
  background:var(--card2);border:1px solid var(--line);border-radius:12px}
.cform-me .ic{width:1.1em;height:1.1em;color:var(--accent)}

/* =====================================================================
   Chaqmoq (bolt) loading — izoh yuborish tugmasining zamonaviy holati
   + forma atrofida elektr pulsatsiya + muvaffaqiyat chaqnashi
   ===================================================================== */
.btn-bolt{position:relative;overflow:hidden}
.btn-bolt .btn-face{display:inline-flex;align-items:center;gap:.55em;
  transition:opacity .22s var(--ease),transform .3s var(--ease)}
.btn-bolt .btn-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(12px) scale(.5);
  transition:opacity .22s var(--ease),transform .3s var(--ease)}
.btn-bolt.is-loading{pointer-events:none}
.btn-bolt.is-loading .btn-face{opacity:0;transform:translateY(-12px) scale(.55)}
.btn-bolt.is-loading .btn-load{opacity:1;transform:none}
/* Tugma bo'ylab yuguruvchi elektr nuri */
.btn-bolt.is-loading::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.6) 50%,transparent 68%);
  background-size:220% 100%;mix-blend-mode:overlay;animation:boltSweep .85s linear infinite}
@keyframes boltSweep{from{background-position:190% 0}to{background-position:-90% 0}}
/* Yonib-o'chuvchi chaqmoq */
.bolt{width:21px;height:21px;fill:currentColor;animation:boltFlash .55s ease-in-out infinite}
@keyframes boltFlash{
  0%,100%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 5px rgba(255,244,200,.95))}
  35%{opacity:.35;transform:scale(.86) rotate(-5deg);filter:none}
  70%{opacity:1;transform:scale(1.09)}
}
/* Forma yuborilyotganda — elektr pulsatsiya */
.cform.is-busy{border-color:var(--accent);animation:cBusy 1.15s ease-in-out infinite}
@keyframes cBusy{
  0%,100%{box-shadow:0 0 0 3px var(--accent-soft)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 24%,transparent)}
}
/* Muvaffaqiyat — chaqmoq chaqnashi */
.cform.is-done{border-color:var(--accent);animation:cBolt 1s ease-out}
@keyframes cBolt{
  0%{box-shadow:0 0 0 0 var(--accent)}
  12%{box-shadow:0 0 70px 6px color-mix(in srgb,var(--accent) 60%,transparent)}
  100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){
  .bolt,.btn-bolt.is-loading::after,.cform.is-busy,.cform.is-done{animation:none!important}
}