/* ÇanakkaleMekan v50 — yuvarlak kategoriler + infografik şerit */
body .cats{display:flex!important;flex-wrap:nowrap;gap:16px;overflow-x:auto;justify-content:safe center;padding:8px 4px 14px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
body .cats::-webkit-scrollbar{display:none}
body .cats .cat{flex:0 0 auto;width:88px;background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important;scroll-snap-align:start;text-align:center;transition:transform .18s}
body .cats .cat:hover{transform:translateY(-3px)}
body .cats .cat i{width:74px!important;height:74px!important;font-size:28px!important;margin:0 auto 9px!important;border-radius:50%!important;display:grid!important;place-items:center;color:#fff;background-image:linear-gradient(150deg,rgba(255,255,255,.38),rgba(255,255,255,0) 58%)!important;box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(242,122,26,.28),0 10px 20px rgba(20,20,40,.14);transition:box-shadow .18s,transform .18s}
body .cats .cat:hover i{box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(242,122,26,.75),0 12px 24px rgba(20,20,40,.18);transform:scale(1.05)}
body .cats .cat b{font-size:12.5px!important;line-height:1.2;font-weight:700;color:#1d1d2b}
body .cats .cat small{display:inline-block!important;margin-top:4px;font-size:10.5px!important;font-weight:700;color:#f27a1a!important;background:#fff3e8;border-radius:20px;padding:2px 8px}
@media (max-width:640px){
 body .cats{gap:12px;justify-content:flex-start;padding:6px 14px 12px;margin:0 -14px}
 body .cats .cat{width:74px}
 body .cats .cat i{width:62px!important;height:62px!important;font-size:23px!important}
 body .cats .cat b{font-size:11.5px!important}
 body .cats .cat small{font-size:10px!important;padding:1px 7px}
}
/* İnfografik şerit */
.cm-info{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 6px}
.cm-info .it{position:relative;overflow:hidden;border-radius:18px;padding:16px 16px 14px;color:#fff;display:flex;align-items:center;gap:12px;box-shadow:0 10px 24px rgba(20,20,40,.12)}
.cm-info .it::after{content:"";position:absolute;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;background:rgba(255,255,255,.14)}
.cm-info .ic{flex:0 0 46px;height:46px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-size:20px}
.cm-info .n{font-size:24px;font-weight:800;line-height:1;letter-spacing:-.5px}
.cm-info .l{font-size:12px;opacity:.92;margin-top:4px;font-weight:600}
.cm-info .g1{background:linear-gradient(135deg,#f27a1a,#ff4f6e)}
.cm-info .g2{background:linear-gradient(135deg,#7b4dff,#c03bd9)}
.cm-info .g3{background:linear-gradient(135deg,#0fb39b,#1d8fe1)}
.cm-info .g4{background:linear-gradient(135deg,#ff9f1c,#f6c90e);color:#3a2600}
.cm-info .g4 .ic{background:rgba(255,255,255,.45)}
@media (max-width:860px){.cm-info{grid-template-columns:repeat(2,1fr);gap:10px}.cm-info .it{padding:12px;border-radius:14px}.cm-info .ic{flex-basis:38px;height:38px;font-size:16px}.cm-info .n{font-size:19px}.cm-info .l{font-size:11px}}
body .cats .cat small{white-space:nowrap}
@media (max-width:640px){body .cats{margin:0!important;padding:8px 8px 12px!important}body .cats .cat:first-child{margin-left:2px}}