/* =========================================================================
   upwebo — İCTİMAİ SAYT · v2 "poster studio"
   Yeni renk/ölçü icat edilmez; yalnız upwebo.css token'ları kullanılır.
   ========================================================================= */

/* --- Başlık --------------------------------------------------------------- */
.site-head { position: sticky; inset-block-start: 0; z-index: 40; background: var(--paper); border-block-end: var(--line-w) solid var(--ink); }
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-block-size: 66px; }
.site-head__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.05em; text-transform: uppercase; }
.site-nav { display: flex; gap: 0; }
.site-nav a { padding: .5rem .75rem; border: var(--line-w) solid transparent; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.site-nav a:hover { background: var(--acc-lime); border-color: var(--ink); }
.site-head__end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
/* A56 — uzun ad başlığı dağıtmasın; mobil 375 px-də də daşma yoxdur. */
.site-head__me { max-inline-size: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .site-head__me { max-inline-size: 8ch; } }
@media (max-width: 980px) { .site-nav { display: none; } }
@media (max-width: 760px) {
  .site-head__in { flex-wrap: wrap; padding-block: var(--s-3); row-gap: var(--s-3); }
  .site-head__end { flex: 1 1 100%; justify-content: space-between; }
}

.locale-switch { display: flex; gap: var(--s-2); }
/* Valyuta kilidinin səbəbi. Seçicinin yanında dar sütunda oturur, ona görə
   uzun cümlə düzülüşü dağıdırdı: qısa mətn + sərt eni var. Tam izah ödəniş
   ekranındadır (flow.rail_az_*), burada təkrarlanmır. */
.locale-switch__why { white-space: nowrap; align-self: center; margin: 0; }
/* Dar ekranda başlıq zolağı onsuz da sıxdır: etiket gizlənir, səbəb
   kilidli seçicinin `title`-ında və ödəniş ekranında qalır. */
@media (max-width: 900px) { .locale-switch__why { display: none; } }
.locale-switch select { appearance: none; background: var(--paper); border: var(--line-w) solid var(--ink); padding: .45rem .55rem; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); cursor: pointer; }

/* --- 3D hero -------------------------------------------------------------- */
.hero3d { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; min-block-size: clamp(32rem, 84vh, 50rem); display: flex; align-items: flex-end; border-block-end: var(--line-w) solid var(--ink); }
.hero3d canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 900ms var(--ease); }
.hero3d.is-live canvas { opacity: 1; }
.hero3d::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.92) 12%, rgba(10,10,10,.35) 62%, rgba(10,10,10,.1) 100%); z-index: 1; }
.hero3d__in { position: relative; z-index: 2; inline-size: 100%; padding-block: clamp(3rem, 7vh, 5rem); }
.hero3d .u-mega { color: #fff; }
.hero3d .u-lead { color: rgba(255, 255, 255, .88); }
.hero3d__row { display: flex; gap: var(--s-6); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-block-start: var(--s-6); }
/*
 * ⚠ CANLIDA TAPILAN SƏHV (14.09.2026): hero bloku məzmunu ALTA hizalanır
 * (`align-items: flex-end`), amma hero-nun HÜNDÜRLÜYÜ məzmuna görə dəyişir
 * (`min-block-size: clamp(...)`) — yəni qısa ekranda bu qeyd sətri
 * `.support-dock`-un (sabit, sağ-alt) düz ÜSTÜNƏ düşə bilər.
 *
 * ⚠ İLK CƏHD SƏHV ÇIXDI: şaquli boşluq (`padding-block-end`) əlavə etmək
 * kömək etmədi — hero-nun hündürlüyü məzmun-güdümlü olduğu üçün əlavə
 * dolğu sadəcə HERO-nu daha da uzadırdı, qeydin EKRANDAKI mövqeyi demək
 * olar ki dəyişmirdi. Doğru düzəliş ÜFÜQİ boşluqdur: dəstək düyməsinin
 * SÜTUNUNU rezerv edirik ki, mətn HANSI ŞAQULİ mövqedə bitsə-bitsin, sağ
 * kənarı heç vaxt həmin sütuna girməsin (`.consent-bar`-da işlədilən eyni
 * prinsip). Dəstək dilinə görə düymə eni dəyişir (ES/PT "Preguntar a
 * soporte"/"Falar com o suporte" = 19 hərf) — bütün dillər üçün kifayət
 * qədər geniş boşluq saxlanılır.
 */
.hero3d__note { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); padding-inline-end: 13rem; }
.hero3d__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }

/* --- Kategori kartları — renkli bloklar ---------------------------------- */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); border-block-end: var(--line-w) solid var(--ink); }
@media (max-width: 980px) { .cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cats { grid-template-columns: 1fr; } }
.cat {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-block-size: clamp(18rem, 30vw, 26rem); padding: var(--s-5);
  background: var(--accent); color: var(--accent-on);
  border-inline-start: var(--line-w) solid var(--ink); overflow: hidden;
  transition: color var(--t-base) var(--ease);
}
.cat:first-child { border-inline-start: 0; }
@media (max-width: 980px) { .cat:nth-child(3) { border-inline-start: 0; } .cat:nth-child(n+3) { border-block-start: var(--line-w) solid var(--ink); } }
@media (max-width: 560px) { .cat { border-inline-start: 0; border-block-start: var(--line-w) solid var(--ink); } .cat:first-child { border-block-start: 0; } }
.cat__index { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 5.5rem); line-height: .8; letter-spacing: -.05em; opacity: .4; }
.cat__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.1rem); letter-spacing: -.03em; line-height: 1; text-transform: uppercase; }
.cat__blurb { font-size: var(--t-small); opacity: .88; margin-block: var(--s-3) var(--s-5); max-inline-size: 30ch; }
.cat__go { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* Üzerine gelince blok ters döner: renkli zemin → mürekkep */
.cat::before { content: ""; position: absolute; inset: 0; background: var(--ink); transform: translateY(101%); transition: transform var(--t-base) var(--ease); z-index: 0; }
.cat:hover::before { transform: translateY(0); }
.cat > * { position: relative; z-index: 1; }
.cat:hover { color: var(--paper); }
.cat:hover .cat__index { color: var(--accent); opacity: 1; }

/* --- Kategori şeridi ------------------------------------------------------ */
.catbar { border-block-end: var(--line-w) solid var(--ink); background: var(--paper); }
.catbar__in { display: flex; overflow-x: auto; }
.catbar a { padding: var(--s-4) var(--s-5); border-inline-end: var(--line-w) solid var(--ink); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background var(--t-fast) var(--ease); }
.catbar a:hover { background: var(--acc-lime); }
.catbar a[aria-current="page"] { background: var(--accent); color: var(--accent-on); }

/* --- Showreel ------------------------------------------------------------- */
.reel { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border: var(--line-w) solid var(--ink); overflow: hidden; display: grid; place-items: center; }
.reel img, .reel video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.reel__play { position: relative; z-index: 1; }
.reel__badge { position: absolute; z-index: 1; inset-block-end: 0; inset-inline-start: 0; padding: .5rem .75rem; background: var(--accent); color: var(--accent-on); border-block-start: var(--line-w) solid var(--ink); border-inline-end: var(--line-w) solid var(--ink); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 700px) { .reel { aspect-ratio: 4 / 3; } }
/* A62 — video oxudulanda öz düyməmizi/nişanımızı gizlədirik, native controls görünür. */
.reel.is-playing .reel__play, .reel.is-playing .reel__badge { display: none; }

/* --- Paketler ------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--line-w) solid var(--ink); }
@media (max-width: 980px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }
.plan { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border-inline-start: var(--line-w) solid var(--ink); background: var(--paper); }
.plan:first-child { border-inline-start: 0; }
@media (max-width: 980px) { .plan:nth-child(3) { border-inline-start: 0; } .plan:nth-child(n+3) { border-block-start: var(--line-w) solid var(--ink); } }
@media (max-width: 560px) { .plan { border-inline-start: 0; border-block-start: var(--line-w) solid var(--ink); } .plan:first-child { border-block-start: 0; } }
.plan--feature { background: var(--accent); color: var(--accent-on); }
.plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.plan__dur { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .72; }
.plan__price { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3.4vw, 3rem); letter-spacing: -.045em; line-height: .9; }
.plan__src { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .72; }
.plan .u-btn { margin-block-start: auto; justify-content: center; }
.plan--feature .u-btn { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 3px 3px 0 rgba(255,255,255,.85); }

/* --- Adımlar -------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; border-block-start: var(--line-w) solid var(--ink); }
.step { counter-increment: step; display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-5); padding-block: var(--s-5); border-block-end: var(--line-w) solid var(--ink); align-items: start; }
.step::before { content: "0" counter(step); font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: .9; letter-spacing: -.05em; color: var(--accent); }
.step h3 { margin: 0 0 var(--s-2); }
.step p { margin: 0; color: var(--ink-3); max-width: 62ch; font-size: var(--t-small); }
.u-ink .step p, .u-block .step p { color: inherit; opacity: .84; }
.u-ink .step, .u-block .step { border-block-end-color: rgba(255, 255, 255, .3); }
.u-ink .steps, .u-block .steps { border-block-start-color: rgba(255, 255, 255, .3); }
.u-ink .step::before, .u-block .step::before { color: inherit; opacity: .5; }
@media (max-width: 620px) { .step { grid-template-columns: 3.5rem 1fr; gap: var(--s-4); } .step::before { font-size: 1.5rem; } }

/* --- Olgu şeridi ---------------------------------------------------------- */
.stats { border-block-end: var(--line-w) solid var(--ink); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__cell { padding: var(--s-6) var(--s-5); border-inline-start: var(--line-w) solid var(--ink); }
.stats__cell:first-child { border-inline-start: 0; }
.stats__cell p { margin: var(--s-3) 0 0; font-family: var(--font-mono); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 780px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } .stats__cell:nth-child(3) { border-inline-start: 0; } .stats__cell:nth-child(n+3) { border-block-start: var(--line-w) solid var(--ink); } }

/* --- Portfolyo ------------------------------------------------------------ */
.folio { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.folio__item:nth-child(even) { margin-block-start: clamp(1.5rem, 5vw, 4rem); }
.folio__frame { aspect-ratio: 4 / 3; background: var(--paper-2); border: var(--line-w) solid var(--ink); overflow: hidden; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.folio__item:hover .folio__frame { box-shadow: var(--pop); transform: translate(-3px, -3px); }
.folio__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.folio__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-block-start: var(--s-3); }
.folio__meta p { margin: 0; }
/* A57 — "Nümunə" nişanı: stok kadr gerçək müştəri işi kimi göstərilmir. */
/* ⚠ `color` AÇIQ yazılır: iş səhifəsinin aksent (çəhrayı) başlıq blokunda nişan
   valideyndən ağ rəng alıb açıq fonda görünməz olurdu (canlıda tapıldı). */
.folio__sample { display: inline-block; padding: .1rem .45rem; margin-inline-end: .35rem; border: var(--line-w) solid var(--ink); background: var(--paper-2); color: var(--ink); font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; vertical-align: middle; }
@media (max-width: 780px) { .folio { grid-template-columns: 1fr; } .folio__item:nth-child(even) { margin-block-start: 0; } }

/* --- Kodla sipariş -------------------------------------------------------- */
.code-box { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
.code-box input { flex: 1 1 15rem; padding: .85rem 1rem; background: var(--paper); border: var(--line-w) solid var(--ink); font-family: var(--font-mono); font-size: var(--t-small); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.code-box input::placeholder { color: var(--ink-4); }

/* --- Altbilgi ------------------------------------------------------------- */
.site-foot { border-block-start: var(--line-w) solid var(--ink); padding-block: var(--s-8); }
.site-foot a:hover { background: var(--acc-lime); color: var(--ink); }
.site-foot__end { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }

/* --- Destek yuvası -------------------------------------------------------- */
.support-dock { position: fixed; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); z-index: 50; display: inline-flex; align-items: center; gap: var(--s-2); padding: .8rem 1.1rem; background: var(--acc-lime); color: var(--ink); border: var(--line-w) solid var(--ink); box-shadow: var(--pop-sm); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.support-dock:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.support-dock::before { content: ""; width: 8px; height: 8px; background: var(--ink); }

/* --- Açık destek paneli (TZ 9) ------------------------------------------- */
.dock-panel {
  position: fixed; inset-block-end: var(--s-5); inset-inline-end: var(--s-5); z-index: 60;
  inline-size: min(24rem, calc(100vw - 2rem)); max-block-size: min(34rem, calc(100vh - 4rem));
  display: flex; flex-direction: column;
  background: var(--paper); border: var(--line-w) solid var(--ink); box-shadow: var(--pop);
}
.dock-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); background: var(--accent); color: var(--accent-on); border-block-end: var(--line-w) solid var(--ink); }
.dock-panel__body { flex: 1; overflow-y: auto; padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; background: var(--paper-2); }
.dock-panel__foot { display: flex; gap: var(--s-2); padding: var(--s-3); border-block-start: var(--line-w) solid var(--ink); }
.dock-panel__foot input { padding: .6rem; }
.quick { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.quick button { padding: .35rem .55rem; background: var(--paper); border: var(--line-w) solid var(--ink); font-family: var(--font-mono); font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.quick button:hover { background: var(--acc-lime); }

/* --- TZ 9: dəstək çatı pəncərəsi --------------------------------------- */
.chat-dock { position: fixed; inset-block-end: calc(var(--s-5) + 4rem); inset-inline-end: var(--s-5); z-index: 60; inline-size: min(23rem, calc(100vw - 2rem)); max-block-size: min(32rem, calc(100vh - 8rem)); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); background: var(--paper, #fff); border: var(--line-w) solid var(--ink); box-shadow: var(--pop-sm); }
.chat-dock[hidden] { display: none; }
.chat-dock__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.chat-dock__log { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s-3); min-block-size: 8rem; }
.chat-dock__msg { border-inline-start: 3px solid var(--ink); padding-inline-start: var(--s-3); }
.chat-dock__msg[data-role="customer"] { border-inline-start-color: var(--acc-lime, #c8f560); }
.chat-dock__msg[data-role="admin"] { border-inline-start-color: var(--acc, #ff2e63); }
.chat-dock__msg b { font-family: var(--font-mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; }
.chat-dock__msg p { margin-block-start: var(--s-2); }
.chat-dock textarea { inline-size: 100%; }

/* --- A52: izləmə razılığı zolağı --------------------------------------- */
.consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 70; background: var(--paper, #fff); border-block-start: var(--line-w) solid var(--ink); box-shadow: var(--pop-sm); }
.consent[hidden] { display: none; }
.consent__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-block: var(--s-4); }
.consent__acts { display: flex; gap: var(--s-2); }

/* --- "Ölkəni bilmirik" modalı ------------------------------------------ */
.cmodal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-4); }
.cmodal[hidden] { display: none; }
.cmodal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.cmodal__box { position: relative; inline-size: min(26rem, 100%); max-block-size: calc(100vh - 2rem); overflow-y: auto; padding: var(--s-5); background: var(--paper, #fff); border: var(--line-w) solid var(--ink); box-shadow: var(--pop-sm); }
.cmodal__box select { inline-size: 100%; margin-block-start: var(--s-2); }
.cmodal__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
.cmodal__acts .u-btn { flex: 1 1 8rem; justify-content: center; text-align: center; }