/* Piksir Blog (D125, sade görünüm — sahip 2026-10-22: "karmaşık ve göz yorucu, sade ve okunabilir olsun").
   İlke: tek vurgu rengi, ince çizgiler, bol boşluk, okuma sütunu ≈ 68 karakter. Renk yalnız konu etiketinin yazısında.
   Ada Cam başlık yazı tipini (Nunito) kullanır; Ada dışı temalarda v2 token'larıyla aynı düzen çalışır. Satır içi stil yok. */

.bl-sayfa {
  --bl-metin: var(--ac-metin, #1B1846);
  --bl-metin-2: var(--ac-metin-2, #4A4778);
  --bl-metin-3: var(--ac-metin-3, #6E6A99);
  --bl-cizgi: rgba(27, 24, 70, .1);
  --bl-zemin: #FFFFFF;
  --bl-vurgu: #4B2FD1;
  --bl-baslik: var(--ac-font-baslik, var(--v2-font-display));
  --bl-r: 16px;
}
.bl-sayfa [hidden] { display: none !important; }
/* Konu etiketinin yazı rengi (≥ 4.5:1 beyaz zeminde) */
.bl-sayfa [data-renk] { --ri: #4B2FD1; --rz: #F1EEFF; }
.bl-sayfa [data-renk="gunes"] { --ri: #8A4B00; --rz: #FFF4DE; }
.bl-sayfa [data-renk="gok"] { --ri: #1D4FC4; --rz: #EAF2FF; }
.bl-sayfa [data-renk="nane"] { --ri: #0B6E66; --rz: #E6F7F4; }
.bl-sayfa [data-renk="mor"] { --ri: #5B2BB8; --rz: #F3ECFF; }
.bl-sayfa [data-renk="yaprak"] { --ri: #19704A; --rz: #EAF7EF; }

/* Okuma zemini düz ve açık: site geneli manzara arka planı blogda içeriğin arkasında kalır (okurken göz yormasın) */
.bl-sade { position: relative; z-index: 1; padding-bottom: clamp(48px, 7vw, 96px); background: #FBFAFE; border-top: 1px solid var(--bl-cizgi); }
.bl-sade :focus-visible { outline: 3px solid #6A45F5; outline-offset: 3px; border-radius: 6px; }

/* ============================================================ Liste başlığı */
.bl-bas { display: grid; gap: 14px; padding-block: clamp(32px, 5vw, 56px) 8px; }
.bl-bas > :is(h1, p, form) { max-width: 640px; }
.bl-bas h1 { margin: 0; font-family: var(--bl-baslik); font-weight: 900; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem); line-height: 1.05; letter-spacing: -.02em; color: var(--bl-metin); }
.bl-bas__lead { margin: 0; font-size: 1.15rem; line-height: 1.55; color: var(--bl-metin-2); }
.bl-ara { position: relative; max-width: 480px; margin-top: 6px; }
.bl-ara__ikon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--bl-metin-3); pointer-events: none; }
.bl-ara__girdi { width: 100%; min-height: 48px; padding-left: 44px; font-size: 1rem; background: var(--bl-zemin); }

.bl-konular { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; border-bottom: 1px solid var(--bl-cizgi); }
.bl-konular:empty { display: none; }
.bl-konu {
  min-height: 44px; padding: 0; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  font: 700 1rem/1 var(--v2-font-body); color: var(--bl-metin-2);
}
.bl-konu:hover { color: var(--bl-metin); }
.bl-konu[aria-pressed="true"] { color: var(--bl-metin); border-bottom-color: var(--bl-vurgu); }

/* ============================================================ Ortak parçalar */
.bl-ust { margin: 0; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ri, var(--bl-vurgu)); }
.bl-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: .92rem; color: var(--bl-metin-3); }

.bl-kapak { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 12px; background: var(--rz, #F1EEFF); }
.bl-kapak img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-kapak--foto img { object-fit: cover; }
.bl-kapak--cizim img { object-fit: contain; padding: 8% 12% 4%; }
.bl-kapak--bos { display: grid; place-items: center; }
.bl-kapak--bos .v2-icon { width: 30%; max-width: 72px; height: auto; aspect-ratio: 1; color: var(--ri); opacity: .55; --v2-icon-fill: transparent; }

/* ============================================================ Son yazı (geniş) */
.bl-one { padding-top: clamp(24px, 3vw, 36px); }
.bl-one__kart { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3.5vw, 48px); align-items: center; color: inherit; text-decoration: none; }
.bl-one__metin { display: grid; gap: 12px; }
.bl-one__baslik { margin: 0; font-family: var(--bl-baslik); font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.15; letter-spacing: -.015em; color: var(--bl-metin); }
.bl-one__ozet { margin: 0; font-size: 1.1rem; line-height: 1.6; color: var(--bl-metin-2); }
.bl-one__kart:hover .bl-one__baslik { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ============================================================ Yazı ızgarası */
.bl-akis { display: grid; gap: 20px; padding-top: clamp(36px, 5vw, 56px); }
.bl-akis__ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding-bottom: 12px; border-bottom: 1px solid var(--bl-cizgi); }
.bl-akis__baslik { margin: 0; font-family: var(--bl-baslik); font-weight: 900; font-size: 1.35rem; color: var(--bl-metin); }
.bl-sonuc { margin: 0; color: var(--bl-metin-3); }
.bl-temizle { min-height: 40px; margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; font: 700 .95rem var(--v2-font-body); color: var(--bl-vurgu); text-decoration: underline; }
.bl-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 32px); }
.bl-kart__bag { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.bl-kart__govde { display: grid; gap: 8px; }
.bl-kart__baslik { margin: 0; font-family: var(--bl-baslik); font-weight: 800; font-size: 1.2rem; line-height: 1.3; color: var(--bl-metin); }
.bl-kart__ozet { margin: 0; line-height: 1.55; color: var(--bl-metin-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-kart__bag:hover .bl-kart__baslik { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bl-daha { display: flex; justify-content: center; margin-top: 12px; }
.bl-daha__dugme { min-height: 48px; padding-inline: 24px; }
.bl-bos { grid-column: 1 / -1; margin: 0; padding: 24px 0; color: var(--bl-metin-2); }
.bl-iskelet { display: block; min-height: 300px; border-radius: 12px; background: rgba(27, 24, 70, .05); }

/* ============================================================ Yazı sayfası: tek okuma sütunu */
.bl-sutun { width: min(100% - 32px, 700px); margin-inline: auto; }
.bl-genis { width: min(100% - 32px, 1040px); margin-inline: auto; }
.bl-onizleme { margin-top: 20px; padding: 10px 14px; border-radius: 10px; font-weight: 700; color: #7A4300; background: #FFF4DE; }
.bl-yukleniyor { display: grid; gap: 14px; padding-block: 56px; }
.bl-iskelet--baslik { min-height: 56px; }
.bl-iskelet--satir { min-height: 24px; width: 70%; }
.bl-yok { display: grid; gap: 12px; justify-items: start; padding-block: 64px; }
.bl-yok h1 { margin: 0; font-family: var(--bl-baslik); font-weight: 900; font-size: 2rem; color: var(--bl-metin); }
.bl-yok p { margin: 0; color: var(--bl-metin-2); }
.bl-geri { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--bl-metin-2); text-decoration: none; }
.bl-geri .v2-icon { width: 18px; height: 18px; }
.bl-geri:hover { color: var(--bl-metin); text-decoration: underline; }

.bl-yazi__bas { display: grid; gap: 12px; padding-block: clamp(20px, 4vw, 40px) 28px; }
.bl-yazi__bas .bl-geri { justify-self: start; margin-bottom: 8px; }
.bl-yazi__baslik { margin: 0; font-family: var(--bl-baslik); font-weight: 900; font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; color: var(--bl-metin); }
.bl-yazi__baslik:focus { outline: none; }
.bl-yazi__ozet { margin: 0; font-size: 1.2rem; line-height: 1.55; color: var(--bl-metin-2); }
.bl-yazi__bas .bl-alt { padding-top: 4px; }
.bl-yazi__kapak { margin-block: 0 36px; }
.bl-yazi__kapak .bl-kapak { aspect-ratio: 2 / 1; max-height: 440px; width: 100%; border-radius: var(--bl-r); }
.bl-yazi__kapak .bl-kapak--cizim img { padding: 6% 32% 3%; }

/* Okuma metni: 18 px, 1.75 satır aralığı, sakin vurgular */
.bl-metin { font-size: 1.125rem; line-height: 1.75; color: var(--bl-metin); overflow-wrap: break-word; }
.bl-metin > * { margin: 0 0 1.2em; }
.bl-metin > :last-child { margin-bottom: 0; }
.bl-metin h2 { margin: 2em 0 .6em; font-family: var(--bl-baslik); font-weight: 900; font-size: 1.55rem; line-height: 1.25; letter-spacing: -.01em; scroll-margin-top: 96px; }
.bl-metin h3 { margin: 1.6em 0 .5em; font-family: var(--bl-baslik); font-weight: 800; font-size: 1.25rem; line-height: 1.3; scroll-margin-top: 96px; }
.bl-metin > :is(h2, h3):first-child { margin-top: 0; }
.bl-metin a { color: var(--bl-vurgu); text-decoration: underline; text-underline-offset: 3px; }
.bl-metin strong { font-weight: 800; }
.bl-metin :is(ul, ol) { padding-left: 1.4em; }
.bl-metin li { margin: .4em 0; }
.bl-metin code { padding: .1em .35em; border-radius: 5px; font-family: var(--v2-font-mono); font-size: .9em; background: rgba(27, 24, 70, .06); }
.bl-metin pre { overflow-x: auto; padding: 16px 18px; border-radius: 10px; font-size: .92rem; line-height: 1.6; background: rgba(27, 24, 70, .05); }
.bl-metin pre code { padding: 0; background: none; }
.bl-metin hr { height: 1px; margin: 2.4em 0; border: 0; background: var(--bl-cizgi); }
.bl-metin blockquote { padding-left: 1em; border-left: 3px solid var(--bl-cizgi); color: var(--bl-metin-2); }
.bl-metin blockquote p { margin: 0 0 .6em; }
.bl-metin blockquote p:last-child { margin: 0; }
.bl-metin .bl-vurgu { margin: 1.8em 0; padding: 0 0 0 1em; border-left: 3px solid var(--bl-vurgu); font-family: var(--bl-baslik); font-weight: 800; font-size: 1.3rem; line-height: 1.45; color: var(--bl-metin); }
.bl-metin .bl-kutu { padding: 14px 18px; border-radius: 10px; background: rgba(27, 24, 70, .045); }
.bl-metin .bl-kutu p { margin: 0 0 .4em; }
.bl-metin .bl-kutu p:last-child { margin: 0; }
.bl-metin .bl-kutu__ad { font-size: .85rem; font-weight: 800; color: var(--bl-metin-2); }
.bl-metin .bl-figur { margin: 2em 0; }
.bl-metin .bl-figur img { display: block; width: 100%; height: auto; border-radius: 10px; }
.bl-metin .bl-figur figcaption { margin-top: .6em; font-size: .9rem; color: var(--bl-metin-3); }

.bl-yz, .bl-kaynak { margin: 32px 0 0; font-size: .98rem; color: var(--bl-metin-2); }
.bl-yz + .bl-kaynak { margin-top: 10px; }
.bl-kaynak a { font-weight: 700; color: var(--bl-vurgu); }
.bl-paylas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bl-cizgi); }
.bl-paylas__ad { margin-right: 6px; font-weight: 800; color: var(--bl-metin); }
.bl-pay {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--bl-cizgi); border-radius: 999px; cursor: pointer;
  font: 700 .92rem/1 var(--v2-font-body); color: var(--bl-metin); text-decoration: none; background: var(--bl-zemin);
}
.bl-pay:hover { border-color: rgba(27, 24, 70, .3); }
.bl-diger { display: grid; gap: 20px; margin-top: clamp(56px, 7vw, 88px); padding-top: 28px; border-top: 1px solid var(--bl-cizgi); }
.bl-bildirim { position: fixed; left: 50%; bottom: 96px; z-index: var(--v2-z-overlay, 60); margin: 0; padding: 10px 18px; border-radius: 999px; font-weight: 700; color: #fff; background: #1B1846; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.bl-bildirim.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================ Duyarlı */
@media (max-width: 760px) {
  .bl-one__kart { grid-template-columns: minmax(0, 1fr); }
  .bl-yazi__kapak .bl-kapak { aspect-ratio: 16 / 10; }
  .bl-yazi__kapak .bl-kapak--cizim img { padding: 6% 20% 3%; }
  .bl-metin { font-size: 1.07rem; }
}
@media (prefers-reduced-motion: reduce) { .bl-bildirim { transition: none; } }
@media print {
  .v2-topbar, .v2-bottomnav, .v2-sitefoot, .bl-paylas, .bl-diger, .bl-geri, .bl-bildirim { display: none !important; }
  .bl-sutun, .bl-genis { width: auto; }
  .bl-metin { font-size: 11.5pt; line-height: 1.55; color: #000; }
}