/* Odeo Agency — f3: kiçik UX əlavələri */
:root{--f3-err:#A8321F;--focus:var(--saffron-ink,#9A5F1A)}
:root[data-theme="dark"]{--f3-err:#F0A493;--focus:#E3A857}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--f3-err:#F0A493;--focus:#E3A857}}
.sec--dark,.sec--deep,.ftr,.prose blockquote,.stack__card:nth-child(odd),.aiw,.cmdk,.f3-qc{--focus:#E3A857;--f3-err:#F0A493}

/* 25. Keçid linkləri + fokus halqası */
.f3-skips .skip,.f3-skip{position:fixed;left:16px;top:-80px;z-index:999;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:12px;font-weight:600;font-size:.92rem}
.f3-skips .skip:focus,.f3-skip:focus{top:16px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.post:has(.post__t a:focus-visible),.card:has(.stretched:focus-visible){outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--radius)}
.post__t a:focus-visible,.card .stretched:focus-visible{outline:0}
a.pc:focus-visible{outline-offset:4px;border-radius:22px}
main:focus,footer:focus{outline:0}

/* Kiçik ümumi düymə */
.f3-mini{border:1px solid var(--line2);background:transparent;color:var(--muted);border-radius:999px;padding:4px 11px;font-size:.78rem;font-weight:500;line-height:1.4;transition:background .2s,color .2s}
.f3-mini:hover{background:var(--line);color:var(--fg)}

/* 22. Xarici link işarəsi */
.f3-ext::after{content:"↗";content:"↗"/"";display:inline-block;margin-left:.12em;font-size:.72em;vertical-align:.2em;opacity:.65;text-decoration:none}

/* 5. Cədvəllər */
.f3-tbl{position:relative;margin:1.6em 0}
.f3-tbl__sc{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-s,14px)}
.f3-tbl__sc>table{display:table;overflow:visible;margin:0}
.f3-tbl::before,.f3-tbl::after{content:"";position:absolute;top:0;bottom:34px;width:22px;pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.f3-tbl::before{left:0;background:linear-gradient(90deg,rgba(20,33,28,.16),transparent)}
.f3-tbl::after{right:0;background:linear-gradient(270deg,rgba(20,33,28,.16),transparent)}
.f3-tbl.is-l::before,.f3-tbl.is-r::after{opacity:1}
:root[data-theme="dark"] .f3-tbl::before{background:linear-gradient(90deg,rgba(0,0,0,.45),transparent)}
:root[data-theme="dark"] .f3-tbl::after{background:linear-gradient(270deg,rgba(0,0,0,.45),transparent)}
.f3-tbl__bar{display:flex;justify-content:flex-end;margin-top:6px}

/* 4. Şəkil böyütmə */
.f3-zoomable{cursor:zoom-in}
.f3-noscroll{overflow:hidden}
.f3-zoom{border:0;padding:0;margin:auto;max-width:min(1400px,96vw);max-height:94vh;background:transparent;color:var(--c200,#EBD9B9);overflow:visible}
.f3-zoom::backdrop{background:rgba(14,24,20,.88)}
.f3-zoom figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.f3-zoom img{max-width:96vw;max-height:84vh;width:auto;height:auto;border-radius:14px;cursor:zoom-out;background:#14211C}
.f3-zoom figcaption{font-size:.88rem;max-width:70ch;text-align:center;opacity:.85}
.f3-zoom__x{position:fixed;top:14px;right:14px;z-index:2;background:rgba(20,33,28,.8);color:#EBD9B9;border:1px solid rgba(235,217,185,.25)}
.f3-zoom[open]{animation:f3fade .2s ease-out}
@keyframes f3fade{from{opacity:0}to{opacity:1}}

/* 3 + 13. Kartlar */
.f3-card{position:absolute;z-index:116;max-width:min(320px,calc(100vw - 16px));padding:11px 14px;border-radius:12px;background:var(--g700,#2E4A41);color:var(--c200,#EBD9B9);border:1px solid rgba(235,217,185,.22);box-shadow:0 14px 34px -14px rgba(0,0,0,.6);font-size:.86rem;line-height:1.45;pointer-events:none;display:flex;flex-direction:column;gap:3px}
.f3-card[hidden]{display:none}
.f3-card__k{font-family:var(--font-mono,monospace);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;opacity:.7}
.f3-card b{font-size:.92rem}
.f3-card__d{opacity:.88;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* 19 + 9. Paylaş / fokus düymələri */
@media (min-width:1101px){.f3-share--post{display:none}}
.art-meta .f3-share{height:30px;padding:0 12px;font-size:.8rem}
.f3-focus-exit{position:fixed;top:14px;right:14px;z-index:95;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--bg2);color:var(--fg);font-size:.84rem;font-weight:500}
.f3-focus-exit kbd{font-family:var(--font-mono,monospace);font-size:.72rem;border:1px solid var(--line2);border-radius:5px;padding:0 5px}
.f3-focus-exit[hidden]{display:none}
html.f3-focus .hdr,html.f3-focus .ftr,html.f3-focus .toc,html.f3-focus .art-aside,html.f3-focus .aiw-btn,html.f3-focus .wa-btn,html.f3-focus .f3-qc,html.f3-focus .totop,html.f3-focus .mtoc-btn,html.f3-focus main>section,html.f3-focus .more-cat,html.f3-focus .pn,html.f3-focus .author-box,html.f3-focus [data-nl-slot],html.f3-focus .art-layout .ok-box,html.f3-focus .cookie,html.f3-focus .progress{display:none!important}
html.f3-focus .art-layout{grid-template-columns:minmax(0,780px);justify-content:center;padding-top:28px}
html.f3-focus .art-hero{padding-top:40px}

/* 6. Rəy */
.f3-fb{margin:40px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius,22px);background:var(--card)}
.f3-fb__h{font-family:var(--font-body,inherit);font-size:1.02rem;font-weight:600;margin:0 0 12px;letter-spacing:0}
.f3-fb__row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.f3-fb__form{display:grid;gap:8px;margin-top:16px}
.f3-fb__form[hidden]{display:none}
.f3-fb__l{font-weight:600;font-size:.9rem}
.f3-fb .textarea{min-height:90px}
.f3-fb__err{margin:0;font-size:.85rem;color:var(--f3-err)}
.f3-fb__err:empty{display:none}
.f3-fb__done{margin:0;font-weight:500}

/* 16–18. Formlar */
.f3-req{font-family:var(--font-mono,monospace);font-size:.68rem;font-weight:500;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:0 6px;margin-left:4px;vertical-align:.12em;letter-spacing:.02em}
.f3-err{margin:2px 0 0;font-size:.84rem;line-height:1.4;color:var(--f3-err)}
[aria-invalid="true"].input,[aria-invalid="true"].textarea,[aria-invalid="true"].select{border-color:var(--f3-err)}
.news .f3-err{flex-basis:100%;order:3}
.f3-count{margin:-2px 0 0;text-align:right;font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.f3-count.is-near{color:var(--saffron-ink,#9A5F1A)}
.f3-count.is-over{color:var(--f3-err)}
.f3-drop{position:relative;display:grid;gap:4px;justify-items:center;text-align:center;padding:22px 16px;border:1.5px dashed var(--line2);border-radius:var(--radius-s,14px);background:var(--card);transition:border-color .2s,background .2s}
.f3-drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.f3-drop:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.f3-drop.is-over{border-color:var(--fg);background:var(--line)}
.f3-drop__t{font-size:.92rem}
.f3-drop__h{font-size:.78rem;color:var(--muted)}
.f3-drop__l{list-style:none;margin:6px 0 0;padding:0;font-size:.86rem;position:relative;z-index:1}
.f3-drop__l:empty{display:none}

/* 11 + 12. Son baxılanlar / 404 təklifləri */
.f3-404,.f3-recent{margin-top:22px;max-width:640px}
.f3-404:not(.is-on){display:none}
.f3-404 ul,.f3-recent ul{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.f3-404 li,.f3-recent li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.f3-404 li a,.f3-recent li a{text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.f3-404 li a:hover,.f3-recent li a:hover{text-decoration-color:currentColor}
.f3-404 li span,.f3-recent li span{font-size:.78rem;flex:none}
.f3-recent{margin-top:36px}

/* 20. Mobil sürətli əlaqə */
.f3-qc{display:none}
@media (max-width:640px){
  html.f3-qc-on .wa-btn{display:none}
  .f3-qc{display:block;position:fixed;right:17px;bottom:72px;z-index:69}
  .aiw-open .f3-qc{display:none}
  .f3-qc__b{width:44px;height:44px;border-radius:50%;border:1px solid rgba(235,217,185,.2);background:var(--g800,#1E3029);color:var(--c200,#EBD9B9);display:grid;place-items:center;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
  .f3-qc__b svg{width:20px;height:20px}
  .f3-qc__m{position:absolute;right:0;bottom:54px;list-style:none;margin:0;padding:6px;display:grid;gap:2px;min-width:168px;border-radius:16px;background:var(--g800,#1E3029);border:1px solid rgba(235,217,185,.18);box-shadow:0 18px 40px -16px rgba(0,0,0,.6)}
  .f3-qc__m[hidden]{display:none}
  .f3-qc__m a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:11px;color:var(--c200,#EBD9B9);font-size:.92rem;font-weight:500}
  .f3-qc__m a:hover,.f3-qc__m a:focus-visible{background:rgba(235,217,185,.1)}
  .f3-qc__m svg{width:18px;height:18px;flex:none;opacity:.85}
}

/* 24. Lazy şəkillər */
img.f3-bu{filter:blur(10px);opacity:.5;background-color:var(--line);transition:filter .5s ease-out,opacity .5s ease-out}
img.f3-bu.f3-in{filter:none;opacity:1}

/* 7. Qənaət rejimi, 15. gizli tab */
.f3-lite .o3d__in,.f3-lite .pc:hover .o3d__in,.f3-lite .ftr__big,.f3-lite .g404 canvas{animation:none!important}
.f3-lite .ftr__big,.f3-lite video[data-decor],.f3-lite .hero video{display:none!important}
.f3-lite *,.f3-lite *::before,.f3-lite *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
.f3-hidden *,.f3-hidden *::before,.f3-hidden *::after{animation-play-state:paused!important}

/* Hərəkəti azalt */
@media (prefers-reduced-motion:reduce){.f3-zoom[open]{animation:none}.f3-tbl::before,.f3-tbl::after{transition:none}}
.reduced .f3-zoom[open]{animation:none}

/* 8. Çap */
.f3-print-head{display:none}
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff!important;color:#111!important;font-size:11pt}
  .f3-skips,.f3-card,.f3-qc,.f3-fb,.f3-focus-exit,.f3-share,.f3-focus-btn,.f3-tbl__bar,.copy-code,.hd-anchor,.qpop,.gl-tip,.toast,.cookie,.mtoc-btn,.art-tools,.crumbs,.share,.tag-list,.more-cat,.pn,.author-box,[data-nl-slot],[data-resume-slot],.art-layout .ok-box,main>section,.hero__ctas,.demo,.btn,dialog,.skip,.progress{display:none!important}
  .f3-print-head{display:block;font:9pt/1.4 var(--font-mono,monospace);color:#555;border-bottom:1px solid #ccc;padding-bottom:6px;margin-bottom:14px}
  main>article,main>section.art-hero,main>section:has(.case-body){display:block!important}
  .faq summary i{display:none}
  .art-hero,.art-layout,.wrap,.case-body{padding:0!important;margin:0!important;max-width:none!important;display:block!important;background:none!important;color:#111!important}
  h1{font-size:22pt!important;line-height:1.15;margin:0 0 8pt}
  .art-meta{color:#444;font-size:9pt}
  .art-cover img,.case-hero img{max-height:70mm;width:auto;object-fit:contain}
  .case-hero .phone{display:none}
  .prose{font-size:11pt!important;line-height:1.55!important;max-width:none}
  .prose h2{font-size:15pt;margin-top:18pt;break-after:avoid;page-break-after:avoid}
  .prose h3{font-size:12.5pt;break-after:avoid;page-break-after:avoid}
  #faq{break-before:page;page-break-before:always}
  .prose p,.prose li{orphans:3;widows:3}
  .prose figure,.prose pre,.prose blockquote,.prose table,.prose img,.faq details{break-inside:avoid;page-break-inside:avoid}
  .prose blockquote{background:none!important;color:#111!important;border-left:3px solid #999;border-radius:0;padding:4pt 12pt}
  .prose blockquote strong{color:#111!important}
  .prose pre{background:#f4f4f4!important;color:#111!important;border:1px solid #ddd;white-space:pre-wrap}
  .prose a{color:#111!important;text-decoration:underline}
  .prose a[data-f3-href]::after,.prose a.f3-ext[data-f3-href]::after{content:" (" attr(data-f3-href) ")";font-size:8.5pt;color:#555;opacity:1;vertical-align:baseline;margin:0;display:inline;word-break:break-all}
  .prose a.gl::after{content:none}
  .f3-tbl__sc{overflow:visible}
  .f3-tbl::before,.f3-tbl::after{display:none}
  .prose th,.prose td{border-bottom:1px solid #ccc;padding:4pt 6pt}
  .case-side{display:block!important;margin-top:14pt;position:static!important}
  .f3-bu{filter:none!important;opacity:1!important}
}