/* Wuffi Pet — Akış kabuğu paylaşılan stil (FAZ 0).
   Özgün SVG ikon hizalama + yeni nav öğesi ikon renkleri + (0.6) full-width yardımcıları.
   Tüm seçiciler .wf-* ad alanında → global yüklense de çakışmaz. */

/* Satır içi (header/buton) ikonlar metinle dikey ortalı. */
.wf-ic { vertical-align: middle; }

/* Özgün SVG ikonlar nav kutucuğunda tam ortalı, currentColor ile tint'i izler. */
.wf-navbtn .ic svg,
.wf-navbtn .ic .wf-ic { display: block; }
.wf-navbtn .ic { line-height: 0; }

/* FAZ 0.5 — sidebar'a eklenen yeni öğelerin ikon renk tonları (mevcut paletle uyumlu). */
.ic-home    { background: rgba(255,185,35,.18);  color: #FFB923; }
.ic-profile { background: rgba(157,140,244,.20); color: #B9A8F6; }
.ic-msg     { background: rgba(55,200,211,.18);  color: #37C8D3; }
.ic-bell    { background: rgba(255,193,90,.18);  color: #FFC15A; }
.ic-shop    { background: rgba(244,140,196,.18); color: #F48CC4; }
.ic-tools   { background: rgba(140,200,160,.18); color: #8CC8A0; }
.ic-blog    { background: rgba(168,200,244,.18); color: #A8C8F4; }
.ic-set     { background: rgba(180,180,200,.16); color: #c7c2da; }
.ic-globe   { background: rgba(124,150,244,.18); color: #8AA4F6; }
.ic-out     { background: rgba(255,107,107,.16); color: #FF8A8A; }
/* Sidebar'da buton da link gibi görünsün (Dil/Çıkış). */
.wf-nav button.wf-navbtn { border: 0; background: transparent; width: 100%; cursor: pointer; font: inherit; text-align: left; }
.wf-navbtn.wf-navbtn-out:hover { background: rgba(255,107,107,.10); color: #FF8A8A; }

/* İkincil nav grubu başlığı üst boşluğu (Keşfet / Hesabım ayrımı). */
.wf-nav .wf-nav-h + .wf-navbtn { margin-top: 2px; }
.wf-nav .wf-nav-h.wf-nav-h2 { margin-top: 12px; }

/* Aktif öğe net görünsün (mevcut .on ile uyumlu, güçlendirme). */
.wf-navbtn.on { font-weight: 800; }

/* ===== FAZ 0.6 — FULL-WIDTH Akış =====
   1760px kapağı kalkar: sol sidebar EN SOLDA, sağ ray EN SAĞDA, orta tüm alanı doldurur.
   Şablonların satır-içi .wf-shell{max-width:1760px} kuralını override eder (tek kaynak). */
.wf-shell { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* v37 — kullanıcı isteği: orta kolon kenar çubuklarına KADAR genişlesin. margin:auto + max-width
   ortalıyordu → boşluk; bunun yerine grid 1fr track'ine STRETCH ettir (cap yok, taşma yok). */
@media (min-width: 980px) { .wf-ak { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; width: auto !important; } }

/* ===== FAZ 0.4 — Dock özgün SVG ikonları ===== */
.wf-dock-icon-wrap .wf-dock-svg { display: block; width: 24px; height: 24px; }
.wf-dock-item.is-akis .wf-dock-icon-wrap .wf-dock-svg { width: 27px; height: 27px; }

/* ===== FAZ 0.8 — Composer foto kırpma (1:1 / 4:5) ===== */
.wf-cmp-ratio { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 12.5px; color: #9990bd; font-weight: 700; }
.wf-cmp-ratio button { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: #cfc7e6; border-radius: 999px; padding: 5px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wf-cmp-ratio button.on { background: linear-gradient(135deg,#FFB923,#FFD78A); color: #13102b; border-color: transparent; }
.wf-cmp-prev-crop { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-cmp-prev-crop .wf-cmp-pcell { width: 132px; aspect-ratio: var(--wf-ar, 0.8); border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #1a1530; }
.wf-cmp-prev-crop .wf-cmp-pcell img, .wf-cmp-prev-crop .wf-cmp-pcell video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Composer "foto ekle / konum" SVG ikonları (altın). */
.wf-cmp-media svg { color: #FFB923; vertical-align: -3px; }
.wf-cmp-loc svg { vertical-align: -3px; }
/* ===== FAZ 2 — Paylaşılan shell YAPISI (global) =====
   Akış-dışı sayfalar (blog/araçlar) da Akış kabuğunu (sol nav + sağ ray) kullanabilsin.
   Akış şablonları bu kuralları zaten satır-içi tanımlar (aynı değerler → onlarda değişiklik yok);
   blog gibi satır-içi CSS'i olmayan sayfalarda bu global kurallar devreye girer. */
.wf-shell { padding: 88px clamp(12px,2.5vw,40px) 120px; }
.wf-ak { min-width: 0; margin: 0 auto; max-width: 640px; }
.wf-left, .wf-right { display: none; }
@media (min-width: 980px) {
  .wf-shell { display: grid; grid-template-columns: clamp(250px,21vw,300px) minmax(0,1fr); gap: 32px; align-items: start; }
  /* Sol sidebar: kısa sayfalarda tam yükseklik (küçülmez); içerik viewport'u aşarsa iç-kaydırma açılır (kullanıcı isteği). */
  .wf-left { display: block; position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
  .wf-left::-webkit-scrollbar { width: 7px; }
  .wf-left::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }
  .wf-left::-webkit-scrollbar-track { background: transparent; }
}
@media (min-width: 1280px) {
  .wf-shell { grid-template-columns: clamp(260px,20vw,310px) minmax(0,1fr) clamp(300px,22vw,350px); }
  .wf-right { display: block; position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
  .wf-right::-webkit-scrollbar { display: none; }
}
/* FAZ 11 #105 — Büyük Yazı (erişilebilirlik): ana okuma yüzeylerini büyüt. html.wf-bigtext sınıfı header partial'da localStorage'dan erken uygulanır. */
html.wf-bigtext .wf-cap { font-size: 16px; line-height: 1.58; }
html.wf-bigtext .wf-navbtn { font-size: 16px; }
html.wf-bigtext .wf-postbar-ph { font-size: 16px; }
html.wf-bigtext .wf-center p, html.wf-bigtext .wf-center .wfo-items, html.wf-bigtext .wf-center .wfm-cust, html.wf-bigtext .wf-center .wfb-svc-card-name { font-size: 1.07em; }
html.wf-bigtext .wf-author, html.wf-bigtext .wf-cmt-text, html.wf-bigtext .wf-cmt b { font-size: 15.5px; }
/* FAZ 14.2 — Sağ sidebar HESAP kısayolları (rol-bazlı; sol=keşif / sağ=hesap). */
.wf-racard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 14px 13px 13px; margin-bottom: 16px; backdrop-filter: blur(14px); }
.wf-racard-h { font-size: 12.5px; font-weight: 800; color: #cfc6ef; text-transform: uppercase; letter-spacing: .6px; margin: 0 2px 12px; }
.wf-ralinks { display: flex; flex-direction: column; gap: 8px; }
/* FAZ 42 — sağ Hesabım menüsü: küçük/yaban link yerine BÜYÜK net kartlar (ikon-kutu + başlık). */
.wf-ralink { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); color: #f0ebff; text-decoration: none; font-size: 15px; font-weight: 700; transition: transform .14s, background .15s, border-color .15s; }
.wf-ralink:hover { background: rgba(255,185,35,.10); border-color: rgba(255,185,35,.30); transform: translateX(3px); }
.wf-ralink.on { background: linear-gradient(135deg,rgba(255,185,35,.18),rgba(170,85,255,.12)); border-color: rgba(255,185,35,.40); color: #fff; }
.wf-ra-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #FFD06A; flex: 0 0 auto; background: linear-gradient(135deg,rgba(255,185,35,.18),rgba(170,85,255,.13)); border: 1px solid rgba(255,185,35,.22); }
.wf-ra-ic svg { width: 19px; height: 19px; }
.wf-racard-all { display: inline-block; margin-top: 11px; padding-left: 4px; color: #FFD06A; font-size: 13.5px; font-weight: 800; text-decoration: none; }
.wf-pcard { background: linear-gradient(160deg,rgba(255,185,35,.13),rgba(170,85,255,.09)); border: 1px solid rgba(255,255,255,.10); border-radius: 20px; padding: 20px 18px; text-align: center; margin-bottom: 16px; backdrop-filter: blur(14px); }
.wf-pcard-av { width: 82px; height: 82px; border-radius: 50%; object-fit: cover; border: 3px solid #FFB923; background: #221d3a; margin: 0 auto 10px; display: block; }
.wf-pcard-name { font-size: 17px; font-weight: 800; margin: 0; color: #fff; }
.wf-pcard-sub { font-size: 12.5px; color: #b9b0d6; margin: 3px 0 14px; }
.wf-pcard-btn { display: block; background: linear-gradient(135deg,#FFB923,#FFD78A); color: #13102b; border-radius: 999px; padding: 10px; font-weight: 800; font-size: 13.5px; text-decoration: none; }
.wf-nav { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: 9px; backdrop-filter: blur(14px); }
.wf-nav-h { font-size: 11.5px; font-weight: 800; color: #9990bd; text-transform: uppercase; letter-spacing: .7px; margin: 6px 8px 8px; }
.wf-navbtn { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; color: #e9e3ff; text-decoration: none; font-size: 14.5px; font-weight: 600; transition: background .15s; margin-bottom: 3px; }
.wf-navbtn:hover { background: rgba(255,255,255,.06); }
.wf-navbtn.on { background: linear-gradient(135deg,rgba(255,185,35,.20),rgba(255,185,35,.05)); color: #FFD06A; }
.wf-navbtn .ic { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ic-feed { background: rgba(255,185,35,.18); color: #FFB923; }
.ic-adopt { background: rgba(55,211,155,.18); color: #37D39B; }
.ic-lost { background: rgba(255,107,107,.18); color: #FF6B6B; }
.ic-svc { background: rgba(157,200,185,.20); color: #9DC8B9; }
.ic-mine { background: rgba(224,168,244,.18); color: #E0A8F4; }
.ic-saved { background: rgba(108,168,244,.18); color: #6CA8F4; }
.wf-rail-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 14px; margin-top: 16px; }
.wf-rail-h { font-size: 11.5px; font-weight: 800; color: #9990bd; text-transform: uppercase; letter-spacing: .7px; margin: 0 0 10px; }
/* Blog/Araçlar Akış kabuğu: 3-KOLON — sol Akış nav + ORTA içerik (dolu) + SAĞ sayfaya-özel ray.
   Akış (.wf-shell) ile BİREBİR aynı kolon yapısı → içerik alanı her sayfada AYNI genişlik. */
.wfb-shell { padding-top: 10px; padding-bottom: 10px; }
.wfb-shell .wfb-grid, .wfb-shell .wfa-grid { margin-bottom: 16px; }
.wfb-shell .wfb-pagination, .wfb-shell .wfa-pagination { margin-top: 18px !important; margin-bottom: 4px !important; }
@media (min-width: 1280px) { .wfb-shell { grid-template-columns: clamp(260px,20vw,310px) minmax(0,1fr) clamp(300px,22vw,350px); } }
.wfb-shell .wfb-main-content { max-width: none; width: auto; }
/* Hero merkez sütunda (sidebar'lı alanda): full-width değil, sol-hizalı, header için üst boşluk. */
.wfb-hero-incol, .wfa-hero-incol { padding: 84px 0 6px !important; text-align: left !important; background: none !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; }
.wfb-hero-incol .wfb-hero-title, .wfa-hero-incol .wfa-hero-title { margin: 8px 0 10px !important; }
.wfb-hero-incol .wfb-hero-sub, .wfa-hero-incol .wfa-hero-sub { margin: 0 0 18px !important; max-width: 62ch; }
.wfb-hero-incol .wfb-cats, .wfa-hero-incol .wfa-hero-pills { justify-content: flex-start !important; margin: 0 !important; flex-wrap: wrap; }
/* Araçlar hero tür-pill aktif durumu (filtre seçili). */
.wfa-hero-pill { cursor: pointer; }
.wfa-hero-pill.is-active { background: linear-gradient(135deg,#FFB923,#FFD78A) !important; color: #13102b !important; border-color: transparent !important; }
.wfa-hero-pill.is-active .count, .wfa-hero-pill.is-active i { color: #13102b !important; }
/* araçlar hero merkeze gelince üst başlık-bölüm boşluğunu da sıfırla (header zaten padding-top'ta). */
.wfa-hero-incol .wfa-hero-container { max-width: none !important; padding: 0 !important; margin: 0 !important; }
/* Tekil araç (dedicated) merkez sütunu — grid'i taşırmasın; sabit header için üst boşluk. */
.wfb-tool-center { min-width: 0; padding-top: 84px; }
.wfb-tool-center .wfa-wrap-sm { padding-top: 0 !important; }
.wfb-tool-center .wfa-wrap-sm:first-child { padding-top: 8px !important; }
/* Akış kabuğunda scroll-reveal observer tetiklenmeyebilir → içerik DAİMA görünür.
   Hem .wfa-reveal (araç) hem .wfb-reveal (blog tekil yazı) sınıflarını kapsa. */
.wfb-tool-center .wfa-reveal, .wfb-article-center .wfa-reveal,
.wfb-tool-center .wfb-reveal, .wfb-article-center .wfb-reveal,
.wfb-article-center .wfb-reveal[data-delay] { opacity: 1 !important; transform: none !important; }

/* ═══ FAZ-cila — ORTA İÇERİK: sidebar'lar arasını TAM doldur (kenar boşluğu YOK) ═══
   Tekil yazı + tekil araç merkez sütunu grid 1fr'i tamamen kaplar (max-width cap YOK → daha geniş içerik). */
.wfb-article-center, .wfb-tool-center { width: 100%; min-width: 0; max-width: none; margin: 0; }
.wfb-tool-center .wfa-wrap-sm { max-width: none !important; padding-inline: clamp(14px, 2.2vw, 30px) !important; }
/* Tekil yazı gövde/başlık de orta alanı doldursun (eski 760px cap → daha geniş yazı). */
.wfb-article-center .wfb-article-wrap, .wfb-article-center .wfb-content, .wfb-article-center .wfb-wrap { max-width: none !important; }

/* ═══ FAZ-cila — TEKİL YAZI ÖNE ÇIKAN GÖRSEL: orta alanı (sidebar hariç) DOLDUR ═══
   Eski 100vw tam-genişlik hero kaldırıldı; görsel orta sütunu tam kaplar, yükseklik sınırlı, yuvarlak. */
.wfb-article-center .wfb-featured-wrap.wfb-featured-top { max-width: none !important; width: 100% !important; margin: 0 0 14px !important; }
.wfb-article-center .wfb-featured-wrap.wfb-featured-top .wfb-featured-img-inner {
    aspect-ratio: 16 / 9 !important; height: auto !important; border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.55) !important;
}
.wfb-article-center .wfb-featured-wrap.wfb-featured-top .wfb-featured-img-inner::after { display: none !important; }
/* Görsel ↔ başlık arası makul boşluk (negatif/fazla margin sıfırlandı). */
.wfb-article-center .wfb-featured-wrap.wfb-featured-top + .wfb-post-header { margin-top: 0 !important; padding-top: 0 !important; }

/* ═══ FAZ-cila — SAĞ RAY (blog/araçlar sayfaya-özel) — Akış tasarım dili ═══ */
.wf-rail-page { display: flex; flex-direction: column; gap: 16px; }
.wf-rail-page .wf-rail-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 16px 15px; margin: 0; backdrop-filter: blur(14px); }
.wf-rail-page .wf-rail-h { font-size: 12px; font-weight: 800; color: #cfc6ef; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.wf-rail-page .wf-rail-h i { color: #FFB923; font-size: 13px; }
.wf-rail-search-wrap { position: relative; display: flex; align-items: center; }
.wf-rail-search { width: 100%; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 10px 42px 10px 13px; color: #fff; font-size: 13.5px; outline: none; }
.wf-rail-search:focus { border-color: rgba(255,185,35,.45); }
.wf-rail-search-btn { position: absolute; right: 5px; width: 31px; height: 31px; border: 0; border-radius: 9px; background: linear-gradient(135deg,#FFB923,#FFD78A); color: #13102b; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.wf-rail-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-rail-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-radius: 11px; color: #e3ddf6; text-decoration: none; font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s; }
.wf-rail-cat:hover { background: rgba(255,255,255,.06); color: #fff; }
.wf-rail-cat.is-active { background: linear-gradient(135deg,rgba(255,185,35,.20),rgba(255,185,35,.05)); color: #FFD06A; }
.wf-rail-cat-name { display: flex; align-items: center; gap: 9px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-rail-cat-name i { color: #9990bd; font-size: 12px; width: 15px; text-align: center; flex: 0 0 auto; }
.wf-rail-cat.is-active .wf-rail-cat-name i { color: #FFB923; }
.wf-rail-cat-cnt { font-size: 11.5px; font-weight: 700; color: #9990bd; background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px 8px; flex: 0 0 auto; }
.wf-rail-posts { display: flex; flex-direction: column; gap: 11px; }
.wf-rail-post { display: flex; gap: 11px; align-items: center; text-decoration: none; }
.wf-rail-post-img { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,.06) center/cover no-repeat; flex: 0 0 auto; }
.wf-rail-post-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wf-rail-post-title { font-size: 13px; font-weight: 700; color: #ece7fb; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wf-rail-post:hover .wf-rail-post-title { color: #FFD06A; }
.wf-rail-post-date { font-size: 11.5px; color: #9990bd; }

/* ═══ FAZ 4 — Hizmet Al Akış kabuğu (sol nav + orta liste + sağ hizmet rayı) ═══ */
.wfb-hizmet-center { min-width: 0; }
/* Hero in-column: full-bleed dekor kapalı, kompakt, sol-hizalı, header boşluğu. */
.wfb-hizmet-center .wf-hero.wf-hero-incol { min-height: 0 !important; padding: 84px 0 6px !important; background: none !important; display: block !important; width: auto !important; margin: 0 !important; overflow: visible !important; text-align: left !important; }
.wfb-hizmet-center .wf-hero-incol .wf-hero-bg, .wfb-hizmet-center .wf-hero-incol .wf-paw-float { display: none !important; }
.wfb-hizmet-center .wf-hero-incol::before, .wfb-hizmet-center .wf-hero-incol::after { display: none !important; }
.wfb-hizmet-center .wf-hero-incol .wf-hero-inner { max-width: none !important; padding: 0 !important; margin: 0 !important; text-align: left !important; }
.wfb-hizmet-center .wf-hero-incol h1 { font-size: clamp(1.55rem, 2.8vw, 2.15rem) !important; margin: 6px 0 8px !important; }
.wfb-hizmet-center .wf-hero-incol .wf-hero-sub { margin: 0 0 16px !important; }
.wfb-hizmet-center .wf-hero-incol .wf-hero-stats { justify-content: flex-start !important; flex-wrap: wrap; }
.wfb-hizmet-center .wf-hero-incol .wf-search-bar { max-width: none !important; }
/* Kategori/listing merkezi doldursun (kendi max-width/padding'lerini sıfırla). */
.wfb-hizmet-center .wf-container, .wfb-hizmet-center .wf-listing { max-width: none !important; width: auto !important; margin: 0 0 14px !important; padding-left: 0 !important; padding-right: 0 !important; }
/* İşletme grid — sağ raylı dar merkez için akıcı kolon. */
.wfb-hizmet-center .wf-biz-grid { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)) !important; }
.wfb-hizmet-center .wf-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 540px) { .wfb-hizmet-center .wf-cat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
/* Hizmet rayı — adımlar + güven listesi (Akış cam-kart dili). */
.wfh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.wfh-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: #e3ddf6; font-weight: 600; }
.wfh-step-n { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,185,35,.16); color: #FFB923; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.wfh-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wfh-trust li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #cfc6ef; }
.wfh-trust li i { color: #37D39B; }

/* KONUM — composer harita + yarıçap */
.wf-cmp-radwrap { margin-top: 8px; }
.wf-cmp-map { height: 190px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); margin-top: 8px; }
.wf-cmp-map .leaflet-container { height: 100%; width: 100%; background: #1a1530; }
.wf-cmp-maphint { font-size: 11.5px; color: #9990bd; margin: 6px 2px 0; }