/* Arter - xidmətlər siyahısı, 16 modul səhifəsi və "Odoo Azərbaycan" (redesign 2026-10, P5). Yalnız bu görünüşlərdə
   yüklənir: theme/layout.php ($t_view services | module | odoo-az) -> /assets/css/services.v<filemtime>.css (.htaccess R6
   qaydası, 1 il immutable). Tokenlər, düymələr, kartlar, .prose, demo forması site.css-dədir; burada yalnız bu qrupda
   yarana bilən komponentlər: modul kartları (.mcard), "kimə uyğundur" çipləri, xüsusiyyət siyahısı, FAQ cavabı.
   Qayda: yalnız adi "-". */

/* ─── site.css-dən köçürülüb (P5, 2026-10-08): yalnız bu səhifə qrupunda işlənən qaydalar, orijinal sıra ilə. Burada, faylın
   öz qaydalarından ƏVVƏL durur - site.css -> bu blok -> faylın öz qaydaları ardıcıllığı köhnə kaskadla eynidir. ─── */
/* ─── Kartlar və torlar ─── */
.who-for span{font-size:13.5px;font-weight:600;padding:5px 10px;border-radius:6px;background:var(--stone);border:1px solid var(--line);text-decoration:none;color:var(--ink);display:inline-block}
.who-for{display:flex;flex-wrap:wrap;gap:6px}
/* Modul kartları */
.mcard{position:relative;border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;text-decoration:none;background:var(--bg);transition:border-color .15s,box-shadow .15s;min-width:0}
.mcard:hover{border-color:var(--gold-light);box-shadow:var(--shadow)}
.mcard h3{font-size:1.1rem;font-weight:650}
.mcard p{color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.mcard-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.mcard-top small{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mi-lg{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;color:#FFFFFF;flex:none}
.mi-lg .ic{width:22px;height:22px;stroke-width:2}
/* Modul səhifəsi blokları */
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;list-style:none;padding:0;margin:0}
.feature-grid li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;font-size:15.5px;line-height:1.5;padding-block:10px;border-bottom:1px solid var(--line)}
.feature-grid li::before{content:"";width:18px;height:18px;margin-top:2px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.2 3.1L13 4.5' fill='none' stroke='%23C5172E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center}
/* ─── P2: xidmətlər siyahısı, modul səhifəsi, "Odoo Azərbaycan" ─── */
.phero-more{font-size:16px;max-width:60ch}
/* .ticks - site.css-ə köçürülüb (21st.dev Batch B: demo blokunda da işlənir) */
.who-card{gap:12px}
.who-card .mi-lg{margin-bottom:2px}
.feature-grid li > span{min-width:0}
.feature-grid--named b{font-weight:650}
.card.dark .phone-big{color:var(--on-dark)}
.card.dark .phone-big:hover{color:var(--gold-light)}
.faq details .faq-a{color:var(--muted);padding:0 44px 22px 0;max-width:64ch}
.faq details .faq-a > * + *{margin-top:.6em}
@media (max-width:640px){
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .faq details .faq-a{padding-right:0}
}

/* ─── Blueprint dili (21st.dev seçimi, Batch A) - site.css-dəki eyni adlı blokun bu fayla aid hissəsi (qaydalar orada) ───
   16 modulun kataloqu (.mgrid--lines, xidmətlər səhifəsi #mod-grid): ağır çərçivəli kartlar əvəzinə bir yüngül kataloq - xanalar
   arasında tük xətlər. Hər xana sağ və alt xəttini özü çəkir (inset kölgə, --hair); divarın sağ və alt kənarındakı xətlər clip-path
   ilə kəsilir - filtr (core.js, hidden) kartları gizlədəndə də, 3/2/1 sütunda da əlavə qayda lazım deyil. Hover və klaviatura
   fokusunda modul adının yanındakı zolaq açıq xətt rəngindən qırmızıya keçir və 22 -> 34 px uzanır; ad 6 px irəli və daş fon
   yalnız no-preference altında. Fokus halqası görünür qalır (xananın içində - kənarda kəsilməsin).
   Kartın linki yalnız başlıqdadır (a.card-a, SEO 2026-10-09) və onun ::after-i bütün kartı örtür - ona görə h3 nə position, nə də
   translate/transform almır (ikisi də ::after-i h3-ün içinə salardı, kartın qalan hissəsi kliklənməzdi). Zolaq h3-ün flex
   elementidir: mənfi kənar boşluqları ilə eni 0-dır (ad yerindən tərpənmir), şaquli mərkəzdədir (əvvəlki top:50% kimi) və h3-ün
   hündürlüyünü dəyişmir. Adın 6 px irəli getməsi - zolağın sağ boşluğu 22 -> 28 px, h3 isə sağa 6 px genişlənir (sətir eni eyni
   qalır, ad əvvəlki translate kimi sürüşür, sətirlər yenidən bölünmür). Klaviatura fokusu kartın özündə deyil, linkdədir -
   :has(.card-a:focus-visible) (:is() tanımadığı brauzerdə həmin hissəni sadəcə atır) */
@media screen{
  .mgrid--lines{gap:0;clip-path:inset(0 2px 2px 0)}
  .mgrid--lines .mcard{--ln:inset calc(-1 * var(--hair)) calc(-1 * var(--hair)) 0 var(--line);border:0;border-radius:0;background:transparent;
    box-shadow:var(--ln);padding:26px 26px 24px}
  .mgrid--lines .mcard:hover{box-shadow:var(--ln)}
  .mgrid--lines .mcard:focus-visible{outline-offset:-5px}
  .mgrid--lines .mcard:has(.card-a:focus-visible){outline-offset:-5px}
  .mgrid--lines .mcard h3{display:flex;align-items:center}
  .mgrid--lines .mcard h3::before{content:"";flex:none;width:4px;height:22px;margin:-11px 22px -11px -26px;border-radius:0 3px 3px 0;
    background:var(--line);pointer-events:none}
  .mgrid--lines .mcard:is(:hover,:focus-visible,:has(.card-a:focus-visible)) h3::before{background:var(--red);height:34px;margin-block:-17px}
}
@media screen and (prefers-reduced-motion:no-preference){
  .mgrid--lines .mcard{transition:background-color .2s}
  .mgrid--lines .mcard h3{transition:margin-right .2s}
  .mgrid--lines .mcard h3::before{transition:height .2s,margin .2s,background-color .2s}
  .mgrid--lines .mcard:is(:hover,:focus-visible,:has(.card-a:focus-visible)){background:var(--stone)}
  .mgrid--lines .mcard:is(:hover,:focus-visible,:has(.card-a:focus-visible)) h3{margin-right:-6px}
  .mgrid--lines .mcard:is(:hover,:focus-visible,:has(.card-a:focus-visible)) h3::before{margin-right:28px}   /* zolaq yerində qalır, yalnız ad irəli gedir */
}

/* ─── 21st.dev seçimi, Batch B (seçim 9) - site.css-dəki eyni adlı blokun bu fayla aid hissəsi ───
   "Odoo Azərbaycan": Community / Enterprise cədvəli qərar paneli kimi. Cədvəl bazadakıdır (mətn eynidir, içinə heç nə yazılmır):
   arter_theme_oaz_cmp yalnız class="cmp", panel/sürüşmə qabı və altında mövcud "Ödənişsiz demo istəyin" düyməsini əlavə edir.
   Daş panel; nəşrlər iki ağ sütundur (yuxarıda nəşrin rəng işarəsi - Community qızılı, Enterprise Odoo bənövşəyi; "ən populyar"
   kimi iddia yoxdur), meyar sütunu panelin fonundadır. ≤640 px: qab üfüqi sürüşür, meyar sütunu yapışqandır */
.prose .cmp-panel{background:var(--stone);border:1px solid var(--stone-2);border-radius:var(--radius);padding:8px 8px 0;margin-block:1.4em}
.prose .cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.prose table.cmp{display:table;width:100%;margin:0;border:0;border-radius:0;border-spacing:8px 0;background:transparent;font-size:15px}
.prose table.cmp :is(th,td){padding:13px 16px;border:0;border-bottom:1px solid var(--stone-2);background:transparent;border-radius:0}   /* table.cmp: .prose tr:first-child > th (0,2,2) fonunu da ləğv etsin */
.prose .cmp :is(th,td):not(:first-child){background:var(--bg)}
.prose .cmp thead th{font:650 1.12rem/1.3 var(--font-display);font-variation-settings:"SHRP" 45;color:var(--ink);vertical-align:bottom;
  padding-top:18px;border-bottom:2px solid var(--ink)}
.prose .cmp thead th:not(:first-child){border-radius:10px 10px 0 0;white-space:nowrap}   /* rəng işarəsi nəşrin adından ayrılmasın */
.prose .cmp thead th:not(:first-child)::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;background:var(--gold);vertical-align:.05em}
.prose .cmp thead th:nth-child(3)::before{background:var(--odoo)}
.prose .cmp td:first-child{width:24%;font-weight:600;color:var(--ink);padding-left:10px}
.prose .cmp tbody tr:nth-child(even) > td{background:transparent}
.prose .cmp tbody tr:nth-child(even) > td:not(:first-child){background:var(--bg)}
.prose .cmp tr:last-child > td{border-bottom:0}
.prose .cmp tbody tr:last-child > td:not(:first-child){border-radius:0 0 10px 10px}
.prose .cmp-foot{margin:0;padding:14px 8px;display:flex;justify-content:flex-end}
.prose .cmp-foot .btn-red,.prose .cmp-foot .btn-red:hover{color:var(--on-dark);text-decoration:none}
@media (max-width:640px){
  .prose table.cmp{min-width:540px;border-spacing:6px 0}
  .prose table.cmp :is(th,td){min-width:0;padding:11px 12px}
  /* İkinci selektor: cüt sətirlərin "background:transparent" qaydası (0,3,3) yapışqan xananı şəffaf etməsin - yoxsa sürüşəndə
     arxadakı sütunun mətni meyarın üstünə düşür */
  .prose .cmp :is(th,td):first-child,
  .prose .cmp tbody tr:nth-child(even) > td:first-child{position:sticky;left:0;z-index:1;width:118px;min-width:118px;background:var(--stone);box-shadow:6px 0 0 var(--stone)}
  .prose .cmp-foot .btn{width:100%}
}

/* ─── 21st.dev seçimi, Batch C (2026-10-09) - site.css-dəki eyni adlı blokun bu fayla aid hissəsi ───
   Seçim 10: modul səhifəsinin "Video icmal" kartı 16:9 afişadır (Magic UI "Hero Video Dialog" fikri, kod köçürülməyib).
   Fasad dəyişmir: a[data-yt-src] klikdə core.js ilə youtube-nocookie iframe-i ilə əvəzlənir; klikə qədər YouTube-a heç bir sorğu
   yoxdur, önizləmə şəkli yoxdur (i.ytimg.com yüklənmir) - afişa tam CSS-dir: ink -> gavalı (--odoo) gradient, solğun tük tor
   (--hair), sağda modulun böyük solğun ikonu, yuxarıda ikon xanası, ortada dairəvi qırmızı oynatma düyməsi, aşağıda başlıq (HTML
   mətn) və alt yazı. aspect-ratio minimumdur: telefonda mətn sığmasa afişa hündürləşir (bunun üçün overflow visible qalır -
   hidden/clip Chromium-da aspect-ratio-nun məzmun minimumunu söndürür; dekorativ qatlar kartın içindədir, künclər border-radius:
   inherit). Klikdən sonra .yt-frame 16:9 olur - fərq istifadəçi klikindən sonradır, CLS sayılmır). Dekorativ qatlar (tor, ikon, aşağı kölgə) z-index:-1, isolation - mətnin altında.
   Hərəkət (düymənin böyüməsi) yalnız no-preference; çapda afişa sadə çərçivəli mətn blokudur. Telefonda "İzləyin" əvvəlki kimi gizlidir */
.video-card.vposter{position:relative;isolation:isolate;aspect-ratio:16/9;min-width:0;align-items:start;
  grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;gap:14px 20px;padding:clamp(18px,2.6vw / var(--zoom),32px);
  background:linear-gradient(135deg,var(--ink) 0%,var(--aubergine) 42%,#4A3044 72%,var(--odoo) 104%)}
.video-card.vposter::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(rgb(255 255 255 / .06) var(--hair),transparent var(--hair)) 0 0/44px 44px,
             linear-gradient(90deg,rgb(255 255 255 / .06) var(--hair),transparent var(--hair)) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(75% 95% at 72% 38%,#000 15%,transparent 78%);mask-image:radial-gradient(75% 95% at 72% 38%,#000 15%,transparent 78%)}
.video-card.vposter::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(to top,rgb(22 25 29 / .6),transparent 58%)}
.vposter .vp-ic{grid-column:1;grid-row:1;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;
  background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .18);color:var(--on-dark)}
.vposter .vp-ic .ic{width:24px;height:24px}
.vposter .vp-bg{position:absolute;z-index:-1;right:2%;top:50%;width:42%;height:auto;aspect-ratio:1;translate:0 -50%;pointer-events:none;
  fill:none;stroke:var(--on-dark);stroke-width:.4;stroke-linecap:round;stroke-linejoin:round;opacity:.07}
.video-card.vposter .play{grid-column:1 / -1;grid-row:2;align-self:center;justify-self:center;width:clamp(62px,6vw / var(--zoom),84px);height:auto;aspect-ratio:1;
  border-radius:50%;box-shadow:0 0 0 10px rgb(255 255 255 / .08),0 0 0 calc(10px + var(--hair)) rgb(255 255 255 / .14),0 16px 32px -12px rgb(0 0 0 / .7)}
.video-card.vposter .play::before{border-left-width:22px;border-top-width:13px;border-bottom-width:13px;margin-left:7px}
.vposter .vp-t{grid-column:1 / -1;grid-row:3;display:grid;gap:4px;min-width:0;max-width:46ch}
.video-card.vposter .vp-t b{font:650 clamp(1.15rem,1.6vw / var(--zoom),1.5rem)/1.25 var(--font-display);font-variation-settings:"SHRP" 45;color:var(--on-dark);overflow-wrap:break-word}
.video-card.vposter .vp-t > span{font-size:14.5px;line-height:1.4;color:var(--on-dark-muted)}
.video-card.vposter .link{grid-column:2;grid-row:1;justify-self:end;padding:7px 14px;border-radius:999px;border:1px solid rgb(255 255 255 / .3);
  background:rgb(255 255 255 / .06);color:var(--on-dark);font-size:14.5px;font-weight:600;line-height:1.2}
.video-card.vposter:focus-visible{outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  .video-card.vposter .play{transition:scale .2s cubic-bezier(.2,.7,.2,1),background-color .2s}
  .video-card.vposter:is(:hover,:focus-visible) .play{scale:1.07}
}
@media (max-width:640px){
  .video-card.vposter{grid-template-columns:minmax(0,1fr);gap:12px;padding:16px}
  .video-card.vposter .link{display:none}
  .video-card.vposter .play{width:56px;box-shadow:0 0 0 8px rgb(255 255 255 / .08),0 0 0 calc(8px + var(--hair)) rgb(255 255 255 / .14),0 12px 24px -10px rgb(0 0 0 / .7)}
  .video-card.vposter .play::before{border-left-width:17px;border-top-width:10px;border-bottom-width:10px;margin-left:5px}
  .vposter .vp-ic{width:40px;height:40px;border-radius:10px}
  .vposter .vp-ic .ic{width:20px;height:20px}
  .vposter .vp-bg{width:52%;right:0}
}
@media print{
  .video-card.vposter{display:block;aspect-ratio:auto;background:none;border:1px solid var(--line);padding:12px 14px;color:var(--ink)}
  .video-card.vposter::before,.video-card.vposter::after,.vposter :is(.vp-ic,.vp-bg,.play,.link){display:none}
  .video-card.vposter .vp-t b{color:var(--ink)}
  .video-card.vposter .vp-t > span{color:var(--muted)}
}

/* ─── Xırda mətnlər masaüstü miqyasında (sahibkar 2026-10-08) - site.css-in sonundakı blokun bu fayla aid hissəsi: zonada (zoom .75)
   14,5 CSS px-dən kiçik mətnlər 14,5 px-ə (ekranda ~10,9 px). Şərt site.css-dəki zona ilə eynidir; toxunma, ≤930 px və çap dəyişmir.
   Faylın sonundadır - selektorlar orijinalın eynisidir, sonra gəldiyi üçün üstündür (spesifiklik dəyişmir). ─── */
@supports (zoom:1){
  @media screen and (hover:hover) and (pointer:fine){
    @media not all and (max-width:930px){
      .who-for span{font-size:14.5px}
      .mcard-top small{font-size:14.5px}
    }
  }
}