/* Fiyatsız reklam kartı ("Reklam da mı düşünüyorsunuz?" → reklam.html; Yusuf 14.10.2026: kartta fiyat yazmaz, fiyat reklam sayfasında).
   İşaretleme tools/yama/reklam-sayfa.html → kart / kart-cizim, üretim tools/yama/reklam_sayfa.py → reklam_karti(); Web Sitelerimiz'in sihirbaz
   girişinde (site türü kartlarının altında, satış ekibi kartının yanında) ve Yazılımlar'da (teklif bölümünün ardında) durur. Kabuk sihirbazın
   kart ailesiyle aynıdır (assets/sihirbaz.css → .sb-kart: ince renkli kenar, 16 px köşe, soldan gelen renk ışığı); kendi dosyasıdır, sihirbaz
   stili yüklenmeyen sayfada da aynı görünür. Bütün kart tıklanır (eylemin ::after'ı). Çizim: arama sonucu ve Instagram gönderisi; iki hat tek
   noktada buluşur (menü düğmesindeki çizgi → nokta). Ekrana girince bir kez oynar, fareyle üzerine gelince yeniden (assets/reklam-kart.js);
   varsayılan kurallar son hâldir (betiksiz ve hareketi azaltta). */

.rkk { --rkk-renk: #19B4EE; --rkk-pembe: #FF5FA2; --rkk-cizgi: #1D2730; --rkk-kart: #0A1116;
  position: relative; display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr) auto; align-items: center; column-gap: clamp(18px, 2.6vw, 40px);
  min-width: 0; padding: 10px clamp(14px, 1.6vw, 22px) 10px 10px; border: 1px solid color-mix(in oklch, var(--rkk-renk) 30%, var(--rkk-cizgi)); border-radius: 16px;
  background: radial-gradient(70% 140% at 0% 50%, color-mix(in oklch, var(--rkk-renk) 12%, transparent), transparent 65%),
    radial-gradient(40% 120% at 100% 50%, color-mix(in oklch, var(--rkk-pembe) 6%, transparent), transparent 70%), var(--rkk-kart);
  box-shadow: 0 30px 60px -52px color-mix(in oklch, var(--rkk-renk) 70%, transparent);
  transition: border-color .3s, transform .45s var(--egri), box-shadow .45s var(--egri); }
.sb .rkk { margin-top: 12px; }
/* sihirbaz girişinde hemen altındaki satış ekibi kartıyla (sihirbaz.css → .sb-kart-arama, çizim sütunu 318 px) aynı hizada: iki geniş kart bir aile */
@media (min-width: 600px) { .sb .rkk { grid-template-columns: 318px minmax(0, 1fr) auto; } }
.yz-reklam { margin: clamp(40px, 5vw, 72px) 0 0; }
.rkk-onz { min-width: 0; border-radius: 9px; overflow: hidden; transition: box-shadow .35s var(--egri); }
.rkk-metin { min-width: 0; }
.katalog-sayfa .rkk-ad, .rkk-ad { margin: 0; font: 600 clamp(20px, 1.6vw, 25px)/1.15 'Archivo', sans-serif; letter-spacing: -.03em; color: #F5F8FA; text-wrap: balance; }
.rkk-cumle { margin: 8px 0 0; max-width: 56ch; color: #B7C3CC; font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.rkk-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 210px; padding: 13px 16px; border-radius: 10px;
  border: 1px solid color-mix(in oklch, var(--rkk-renk) 45%, #2E3B46); background: color-mix(in oklch, var(--rkk-renk) 14%, #0D151B); color: #F5F8FA;
  font: 600 13.5px/1.2 'Archivo', sans-serif; text-decoration: none; transition: background-color .25s, border-color .25s; }
.rkk-cta .ok { width: 16px; height: 10px; flex: none; color: color-mix(in oklch, var(--rkk-renk) 70%, #fff); transition: transform .25s var(--egri); }
.rkk-cta::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.rkk-cta:focus-visible { outline: 2px solid var(--turan); outline-offset: 3px; }
.rkk:has(.rkk-cta:focus-visible) { border-color: var(--rkk-renk); }
@media (hover: hover) and (pointer: fine) {
  .rkk:hover { border-color: color-mix(in oklch, var(--rkk-renk) 62%, var(--rkk-cizgi)); transform: translateY(-3px); box-shadow: 0 30px 60px -32px color-mix(in oklch, var(--rkk-renk) 75%, transparent); }
  .rkk:hover .rkk-onz { box-shadow: 0 0 0 1px color-mix(in oklch, var(--rkk-renk) 35%, transparent); }
  .rkk:hover .rkk-cta { background: color-mix(in oklch, var(--rkk-renk) 26%, #0D151B); border-color: color-mix(in oklch, var(--rkk-renk) 75%, #2E3B46); }
  .rkk:hover .rkk-cta .ok { transform: translateX(3px); }
}

/* çizim (süs; aria-hidden). Çizgi dili kartların minyatürleriyle aynı (assets/web-paketler.css → .onz) */
.rkk-cizim { display: block; width: 100%; height: auto; overflow: visible; }
.rkk-cizim * { transform-box: view-box; }
.rkk-zemin { fill: #0C1318; stroke: #283540; stroke-width: 1; }
.rkk-pencere { fill: #0F181F; stroke: #2E3D49; stroke-width: 1; } .rkk-ayrac { fill: none; stroke: #283540; stroke-width: 1; }
.rkk-tuy { fill: #34424D; }
.rkk-alan { fill: #16212A; stroke: #2E3D49; stroke-width: .8; }
.rkk-ince { fill: none; stroke: #6A7C8B; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.rkk-sorgu { fill: #D9E4EC; }
.rkk-ilan { fill: color-mix(in srgb, var(--rkk-renk) 11%, transparent); stroke: var(--rkk-renk); stroke-width: 1; }
.rkk-a { fill: #DCE6EE; } .rkk-v { fill: color-mix(in srgb, var(--rkk-renk) 75%, #fff); } .rkk-k { fill: #4E5E6B; } .rkk-b { fill: #5D6F7D; }
.rkk-tel { fill: #0B1217; stroke: #2E3B46; stroke-width: 1; }
.rkk-gorsel { fill: #111B22; stroke: #22303A; stroke-width: .8; }
.rkk-kalp, .rkk-dugme { fill: var(--rkk-pembe); }
.rkk-hat { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.rkk-hat-g { stroke: var(--rkk-renk); } .rkk-hat-m { stroke: var(--rkk-pembe); }
.rkk-nokta { fill: var(--turan); }
.rkk-halka { fill: none; stroke: var(--turan); stroke-width: 1.2; opacity: .4; }
.rkk-sorgu, .rkk-kalp, .rkk-nokta, .rkk-halka { transform-box: fill-box; transform-origin: center; }
.rkk-sorgu { transform-origin: left center; }

/* bir kez oynayan hareket: ilk karesinde duraklatılmış bekler, .oyna yürütür (fill: both, son kare = varsayılan hâl); .bitti animasyonsuz son hâl */
@media (prefers-reduced-motion: no-preference) {
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-sorgu { animation: rkk-yaz .8s steps(10, end) .2s both paused; }
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-ilan { animation: rkk-isik .45s ease-out 1s both paused; }
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-kalp { animation: rkk-kalp .45s ease-out 1.3s both paused; }
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-hat-g { animation: rkk-ciz .6s ease-in-out 1.7s both paused; }
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-hat-m { animation: rkk-ciz .45s ease-in-out 1.95s both paused; }
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-nokta { animation: rkk-nokta .35s ease-out 2.35s both paused; }
  html:not(.js-yok) .rkk [data-cizim]:not(.bitti) .rkk-halka { animation: rkk-halka .9s ease-out 2.55s both paused; }
  html:not(.js-yok) .rkk [data-cizim].oyna:not(.bitti) * { animation-play-state: running !important; }
  .rkk [data-cizim].sifir * { animation: none !important; }
}
@keyframes rkk-yaz { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rkk-isik { from { fill: color-mix(in srgb, var(--rkk-renk) 2%, transparent); stroke: color-mix(in srgb, var(--rkk-renk) 30%, transparent); } }
@keyframes rkk-kalp { 0% { transform: scale(1); fill: #34424D; } 45% { transform: scale(1.45); fill: var(--rkk-pembe); } 100% { transform: scale(1); fill: var(--rkk-pembe); } }
@keyframes rkk-ciz { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rkk-nokta { 0% { transform: scale(0); } 70% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes rkk-halka { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: .9; transform: scale(1.25); } 100% { opacity: .4; transform: scale(1); } }

@media (max-width: 999px) {
  .rkk { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); row-gap: 14px; }
  .rkk-cta { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 999px) { .sb .rkk { grid-template-columns: 318px minmax(0, 1fr); } }
@media (max-width: 599px) {
  .rkk { grid-template-columns: minmax(112px, 40%) minmax(0, 1fr); grid-template-areas: "onz metin" "cta cta"; column-gap: 14px; row-gap: 12px; padding: 10px; }
  .rkk-onz { grid-area: onz; align-self: start; } .rkk-metin { grid-area: metin; align-self: start; }
  .katalog-sayfa .rkk-ad, .rkk-ad { font-size: 17px; } .rkk-cumle { font-size: 13px; }
  .rkk-cta { grid-area: cta; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .rkk { transition: none; } }
@media (forced-colors: active) { .rkk { border-color: CanvasText; } }