/* Vocalun blog: liste ve yazı sayfaları (ortak.css tokenlarıyla). */
body{background:radial-gradient(70rem 32rem at 85% -8rem,rgba(96,165,250,.22),transparent 70%),radial-gradient(50rem 28rem at -10% 4rem,rgba(55,48,163,.10),transparent 70%),var(--kagit)}
.kap{max-width:72rem}
.kap.dar{max-width:44rem}
.ust-sag .ust-bag{color:var(--orta);text-decoration:none;font-weight:540;padding:.3rem .2rem}
.ust-sag .ust-bag:hover{color:var(--mavi)}
.dugme.kucuk{padding:.5rem 1rem;font-size:.86rem;box-shadow:0 10px 22px -12px rgba(29,78,216,.85)}
.dugme svg{flex:none;transition:transform .2s}
.dugme:hover svg{transform:translateX(2px)}
@media (max-width:40rem){.ust-sag .ust-bag:nth-child(2),.ust-sag .dugme.sade{display:none}.ust-sag{gap:.6rem}}
main{padding-bottom:clamp(3rem,8vw,6rem)}

/* Liste başı */
.blog-bas{padding-block:clamp(1.6rem,5vw,3rem) clamp(1.6rem,4vw,2.6rem)}
.ust-yazi{display:inline-flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--mavi)}
.ust-yazi::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--mavi-parlak),var(--mavi))}
.blog-bas h1{margin-top:.7rem;font-size:clamp(2.1rem,5.4vw,3.6rem);line-height:1.05;letter-spacing:-.045em;font-weight:680;max-width:50rem;text-wrap:balance}
.blog-bas h1 span{background:linear-gradient(100deg,var(--mavi) 10%,#4f46e5 55%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-giris{margin-top:1rem;max-width:38rem;font-size:clamp(1rem,1.6vw,1.12rem);color:var(--orta)}

/* Kartlar */
.kartlar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,19.5rem),1fr));gap:clamp(1rem,2.4vw,1.6rem);margin-top:clamp(1rem,2.4vw,1.6rem)}
.kart-yazi{position:relative;border-radius:1.4rem;background:var(--kagit-2);box-shadow:var(--golge);overflow:hidden;transition:transform .35s cubic-bezier(.2,.9,.25,1),box-shadow .35s}
.kart-yazi a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.kart-yazi:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(29,78,216,.18),0 22px 44px -22px rgba(15,23,42,.45),0 40px 80px -40px rgba(29,78,216,.55)}
.kart-gorsel{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--murekkep)}
.kart-gorsel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.9,.25,1),filter .5s}
.kart-gorsel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,16,32,.35));pointer-events:none}
.kart-yazi:hover .kart-gorsel img{transform:scale(1.06);filter:saturate(1.12)}
.kart-ic{display:flex;flex-direction:column;gap:.55rem;padding:1.15rem 1.3rem 1.25rem;flex:1}
.etiket{display:inline-flex;align-self:flex-start;align-items:center;gap:.35rem;font-size:.72rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--mavi);background:var(--mavi-sis);border-radius:999px;padding:.22rem .65rem}
.etiket::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:linear-gradient(135deg,var(--mavi-parlak),#7c3aed)}
.kart-ic h3{font-size:1.14rem;line-height:1.3;letter-spacing:-.02em;font-weight:650;color:var(--koyu)}
.kart-ic p{font-size:.9rem;color:var(--soluk);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kart-alt{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--soluk)}
.kart-alt b{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;color:var(--mavi);font-weight:620}
.kart-alt b svg{transition:transform .25s}
.kart-yazi:hover .kart-alt b svg{transform:translateX(3px)}

/* Öne çıkan */
.kart-yazi.one a{display:grid;grid-template-columns:1.25fr 1fr}
.kart-yazi.one .kart-gorsel{aspect-ratio:auto;min-height:100%}
.kart-yazi.one .kart-ic{justify-content:center;padding:clamp(1.4rem,3.5vw,2.6rem);gap:.8rem}
.kart-yazi.one h3{font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.035em;line-height:1.15}
.kart-yazi.one p{font-size:1rem;-webkit-line-clamp:4}
@media (max-width:52rem){.kart-yazi.one a{grid-template-columns:1fr}.kart-yazi.one .kart-gorsel{aspect-ratio:16/9}}

/* Yazı sayfası */
.yazi-bas{padding-top:clamp(1.6rem,5vw,3rem)}
.ust-bilgi{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;font-size:.84rem;color:var(--soluk)}
.ust-bilgi .etiket{margin-right:.1rem}
.yazi-bas h1{text-wrap:balance;margin-top:.9rem;font-size:clamp(1.9rem,4.6vw,3rem);line-height:1.1;letter-spacing:-.04em;font-weight:680}
.yazar{margin-top:.9rem;font-size:.9rem;color:var(--orta);font-weight:520}
.kapak{margin-block:clamp(1.4rem,4vw,2.4rem);max-width:64rem}
.kapak img{display:block;width:100%;height:auto;border-radius:clamp(1rem,2.4vw,1.6rem);box-shadow:0 30px 70px -40px rgba(15,23,42,.6),0 0 0 1px rgba(15,23,42,.06)}
.metin{font-size:1.06rem;color:var(--orta);line-height:1.75}
.metin .giris{font-size:clamp(1.12rem,1.8vw,1.25rem);line-height:1.65;color:var(--koyu);padding-left:1.1rem;border-left:3px solid;border-image:linear-gradient(var(--mavi-parlak),#7c3aed) 1}
.metin .giris strong{color:var(--mavi)}
.metin h2{margin:2.4rem 0 .7rem;font-size:clamp(1.3rem,2.4vw,1.55rem);letter-spacing:-.025em;line-height:1.25;color:var(--koyu);font-weight:650}
.metin p+p{margin-top:.9rem}
.metin ul,.metin ol{margin:.8rem 0 0;padding-left:1.3rem}
.metin li+li{margin-top:.5rem}
.metin li::marker{color:var(--mavi)}
.metin strong{color:var(--koyu);font-weight:620}
.metin a{color:var(--mavi)}
.metin pre{margin:1rem 0;padding:1rem 1.1rem;border-radius:.9rem;background:var(--murekkep);color:#cfe0ff;overflow-x:auto;font-size:.86rem;line-height:1.6;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.metin code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em}
.metin :not(pre)>code{background:var(--kagit-3);padding:.1rem .35rem;border-radius:.35rem;color:var(--koyu)}
.metin table{width:100%;margin-top:1rem;border-collapse:separate;border-spacing:0;font-size:.94rem;background:var(--kagit-2);border-radius:1rem;overflow:hidden;box-shadow:0 0 0 1px var(--cizgi)}
.metin th{text-align:left;font-weight:620;color:var(--koyu);background:var(--kagit-3);padding:.7rem .9rem}
.metin td{padding:.7rem .9rem;border-top:1px solid var(--cizgi);vertical-align:top}
@media (max-width:34rem){.metin table{font-size:.86rem}.metin th,.metin td{padding:.55rem .6rem}}

/* Çağrı kartı */
.cagri-kart{position:relative;display:flex;align-items:center;gap:1.2rem;margin-top:2.8rem;padding:clamp(1.3rem,3.4vw,1.9rem);border-radius:1.5rem;overflow:hidden;color:#fff;
  background:radial-gradient(28rem 14rem at 100% 0,rgba(124,58,237,.45),transparent 70%),radial-gradient(24rem 14rem at 0 100%,rgba(96,165,250,.35),transparent 70%),linear-gradient(135deg,var(--murekkep-2),var(--murekkep));
  box-shadow:0 30px 60px -36px rgba(29,78,216,.8)}
.cagri-kart h2{margin:0;font-size:1.3rem;letter-spacing:-.02em;color:#fff}
.cagri-kart p{margin-top:.3rem;color:#c7d6f5;font-size:.95rem}
.cagri-kart .dugme{margin-left:auto;flex:none;background:#fff;color:var(--mavi);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.cagri-kart .dugme:hover{background:var(--mavi-sis)}
.cagri-kure{flex:none;width:3.4rem;height:3.4rem;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 6%,#bfdbfe 18%,var(--mavi-acik) 42%,#6d28d9 75%,#1e1b4b);box-shadow:0 0 0 6px rgba(96,165,250,.12),0 0 40px rgba(124,58,237,.6);animation:nefes 4.8s ease-in-out infinite}
@keyframes nefes{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.cagri-kure{animation:none}.kart-yazi,.kart-gorsel img{transition:none}}
@media (max-width:36rem){.cagri-kart{flex-wrap:wrap}.cagri-kart .dugme{margin-left:0;width:100%}}

/* SSS */
.sorular{margin-top:3rem}
.sorular h2{margin:0 0 .9rem;font-size:clamp(1.3rem,2.4vw,1.55rem);letter-spacing:-.025em;color:var(--koyu)}
.sss{background:var(--kagit-2);border-radius:1rem;box-shadow:0 0 0 1px var(--cizgi);transition:box-shadow .2s}
.sss+.sss{margin-top:.6rem}
.sss[open]{box-shadow:0 0 0 1.5px rgba(29,78,216,.35),0 14px 30px -22px rgba(29,78,216,.6)}
.sss summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;font-weight:600;color:var(--koyu);font-size:1rem}
.sss summary::-webkit-details-marker{display:none}
.sss summary::after{content:"";flex:none;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--mavi-sis) no-repeat center/.8rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231d4ed8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");transition:transform .25s}
.sss[open] summary::after{transform:rotate(45deg)}
.sss p{padding:0 1.15rem 1.1rem;color:var(--orta);font-size:.98rem;line-height:1.7}

/* Diğer yazılar */
.diger{margin-top:clamp(3rem,7vw,5rem)}
.diger h2{font-size:clamp(1.4rem,2.6vw,1.8rem);letter-spacing:-.03em}

footer{border-top:1px solid var(--cizgi);padding-block:1.6rem;font-size:.86rem;color:var(--soluk)}
footer .kap{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
footer a{color:inherit}
footer button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}
footer .odeme-logolari{margin-left:auto}
/* Liste: öne çıkanın altında 2 geniş + 3 kart (beş yazı boşluksuz) */
@media (min-width:56rem){
  .kartlar.liste{grid-template-columns:repeat(6,1fr)}
  .kartlar.liste>*{grid-column:span 2}
  .kartlar.liste>:nth-child(5n+1),.kartlar.liste>:nth-child(5n+2){grid-column:span 3}
}