/* Ana sayfaya özel yüzeyler; ortak araç ve makale şablonlarından bağımsız. */
.home-page .hero-copy .lede { max-width: 55ch; line-height: 1.75; }
.home-page .hero-note { padding-top: .75rem; margin-top: 1.5rem; }
.home-page .hero-actions .btn:not(.btn-primary):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  border-color: var(--brand);
  color: var(--brand-strong);
}
.home-page .hero-latest { margin-top: .5rem; }
.home-page .hero-latest h2 { font: 650 .78rem var(--font-mono); color: var(--text-muted); }
.home-page .hero-latest .hq-yeni a {
  height: 100%; min-height: 5rem; padding: 1rem 1.15rem;
  transition: background-color .35s ease, border-color .35s ease;
}
/* İlk kart vurgu renginde boyanıyordu (7 Ekim 2026'da kaldırıldı): üç kart
   eşit; sıra zaten en yeniyi söylüyor, üzerine gelince vurgu geliyor. */
.home-page .hero-latest .hq-yeni a:is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border-color: var(--brand);
}
.home-page .hero-latest .hq-yeni span { line-height: 1.4; }
.home-page .topic-index { margin-bottom: 2rem; }
.home-page .topic-index a {
  padding: 1.35rem; gap: .7rem;
  transition: border-color .2s ease, background-color .2s ease;
}
.home-page .topic-index strong { font-size: 1rem; line-height: 1.4; }
.home-page .topic-index span { max-width: 28ch; margin-top: auto; }

/* Etiket, arama ve filtreler tek bir araç bulma panelidir. */
.home-page .directory-panel {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 1rem; padding: 1.4rem; margin: 1.75rem 0 1.5rem;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 3%, transparent);
}
.home-page .directory-label {
  grid-column: 1/-1; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--text);
}
.home-page .directory-panel .tool-search {
  grid-column: 1/-1; width: 100%; margin: 0;
  min-height: 3.5rem; border-radius: 10px; background: var(--bg);
  box-shadow: none; transition: border-color .25s ease, background-color .25s ease;
}
.home-page .directory-panel .tool-search:focus-within {
  border-color: var(--brand); background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.home-page .tool-search-clear {
  min-width: 44px; min-height: 44px; flex-shrink: 0;
  padding-inline: .65rem; border-radius: 8px;
}
.home-page .tool-search-clear:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--brand) 9%, var(--surface));
  color: var(--brand-strong);
}
.home-page .directory-panel .chips {
  display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
  border: 0; padding: 0; margin: 0; background: transparent;
}
.home-page .directory-panel .chip {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .65rem .8rem; border-radius: 8px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); box-shadow: none; transform: none;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.home-page .directory-panel .chip::before { display: none; }
.home-page .directory-panel .chip[aria-pressed=true] {
  color: var(--brand-strong); border-color: color-mix(in srgb, var(--brand) 25%, var(--border));
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  box-shadow: none;
}
.home-page .directory-panel .chip:hover { color: var(--brand-strong); background: var(--surface-2); }
.home-page .chip-count {
  font: 500 .7rem var(--font-mono); font-variant-numeric: tabular-nums;
  opacity: .8; border-left: 1px solid var(--border); padding-left: .5rem;
}
.home-page .directory-panel .directory-status {
  align-self: center; margin: 0; padding: 0; border: 0;
  border-radius: 0; background: transparent; font-size: .78rem;
  color: var(--text-muted); white-space: nowrap;
}

/* Kartların iç ritmi: açıklama rahat okunur, eylem tutarlı yerde durur. */
.home-page .no-results {
  padding: 1.25rem; line-height: 1.7;
  border: 1px dashed var(--border); border-radius: 12px;
  background: var(--surface); text-align: center;
}
.home-page .project-grid {
  align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.home-page .project-card { background: var(--surface); }
.home-page .project-body { padding: 1.25rem; gap: .15rem; }
.home-page .project-body h3 { font-size: 1.12rem; line-height: 1.4; letter-spacing: -.02em; }
.home-page .project-body h3 a { transition: color .3s ease; }
.home-page .project-card:is(:hover,:focus-within) h3 a { color: var(--brand-strong); }
.home-page .project-body > p:not(.card-badges):not(.project-links):not(.card-updated) {
  font-size: .9rem; line-height: 1.7; margin-top: .75rem; margin-bottom: 1.25rem;
}
.home-page .project-body .project-links {
  padding-top: .85rem; margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.home-page .project-body .project-links a { min-height: 44px; }
.home-page .project-body .card-updated { font-size: .7rem; margin: .65rem 0 0; }
.home-page .ed-list { display: grid; gap: 1rem; }
.home-page .ed-item, .home-page .ed-item:last-child {
  padding: 1.35rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); align-items: center;
  transition: border-color .35s ease, background-color .35s ease;
}
.home-page .ed-item:is(:hover,:focus-within) {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
  background: color-mix(in srgb, var(--brand) 3%, var(--surface));
}
.home-page .ed-item .ed-dek { line-height: 1.7; }
@media (max-width: 900px) {
  .home-page .directory-panel { grid-template-columns: 1fr; }
  .home-page .directory-panel .directory-status { white-space: normal; }
}
@media (max-width: 600px) {
  .home-page .directory-panel { padding: 1rem; gap: .85rem; border-radius: 12px; }
  .home-page .directory-panel .chips { display: grid; grid-template-columns: 1fr 1fr; }
  .home-page .directory-panel .chip { justify-content: space-between; font-size: .75rem; padding: .6rem; }
  .home-page .directory-label { font-size: .95rem; }
  .home-page .hero-latest .hq-yeni a { min-height: 3.5rem; padding: .85rem 1rem; }
  .home-page .topic-index a { padding: 1rem; }
  .home-page .topic-index strong { font-size: .92rem; }
  .home-page .project-body { padding: 1.15rem; }
  .home-page .ed-item { padding: 1rem; }
}
@media (max-width: 380px) {
  .home-page .directory-panel .chips { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page :is(.hq-yeni a,.topic-index a,.tool-search,.chip,.project-body h3 a,.ed-item) { transition: none; }
}
/* Kategori filtrelerinin ortak 24px çizgi ikonları. Hareket yalnız etkileşimde. */
.home-page .chips .chip { display: inline-flex; align-items: center; gap: .46rem; }
.home-page .chips .chip svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; opacity: .78; transition: transform .22s ease, opacity .22s ease; }
.home-page .chips .chip:is(:hover, :focus-visible) svg { transform: translateY(-2px); opacity: 1; }
.home-page .chips .chip[aria-pressed="true"] svg { opacity: 1; }
.home-page [data-karo="nakit-koprusu"] .karo-ikon path:nth-child(2) { stroke-dasharray: 36; }
.home-page .project-card:hover [data-karo="nakit-koprusu"] .karo-ikon path:nth-child(2),
.home-page .project-card:focus-within [data-karo="nakit-koprusu"] .karo-ikon path:nth-child(2) { animation: nakitIkonCiz .55s ease-out; }
@keyframes nakitIkonCiz { from { stroke-dashoffset: 36; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .home-page .chips .chip svg { transition: none; }
  .home-page .chips .chip:is(:hover, :focus-visible) svg { transform: none; }
  .home-page .project-card:is(:hover, :focus-within) [data-karo="nakit-koprusu"] .karo-ikon path:nth-child(2) { animation: none; }
}

/* Ana sayfa menüsü sitenin en uzunu (8 bağlantı + "Canlı"). Grafikler
   sekmesi eklenince 1180 px üstünde tema düğmesi içerik sınırını ~17 px
   aşıyordu; öğe aralığı yalnız burada biraz daraltıldı. */
@media (min-width: 1181px) {
  .home-page .site-nav ul { gap: 1rem; }
}

/* =========================================================================
   Araç dizininde iki grafik kartı
   -------------------------------------------------------------------------
   Kardeş kartlarla aynı anatomi (bant, ikon kutusu, başlık, rozet, açıklama,
   bağlantı, alt satır). Tek fark: bandın dekoratif izi ve sinyal çubuğu
   yerine gerçek veri çizgisi. Renk yalnız --dv-* (tools/veri-renkleri.js);
   bandın saturate(.62) filtresi burada kapalı, yoksa veri rengi solar.

   Hareket (kart .reveal ile görünür olunca, bir kez):
     çizgi soldan çizilir, ucunda bir nokta koşar (offset-path), altı dolar,
     fiyat kartında ikiye katlanma noktaları sırayla belirir, değer ×1'den
     sayar (home.js). Sonra çizgi boyunca ara ara ince bir parıltı akar:
     sitenin bant "sinyali"nin veri hali. Hareket azaltmada hiçbiri yok ve
     JS'siz görünümde grafik baştan tam çizili.
   ========================================================================= */
:root .home-page .project-card--grafik .karo { filter: none; }
:root .home-page .project-card--grafik .karo::before,
:root .home-page .project-card--grafik .karo::after { display: none; }
.project-card--grafik .kart-iz { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.project-card--grafik .kart-taban { stroke: color-mix(in srgb, var(--text) 14%, transparent); stroke-width: 1; stroke-dasharray: 2 4; fill: none; }
.project-card--grafik .kart-cizgi, .project-card--grafik .kart-parilti { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.project-card--grafik .kart-cizgi { stroke-width: 2.4; }
.project-card--grafik .kart-ince { stroke-width: 1.6; opacity: .85; }
.project-card--grafik .kart-bir { stroke: var(--dv-1); }
.project-card--grafik .kart-iki { stroke: var(--dv-2); }
.project-card--grafik .kart-uc { stroke: var(--dv-3); }
.project-card--grafik .kart-g-bir { stop-color: var(--dv-1); }
.project-card--grafik .kart-g-uc { stop-color: var(--dv-3); }
.project-card--grafik .kart-g-ust { stop-opacity: .22; }
.project-card--grafik .kart-g-alt { stop-opacity: 0; }
/* Parıltı çizginin kendi tonunun açığı + aynı renkte hafif ışıma: çizgide
   boşluk gibi değil, üzerinden geçen bir ışık gibi okunur. */
.project-card--grafik .kart-parilti { stroke-width: 2.6; opacity: 0; stroke-dasharray: .08 1; }
.project-card--grafik .kart-parilti.kart-bir { stroke: color-mix(in srgb, var(--dv-1) 45%, #fff); filter: drop-shadow(0 0 3px var(--dv-1)); }
.project-card--grafik .kart-parilti.kart-uc { stroke: color-mix(in srgb, var(--dv-3) 45%, #fff); filter: drop-shadow(0 0 3px var(--dv-3)); }
.project-card--grafik .kart-kat { fill: var(--surface); stroke: var(--dv-1-ink); stroke-width: 1.6; }
.project-card--grafik .kart-son { fill: var(--text); }
.project-card--grafik .kart-hale { fill: none; stroke: var(--dv-2); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.project-card--grafik .kart-kosucu { display: none; }
.project-card--grafik .kart-iz-deger {
  position: absolute; right: 5cqw; top: 9%;
  font: 700 clamp(.8rem, 4.2cqw, 1rem)/1 var(--font-mono); letter-spacing: .02em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.project-card--grafik .card-badges span:first-child { color: var(--dv-1-ink); }

@keyframes kart-ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kart-bel { from { opacity: 0; } to { opacity: 1; } }
@keyframes kart-kos { from { offset-distance: 0%; opacity: 1; } 96% { opacity: 1; } to { offset-distance: 100%; opacity: 0; } }
@keyframes kart-nabiz { 0% { transform: scale(.8); opacity: .75; } 100% { transform: scale(3); opacity: 0; } }
@keyframes kart-parilti {
  0% { stroke-dashoffset: 1.07; opacity: 0; }
  6% { opacity: .9; }
  55% { stroke-dashoffset: 0; opacity: .9; }
  58%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
/* Veri noktası değerinden büyük görünmez: taşmasız, kapalı biçimli yavaşlama. */
@keyframes kart-kat { from { transform: scale(0); } to { transform: scale(1); } }

.project-card--grafik.is-visible .kart-cizgi { stroke-dasharray: 1; animation: kart-ciz 1.9s cubic-bezier(.65, 0, .35, 1) .2s both; }
.project-card--grafik.is-visible .kart-ince { animation-delay: .45s; }
.project-card--grafik.is-visible .kart-alan { animation: kart-bel 1s ease 1.3s both; }
.project-card--grafik.is-visible .kart-kat { transform-box: fill-box; transform-origin: center; animation: kart-kat .45s cubic-bezier(.22, 1, .36, 1) var(--gecikme, .5s) both; }
.project-card--grafik.is-visible .kart-son { animation: kart-bel .3s ease 2s both; }
.project-card--grafik.is-visible .kart-hale { animation: kart-nabiz 2.6s ease-out 2.2s infinite; }
.project-card--grafik.is-visible .kart-parilti { animation: kart-parilti 6.5s ease-in-out 3s infinite; }
.project-card--grafik.is-visible .kart-iz-deger { animation: kart-bel .4s ease .2s both; }
@supports (offset-path: path("M0 0")) {
  .project-card--grafik.is-visible .kart-kosucu {
    display: block; fill: var(--dv-2); stroke: var(--surface); stroke-width: 2;
    animation: kart-kos 1.9s cubic-bezier(.65, 0, .35, 1) .2s both;
  }
  .project-card--grafik .kart-kosucu.kart-kosucu--uc { fill: var(--dv-3); }
  .project-card--grafik .kart-kosucu.kart-kosucu--bir { fill: var(--dv-1); }
}
/* Üzerine gelince parıltı hemen yeniden akar. */
@media (hover: hover) and (pointer: fine) {
  .project-card--grafik.is-visible:is(:hover, :focus-within) .kart-parilti { animation: kart-parilti 1.8s ease-in-out 0s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .project-card--grafik.is-visible :is(.kart-cizgi, .kart-alan, .kart-kat, .kart-son, .kart-hale, .kart-parilti, .kart-iz-deger, .kart-kosucu) { animation: none !important; }
  .project-card--grafik .kart-kosucu { display: none !important; }
}

/* =========================================================================
   ARAÇ KARTI BANDI — ÖLÇÜM ŞERİDİ (30 Eylül 2026)
   -------------------------------------------------------------------------
   Neden: ana sayfada 66 kartın hepsi aynı soluk dalgayı taşıyordu ve sağda
   2 piksellik, hiçbir şeye bağlı olmayan bir çubuk duruyordu. Kasıtlıydı ama
   kasıtlı OKUNMUYORDU: kırık bir piksel ya da unutulmuş bir yer tutucu gibi.
   Grafik kartları ise aynı yerde gerçek veri ve bir okuma değeri (×37,7)
   gösteriyor. Bant artık o dili konuşuyor:

   · Sağ üst köşe OKUMA alanıdır. Grafik kartında değer, araç kartında
     kategori — filtre düğmeleriyle aynı adla. Çubuk kalktı.
   · Motif kategorinin kendi hesabını çizer, tek tip dalga değil:
       Maaş & Tazminat  on iki aylık bordro çubukları (net yıl içinde iner)
       Vergi & Belge    gelir vergisi dilim merdiveni (%15-20-27-35-40 oranlı)
       Kredi & Finans   aylık noktalarıyla bileşik büyüme eğrisi
   · Motif sağa yaslı, ikon karosuyla çakışmaz. Renk marka tokenından: beş
     palet ve koyu tema.
   · HAFİF HAREKET, her kartta: motifin üzerinden birkaç saniyede bir ince
     bir ışık geçer — grafik kartlarındaki "parıltı"nın aynısı, yani bant
     tek bir hareket dili konuşur. Kartlar aynı anda parlamasın diye faz
     kaydırılır. Üzerine gelince motif hafifçe yükselir, belirginleşir ve ışık
     hızlanır; ikonun eğilmesi live.css'te olduğu gibi kalır. Hareket
     azaltmada hiçbiri yok.
   Grafik kartları (data-cat yok) bu kurallara girmez.
   Motifler tools/… değil, bu blokta; üretimi scratchpad karo-motif.py.
   ========================================================================= */
:root .home-page .project-card[data-cat] .karo::before {
  inset: auto 5cqw 13% auto; inline-size: 60%; block-size: 58%;
  /* Renk ile opaklık ayrı: motif kendi tonunda durur, üzerinden markanın
     koyu tonunda dar bir şerit geçer. Açık zeminde beyaz ışık kayboluyordu;
     ışık burada rengi koyulaştıran bir akış olarak okunur. */
  opacity: 1;
  background-color: color-mix(in srgb, var(--brand) var(--motif-yuzde, 45%), transparent);
  background-image: linear-gradient(100deg, transparent 0 42%,
    color-mix(in srgb, var(--brand-strong) 88%, transparent) 50%, transparent 58% 100%);
  /* 200% genişlik, konum 130% → −30%: şerit görünür alanı döngünün
     hareketli kısmının %62'sinde, yaklaşık 2,8 saniyede süzülerek geçer. */
  background-size: 200% 100%; background-repeat: no-repeat; background-position: 130% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: right bottom; mask-position: right bottom;
  -webkit-mask-size: contain; mask-size: contain;
  transform: none; transform-origin: right bottom;
  animation: bantIsik 7.5s ease-in-out infinite;
  transition: background-color .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
@keyframes bantIsik { 0%, 40% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
/* Faz kayması: aynı satırdaki üç kart ve alt satırlar aynı anda parlamaz. */
:root .home-page .project-grid .project-card[data-cat]:nth-child(4n+2) .karo::before { animation-delay: -1.9s; }
:root .home-page .project-grid .project-card[data-cat]:nth-child(4n+3) .karo::before { animation-delay: -3.8s; }
:root .home-page .project-grid .project-card[data-cat]:nth-child(4n+4) .karo::before { animation-delay: -5.7s; }
:root .home-page .project-card[data-cat="maas"] .karo::before { --motif-yuzde: 26%; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cg fill='black'%3E%3Crect x='3' y='10' width='9' height='44' rx='1.5'/%3E%3Crect x='18' y='10' width='9' height='44' rx='1.5'/%3E%3Crect x='33' y='14' width='9' height='40' rx='1.5'/%3E%3Crect x='48' y='23' width='9' height='31' rx='1.5'/%3E%3Crect x='63' y='23' width='9' height='31' rx='1.5'/%3E%3Crect x='78' y='25' width='9' height='29' rx='1.5'/%3E%3Crect x='93' y='36' width='9' height='18' rx='1.5'/%3E%3Crect x='108' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='123' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='138' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='153' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='168' y='32' width='9' height='22' rx='1.5'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cg fill='black'%3E%3Crect x='3' y='10' width='9' height='44' rx='1.5'/%3E%3Crect x='18' y='10' width='9' height='44' rx='1.5'/%3E%3Crect x='33' y='14' width='9' height='40' rx='1.5'/%3E%3Crect x='48' y='23' width='9' height='31' rx='1.5'/%3E%3Crect x='63' y='23' width='9' height='31' rx='1.5'/%3E%3Crect x='78' y='25' width='9' height='29' rx='1.5'/%3E%3Crect x='93' y='36' width='9' height='18' rx='1.5'/%3E%3Crect x='108' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='123' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='138' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='153' y='32' width='9' height='22' rx='1.5'/%3E%3Crect x='168' y='32' width='9' height='22' rx='1.5'/%3E%3C/g%3E%3C/svg%3E"); }
:root .home-page .project-card[data-cat="vergi"] .karo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cpath d='M0 54 V36.8 H36 V31 H72 V23 H108 V13.8 H144 V8 H180' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M0 54.5H180' stroke='black' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cpath d='M0 54 V36.8 H36 V31 H72 V23 H108 V13.8 H144 V8 H180' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M0 54.5H180' stroke='black' stroke-opacity='.45' stroke-width='1'/%3E%3C/svg%3E"); }
:root .home-page .project-card[data-cat="finans"] .karo::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cpath d='M6 50 L20 47.8 L34 45.4 L48 42.8 L62 40 L76 36.9 L90 33.6 L104 29.9 L118 25.9 L132 21.6 L146 16.8 L160 11.6 L174 6' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='black'%3E%3Ccircle cx='6' cy='50' r='1.5'/%3E%3Ccircle cx='20' cy='47.8' r='1.5'/%3E%3Ccircle cx='34' cy='45.4' r='1.5'/%3E%3Ccircle cx='48' cy='42.8' r='1.5'/%3E%3Ccircle cx='62' cy='40' r='1.5'/%3E%3Ccircle cx='76' cy='36.9' r='1.5'/%3E%3Ccircle cx='90' cy='33.6' r='1.5'/%3E%3Ccircle cx='104' cy='29.9' r='1.5'/%3E%3Ccircle cx='118' cy='25.9' r='1.5'/%3E%3Ccircle cx='132' cy='21.6' r='1.5'/%3E%3Ccircle cx='146' cy='16.8' r='1.5'/%3E%3Ccircle cx='160' cy='11.6' r='1.5'/%3E%3Ccircle cx='174' cy='6' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 60'%3E%3Cpath d='M6 50 L20 47.8 L34 45.4 L48 42.8 L62 40 L76 36.9 L90 33.6 L104 29.9 L118 25.9 L132 21.6 L146 16.8 L160 11.6 L174 6' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cg fill='black'%3E%3Ccircle cx='6' cy='50' r='1.5'/%3E%3Ccircle cx='20' cy='47.8' r='1.5'/%3E%3Ccircle cx='34' cy='45.4' r='1.5'/%3E%3Ccircle cx='48' cy='42.8' r='1.5'/%3E%3Ccircle cx='62' cy='40' r='1.5'/%3E%3Ccircle cx='76' cy='36.9' r='1.5'/%3E%3Ccircle cx='90' cy='33.6' r='1.5'/%3E%3Ccircle cx='104' cy='29.9' r='1.5'/%3E%3Ccircle cx='118' cy='25.9' r='1.5'/%3E%3Ccircle cx='132' cy='21.6' r='1.5'/%3E%3Ccircle cx='146' cy='16.8' r='1.5'/%3E%3Ccircle cx='160' cy='11.6' r='1.5'/%3E%3Ccircle cx='174' cy='6' r='2.4'/%3E%3C/g%3E%3C/svg%3E"); }

/* Okuma alanı: grafik kartındaki değerle aynı köşe, aynı yazı ailesi. */
:root .home-page .project-card[data-cat] .karo::after,
:root .home-page .project-card[data-cat]:is(:hover, :focus-within) .karo::after {
  position: absolute; inset: 9% 5cqw auto auto; transform: none;
  inline-size: auto; block-size: auto; border-radius: 0; background: none; opacity: 1;
  font: 600 clamp(.56rem, 3.1cqw, .66rem)/1 var(--font-mono); letter-spacing: .12em;
  color: color-mix(in srgb, var(--brand-strong) 78%, var(--text-muted));
  white-space: nowrap; transition: none;
}
:root .home-page .project-card[data-cat="maas"] .karo::after { content: "MAAŞ & TAZMİNAT"; }
:root .home-page .project-card[data-cat="vergi"] .karo::after { content: "VERGİ & BELGE"; }
:root .home-page .project-card[data-cat="finans"] .karo::after { content: "KREDİ & FİNANS"; }

@media screen and (hover: hover) and (pointer: fine) {
  :root .home-page .project-card[data-cat]:is(:hover, :focus-within) .karo::before {
    background-color: color-mix(in srgb, var(--brand) calc(var(--motif-yuzde, 45%) + 25%), transparent);
    transform: translateY(-2px) scale(1.03);
    animation-duration: 2.8s;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root .home-page .project-card[data-cat] .karo::before { animation: none; transition: none; }
  :root .home-page .project-card[data-cat]:is(:hover, :focus-within) .karo::before { transform: none; }
}