/* ==========================================================================
   Vizitka (vizitka/*.php) — kart dizaynı və bölmə səhifələri
   Kartın ölçüləri sabit piksellə verilib ki, PNG/JPG/PDF ixracı hər cihazda
   eyni nəticəni versin; ekranda isə transform: scale() ilə kiçildilir.
   ========================================================================== */

:root {
  --vz-card-w: 1000px;
  --vz-card-h: 600px;
  --vz-dark: #2a2d31;
}

/* --------------------------------------------------------------------------
   İxrac üçün klon konteyneri.
   Yükləmə zamanı kartın nüsxəsi bu qutuya qoyulur. Buradakı qaydalar
   mobil media sorğularından SONRA gəlmir, ona görə ölçüləri açıq şəkildə
   sabitləyirik — telefonda çəkilən şəkil də masaüstü ilə eyni olsun.
   -------------------------------------------------------------------------- */
.vz-export-root { width: 1000px !important; }
.vz-export-root .vz-card {
  width: 1000px !important;
  height: 600px !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

/* Qlobus ikonlarının ixracda mövqe düzəlişi.
   Kartı şəklə çevirən html2canvas mətnin baza xəttini brauzerdən fərqli
   hesablayır və yazını bir neçə piksel aşağı çəkir. Nəticədə YÜKLƏNMİŞ
   şəkildə ikon yazıdan yuxarıda qalırdı (ekranda isə düzgün idi).
   Ölçülmüş fərq: alt zolaqda ~2px, sol paneldəki lövhəcikdə ~0.7px.
   Düzəliş yalnız ixrac nüsxəsinə tətbiq olunur — ekrandakı kart toxunulmur. */
.vz-export-root .vz-bottom-icon { position: relative; top: 2px; }
.vz-export-root .vz-site-icon   { position: relative; top: 0.7px; }

/* ------------------------------- KART ------------------------------- */
.vz-card {
  position: relative;
  width: var(--vz-card-w);
  height: var(--vz-card-h);
  display: grid;
  grid-template-columns: 340px 1fr;
  background: #fff;
  border-radius: 26px;
  overflow: hidden;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  color: #1c1e21;
  box-shadow: 0 18px 44px -14px rgba(20, 12, 14, .35);
  /* Ekranda kiçildilir — ixracda tam ölçü işlədilir */
  transform-origin: top left;
}

/* ---------------------------- SOL PANEL ---------------------------- */
.vz-left {
  position: relative;
  background: var(--vz-dark);
  color: #fff;
  padding: 30px 26px 0;
  display: flex; flex-direction: column; align-items: center;
}
/* Üzvlük zolağı altda mütləq mövqedədir — məzmun onun üstünə düşməsin deyə
   panelə aşağıdan boşluq verilir. Zolaq yoxdursa boşluq da lazım deyil. */
.vz-left.has-member { padding-bottom: 80px; }

.vz-brand { text-align: center; margin-bottom: 16px; }
/* Loqo bıçaqlarla birlikdə enlidir (120×96 viewBox), ona görə hündürlükdən
   çox enə görə ölçülür. Rəng seçilmiş vizitka rəngindən gəlir. */
.vz-brand-hat { display: block; width: 118px; height: 94px; margin: 0 auto 8px; color: var(--vz-accent); }
.vz-brand-hat svg { width: 100%; height: 100%; }
.vz-brand-name {
  display: block; font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1;
  font-family: var(--font-display, inherit);
}
.vz-brand-name span { color: var(--vz-accent); }
.vz-brand-sub {
  display: block; margin-top: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: .18em; color: var(--vz-accent);
}

.vz-photo {
  width: 208px; height: 250px;
  border-radius: 16px; overflow: hidden;
  border: 4px solid var(--vz-accent);
  background: #3a3d42;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Foto fon şəkli kimi verilir — html2canvas onu düzgün çəkir (object-fit yox) */
.vz-photo.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.vz-photo-fallback { font-size: 76px; font-weight: 800; color: var(--vz-accent); }

/* Sayt ünvanı — loqonun təkrarı deyil, ayrıca yumru lövhəcik.
   Sol panel darısqaldır (600 px hündürlük, altında üzvlük zolağı), ona görə
   ölçülər yığcam saxlanılıb ki, zolaqla arasında rahat boşluq qalsın. */
.vz-site {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 10px;
  /* Eni fotonun eni ilə eynidir (208px) — sol panel bir sütun kimi oxunur */
  min-width: 208px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1.5px solid rgba(255, 255, 255, .16);
  font-size: 17px; font-weight: 700; letter-spacing: .005em;
  white-space: nowrap;
}
.vz-site-icon { width: 22px; height: 22px; color: var(--vz-accent); flex-shrink: 0; }
.vz-site-icon svg { width: 100%; height: 100%; }
.vz-site-text { line-height: 1; }
/* "www." bir az sönük — gözü əsas ünvana yönəldir */
.vz-site-www { color: rgba(255, 255, 255, .55); font-weight: 600; }

/* Üzvlük tarixi — sol panelin altında rəngli zolaq */
.vz-member {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 26px;
  background: var(--vz-accent);
  border-radius: 0 22px 0 0;
}
.vz-member-icon { width: 34px; height: 34px; color: #fff; flex-shrink: 0; }
.vz-member-icon svg { width: 100%; height: 100%; }
.vz-member-text { display: flex; flex-direction: column; line-height: 1.25; }
.vz-member-text b { font-size: 15px; font-weight: 800; letter-spacing: .06em; }
.vz-member-text span { font-size: 19px; font-weight: 700; }

/* ---------------------------- SAĞ PANEL ---------------------------- */
.vz-right { position: relative; padding: 0 40px; display: flex; flex-direction: column; }

.vz-topbar {
  position: absolute; top: 0; right: 0;
  padding: 12px 34px 12px 40px;
  background: var(--vz-accent); color: #fff;
  font-size: 16px; font-weight: 800; letter-spacing: .07em;
  border-radius: 0 0 0 26px;
}

.vz-head { padding-top: 74px; }
.vz-name {
  margin: 0; font-family: var(--font-display, inherit);
  font-size: 54px; font-weight: 800; line-height: 1.02; letter-spacing: -.02em;
  text-transform: uppercase; color: #14161a;
}
/* Uzun adlar üçün pilləli ölçülər — bax card-render.php */
.vz-name.vz-name-s1 { font-size: 48px; }
.vz-name.vz-name-s2 { font-size: 42px; }
.vz-name.vz-name-s3 { font-size: 36px; }
.vz-name.vz-name-s4 { font-size: 31px; }
.vz-name.vz-name-s5 { font-size: 27px; }
.vz-title {
  margin: 6px 0 0; font-size: 22px; font-weight: 800;
  letter-spacing: .01em; color: var(--vz-accent); text-transform: uppercase;
}

/* Məlumat sətirləri.
   Sətir hündürlüyü nişanla mətnin böyüyünə görə formalaşır, ona görə
   line-height dəyərləri açıq yazılıb — kartın hündürlüyü 600 px sabitdir və
   hesablama təxmini olmamalıdır. */
.vz-rows { margin-top: 24px; display: flex; flex-direction: column; }
.vz-row {
  display: flex; align-items: center; gap: 16px;
  padding: 9px 0;
  border-bottom: 1.5px solid #f0e6e2;
  max-width: 420px;
}
.vz-row:last-child { border-bottom: none; }
.vz-row-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%; background: var(--vz-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.vz-row-icon svg { width: 24px; height: 24px; }
.vz-row-text { display: flex; flex-direction: column; min-width: 0; }
.vz-row-label { font-size: 15px; line-height: 1.25; font-weight: 800; letter-spacing: .04em; color: #14161a; }
.vz-row-value { font-size: 17px; line-height: 1.3; color: #40454b; margin-top: 1px; }

/* 5 sətir — bir az yığcam */
.vz-rows.is-tight .vz-row { padding: 8px 0; gap: 15px; }
.vz-rows.is-tight .vz-row-icon { width: 43px; height: 43px; }
.vz-rows.is-tight .vz-row-icon svg { width: 23px; height: 23px; }
.vz-rows.is-tight .vz-row-label { font-size: 14.5px; }
.vz-rows.is-tight .vz-row-value { font-size: 16.5px; }

/* 6 sətir (dolu profil) — hamısı alt zolağa toxunmadan yerləşir */
.vz-rows.is-tighter { margin-top: 18px; }
.vz-rows.is-tighter .vz-row { padding: 6px 0; gap: 14px; }
.vz-rows.is-tighter .vz-row-icon { width: 40px; height: 40px; }
.vz-rows.is-tighter .vz-row-icon svg { width: 22px; height: 22px; }
.vz-rows.is-tighter .vz-row-label { font-size: 14px; line-height: 1.2; }
.vz-rows.is-tighter .vz-row-value { font-size: 16px; line-height: 1.25; }

/* Su nişanı */
.vz-watermark {
  position: absolute; right: 40px; top: 130px;
  width: 250px; height: 250px; color: var(--vz-accent);
  pointer-events: none;
}
.vz-watermark svg { width: 100%; height: 100%; }

/* Alt zolaq */
.vz-bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 20px;
  padding: 16px 40px;
  background: var(--vz-dark); color: #fff;
}
.vz-bottom-brand {
  display: flex; align-items: center; gap: 11px;
  font-size: 23px; font-weight: 800; color: var(--vz-accent);
  flex-shrink: 0;
}
.vz-bottom-icon { width: 27px; height: 27px; color: #fff; }
.vz-bottom-icon svg { width: 100%; height: 100%; }
.vz-bottom-slogan {
  font-size: 19px; font-style: italic; color: #f2f2f2;
  border-left: 2px solid rgba(255, 255, 255, .35); padding-left: 20px;
}

/* QR kod */
.vz-qr {
  position: absolute; right: 40px; bottom: 84px;
  width: 122px; height: 122px; padding: 7px;
  background: #fff; border-radius: 12px;
  border: 3px solid var(--vz-accent);
  display: flex; align-items: center; justify-content: center;
}
.vz-qr img, .vz-qr canvas, .vz-qr table { width: 100% !important; height: 100% !important; display: block; }

/* ==========================================================================
   Kartın ekranda göstərilməsi — sabit ölçü qorunur, miqyas dəyişir
   ========================================================================== */
/* Kart 1000×600 sabit ölçüdədir (ixracın keyfiyyəti üçün), ekranda isə
   konteynerin eninə görə kiçildilir.

   QEYD: miqyas CSS-də dəqiq hesablana bilmir — scale() vahidsiz ədəd tələb
   edir, calc() isə uzunluğu ədədə çevirə bilmir. Ona görə:
     1) CSS aşağıdakı media sorğuları ilə YAXIN başlanğıc dəyəri verir —
        kart səhifə açılan an dərhal görünür, heç nə gözləmir;
     2) card-render.php-dəki sətiriçi skript ilk boyamadan əvvəl dəyəri
        konteynerin əsl eninə görə dəqiqləşdirir;
     3) vizitka.js sonrakı ölçü dəyişikliklərini izləyir.
   Hündürlüyü CSS özü aspect-ratio ilə tutur:
   600 × scale = (en × scale) × 0.6 — yəni hündürlük həmişə dəqiq uyğun gəlir. */
.vz-stage {
  position: relative;
  width: 100%;
  max-width: var(--vz-card-w);
  aspect-ratio: 1000 / 600;
  overflow: hidden;

  /* Başlanğıc miqyas — səhifə açılan an CSS-dən gəlir.
     Beləliklə kart HEÇ NƏ GÖZLƏMİR: nə skript faylının yüklənməsini,
     nə DOMContentLoaded-i. card-render.php-dəki kiçik sətiriçi skript
     ilk boyamadan ƏVVƏL bu dəyəri dəqiqləşdirir, vizitka.js isə sonradan
     (pəncərə ölçüsü dəyişəndə) yeniləyir. */
  --vz-scale: 0.30;
}
@media (min-width:  400px) { .vz-stage { --vz-scale: 0.34; } }
@media (min-width:  480px) { .vz-stage { --vz-scale: 0.42; } }
@media (min-width:  560px) { .vz-stage { --vz-scale: 0.48; } }
@media (min-width:  640px) { .vz-stage { --vz-scale: 0.56; } }
@media (min-width:  768px) { .vz-stage { --vz-scale: 0.68; } }
/* 861px-dən sonra yan panel (dash-sidebar) qayıdır — əsas sütun daralır */
@media (min-width:  861px) { .vz-stage { --vz-scale: 0.52; } }
@media (min-width: 1000px) { .vz-stage { --vz-scale: 0.64; } }
@media (min-width: 1120px) { .vz-stage { --vz-scale: 0.74; } }
@media (min-width: 1240px) { .vz-stage { --vz-scale: 0.80; } }

.vz-stage-inner {
  position: absolute;
  top: 0; left: 0;
  width: var(--vz-card-w);
  height: var(--vz-card-h);
  transform-origin: top left;
  transform: scale(var(--vz-scale, 0.5));
  /* opacity YOXDUR — kart heç vaxt gizlədilmir.
     Əvvəllər miqyas hesablanana qədər opacity:0 idi və skript gec
     yüklənəndə vizitka 1-2 saniyə boş görünürdü. */
}
/* Köhnə nişanlar üçün uyğunluq — heç nəyi gizlətmirlər */
.vz-stage.is-ready .vz-stage-inner { opacity: 1; }

/* ==========================================================================
   Vizitka bölməsinin səhifələri
   ========================================================================== */
.vz-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.vz-page-head h1 { margin: 0; font-size: clamp(20px, 2.4vw, 26px); }
.vz-page-head p { margin: 6px 0 0; font-size: 14px; color: var(--color-ink-soft, #5c464a); }

/* Rəng seçimi */
.vz-colors { display: flex; flex-wrap: wrap; gap: 10px; }
.vz-color-opt { position: relative; cursor: pointer; }
.vz-color-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.vz-color-swatch {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid transparent;
  box-shadow: 0 0 0 1px var(--color-border, #f1e4e6);
  transition: transform .14s ease, border-color .14s ease;
}
.vz-color-opt:hover .vz-color-swatch { transform: scale(1.06); }
.vz-color-opt input:checked + .vz-color-swatch { border-color: var(--color-ink, #241417); }
.vz-color-opt input:checked + .vz-color-swatch::after {
  content: "✓"; color: #fff; font-size: 19px; font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.vz-color-name {
  display: block; text-align: center; margin-top: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--color-ink-soft, #5c464a);
}

/* Əməliyyat düymələri */
.vz-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }

/* Yükləmə formatları */
.vz-formats { display: flex; flex-wrap: wrap; gap: 9px; }
.vz-format-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: var(--radius-full, 999px);
  border: 1.5px solid var(--color-border, #f1e4e6); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700;
  color: var(--color-ink, #241417); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.vz-format-btn:hover:not(:disabled) {
  border-color: var(--color-primary, #f43f5e);
  background: var(--color-primary-tint, #fff1f3);
  color: var(--color-primary-dark, #d81f3d);
}
.vz-format-btn:disabled { opacity: .6; cursor: wait; }

/* İctimai vizitka siyahısı */
.vz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.vz-grid-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; text-align: center;
  background: #fff; border: 1px solid var(--color-border, #f1e4e6);
  border-radius: var(--radius-lg, 22px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vz-grid-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary, #f43f5e);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(180, 20, 50, .10));
}
.vz-grid-avatar {
  width: 76px; height: 76px; margin: 0 auto; border-radius: 50%;
  overflow: hidden; border: 3px solid var(--vz-item-accent, #f4761b);
  background: var(--color-surface-alt, #fdf2f4);
  display: flex; align-items: center; justify-content: center;
  font-size: 27px; font-weight: 800; color: var(--vz-item-accent, #f4761b);
}
.vz-grid-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vz-grid-name { font-weight: 700; font-size: 15px; color: var(--color-ink, #241417); }
.vz-grid-title { font-size: 12.5px; color: var(--color-ink-faint, #9a8286); }

/* cv-detail.php-dəki vizitka bölməsi */
.vz-cv-section { margin-top: 18px; }

/* ==========================================================================
   view.php — vizitkanın ictimai səhifəsi
   Solda kart, sağda sahibi haqqında panel. Kartın eni məhdudlaşdırılıb:
   əvvəllər səhifənin bütün enini (1120 px) tuturdu və nəhəng görünürdü.
   ========================================================================== */
.vz-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 22px;
  align-items: start;
}
.vz-view .detail-card { margin-bottom: 0; }
.vz-view-main,
.vz-view-side { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* Kartın qutusu — kart mərkəzləşdirilir və 720 px-dən böyük olmur */
.vz-view-card { padding: 24px; }
.vz-view-main .vz-stage { max-width: 720px; margin: 0 auto; }
/* Bu səhifədə kart 720 px ilə məhdudlaşdığı üçün başlanğıc miqyas da
   ona uyğun verilir (sətiriçi skript onsuz da dəqiqləşdirir). */
@media (min-width: 768px) { .vz-view-main .vz-stage { --vz-scale: 0.66; } }
@media (min-width: 900px) { .vz-view-main .vz-stage { --vz-scale: 0.72; } }

/* Blok başlıqları */
.vz-block-head { margin-bottom: 14px; }
.vz-block-head h2 { font-size: 16px; margin: 0; }
.vz-block-head p { margin: 5px 0 0; font-size: 13px; color: var(--color-ink-faint, #9a8286); }

/* Sahib paneli */
.vz-owner-card { text-align: center; padding: 26px 22px; }
.vz-owner-avatar {
  width: 96px; height: 96px; margin: 0 auto 14px;
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--vz-item-accent, #f4761b);
  background: var(--color-surface-alt, #fdf2f4);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: var(--vz-item-accent, #f4761b);
}
.vz-owner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.vz-owner-name { font-size: 20px; margin: 0; line-height: 1.25; }
.vz-owner-title {
  margin: 5px 0 0; font-size: 13.5px; font-weight: 700;
  color: var(--color-primary-dark, #d81f3d);
}
.vz-owner-status { margin: 10px 0 0; }

.vz-owner-meta {
  list-style: none; margin: 18px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--color-border, #f1e4e6);
  display: flex; flex-direction: column; gap: 9px;
}
.vz-owner-meta li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; font-size: 13.5px;
}
.vz-owner-meta span { color: var(--color-ink-faint, #9a8286); }
.vz-owner-meta b { color: var(--color-ink, #241417); font-weight: 700; text-align: right; }

.vz-owner-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

/* Statistika */
.vz-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vz-stat {
  text-align: center; padding: 14px 6px;
  background: var(--color-surface-alt, #fdf2f4);
  border-radius: var(--radius-md, 14px);
}
.vz-stat b {
  display: block; font-family: var(--font-display, inherit);
  font-size: 21px; color: var(--color-ink, #241417); line-height: 1.1;
}
.vz-stat span { font-size: 11.5px; color: var(--color-ink-faint, #9a8286); font-weight: 600; }

/* Yan panel dar ekranda aşağı düşür */
@media (max-width: 980px) {
  .vz-view { grid-template-columns: 1fr; }
  .vz-view-side { flex-direction: row; flex-wrap: wrap; }
  /* Burada sıra düzülüşüdür — 300px ENDİR, düzgündür */
  .vz-view-side > .detail-card { flex: 1 1 300px; }
}

/* Qlobal style.css 860px-dən aşağıda bütün .detail-card-lara `overflow-x:auto`
   verir (geniş cədvəllər üçün). CSS qaydasına görə bir ox `visible` olmayanda
   digəri də `auto` olur — yəni kart sürüşən qutuya çevrilir. Vizitka
   bölməsində geniş cədvəl yoxdur, ona görə bunu geri qaytarırıq. */
@media (max-width: 860px) {
  .vz-view .detail-card { overflow: visible; }
}

@media (max-width: 640px) {
  .vz-view, .vz-view-main, .vz-view-side { gap: 16px; }
  .vz-view-side { flex-direction: column; }
  /* SÜTUN düzülüşündə flex-basis artıq HÜNDÜRLÜKDÜR. `1 1 300px` qalsaydı,
     kart 300px-ə sıxılıb məzmununu öz içində sürüşdürürdü — mobildə panel
     "aşağı-yuxarı oynayırdı". Kart tam hündürlüyündə olmalıdır. */
  .vz-view-side > .detail-card { flex: 0 0 auto; }
  .vz-view-card { padding: 16px; }
  .vz-owner-card { padding: 22px 18px; }
  .vz-owner-avatar { width: 78px; height: 78px; font-size: 28px; }
  .vz-owner-name { font-size: 18px; }
}

/* ------------------------------- Mobil ------------------------------- */
@media (max-width: 640px) {
  .vz-page-head { gap: 12px; }
  .vz-page-head .btn { width: 100%; justify-content: center; }
  .vz-actions .btn, .vz-format-btn { flex: 1 1 100%; justify-content: center; }
  .vz-color-swatch { width: 42px; height: 42px; }
  .vz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .vz-grid-avatar { width: 62px; height: 62px; font-size: 22px; }
}