/* ==========================================================================
   Pages — sayfaya özel stiller. Temel bileşenler components.css/layout.css'te;
   burada yalnızca sayfa düzeni + sayfaya özgü küçük bileşenler var.
   Bölümler: 1 Ortak yardımcılar · 2 Pazarlama (home) · 3 Fiyat · 4 Auth ·
   5 Dashboard · 6 Profil · 7 QR · 8 Blog · 9 Araçlar · 10 Keşfet ·
   11 Bildirimler · 12 İçerik sayfaları · 13 Public biolink çerçevesi ·
   14 Analitik widget'ları · 15 (tabbar → layout.css) · 16 Responsive
   ========================================================================== */

/* ==========================================================================
   1. Ortak yardımcılar (JS template'lerindeki inline stillerin yerine)
   ========================================================================== */
.page-pad { padding-block: var(--space-6); }
.page-shell { padding-block: var(--space-6) 60px; } /* padding-block: .container-app yan boşluğu (--gutter) korunur — shorthand mobilde kartları kenara yapıştırıyordu */
.text-primary { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.ml-1 { margin-left: 4px; }
.font-mono { font-family: var(--font-mono); }
.link-primary { color: var(--color-primary); font-weight: 600; }
.link-primary:hover { text-decoration: underline; }
.inline-error { padding: var(--space-3) var(--space-4); color: var(--color-danger); font-size: var(--fs-sm); }
.code-input { text-align: center; letter-spacing: 6px; font-size: var(--fs-xl); font-weight: 700; }
.section-cta { text-align: center; margin-top: var(--space-4); }
.plan-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary);
  font-weight: 700; font-size: var(--fs-xs); border: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.plan-pill:hover { border-color: rgba(var(--color-primary-rgb), .35); }
.plan-pill i { color: var(--color-warning); }
.hide-sm-inline { display: inline; }
@media (max-width: 640px) { .hide-sm-inline { display: none; } }

/* Sayfa üstü ikon başlıkları (h1 içindeki ikon) */
.page-head h1 i { color: var(--color-primary); margin-right: 8px; }

/* Sayfa içi alt bölüm başlığı */
.dash-section-title { font-size: var(--fs-lg); margin: 0; }
.dash-list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.dash-search { position: relative; max-width: 340px; flex: 1 1 auto; min-width: min(220px, 100%); display: flex; align-items: center; }
.dash-search .input-ls { width: 100%; padding-left: 40px; padding-right: 40px; }
.dash-search .input-ls::-webkit-search-cancel-button { display: none; }
.dash-search-ico { position: absolute; left: 14px; color: var(--color-muted); font-size: var(--fs-sm); pointer-events: none; }
.dash-search-clear {
  position: absolute; right: 4px; width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--color-muted); border-radius: 50%; cursor: pointer;
}
.dash-search-clear:hover { color: var(--color-text); background: var(--color-surface-2, rgba(0,0,0,.05)); }
.dash-search-info {
  display: flex; align-items: center; gap: 8px; margin: calc(var(--space-3) * -1) 0 var(--space-3);
  font-size: var(--fs-sm); color: var(--color-muted);
}

/* Kart içi bölüm başlığı (ikon + metin) */
.profile-card h3, .dash-activity h3, .dash-palette-card h3, .dash-notif h3, .dash-badges h3, .widget-title, .tool-howto h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-4); font-size: var(--fs-md);
}
.profile-card h3 i, .dash-activity h3 i, .dash-palette-card h3 i, .dash-notif h3 i, .dash-badges h3 i, .widget-title i, .tool-howto h3 i { color: var(--color-primary); }

/* Pagination */
.pagination-ls { display: flex; gap: var(--space-2); justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; }
.pagination-ls button {
  width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong);
  background: var(--color-card); color: var(--color-text); font-weight: 600; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.pagination-ls button.active, .pagination-ls button:hover:not(:disabled) { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pagination-ls button:disabled { opacity: .4; cursor: not-allowed; }

/* Filtre çubuğu: arama + chip'ler */
.tools-toolbar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-5); }
.tools-search { flex: 1; min-width: 240px; }
.tool-cat-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ==========================================================================
   2. Pazarlama — home hero, özellikler, istatistik, şablon marquee, referans
   ========================================================================== */
.hero { position: relative; padding: var(--space-7) 0 64px; overflow: hidden; background: var(--gradient-mesh); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--space-7); align-items: center; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: var(--space-4) 0; }
.hero p.lead { font-size: var(--fs-lg); color: var(--color-muted); margin-bottom: var(--space-5); max-width: 540px; }
.hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero-trust { display: flex; align-items: center; gap: var(--space-4); color: var(--color-muted); font-size: var(--fs-sm); }
.hero-trust .avatars { display: flex; }
.hero-trust .avatars img { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-card); margin-left: -12px; }

/* Telefon mockup (hero görseli) */
.phone-mock { width: 280px; margin: 0 auto; background: var(--neutral-900); border-radius: 40px; padding: 10px; box-shadow: var(--shadow-lg); position: relative; }
[data-theme="dark"] .phone-mock { background: #05060c; }
.phone-mock::before { content: ""; position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 100px; height: 24px; background: inherit; border-radius: var(--radius-pill); z-index: 3; }
.phone-screen { background: var(--gradient-accent); border-radius: 32px; min-height: 520px; padding: 52px 20px 28px; color: #fff; text-align: center; }
.phone-screen .pf-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto var(--space-3); border: 3px solid rgba(255,255,255,.4); background: rgba(255,255,255,.2); }
.phone-screen h4 { color: #fff; margin: 0 0 4px; }
.phone-screen .pf-bio { opacity: .85; font-size: var(--fs-sm); margin-bottom: 20px; }
.phone-link { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); border-radius: var(--radius-pill); padding: 13px; margin-bottom: 10px; font-weight: 600; font-size: var(--fs-base); transition: background var(--dur-fast); }
.phone-link:hover { background: rgba(255,255,255,.28); }

/* Özellik kartları */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.feature-card .fi, .tool-card .ti, .help-cat .hi, .contact-info-cards .ci i {
  width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; flex-shrink: 0;
  font-size: var(--fs-xl); color: var(--color-primary); background: var(--color-primary-soft); margin-bottom: var(--space-4);
}
.feature-card .fi.is-accent { background: var(--gradient-accent); color: #fff; }
.feature-card h3 { font-size: var(--fs-lg); margin: 0 0 8px; }
.feature-card p { color: var(--color-muted); margin: 0; }
a.feature-card { color: inherit; }

/* Nasıl çalışır adımları */
.how-steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.how-step { position: relative; padding-top: var(--space-6); }
.how-step-num {
  position: absolute; top: -14px; left: 20px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); display: inline-grid; place-items: center; font-weight: 800; font-size: var(--fs-sm);
}
.how-step h3 { margin: 10px 0 4px; font-size: var(--fs-md); }
.how-step p { margin: 0; font-size: var(--fs-sm); }

/* Popüler araçlar + keşfet (home) */
.home-tools-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .home-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 992px) { .home-tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-tools-grid .tool-card { padding: var(--space-4); }
.home-tools-grid .tool-card h4 { margin: 8px 0 4px; }
.discover-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin: var(--space-2) 0 var(--space-4); }

/* İstatistik şeridi */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); text-align: center; }
.stat .num { font-family: var(--font-heading); font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; }
.stat .label { color: var(--color-muted); font-weight: 600; }

/* Şablon marquee — iki kopyalı track, -50% translate ile sonsuz döngü */
.template-marquee {
  overflow: hidden; margin-inline: calc(-1 * var(--gutter)); padding-block: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.template-track { display: flex; gap: 20px; width: max-content; will-change: transform; animation: tplMarquee 42s linear infinite; }
.template-marquee:hover .template-track, .template-marquee:focus-within .template-track { animation-play-state: paused; }
@keyframes tplMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .template-track { animation: none; } }
.template-card {
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 9/16;
  flex: 0 0 clamp(180px, 22vw, 240px); position: relative; transition: transform var(--dur) var(--ease);
}
.template-card:hover { transform: translateY(-4px); }
.template-card .tpl-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%); display: flex; align-items: flex-end; padding: var(--space-4); color: #fff; font-weight: 600; }
.template-grid { display: flex; gap: 20px; overflow: hidden; }

/* Keşfet vitrini — şablon marquee'sini paylaşır; kart içinde avatar + ad + bio */
.discover-marquee .template-track { animation-duration: 48s; }
.discover-card { display: block; color: #fff; text-decoration: none; }
.discover-card .dc-body {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: var(--space-5) var(--space-4); text-align: center;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.45));
}
.discover-card .dc-avatar {
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px;
  border: 3px solid rgba(255,255,255,.85); box-shadow: var(--shadow-md); background: rgba(255,255,255,.2);
  display: grid; place-items: center; font-weight: 800; font-size: var(--fs-2xl); color: #fff; margin-bottom: 4px;
}
.discover-card .dc-name { font-size: var(--fs-lg); line-height: var(--lh-tight); max-width: 100%; overflow-wrap: anywhere; }
.discover-card .dc-slug { font-size: var(--fs-sm); opacity: .85; }
.discover-card .dc-bio {
  margin: 4px 0 0; font-size: var(--fs-sm); opacity: .9; line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.discover-card .dc-cat {
  margin-top: auto; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
}
.discover-card:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) { .template-track { animation-duration: 34s; gap: 14px; } .template-card { flex-basis: clamp(160px, 60vw, 220px); } }

/* Referanslar */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.testi-card .quote { font-size: var(--fs-md); margin: 0 0 var(--space-4); }
.testi-author { display: flex; align-items: center; gap: var(--space-3); }
.testi-author img { width: 44px; height: 44px; border-radius: 50%; }
.testi-author .meta strong { display: block; }
.testi-author .meta span { color: var(--color-muted); font-size: var(--fs-sm); }
.stars { color: var(--color-warning); margin-bottom: var(--space-3); }

/* CTA banner */
.cta-banner { background: var(--gradient-accent); border-radius: var(--radius-lg); padding: clamp(28px, 6vw, 56px); text-align: center; color: #fff; position: relative; overflow: hidden; }
.cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: var(--space-3); }
.cta-banner p { opacity: .9; font-size: var(--fs-md); margin-bottom: var(--space-5); }
.cta-banner .input-ls { background: #fff; color: var(--neutral-900); }
.cta-banner .input-ls::placeholder { color: var(--neutral-500); }
.cta-banner-search { max-width: 520px; margin: 0 auto; }

/* ==========================================================================
   3. Fiyatlandırma / paketler
   ========================================================================== */
.pricing-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
.pkg-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.price-card { display: flex; flex-direction: column; position: relative; }
.price-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-ring); }
.price-card.is-current { border-color: var(--color-success); }
.price-card.is-locked { opacity: .6; }
.price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 0 12px; min-height: 24px; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-on-primary); background: var(--color-primary); border-radius: var(--radius-pill);
}
.price-card h3 { font-size: var(--fs-xl); margin: 0 0 4px; }
.price-card .price-desc { font-size: var(--fs-sm); margin: 0; }
.price-amount { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; margin: var(--space-3) 0 4px; }
.price-amount.is-custom { font-size: var(--fs-2xl); }
.price-amount small { font-size: var(--fs-base); color: var(--color-muted); font-weight: 500; }
.price-amount .price-old { font-size: var(--fs-xl); color: var(--color-muted); text-decoration: line-through; font-weight: 600; margin-right: 6px; }
.price-features { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.price-features li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-sm); }
.price-features li i { color: var(--color-success); margin-top: 3px; }
.price-features li.off { color: var(--color-muted); } .price-features li.off i { color: var(--color-muted); }
.gpay-slot { margin-top: var(--space-2); }

.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.compare-table th, .compare-table td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--color-border); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; }
.compare-table thead th { background: var(--color-surface-3); font-family: var(--font-heading); }
.compare-table .yes { color: var(--color-success); } .compare-table .no { color: var(--neutral-400); }

/* Kupon modalı (upgrade-modal iskeleti, editor.css) */
.coupon-modal { text-align: left; }
.coupon-modal h3, .coupon-modal .coupon-lead { text-align: center; }
.coupon-modal .coupon-lead { margin-bottom: var(--space-3); }
.coupon-input { text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
.coupon-msg { min-height: 1.2em; }
.coupon-msg.is-error { color: var(--color-danger); }

/* ==========================================================================
   4. Auth — ortalanmış tek kart (max 440px)
   ========================================================================== */
.auth-wrap { min-height: calc(100vh - var(--navbar-h)); display: flex; align-items: center; justify-content: center; padding: var(--space-6) var(--gutter); background: var(--gradient-mesh); }
.auth-form-wrap { width: 100%; display: flex; justify-content: center; }
.auth-form { width: 100%; max-width: 440px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6) var(--space-5); }
.auth-title { font-size: var(--fs-2xl); margin: 0 0 6px; }
.auth-lead { margin: 0 0 var(--space-5); }
.auth-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.auth-row .check-ls, .auth-row a { font-size: var(--fs-sm); }
.auth-back { display: block; text-align: center; margin-top: var(--space-3); font-size: var(--fs-sm); }
.auth-status { text-align: center; padding: var(--space-6) var(--space-4); }
.auth-status .spinner-ls { margin: 0 auto var(--space-3); }
.social-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.social-row .btn-ls { flex: 1; }
.divider-or { display: flex; align-items: center; gap: var(--space-3); color: var(--color-muted); font-size: var(--fs-sm); margin: var(--space-4) 0; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.pw-strength { height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-3); margin-top: 8px; overflow: hidden; }
.pw-strength span { display: block; height: 100%; width: 0; transition: width var(--dur) var(--ease), background var(--dur); }
.auth-form .btn-block-ls + .btn-block-ls { margin-top: var(--space-2); }
/* Demo hesap kutusu (login) */
/* 2FA modalı (ai-picker iskeleti) */
.tfa-modal { max-width: 380px; }
.tfa-modal .ai-picker-body { gap: var(--space-3); }
.tfa-modal p { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }
@media (max-height: 500px) and (orientation: landscape) { .auth-wrap { min-height: auto; } }

/* ==========================================================================
   5. Dashboard
   ========================================================================== */
.dash-shell { padding-block: var(--space-6) 60px; }
/* Karşılama şeridi */
.dash-hero { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-5); flex-wrap: wrap; }
.dash-hero-left { display: flex; align-items: center; gap: var(--space-4); flex: 1 1 320px; min-width: 0; }
.dash-hero-avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; overflow: hidden; background: var(--color-primary-soft); display: grid; place-items: center; color: var(--color-primary); font-size: var(--fs-2xl); }
.dash-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dash-hero-info { min-width: 0; flex: 1; }
.dash-hero-info h1 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); margin: 0 0 4px; line-height: 1.2; }
.dash-hero-info p { margin: 0 0 10px; font-size: var(--fs-sm); }
.dash-hero-chips { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dash-hero-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dash-mini-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; background: var(--color-card); border: 1px solid var(--color-border); }
.dash-mini-chip--streak { background: var(--color-warning-bg); border-color: transparent; }
.dash-mini-chip--streak i { color: var(--color-warning); }

/* KPI kartları */
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.dash-stat { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 20px; }
.dash-stat-ico { width: 44px; height: 44px; border-radius: var(--radius-md); flex-shrink: 0; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-md); }
.dash-stat-val { font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.dash-stat-val small { font-size: var(--fs-sm); font-weight: 600; color: var(--color-muted); }
.dash-stat-lbl { font-size: var(--fs-xs); color: var(--color-muted); margin-top: 4px; font-weight: 500; }
.dash-stats--tight { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 0; }

/* İki sütun: ana içerik + yan widget'lar */
.dash-two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); align-items: start; }
.dash-two-col__main, .dash-two-col__side { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.dash-two-col__side { position: sticky; top: calc(var(--navbar-h) + 12px); }
.dash-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--space-3); }
.dash-side-head h3 { margin: 0; }
.dash-side-more { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); background: transparent; border: 0; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.dash-side-more:hover { background: var(--color-primary-soft); }
.dash-side-empty { margin: 0; font-size: var(--fs-sm); }
.dash-side-err { display: flex; gap: 8px; align-items: center; font-size: var(--fs-sm); }
.dash-palette-desc { margin: 0 0 var(--space-4); }

/* Bildirim özeti */
.dash-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dash-notif-list li { display: flex; gap: 10px; align-items: flex-start; }
.dash-notif-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.dash-notif-dot.is-read { opacity: .35; }
.dash-notif-text { font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-notif-list time { font-size: var(--fs-xs); color: var(--color-muted); }

/* Rozetler */
.dash-badge-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-badge-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-primary-soft); font-size: var(--fs-sm); font-weight: 600; }
.dash-badge-ico { width: 28px; height: 28px; flex: 0 0 28px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-card); color: var(--color-primary); font-size: var(--fs-xs); }
.dash-badge-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.badge-cell { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.badge-cell i { font-size: 22px; color: var(--color-primary); }
.badge-cell strong { display: block; margin-top: 6px; }
.badge-cell span { display: block; font-size: var(--fs-xs); color: var(--color-muted); margin-top: 2px; }

/* Aktivite / log listesi */
.log-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.log-list li { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.log-list li:last-child { border-bottom: 0; }
.log-ico { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-xs); }
.log-list .log-text { flex: 1; min-width: 0; }
.log-list time { font-size: var(--fs-xs); color: var(--color-muted); white-space: nowrap; }
.log-biolink .log-ico { color: var(--color-secondary); }
.log-empty { padding: 8px 0; margin: 0; }

/* Biolink kartları */
.biolink-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-4); min-height: 60px; }
.biolink-card {
  position: relative; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); color: inherit;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.biolink-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--color-primary-rgb), .35); }
.biolink-card.selected { border-color: var(--color-primary); box-shadow: var(--shadow-ring); }
.biolink-flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; }
.biolink-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--color-primary); color: var(--color-on-primary); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.biolink-badge--draft { background: var(--color-warning); color: #fff; }
.biolink-mini { padding: 26px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 150px; }
.bm-avatar { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; overflow: hidden; font-size: var(--fs-lg); }
.bm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bm-name { font-weight: 700; font-size: var(--fs-base); }
.bm-link { width: 100%; padding: 8px; font-size: var(--fs-xs); font-weight: 600; text-align: center; }
.bm-link.is-bio { opacity: .85; }
.biolink-body { padding: 14px 16px 16px; min-width: 0; }
.biolink-url { font-size: var(--fs-sm); font-weight: 600; word-break: break-all; margin-bottom: 4px; }
.biolink-meta { font-size: var(--fs-xs); margin-bottom: var(--space-3); }
.bl-live { display: none; align-items: center; gap: 4px; margin-left: 8px; font-size: 11px; color: var(--color-success); }
.bl-live i { font-size: 8px; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.biolink-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.biolink-actions .btn-sm-icon { width: 36px; height: 36px; flex: none; }
.biolink-actions .bl-edit { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .biolink-actions { gap: 6px; }
  .biolink-actions .bl-edit { flex: none; width: 36px; height: 36px; padding: 0; border-radius: var(--radius-sm); }
  .biolink-actions .bl-edit .bl-edit-label { display: none; }
}
.biolink-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3);
  border: 2px dashed rgba(var(--color-primary-rgb), .35); background: var(--color-primary-soft); color: var(--color-primary);
  min-height: 230px; font-weight: 700; font-family: var(--font-ui); box-shadow: none;
}
.biolink-add i { font-size: var(--fs-2xl); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--color-primary-rgb), .16); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.biolink-add:hover { border-color: var(--color-primary); }
.biolink-add:hover i { background: var(--color-primary); color: var(--color-on-primary); }
.grid-span-all { grid-column: 1 / -1; }

/* Palet seçici (dashboard + editör) */
.palette-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.palette-swatch { display: flex; flex-direction: column; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; width: 84px; }
.palette-preview { display: block; width: 64px; height: 64px; border-radius: var(--radius-md); border: 2px solid transparent; box-shadow: var(--shadow-sm); position: relative; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.palette-preview span { position: absolute; bottom: 8px; right: 8px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); }
.palette-swatch.active .palette-preview { border-color: var(--color-primary); transform: scale(1.05); }
.palette-swatch:hover .palette-preview { transform: scale(1.04); }
.palette-name { font-size: var(--fs-xs); color: var(--color-muted); text-align: center; }

/* Turnstile widget (bot koruması) */
.ts-widget { margin: var(--space-3) 0; min-height: 0; }
.ts-widget:empty { display: none; }

/* ==========================================================================
   6. Profil
   ========================================================================== */
.profile-shell { padding-block: var(--space-6) 60px; }
.profile-head { display: flex; align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); flex-wrap: wrap; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--color-primary-soft); display: grid; place-items: center; color: var(--color-primary); font-size: var(--fs-3xl); flex-shrink: 0; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-id { flex: 1; min-width: 200px; }
.profile-id h1 { font-size: var(--fs-2xl); margin: 0 0 4px; }
.plan-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; font-size: var(--fs-xs); }
.plan-badge.plan-free { background: var(--color-surface-3); color: var(--color-text-3); }
.plan-badge i { color: var(--color-warning); }
.plan-badge.plan-free i { color: var(--color-muted); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.profile-card { margin-bottom: var(--space-5); }
.profile-grid .profile-card { margin-bottom: 0; }
.pf-card-sub { font-size: var(--fs-sm); margin: -8px 0 var(--space-4); }
.pf-sub-title { font-size: var(--fs-base); margin: 6px 0 10px; }
.pf-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: var(--space-3); flex-wrap: wrap; }
.pf-actions--start { justify-content: flex-start; }
.pf-inline-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pf-inline-row .select-ls, .pf-inline-row .input-ls { width: auto; flex: 0 1 auto; }
.pf-inline-row .input-ls.grow { flex: 1; min-width: 200px; }
.pf-inline-row label { font-size: var(--fs-sm); font-weight: 600; }

/* Bölüm gezinme çipleri (sticky) */
.pf-nav { position: sticky; top: calc(var(--navbar-h) + 8px); z-index: var(--z-sticky); margin: 0 0 var(--space-5); padding: 6px 0; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(8px); border-radius: var(--radius-md); }
.pf-nav-scroll { display: flex; gap: var(--space-2); overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px; }
.pf-nav-scroll::-webkit-scrollbar { display: none; }
.pf-nav-chip { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text); font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.pf-nav-chip i { color: var(--color-muted); font-size: var(--fs-xs); }
.pf-nav-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pf-nav-chip:hover i { color: var(--color-primary); }
.pf-nav-chip.is-active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.pf-nav-chip.is-active i { color: inherit; }

/* Tehlike bölgesi */
.profile-danger { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); }
.profile-danger h3 { color: var(--color-danger); }
.profile-danger h3 i { color: var(--color-danger); }
.profile-danger .pf-actions { justify-content: flex-start; }

/* Plan limit / özellik satırları */
.plan-limit { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.plan-limit:last-child { border-bottom: 0; }
.plan-limit span { color: var(--color-muted); }
.plan-feature { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: var(--fs-sm); }
.plan-feature.on i { color: var(--color-success); }
.plan-feature.off { color: var(--color-muted); } .plan-feature.off i { color: var(--neutral-400); }

/* Oturumlar */
.pf-sess-list { list-style: none; padding: 0 4px 0 0; margin: 0 0 var(--space-3); display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.pf-sess-list li { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.pf-sess-ico { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-xs); }
.pf-sess-ico.is-revoke { background: var(--color-danger-bg); color: var(--color-danger); }
.pf-sess-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-sess-body .muted { font-size: var(--fs-xs); }
.pf-sess-tag { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-danger-bg); color: var(--color-danger); font-size: 11px; font-weight: 600; align-self: flex-start; }

/* Webhook'lar */
.hook-new { margin-bottom: var(--space-3); }
.hook-new summary { cursor: pointer; font-weight: 600; }
.hook-form { display: grid; gap: var(--space-2); padding: var(--space-3) 0; }
.hook-events { display: flex; flex-wrap: wrap; gap: 6px; }
.hook-ev { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 30px; border-radius: var(--radius-sm); background: var(--color-primary-soft); font-size: var(--fs-xs); font-weight: 500; cursor: pointer; }
.hook-ev input { margin: 0; }
.hook-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.hook-item { padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.hook-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hook-url { flex: 1; min-width: 200px; font-size: var(--fs-xs); word-break: break-all; }
.hook-events-txt { font-size: var(--fs-xs); }
.hook-secret { font-size: 11px; margin-top: 4px; }
.hook-secret code, .code-select { user-select: all; }
.hook-fail { color: var(--color-danger); font-size: 11px; margin-top: 4px; }
.hook-deliv { margin-top: 6px; }
.hook-deliv summary { cursor: pointer; font-size: var(--fs-xs); }
.pf-deliv-body { margin-top: 6px; font-size: var(--fs-xs); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-mini { width: 100%; border-collapse: collapse; }
.table-mini th, .table-mini td { text-align: left; padding: 4px 6px; vertical-align: top; }
.table-mini th { font-weight: 600; color: var(--color-muted); font-size: var(--fs-xs); }
.table-mini code { font-size: .92em; }

/* 2FA kurulum */
.tfa-enroll { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; padding: var(--space-3); background: var(--color-surface-3); border-radius: var(--radius-md); margin-bottom: 10px; }
.tfa-qr { width: 140px; height: 140px; background: #fff; padding: 6px; border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0; }
.tfa-steps { margin: 0 0 6px; font-size: var(--fs-sm); }
.tfa-code-row { display: flex; gap: var(--space-2); }
.tfa-code-row .input-ls { max-width: 120px; }
.tfa-secret { font-size: var(--fs-xs); margin: 8px 0 0; }
.tfa-done { padding: var(--space-3); background: var(--color-success-bg); border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent); }
.tfa-done b { color: var(--color-success); }
.tfa-done p { margin: 8px 0 4px; font-size: var(--fs-sm); }
.tfa-backup { font-family: var(--font-mono); background: var(--color-card); padding: 10px; border-radius: var(--radius-sm); line-height: 2; font-size: var(--fs-sm); }

/* Referans */
.ref-link-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.ref-link-row .input-ls { flex: 1; min-width: 200px; font-family: var(--font-mono); font-size: var(--fs-sm); }

/* ==========================================================================
   7. QR kodlar
   ========================================================================== */
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); margin-top: 4px; }
.qr-card { display: flex; flex-direction: column; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-fast), border-color var(--dur-fast); }
.qr-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--color-primary-rgb), .35); }
.qr-card-canvas { display: grid; place-items: center; padding: var(--space-4); background: var(--color-surface-3); }
.qr-card-canvas canvas, .qr-card-canvas img { width: 150px; height: 150px; border-radius: var(--radius-sm); }
.qr-card-body { padding: 4px 16px 12px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.qr-card-title { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qr-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); }
.qr-badge.on { background: var(--color-success-bg); color: var(--color-success); }
.qr-badge.off { background: var(--color-danger-bg); color: var(--color-danger); }
.qr-card-short { font-size: var(--fs-sm); color: var(--color-primary); display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.qr-card-target { font-size: var(--fs-xs); color: var(--color-muted); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qr-card-meta { margin-top: auto; font-size: var(--fs-xs); color: var(--color-muted); padding-top: 4px; }
.qr-card-actions { display: flex; gap: 6px; justify-content: flex-end; padding: 10px 14px; border-top: 1px solid var(--color-border); }
.qr-empty h3 { margin: 0 0 6px; }

/* QR editör modalı */
.qr-modal-bg { position: fixed; inset: 0; background: rgba(10,12,30,.55); backdrop-filter: blur(4px); z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); animation: fadeIn var(--dur-fast) ease; }
.qr-modal { width: min(820px, 100%); max-height: var(--sheet-max-h); overflow-y: auto; overscroll-behavior: contain; background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.qr-modal-lg { width: min(880px, 100%); }
.qr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 20px; border-bottom: 1px solid var(--color-border); }
.qr-modal-head h3 { margin: 0; font-size: var(--fs-md); }
.qr-modal-head h3 i { color: var(--color-primary); margin-right: 8px; }
.qr-modal-x { border: 0; background: transparent; font-size: var(--fs-lg); color: var(--color-muted); cursor: pointer; width: 36px; height: 36px; border-radius: var(--radius-sm); }
.qr-modal-x:hover { background: var(--color-primary-soft); color: var(--color-text); }
.qr-modal-body { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); padding: var(--space-5) 20px; }
.qr-modal-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; position: sticky; top: 0; align-self: start; }
.qr-preview-canvas { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.qr-preview-canvas canvas, .qr-preview-canvas img { width: 220px; height: 220px; }
.qr-preview-url { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--color-primary); margin: 0; word-break: break-all; text-align: center; }
.qr-dyn-hint { font-size: var(--fs-xs); text-align: center; margin: 8px 0 0; }
.qr-modal-form { display: flex; flex-direction: column; gap: 6px; }
.qr-modal-form .lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--color-muted); margin: 10px 0 2px; display: block; }
.qr-modal-form .lbl:first-child { margin-top: 0; }
.qr-modal-form .lbl.mt-sm { margin-top: 6px; }
.qr-modal-form .lbl .muted { font-weight: 400; }
.qr-switch { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; font-size: var(--fs-sm); cursor: pointer; }
.qr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.qr-field-row input[type="color"], .qr-bg-row input[type="color"] { width: 100%; height: 42px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 4px; background: transparent; cursor: pointer; }
.qr-bg-row input[type="color"] { width: 60px; }
.qr-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.qr-seg-opt, .qr-preset, .qr-type { border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-weight: 600; cursor: pointer; transition: border-color var(--dur-fast), background var(--dur-fast); }
.qr-seg-opt { padding: 7px 12px; min-height: 40px; font-size: var(--fs-sm); }
.qr-seg-opt:hover, .qr-preset:hover, .qr-type:hover { border-color: var(--color-primary); }
.qr-seg-opt.active, .qr-type.active { background: var(--color-primary-soft); color: var(--color-primary); border-color: var(--color-primary); }
.qr-logo-row { display: flex; align-items: center; gap: var(--space-3); }
.qr-logo-prev { width: 60px; height: 60px; flex: 0 0 60px; border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); display: grid; place-items: center; overflow: hidden; background: var(--color-bg); color: var(--color-muted); }
.qr-logo-prev img { width: 100%; height: 100%; object-fit: cover; }
.qr-logo-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.qr-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: var(--space-4) 20px; border-top: 1px solid var(--color-border); position: sticky; bottom: 0; background: var(--color-card); }
.qr-dl-row { display: flex; gap: 8px; width: 100%; margin-top: 4px; }
.qr-dl-row select { flex: 0 0 96px; }
.qr-dl-row button { flex: 1; }
.qr-caption-prev { font-weight: 800; letter-spacing: .04em; text-align: center; margin-top: 2px; color: var(--color-text); text-transform: uppercase; font-size: var(--fs-sm); }
.qr-tabs { display: flex; gap: 6px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.qr-tab { border: 0; background: transparent; padding: 9px 13px; font-weight: 600; font-size: var(--fs-sm); color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.qr-tab:hover { color: var(--color-text); }
.qr-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.qr-presets, .qr-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.qr-types { margin-bottom: 8px; }
.qr-preset, .qr-type { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: var(--radius-md); font-size: var(--fs-xs); }
.qr-type { padding: 12px 6px; }
.qr-type i { font-size: var(--fs-lg); color: var(--color-muted); }
.qr-type.active i { color: var(--color-primary); }
.qr-preset-sw { width: 34px; height: 34px; border-radius: 9px; }
.qr-bg-row { display: flex; align-items: center; gap: 8px; }
.qr-mini-check { font-size: var(--fs-xs); display: flex; align-items: center; gap: 5px; color: var(--color-muted); cursor: pointer; }
.qr-field-row input[type="range"], .qr-tabpane input[type="range"], .range-full { width: 100%; accent-color: var(--color-primary); }
.qr-file-box { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 14px; border-radius: var(--radius-md); border: 1px dashed var(--color-border-strong); background: var(--color-bg); }
.qr-file-box.has { border-style: solid; }
.qr-file-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
.qr-file-info > i { font-size: var(--fs-2xl); color: var(--color-primary); flex: 0 0 auto; }
.qr-file-info b { display: block; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.qr-file-link { font-size: var(--fs-xs); color: var(--color-primary); }
.qr-rules-hint { font-size: var(--fs-xs); margin: 8px 0 0; }
.qr-vcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qr-vcard-grid .lbl, #qrm-input > .lbl { margin-top: 8px; }
.qr-type-chip { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
.qr-logo-hint { font-size: var(--fs-xs); margin-top: 10px; }

/* QR analitik modalı */
.qr-stats-body { padding: var(--space-4) 20px 20px; max-height: 78vh; overflow-y: auto; }
.qr-stats-range { display: flex; gap: 6px; margin-bottom: var(--space-4); }
.qr-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.qr-kpi { position: relative; display: flex; align-items: center; gap: 11px; padding: 14px; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border); }
.qr-kpi-ico { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); }
.qr-kpi b { font-size: var(--fs-xl); display: block; line-height: 1; }
.qr-kpi small { font-size: var(--fs-xs); color: var(--color-muted); }
.qr-kpi-delta { position: absolute; top: 10px; right: 12px; font-size: var(--fs-xs); font-weight: 700; }
.qr-kpi-delta.up { color: var(--color-success); } .qr-kpi-delta.down { color: var(--color-danger); }
.qr-stats-panel { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 14px; }
.qr-stats-panel h4 { margin: 0 0 12px; font-size: var(--fs-base); }
.qr-stats-panel h4 i { color: var(--color-primary); margin-right: 7px; }
.qr-stats-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qr-stats-empty { text-align: center; padding: 28px 12px; color: var(--color-muted); font-size: var(--fs-sm); }
.qr-stats-empty i { display: block; font-size: var(--fs-3xl); opacity: .4; margin-bottom: 8px; }
@media (max-width: 640px) {
  .qr-modal-body { grid-template-columns: 1fr; padding: var(--space-4); gap: var(--space-4); }
  .qr-modal-head, .qr-modal-foot, .qr-stats-body { padding-inline: var(--space-4); }
  .qr-modal-preview { position: static; }
  .qr-preview-canvas canvas, .qr-preview-canvas img { width: min(220px, 60vw); height: auto; aspect-ratio: 1; }
  .qr-presets, .qr-types { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-kpis, .qr-stats-2col, .qr-vcard-grid, .qr-field-row { grid-template-columns: 1fr; }
  .qr-modal-foot { flex-wrap: wrap; padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  .qr-modal-foot .btn-ls { flex: 1 1 45%; }
  .qr-file-info b { max-width: 100%; }
  .qr-file-box { flex-direction: column; align-items: stretch; }
  .qr-tabs { overflow-x: auto; scrollbar-width: none; }
  .qr-tabs::-webkit-scrollbar { display: none; }
  .qr-tab { flex: 0 0 auto; }
}

/* ==========================================================================
   8. Blog
   ========================================================================== */
.blog-hero { text-align: center; padding: var(--space-5) var(--space-4) var(--space-6); margin: 0 0 var(--space-5); background: var(--gradient-soft); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.blog-hero h1 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin: 8px 0 10px; }
.blog-hero-lead { max-width: 620px; margin: 0 auto var(--space-4); }
.blog-hero-search, .tools-hero-search { max-width: 520px; margin: 0 auto var(--space-4); }
.blog-hero-search .input-ls, .tools-hero-search .input-ls { border-radius: var(--radius-pill); }
.blog-hero-chips { justify-content: center; }
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.blog-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; color: inherit; }
.blog-card .bc-thumb { aspect-ratio: 16/9; overflow: hidden; }
.blog-card .bc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.blog-card:hover .bc-thumb img { transform: scale(1.04); }
.blog-card .bc-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card .bc-body-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.bc-cat { font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; }
.blog-card h3 { font-size: var(--fs-lg); margin: 8px 0 10px; }
.blog-card .bc-snippet { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-sm); }
.blog-card .bc-meta { margin-top: auto; padding-top: 12px; }
.bc-meta { display: flex; gap: 14px; color: var(--color-muted); font-size: var(--fs-xs); margin-top: 14px; align-items: center; flex-wrap: wrap; }
.bc-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; font-size: var(--fs-xs); margin-right: 6px; }
.bc-avatar-lg { width: 42px; height: 42px; font-size: var(--fs-md); }
.bc-author { display: inline-flex; align-items: center; gap: 6px; }
.bc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.bc-tag { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
.blog-cat-head { margin: 4px 0 var(--space-4); }
.blog-cat-head h3 { margin: 4px 0 0; font-size: var(--fs-xl); }
.blog-cat-head .muted { font-weight: 500; }
/* Öne çıkan yazı */
.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-bottom: var(--space-5); padding: 0; overflow: hidden; color: inherit; }
.blog-featured .bf-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.blog-featured .bf-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.blog-featured:hover .bf-thumb img { transform: scale(1.03); }
.blog-featured .bf-badge { position: absolute; top: 14px; left: 14px; background: var(--color-primary); color: var(--color-on-primary); padding: 5px 12px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; }
.blog-featured .bf-body { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; justify-content: center; }
.blog-featured .bf-body h2 { font-size: clamp(1.2rem, 2vw, 1.6rem); margin: 8px 0 10px; }
/* Yan sütun widget'ları */
.blog-sidebar .widget { margin-bottom: var(--space-5); }
.widget-list { list-style: none; padding: 0; margin: 0; }
.widget-list li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.widget-list li:last-child { border-bottom: 0; }
.widget-list li a { display: flex; align-items: center; gap: 8px; color: var(--color-text); font-weight: 600; font-size: var(--fs-sm); }
.widget-list li a i { color: var(--color-primary); font-size: 10px; opacity: .6; }
.widget-list li a:hover { color: var(--color-primary); }
.widget-post { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.widget-post:last-child { border-bottom: 0; }
.widget-post-thumb { width: 60px; height: 60px; flex: 0 0 60px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface-3); }
.widget-post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.widget-post-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.widget-post-body strong { font-size: var(--fs-sm); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget-post-body span { font-size: 11px; }
/* Blog detay */
.blog-detail { max-width: 760px; margin: 0 auto; }
.blog-detail-wrap { max-width: 1080px; margin: 0 auto; }
.blog-detail-hero { margin: 0 0 var(--space-5); }
.blog-detail-hero .bdh-cover { max-height: 420px; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); background: var(--color-surface-3); }
.blog-detail-hero .bdh-cover img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.blog-detail-hero .bdh-body { max-width: 760px; margin: 0 auto; text-align: left; }
.blog-detail-hero h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 12px 0 16px; line-height: 1.2; }
.chip-cat { display: inline-block; background: var(--color-primary-soft); color: var(--color-primary); padding: 5px 14px; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.bdh-meta { display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: center; }
.bc-author-info { display: inline-flex; flex-direction: column; line-height: 1.2; }
.bc-author-info strong { font-size: var(--fs-base); }
.bc-author-info small { font-size: var(--fs-xs); margin-top: 2px; }
.blog-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-6); margin: 12px 0 var(--space-5); align-items: start; }
.blog-prose { max-width: 760px; font-size: var(--fs-md); line-height: 1.7; }
.blog-prose h2 { font-size: var(--fs-2xl); margin: var(--space-6) 0 12px; scroll-margin-top: 84px; }
.blog-prose h3 { font-size: var(--fs-xl); margin: var(--space-5) 0 10px; scroll-margin-top: 84px; }
.blog-prose p { margin: 0 0 16px; color: var(--color-text); opacity: .92; }
.blog-prose img { max-width: 100%; border-radius: var(--radius-md); margin: 16px 0; }
.blog-prose blockquote { margin: 20px 0; padding: 14px 20px; border-left: 3px solid var(--color-primary); background: var(--color-primary-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; color: var(--color-text); font-style: italic; }
.blog-prose pre { background: var(--color-surface-3); padding: 14px 16px; border-radius: var(--radius-md); overflow-x: auto; font-size: var(--fs-sm); }
.blog-prose code { background: var(--color-surface-3); padding: 2px 6px; border-radius: 4px; font-size: .88em; }
.blog-prose pre code { background: transparent; padding: 0; }
.blog-prose ul, .blog-prose ol { margin: 0 0 16px; padding-left: 24px; }
.blog-prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.blog-toc-wrap { position: sticky; top: 80px; }
.blog-toc { padding: var(--space-4) 20px; }
.blog-toc h4 { font-size: var(--fs-xs); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; }
.blog-toc h4 i { color: var(--color-primary); }
.blog-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.blog-toc a { color: var(--color-text); font-size: var(--fs-sm); display: block; padding: 6px 10px; border-radius: var(--radius-sm); border-left: 2px solid transparent; transition: background var(--dur-fast), color var(--dur-fast); }
.blog-toc a:hover { background: var(--color-primary-soft); color: var(--color-primary); border-left-color: var(--color-primary); }
.blog-toc .toc-h3 a { padding-left: 22px; font-size: var(--fs-xs); color: var(--color-muted); }
.blog-author-card { display: flex; gap: var(--space-4); align-items: center; margin: var(--space-5) 0; }
.bac-avatar { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px; display: grid; place-items: center; background: var(--color-primary); color: var(--color-on-primary); font-weight: 800; font-size: var(--fs-xl); }
.bac-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bac-body strong { font-size: var(--fs-md); }
.bac-body p { margin: 4px 0 0; font-size: var(--fs-sm); }
.blog-related { margin: var(--space-6) 0 20px; }
.blog-related h3 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.blog-card-sm h3 { font-size: var(--fs-md); }
.blog-back { margin-top: var(--space-6); }
/* Paylaş / puan / yorum */
.blog-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: var(--space-5) 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.blog-share-lbl { font-weight: 700; color: var(--color-muted); margin-right: 4px; }
.bsh { width: 40px; height: 40px; border-radius: var(--radius-sm); display: inline-grid; place-items: center; color: #fff; border: 0; cursor: pointer; transition: filter var(--dur-fast); }
.bsh:hover { filter: brightness(1.1); }
.bsh.x { background: var(--neutral-900); } .bsh.fb { background: #1877f2; } .bsh.wa { background: #25d366; } .bsh.in { background: #0a66c2; }
.bsh.cp { background: var(--color-primary); }
[data-theme="dark"] .bsh.x { background: #000; }
.blog-rating { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4) 20px; margin: var(--space-5) 0; }
.br-avg { display: flex; align-items: center; gap: 10px; }
.br-num { font-size: var(--fs-3xl); font-weight: 800; }
.br-stars i, .br-input i { color: var(--color-warning); }
.br-mine { display: flex; align-items: center; gap: 12px; color: var(--color-muted); font-weight: 600; }
.br-input .rate-star { cursor: pointer; font-size: var(--fs-xl); transition: transform .12s; }
.br-input .rate-star:hover { transform: scale(1.15); }
.blog-comments { margin-top: var(--space-5); }
.blog-comments h3 { font-size: var(--fs-xl); margin-bottom: var(--space-4); }
.blog-comment-form { display: grid; gap: 10px; margin-bottom: var(--space-5); max-width: 560px; }
.blog-comment-form textarea { min-height: 90px; }
.blog-comment-form button { justify-self: start; }
.bcf-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bcf-row:empty { display: none; }
.bcf-msg { margin-top: 8px; }
.blog-comment { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.blog-comment .bc-ava { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--color-on-primary); background: var(--color-primary); }
.blog-comment .bc-top { display: flex; gap: 10px; align-items: baseline; }
.blog-comment .bc-top time { color: var(--color-muted); font-size: var(--fs-xs); }
.blog-comment p { margin: 4px 0 0; color: var(--color-text); opacity: .9; }
.blog-comment-empty { padding: 14px 0; }

/* ==========================================================================
   9. Araçlar
   ========================================================================== */
.tools-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-5); align-items: center; padding: var(--space-5); margin: 0 0 var(--space-5); background: var(--gradient-soft); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.tools-hero-main h1 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 8px 0 6px; }
.tools-hero-search { margin: var(--space-4) 0 0; max-width: 480px; }
.tool-featured-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--radius-md); background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tool-featured-card:hover { box-shadow: var(--shadow-md); border-color: rgba(var(--color-primary-rgb), .35); }
.tf-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.tf-eyebrow i { color: var(--color-warning); }
.tf-body { display: flex; gap: 14px; align-items: center; }
.tf-icon { width: 60px; height: 60px; font-size: var(--fs-2xl); flex: 0 0 60px; margin-bottom: 0; }
.tf-text h3 { font-size: var(--fs-lg); margin: 0 0 4px; }
.tf-text p { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }
.tf-text small { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-xs); }
.tf-cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--fs-sm); color: var(--color-primary); }
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tool-card { position: relative; cursor: pointer; text-align: left; color: inherit; }
.tool-card .ti { margin-bottom: 14px; }
.tool-card h4 { font-size: var(--fs-md); margin: 0 0 6px; }
.tool-card .tool-desc { color: var(--color-muted); font-size: var(--fs-sm); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tool-card .tool-cta { position: absolute; right: 14px; bottom: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-xs); opacity: 0; transition: opacity var(--dur) var(--ease); }
.tool-card:hover .tool-cta { opacity: 1; }
@media (hover: none) { .tool-card .tool-cta { opacity: 1; } }
.tool-hits { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); display: inline-flex; gap: 4px; align-items: center; }
.tool-hits--plain { background: transparent; color: var(--color-muted); font-weight: 500; top: 8px; right: 10px; }
/* Araç detayı */
.tool-detail-hero { display: flex; align-items: center; gap: 20px; margin: 0 0 var(--space-5); padding: 20px 24px; background: var(--gradient-soft); border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.tool-detail-icon { width: 64px; height: 64px; font-size: var(--fs-2xl); flex: 0 0 64px; margin-bottom: 0; background: var(--color-card); box-shadow: var(--shadow-sm); }
.tool-detail-hero h1 { font-size: clamp(1.35rem, 3vw, 1.75rem); margin: 4px 0; }
.tool-detail-hero p { margin: 0; }
.tool-detail-cat { font-size: var(--fs-xs); font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .06em; }
.tool-hits-inline { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); }
.tool-detail-body .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tool-detail-body .field label { font-size: var(--fs-sm); font-weight: 700; }
.tool-detail-body .field .help { font-size: var(--fs-xs); color: var(--color-muted); margin: 0; }
.tool-howto { margin-top: var(--space-5); }
.tool-howto h3 { margin-bottom: 8px; }
.tool-howto p { margin: 0; }
.tool-related { margin-top: var(--space-6); }
.tool-related h3 { font-size: var(--fs-lg); margin-bottom: 14px; }
.tool-related-grid { grid-template-columns: repeat(3, 1fr); }
.tool-workspace { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tool-workspace textarea { min-height: 240px; resize: vertical; font-family: var(--font-mono); font-size: var(--fs-sm); }
/* Araç iç bileşenleri (tools-logic) */
.tool-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 14px 0; }
.tool-out { margin-top: var(--space-3); }
.tool-out-box { min-height: 60px; }
.tool-qr-box { text-align: center; padding: 20px; background: #fff; border-radius: var(--radius-md); }
.tool-qr-box img { max-width: 220px; margin: 0 auto; }
.tool-color-input { width: 80px; height: 50px; border: 0; background: none; padding: 0; cursor: pointer; }
.tool-result { display: none; }
.tool-result.show { display: block; }
.tool-result-link { font-weight: 700; word-break: break-all; }
.tool-stats-box { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.tool-stats-box .input-ls { max-width: 240px; }
.tool-stats-msg { margin: 6px 0 0; font-size: var(--fs-sm); }
.tool-grid-auto { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.pal-out { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: var(--space-3); }
.pal-cell { text-align: center; }
.pal-cell div { height: 64px; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.pal-cell code { font-size: 11px; }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; font-size: 26px; text-align: center; }
.em-btn { cursor: pointer; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; padding: 6px; font-size: 26px; }
.em-btn:hover { border-color: var(--color-primary); }
.pw-meter { height: 10px; border-radius: 5px; background: var(--color-surface-3); overflow: hidden; margin: 8px 0; }
.pw-meter > div { height: 100%; width: 0; transition: width .2s; }
.pw-meter-txt { font-size: var(--fs-sm); min-height: 1.2em; }
.check-block { display: block; margin: 6px 0; }

/* ==========================================================================
   10. Keşfet
   ========================================================================== */
.trending-card { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-4); align-items: center; padding: var(--space-4); color: inherit; margin-bottom: var(--space-5); }
.trending-avatar { width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--gradient-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; overflow: hidden; }
.trending-avatar img { width: 100%; height: 100%; object-fit: cover; }
.trending-body { min-width: 0; }
.trending-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.trending-top strong { font-size: var(--fs-lg); }
.trending-bio { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trending-card > .fa-arrow-right { opacity: .6; }
.disc-more { text-align: center; margin-top: var(--space-5); }

/* ==========================================================================
   11. Bildirimler (sayfa + navbar çanı)
   ========================================================================== */
.notif-shell { padding-block: var(--space-5) 60px; }
.notif-list { display: grid; gap: var(--space-2); }
.notif-day { margin: var(--space-3) 0 6px; font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.notif-group { display: grid; gap: 6px; }
.notif-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); color: inherit; min-height: 44px; background: var(--color-card); border: 1px solid var(--color-border); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.notif-item:hover { border-color: rgba(var(--color-primary-rgb), .35); box-shadow: var(--shadow-sm); }
.notif-item.is-unread { background: var(--color-primary-soft); }
.notif-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-on-primary); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.notif-text { font-size: var(--fs-sm); opacity: .85; margin-top: 2px; }
.notif-time { font-size: 11px; opacity: .6; margin-top: 4px; }
.notif-loading { padding: var(--space-5); text-align: center; }
/* Navbar çan + açılır liste */
.nav-bell { position: relative; }
.nav-bell-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--color-danger); color: #fff; font-size: 10px; line-height: 16px; padding: 0 4px; font-weight: 700; text-align: center; }
.nav-bell-drop { position: fixed; top: calc(var(--navbar-h) - 8px); right: 16px; width: 340px; max-width: calc(100vw - 32px); max-height: 70vh; overflow: auto; background: var(--color-card); border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); z-index: var(--z-overlay); padding: 8px; }
.nav-bell-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 8px; }
.nav-bell-item { display: block; padding: 10px; border-radius: var(--radius-sm); color: inherit; }
.nav-bell-item:hover { background: var(--color-surface-3); }
.nav-bell-item.is-unread { background: var(--color-primary-soft); }
.nav-bell-item strong { display: block; font-weight: 600; }
.nav-bell-item .notif-text { font-size: var(--fs-xs); }
.nav-bell-item .notif-time { margin-top: 2px; }
.nav-bell-empty { padding: 14px; color: var(--color-muted); text-align: center; font-size: var(--fs-sm); }

/* ==========================================================================
   12. İçerik sayfaları — iletişim, SSS, yardım, statik, şikayet
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.contact-info-cards { display: grid; gap: var(--space-4); }
.contact-info-cards .ci { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info-cards .ci i { margin-bottom: 0; }
.contact-info-cards .ci strong { display: block; }
.contact-info-cards .ci .ci-sub { display: block; font-size: var(--fs-sm); }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; height: 320px; margin-top: var(--space-5); filter: grayscale(.2); }
.map-embed iframe { width: 100%; height: 100%; border: 0; }
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-search { margin-bottom: var(--space-5); }
.faq-group-title { font-size: var(--fs-md); margin: var(--space-5) 0 var(--space-3); }
/* ---- Yardım merkezi (v2) ---- */
.help-hero { text-align: center; padding: var(--space-6) 0 var(--space-5); margin-bottom: var(--space-5); }
.help-hero h1 { margin: 6px 0 var(--space-4); font-size: clamp(1.6rem, 3vw, 2.4rem); }
.help-search { position: relative; max-width: 620px; margin: 0 auto; }
.help-search > i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.help-search .input-ls { width: 100%; padding-left: 44px; padding-right: 44px; min-height: 52px; font-size: var(--fs-md); border-radius: 999px; box-shadow: var(--shadow-md); }
.help-search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: inherit; font-size: var(--fs-xs); color: var(--color-muted); border: 1px solid var(--color-border); border-radius: 6px; padding: 2px 7px; background: var(--color-surface); }
.help-quick { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: 6px 10px; justify-content: center; font-size: var(--fs-sm); }
.help-quick a { color: var(--color-primary); text-decoration: none; padding: 2px 10px; border-radius: 999px; background: var(--color-primary-soft); }
.help-quick a:hover { text-decoration: underline; }
.help-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.help-cat { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); cursor: pointer; font: inherit; color: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast); }
.help-cat:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.help-cat.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), .18); background: var(--color-primary-soft); }
.help-cat .hi { flex: 0 0 auto; margin: 0; width: 44px; height: 44px; }
.help-cat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.help-cat-txt b { font-size: var(--fs-sm); }
.help-cat-txt small { font-size: var(--fs-xs); color: var(--color-muted); line-height: 1.35; }
.help-cat .pill { flex: 0 0 auto; }
.help-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 var(--space-3); }
.help-list-head h2 { font-size: var(--fs-lg); margin: 0; }
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.help-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; text-decoration: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); min-width: 0; }
.help-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.help-card-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--color-primary-soft); color: var(--color-primary); }
.help-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.help-card-title { font-weight: 600; line-height: 1.35; }
.help-card-exc { font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.help-card-cat { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--color-primary); text-decoration: none; margin-top: 2px; width: fit-content; }
.help-card-arrow { color: var(--color-muted); margin-top: 12px; flex: 0 0 auto; }
.help-contact-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--color-primary-soft); flex-wrap: wrap; }
.help-contact-cta p { margin: 4px 0 0; font-size: var(--fs-sm); }
/* makale sayfası */
.help-article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--space-7); align-items: start; }
.help-article { min-width: 0; max-width: 780px; }
.help-article-head h1 { margin: 10px 0 8px; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.25; }
.help-article-meta { font-size: var(--fs-sm); color: var(--color-muted); display: flex; gap: 6px; align-items: center; }
.help-article-body { margin-top: var(--space-5); font-size: 1.02rem; line-height: 1.7; }
.help-article-body h2 { margin: var(--space-6) 0 var(--space-2); font-size: 1.25rem; scroll-margin-top: 90px; }
.help-article-body h3 { margin: var(--space-4) 0 var(--space-2); font-size: 1.05rem; }
.help-article-body p, .help-article-body ul, .help-article-body ol { margin: 0 0 var(--space-3); }
.help-article-body li { margin-bottom: 6px; }
.help-article-body code, .help-article-body kbd { background: var(--color-surface-2, rgba(0,0,0,.05)); border-radius: 6px; padding: 1px 6px; font-size: .92em; }
.help-article-body kbd { border: 1px solid var(--color-border); }
.help-article-body table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--fs-sm); display: block; overflow-x: auto; }
.help-article-body th, .help-article-body td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; }
.help-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-primary-soft); color: var(--color-text); border-left: 3px solid var(--color-primary); margin: var(--space-4) 0; font-size: var(--fs-sm); }
.help-tip i { color: var(--color-primary); margin-top: 3px; }
.help-toc { font-size: var(--fs-sm); padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.help-toc b { display: block; margin-bottom: 8px; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.help-toc ol { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.help-toc ol li { padding-left: 12px; border-left: 2px solid var(--color-border); }
.help-toc ol li:hover { border-color: var(--color-primary); }
.help-toc a { color: inherit; text-decoration: none; }
.help-toc a:hover { color: var(--color-primary); }
.help-toc--inline { display: none; margin-top: var(--space-4); }
.help-aside { position: sticky; top: 90px; display: flex; flex-direction: column; gap: var(--space-4); }
.help-related { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); font-size: var(--fs-sm); }
.help-related b { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.help-related a { color: inherit; text-decoration: none; display: flex; gap: 8px; align-items: flex-start; line-height: 1.4; }
.help-related a i { color: var(--color-primary); margin-top: 3px; }
.help-related a:hover { color: var(--color-primary); }
.help-contact-cta--aside { flex-direction: column; align-items: flex-start; margin-top: 0; padding: var(--space-4); gap: 10px; }
.help-feedback { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: var(--space-6); padding: 14px 16px; border-radius: var(--radius-lg); border: 1px dashed var(--color-border); font-size: var(--fs-sm); }
.help-fb-thanks { color: var(--color-success); display: inline-flex; gap: 8px; align-items: center; }
.help-fb-more { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.help-fb-more label { font-weight: 600; font-size: var(--fs-sm); }
.help-fb-more textarea { width: 100%; resize: vertical; }
.help-fb-more-actions { display: flex; gap: 8px; }
.help-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.help-prevnext .pn { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; min-width: 0; }
.help-prevnext .pn small { color: var(--color-muted); font-size: var(--fs-xs); }
.help-prevnext .pn b { font-size: var(--fs-sm); line-height: 1.35; }
.help-prevnext .pn.next { text-align: right; align-items: flex-end; }
.help-prevnext .pn:hover { border-color: var(--color-primary); }
@media (max-width: 900px) {
  .help-article-layout { grid-template-columns: 1fr; }
  .help-aside { position: static; }
  .help-aside .help-toc { display: none; }
  .help-toc--inline { display: block; }
}
@media (max-width: 640px) {
  .help-grid { grid-template-columns: 1fr; }
  .help-prevnext { grid-template-columns: 1fr; }
  .help-prevnext .pn.next { text-align: left; align-items: flex-start; }
  .help-hero { padding-top: var(--space-4); }
}
.static-page { max-width: 800px; margin: 0 auto; }
.static-page h1 { margin-bottom: 20px; }
.static-page h2 { margin-top: var(--space-6); }
.legal-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 var(--space-5); }
.legal-nav a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--color-border); color: inherit; text-decoration: none; font-size: var(--fs-sm); }
.legal-nav a.active { background: var(--color-primary-soft); color: var(--color-primary); border-color: transparent; font-weight: 600; }
.legal-page .prose-ls { line-height: 1.7; }
.legal-page .prose-ls h2 { font-size: 1.25rem; margin: var(--space-6) 0 var(--space-2); }
.legal-page .prose-ls h3 { font-size: 1.05rem; margin: var(--space-4) 0 var(--space-2); }
.legal-page .prose-ls table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); margin: var(--space-3) 0; display: block; overflow-x: auto; }
.legal-page .prose-ls th, .legal-page .prose-ls td { border: 1px solid var(--color-border); padding: 8px 10px; text-align: left; vertical-align: top; }
.legal-page .prose-ls th { background: var(--color-primary-soft); }
.legal-page .prose-ls p.muted { color: var(--color-muted); font-size: var(--fs-sm); }
.static-page p, .static-page li { color: var(--color-muted); }
.abuse-page { max-width: 640px; margin: 0 auto; padding: var(--space-5) 0; }
.abuse-hero { text-align: center; padding: 12px 12px 28px; }
.abuse-hero h1 { margin: 8px 0 6px; font-size: var(--fs-3xl); }
.abuse-hero .muted { font-size: var(--fs-base); line-height: 1.6; }
.abuse-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--color-danger-bg); color: var(--color-danger); font-size: var(--fs-2xl); margin-bottom: 6px; }
.abuse-form .field + .field { margin-top: 14px; }
.abuse-form button[type="submit"] { margin-top: var(--space-4); }
.abuse-msg { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.abuse-msg.is-ok { background: var(--color-success-bg); color: var(--color-success); }
.abuse-msg.is-err { background: var(--color-danger-bg); color: var(--color-danger); }
.status-note { margin: 0; }
.status-card h3 { margin: 0 0 12px; }
.notfound-code { font-size: var(--fs-4xl); }

/* ==========================================================================
   13. Public biolink çerçevesi (tema motoru editor.css/biolinkRender'da)
   ========================================================================== */
.bio-404 { max-width: 720px; margin: 0 auto; }
.bio-404-ico { font-size: 56px; line-height: 1; margin-bottom: 10px; color: var(--color-primary); }
.bio-404 h1 { margin: 6px 0 8px; font-size: var(--fs-2xl); }
.bio-404-search { display: flex; gap: 8px; max-width: 420px; margin: 0 auto var(--space-4); }
.bio-404-search .input-ls { flex: 1; }
.bio-404-suggest { max-width: 960px; margin: var(--space-6) auto 0; }
.bio-404-suggest h3 { text-align: center; margin: 0 0 12px; font-size: var(--fs-md); color: var(--color-muted); }
.pw-gate .pw-row { display: flex; gap: 10px; max-width: 360px; margin: 14px auto 0; }
.pw-gate .pw-row .input-ls { flex: 1; }
.pw-gate .field-error { margin-top: 10px; }
.pw-gate .field-error.show { display: block; }

/* SSR ön-boyama: navbar/footer'ı gizle, SPA devralınca kaldırılır */
body.biolink-ssr #navbar-host, body.biolink-ssr #footer-host, body.biolink-ssr #site-announcement, body.biolink-ssr .back-to-top { display: none !important; }
body.biolink-ssr { background: var(--neutral-900); }
body.biolink-ssr #app-content { padding: 0; min-height: 100vh; }
.pv-ssr { min-height: 100vh; padding: 60px 22px 40px; display: flex; align-items: flex-start; justify-content: center; }
.pv-ssr .pv-inner { width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.pv-ssr .pv-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; margin: 0 auto 10px; border: 3px solid rgba(255,255,255,.5); object-fit: cover; }
.pv-ssr .pv-name { font-size: 1.4rem; font-weight: 700; margin: 0; }
.pv-ssr .pv-bio { font-size: .92rem; opacity: .85; margin: 6px 0 18px; }
.pv-ssr .pv-socials { display: flex; gap: 16px; justify-content: center; margin-bottom: 22px; font-size: 1.15rem; }
.pv-ssr .pv-socials a { color: inherit; }
.pv-ssr .pv-links { display: flex; flex-direction: column; gap: 12px; }
.pv-ssr .pv-link { display: block; padding: 15px; font-weight: 600; font-size: .95rem; color: #1f2937; transition: transform var(--dur-fast); }
.pv-ssr .pv-link:hover { transform: translateY(-2px); }
.pv-ssr .pv-heading { margin: 22px 0 6px; font-size: 1.15rem; font-weight: 700; }
.pv-ssr .pv-text { margin: 0 0 6px; font-size: .95rem; opacity: .9; }
.pv-ssr .pv-divider { border: 0; height: 1px; background: currentColor; opacity: .18; margin: 12px 0; }

/* ==========================================================================
   14. Analitik widget'ları — kaynaklar, ısı haritası, donut, sütun
   ========================================================================== */
.src-list { display: flex; flex-direction: column; gap: 10px; }
.src-row { display: flex; align-items: center; gap: 12px; }
.src-ico { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--fs-base); }
.src-body { flex: 1; min-width: 0; }
.src-top { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: 4px; }
.src-pct { color: var(--color-muted); font-weight: 700; }
.src-bar { height: 6px; background: var(--color-surface-3); border-radius: var(--radius-pill); overflow: hidden; }
.src-bar span { display: block; height: 100%; background: var(--color-primary); border-radius: var(--radius-pill); transition: width .3s; }
.src-body small { display: block; color: var(--color-muted); font-size: var(--fs-xs); margin-top: 3px; }
.hm-hours { display: flex; gap: 2px; margin-bottom: 4px; padding-left: 34px; }
.hm-hours .hm-hour { font-size: 11px; color: var(--color-muted); text-align: left; }
.hm-grid { display: flex; flex-direction: column; gap: 3px; }
.hm-row { display: grid; grid-template-columns: 30px repeat(24, 1fr); gap: 2px; align-items: center; }
.hm-day { font-size: var(--fs-xs); color: var(--color-muted); font-weight: 700; }
.hm-cell { height: 16px; border-radius: 3px; background: rgba(var(--color-primary-rgb), 0); transition: transform .1s; cursor: default; }
.hm-cell:hover { transform: scale(1.4); z-index: 1; position: relative; box-shadow: 0 0 0 2px var(--color-card), var(--shadow-sm); }
.hm-legend { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-size: var(--fs-xs); color: var(--color-muted); }
.hm-swatch { width: 18px; height: 10px; border-radius: 3px; }
@media (max-width: 640px) { .hm-row { grid-template-columns: 26px repeat(24, 1fr); } .hm-cell { height: 12px; } }
.ls-donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.ls-donut-svg { position: relative; flex: 0 0 auto; }
.ls-donut-seg { transition: stroke-width .15s; }
.ls-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.ls-donut-center strong { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.02em; }
.ls-donut-center small { font-size: 11px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ls-donut-legend { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 8px; }
.ls-donut-leg { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); }
.ls-donut-leg.muted { color: var(--color-muted); }
.ls-donut-dot { width: 11px; height: 11px; border-radius: 4px; flex: 0 0 11px; }
.ls-donut-name { flex: 1; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-donut-val { font-weight: 700; }
.ls-donut-val small { color: var(--color-muted); font-weight: 600; margin-left: 2px; }
.ls-cols { display: flex; align-items: flex-end; gap: 3px; height: var(--col-h, 150px); }
.ls-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; min-width: 0; }
.ls-col-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.ls-col-bar { width: 100%; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--color-primary); transition: height .3s; }
.ls-col:hover .ls-col-bar { filter: brightness(1.12); }
.ls-col-lbl { font-size: 9px; color: var(--color-muted); font-weight: 600; }
@media (max-width: 560px) { .ls-col-lbl { display: none; } .ls-col:nth-child(4n+1) .ls-col-lbl { display: block; } }

/* ==========================================================================
   15. Mobil tabbar + safe-area → layout.css'e taşındı (tek kaynak: --tabbar-h)
   ========================================================================== */
.footer-ls { padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   16. Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .blog-toc { max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .blog-toc a { min-height: 40px; display: flex; align-items: center; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero p.lead { margin-inline: auto; }
  .feature-grid, .testi-grid, .pricing-grid, .tools-grid, .blog-grid, .blog-related-grid, .pkg-grid, .stats-grid { grid-template-columns: 1fr 1fr; }
  .blog-layout, .contact-grid, .tool-workspace, .profile-grid, .dash-two-col, .tools-hero, .blog-featured, .blog-detail-grid { grid-template-columns: 1fr; }
  .blog-featured .bf-thumb { aspect-ratio: 16/9; }
  .blog-toc-wrap { position: static; order: -1; }
  .blog-toc { margin-bottom: var(--space-4); }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .dash-two-col__side { position: static; }
  .tool-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .pf-nav-chip { min-height: var(--control-h); }
  .pf-nav-scroll { padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .pf-actions { justify-content: stretch; }
  .pf-actions .btn-ls { flex: 1; }
  .dash-shell, .profile-shell, .notif-shell, .page-shell { padding-top: var(--space-5); padding-bottom: var(--space-6); }
  .hero { padding: var(--space-6) 0 var(--space-7); }
  .phone-mock { width: 250px; }
  .phone-screen { min-height: 460px; }
  /* Auth: küçük bağlantılar da 44px satır */
  .auth-row a, .auth-back, .auth-form .link-primary { display: inline-flex; align-items: center; min-height: var(--control-h); }
  .auth-row { row-gap: 0; }
  /* Dashboard biolink kartı aksiyonları */
  .biolink-actions .btn-sm-icon, .biolink-actions .bl-edit { width: var(--control-h); height: var(--control-h); }
  .pagination-ls button { width: var(--control-h); height: var(--control-h); }
  .blog-share .bsh { width: var(--control-h); height: var(--control-h); }
  .br-input .rate-star { padding: 6px; }
  .blog-comment-form button { justify-self: stretch; }
  .map-embed { height: 240px; }
  .tool-actions .btn-ls { flex: 1 1 auto; }
  .contact-info-cards .ci i { width: 40px; height: 40px; font-size: var(--fs-lg); }
  .notif-item { padding: 12px; }
}
@media (max-width: 640px) {
  .blog-hero, .tools-hero, .tool-detail-hero { padding: var(--space-4); }
  .blog-featured .bf-body { padding: 20px; }
  .tool-detail-hero { flex-direction: column; text-align: center; }
  .tool-workspace .btn-ls { flex: 1; }
  .trending-card { grid-template-columns: auto 1fr; }
  .trending-card > .fa-arrow-right { display: none; }
  .nav-bell-drop { right: 8px; left: 8px; width: auto; }
}
@media (max-width: 575px) {
  .feature-grid, .testi-grid, .pricing-grid, .tools-grid, .pkg-grid, .blog-grid, .blog-related-grid, .tool-related-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .pricing-grid { gap: var(--space-5); } /* .price-badge -12px üstte; kartlar çakışmasın */
  .hero-cta .btn-ls { flex: 1; min-width: 140px; }
  .hero-trust { flex-direction: column; gap: var(--space-2); }
  .pf-inline-row .select-ls, .pf-inline-row .input-ls { width: 100%; flex: 1 1 100%; }
  .ref-link-row .btn-ls, .tfa-code-row .btn-ls { flex: 1; }
  .tfa-code-row .input-ls { max-width: none; }
  .hook-row .btn-ls { flex: 1 1 auto; }
  .blog-hero-search .input-ls, .tools-hero-search .input-ls { border-radius: var(--radius-md); }
  .trending-avatar { width: 52px; height: 52px; font-size: var(--fs-xl); }
  .section-head { margin-bottom: var(--space-6); }
  .compare-table th, .compare-table td { padding: 10px 12px; font-size: var(--fs-sm); }
  .price-amount { font-size: 2rem; }
  .dash-stats { gap: var(--space-3); }
  .dash-stat { padding: 14px 16px; }
  .dash-stat-val { font-size: var(--fs-xl); }
  .dash-hero { padding: var(--space-4); gap: var(--space-3); }
  .dash-hero-left { gap: var(--space-3); flex-basis: 100%; }
  .dash-hero-avatar { width: 52px; height: 52px; flex-basis: 52px; font-size: var(--fs-lg); }
  .dash-hero-actions { width: 100%; }
  .dash-hero-actions .btn-ls { flex: 1; }
  .dash-hero-actions .btn-primary-ls { flex: 2; }
  .dash-list-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  /* Kap sütuna döndüğünde flex-basis YÜKSEKLİĞE uygulanır — 220px'lik taban
     arama kutusunun altında ve üstünde kocaman boşluk bırakıyordu. */
  .dash-search { flex: 0 0 auto; max-width: none; width: 100%; }
  .dash-search .input-ls { height: 46px; font-size: 16px; }
  .dash-search-clear { width: 40px; height: 40px; }
  .cta-banner { padding: var(--space-6) var(--space-5); }
  .cta-banner h2 { font-size: var(--fs-2xl); }
  .profile-head { gap: var(--space-4); text-align: center; flex-direction: column; }
  .profile-head .btn-ls { width: 100%; }
  .biolink-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .biolink-mini { min-height: 130px; padding: 20px 12px 14px; }
  .auth-wrap { padding: var(--space-4) var(--gutter) var(--space-6); align-items: flex-start; }
  .auth-form { padding: var(--space-5) var(--space-4); }
  .social-row { flex-direction: column; }
  .qr-modal-bg { padding: 0; align-items: end; }
  .qr-modal { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: calc(100dvh - 12px); height: auto; }
  .compare-wrap { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .pal-out { grid-template-columns: repeat(3, 1fr); }
  .dash-stats--tight { grid-template-columns: 1fr 1fr; }
  .tfa-enroll { flex-direction: column; align-items: stretch; }
  .tfa-qr { margin: 0 auto; }
}
/* Public biolink: şifre kapısı + 404 arama formu dar ekranda alt alta */
@media (max-width: 420px) {
  .pw-gate .pw-row, .bio-404-search { flex-direction: column; }
  .pw-gate .pw-row .btn-ls, .bio-404-search .btn-ls { width: 100%; }
  .bio-404-ico { font-size: 44px; }
  .bio-404 .state-actions .btn-ls { width: 100%; }
}

/* v41 — yeni araç bileşenleri (tools-logic) */
.tool-err { color: var(--color-danger); font-size: var(--fs-sm); margin: 0 0 10px; }
.tool-err[hidden], .tool-err:empty { display: none; }
.tool-ta-sm { min-height: 90px !important; }
.tool-table th { text-align: left; white-space: nowrap; font-weight: 600; padding-right: 14px; }
.tool-table td { word-break: break-all; }
.table-wrap { overflow-x: auto; }
.bl-list { display: grid; gap: 10px; }
.bl-total { font-size: var(--fs-sm); margin-bottom: 4px; }
.bl-head { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.bl-row .pw-meter > div { background: var(--color-success, #22c55e); }
.bl-row.over .pw-meter > div { background: var(--color-danger, #dc2626); }
.bl-row.over .bl-head { color: var(--color-danger, #dc2626); }
.gr-preview { height: 140px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin: 0 0 var(--space-3); }
.ct-preview { padding: 18px 20px; border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-bottom: var(--space-3); }
.ct-preview p { margin: 0; }
.ct-big { font-size: 24px; font-weight: 700; }
.ct-small { font-size: 14px; }
.ct-results { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: var(--space-3); }
.ct-ratio { font-weight: 800; font-size: var(--fs-xl); margin-right: 6px; }
.chip.chip-ok { background: var(--color-success-bg, #dcfce7); color: var(--color-success, #15803d); border-color: transparent; }
.chip.chip-bad { background: var(--color-danger-bg, #fee2e2); color: var(--color-danger, #b91c1c); border-color: transparent; }
.fv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-top: var(--space-3); }
.fv-cell { display: grid; gap: 6px; justify-items: center; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2, #f8fafc); }
.fv-cell img { image-rendering: auto; }
.fv-cell code { font-size: 11px; }
.es-preview { padding: 14px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: #fff; color: #111827; overflow-x: auto; }
.es-preview:empty { display: none; }
.ib-preview { margin-bottom: 8px; }
.ib-preview img { max-height: 160px; max-width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }
.tool-detail-body input[type="date"], .tool-detail-body input[type="file"] { min-height: 44px; }

/* ---- Geliştirici dokümantasyonu (/developers) ---- */
.dv-hero { padding: var(--space-5) 0 var(--space-6); }
.dv-hero h1 { margin: 6px 0 10px; font-size: clamp(1.7rem, 3vw, 2.4rem); }
.dv-hero .page-sub { max-width: 760px; }
.dv-hero-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.dv-hero-cards > div { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); min-width: 0; }
.dv-hero-cards i { color: var(--color-primary); }
.dv-hero-cards b { font-size: var(--fs-sm); }
.dv-hero-cards code { font-size: var(--fs-xs); color: var(--color-muted); overflow-wrap: anywhere; }
.dv-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.dv-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); }
.dv-nav a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.dv-nav a small { color: var(--color-muted); font-size: var(--fs-xs); }
.dv-nav a:hover { background: var(--color-primary-soft); }
.dv-nav a.active { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.dv-main { min-width: 0; }
.dv-group { padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); scroll-margin-top: 90px; }
.dv-group:last-child { border-bottom: 0; }
.dv-group h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.35rem; margin: 0 0 var(--space-3); }
.dv-group h3 { font-size: 1.05rem; margin: var(--space-5) 0 var(--space-2); }
.dv-scope { font-size: var(--fs-xs); font-weight: 500; color: var(--color-muted); border: 1px dashed var(--color-border); border-radius: 999px; padding: 2px 10px; }
.dv-intro { color: var(--color-muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.dv-basics { margin: 0 0 var(--space-4); padding-left: 18px; line-height: 1.6; }
.dv-basics li { margin-bottom: 8px; }
.dv-events { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-3); font-size: var(--fs-xs); }
.dv-events span { display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-muted); }
.dv-events code { color: var(--color-primary); }
.dv-ep { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); margin-bottom: var(--space-3); scroll-margin-top: 90px; }
.dv-ep-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-method { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; color: #fff; background: #6366f1; }
.dv-method--get { background: #059669; }
.dv-path { font-size: var(--fs-sm); font-weight: 600; overflow-wrap: anywhere; }
.dv-auth { margin-left: auto; font-size: var(--fs-xs); display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--color-primary-soft); color: var(--color-primary); }
.dv-auth--pub { background: rgba(5,150,105,.12); color: #059669; }
.dv-auth--opt { background: rgba(217,119,6,.12); color: #b45309; }
.dv-tag { font-size: var(--fs-xs); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-muted); }
.dv-tag--rate i { margin-right: 4px; }
.dv-ep-sum { margin: 10px 0 0; line-height: 1.55; }
.dv-params { width: 100%; border-collapse: collapse; margin-top: var(--space-3); font-size: var(--fs-sm); display: block; overflow-x: auto; }
.dv-params th, .dv-params td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.dv-params th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); }
.dv-req { color: var(--color-danger); margin-left: 2px; }
.dv-code-tabs { margin-top: var(--space-3); border-radius: var(--radius-md); overflow: hidden; border: 1px solid #1f2937; background: #0f172a; }
.dv-code-nav { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: #111827; border-bottom: 1px solid #1f2937; }
.dv-code-nav button { font: inherit; font-size: var(--fs-xs); color: #9ca3af; background: none; border: 0; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.dv-code-nav button.active { color: #fff; background: #1f2937; }
.dv-code-nav .dv-copy { margin-left: auto; }
.dv-code { margin: 0; padding: 14px 16px; overflow-x: auto; color: #e5e7eb; background: #0f172a; font-size: .82rem; line-height: 1.55; }
.dv-code-tabs .dv-code { border: 0; border-radius: 0; }
.dv-group > .dv-code { border-radius: var(--radius-md); margin-bottom: var(--space-3); }
@media (max-width: 900px) {
  .dv-layout { grid-template-columns: 1fr; }
  .dv-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .dv-nav a { white-space: nowrap; border: 1px solid var(--color-border); padding: 6px 12px; border-radius: 999px; }
  .dv-nav a small { display: none; }
  .dv-hero-cards { grid-template-columns: 1fr; }
}
@media (max-width: 640px) { .dv-auth { margin-left: 0; } }

/* ---- Ana sayfa bülten ---- */
.newsletter-card { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: center; padding: var(--space-6); border-radius: var(--radius-xl, 24px); background: linear-gradient(135deg, var(--color-primary-soft), var(--color-surface)); border: 1px solid var(--color-border); }
.newsletter-txt h2 { margin: 6px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.newsletter-txt p { margin: 0; color: var(--color-muted); }
.newsletter-row { display: flex; gap: 8px; }
.newsletter-row .input-ls { flex: 1; min-width: 0; min-height: 48px; }
.newsletter-row .btn-ls { white-space: nowrap; }
.newsletter-note { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--color-muted); }
.newsletter-done { display: flex; align-items: center; gap: 8px; color: var(--color-success); font-weight: 600; margin: 0; }
@media (max-width: 767px) { .newsletter-card { grid-template-columns: 1fr; padding: var(--space-5); } .newsletter-row { flex-direction: column; } .newsletter-row .btn-ls { justify-content: center; } }

.contact-note { margin: var(--space-3) 0 0; font-size: var(--fs-sm); }
.footer-lang { margin-left: 10px; font: inherit; font-size: var(--fs-xs); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; }

/* Sayfalama — mobil öncelikli: uzak numaralar gizlenir, düğmeler büyür. */
.pagination-ls .pg-nav { min-width: 40px; }
.pagination-ls .pg-dots { display: inline-flex; align-items: center; padding: 0 2px; color: var(--color-text-muted); }
.pagination-ls .pg-info { display: none; align-items: center; padding: 0 6px; font-size: .82rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.pagination-ls button { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .pagination-ls { gap: 6px; }
  .pagination-ls button { min-width: 42px; height: 42px; padding: 0 8px; }
  .pagination-ls .is-far, .pagination-ls .pg-dots { display: none; }
  .pagination-ls .pg-info { display: inline-flex; }
}

/* ---- Sayfalama: "istediğin sayfaya git" ---- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pagination-ls:empty { display: none; margin: 0; }
.dash-search-info[hidden] { display: none !important; }
.pagination-ls .pg-jump { display: none; align-items: center; gap: 6px; margin-left: 4px; }
.pagination-ls .pg-jump.is-wide { display: inline-flex; }
.pagination-ls .pg-jump select,
.pagination-ls .pg-jump input {
  height: 38px; min-width: 76px; padding: 0 8px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
  font-weight: 600; font-size: var(--fs-sm);
}
.pagination-ls .pg-jump input { width: 68px; text-align: center; }
.pagination-ls .pg-jump-total { font-size: var(--fs-sm); color: var(--color-muted); }
.pagination-ls .pg-jump button {
  min-width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
@media (max-width: 640px) {
  .pagination-ls { gap: 6px; flex-wrap: wrap; justify-content: center; }
  .pagination-ls .pg-jump { display: inline-flex; order: 9; flex: 1 1 100%; justify-content: center; margin: 4px 0 0; }
  .pagination-ls .pg-jump select, .pagination-ls .pg-jump input { height: 44px; font-size: 16px; }
  .pagination-ls .pg-jump button { min-width: 44px; height: 44px; }
}

/* ---- Mobil ritim: site tarafı başlık ve bölüm boşlukları ---- */
@media (max-width: 767px) {
  .page-pad { padding-block: var(--space-5); }
  .section { padding: var(--space-6) 0; }
  .section--tight { padding: var(--space-5) 0; }
  .section-head { margin-bottom: var(--space-5); }
  .page-head { margin-bottom: var(--space-4); gap: var(--space-3); }
  .page-head .page-sub { margin-top: 2px; line-height: 1.45; }
  .page-head .page-actions { gap: var(--space-2); width: 100%; }
  .page-head .page-actions .btn-ls { min-height: 44px; justify-content: center; }
  .toolbar-ls { gap: var(--space-2); margin-bottom: var(--space-4); }
  .card-ls { padding: var(--space-4); }
  .dash-stats { gap: var(--space-2); }
  .dash-section-title { font-size: var(--fs-md); }
}
@media (max-width: 480px) {
  .container-app { --gutter: 14px; }
  .card-ls { padding: var(--space-3); }
}

/* ---- QR listesi: dashboard ile aynı mobil ritim ---- */
@media (max-width: 767px) {
  .qr-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .qr-card { padding: var(--space-3); }
  .qr-card-actions { gap: 8px; flex-wrap: wrap; }
  .qr-card-actions .icon-btn { min-width: 44px; min-height: 44px; }
  .qr-card-target, .qr-card-short { overflow-wrap: anywhere; }
  .qr-page .page-actions { width: 100%; gap: var(--space-2); }
  .qr-page .page-actions .btn-ls { flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .qr-page .plan-pill { flex: 1 1 100%; justify-content: center; }
}