.makale .tt-kutu { display: flex; gap: 18px; padding: 20px 22px; background: linear-gradient(135deg, rgba(0, 196, 214, 0.12), rgba(66, 133, 244, 0.06)); border-radius: var(--ba-r-2); margin: 28px 0; position: relative; overflow: hidden; border: 1px solid rgba(0, 196, 214, 0.30); }
.makale .tt-kutu::after { content: ""; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0, 196, 214, 0.15), transparent 70%); pointer-events: none; animation: ttYuz 8s ease-in-out infinite; }
@keyframes ttYuz { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 20px); } }
.makale .tt-kutu-ikon { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #00c4d6, #4285f4); display: grid; place-items: center; color: #fff; font-size: 22px; flex-shrink: 0; box-shadow: 0 6px 20px rgba(0, 196, 214, 0.35); animation: ttNabiz 3s ease-in-out infinite; }
@keyframes ttNabiz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.makale .tt-kutu-icerik { flex: 1; font-size: 14px; color: var(--ba-txt-1); line-height: 1.65; }
.makale .tt-kutu-icerik strong { color: #00c4d6; }
.makale .tt-tur-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 28px 0; }
.makale .tt-tur-kart { background: var(--ba-bg-2); border: 1px solid var(--ba-border); border-radius: var(--ba-r-2); padding: 22px 18px; text-align: center; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }
.makale .tt-tur-kart::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: center; transition: transform 0.4s ease; }
.makale .tt-tur-kart:nth-child(1)::before { background: #10b981; }
.makale .tt-tur-kart:nth-child(2)::before { background: #4285f4; }
.makale .tt-tur-kart:nth-child(3)::before { background: #f59e0b; }
.makale .tt-tur-kart:nth-child(4)::before { background: #8b5cf6; }
.makale .tt-tur-kart:hover::before { transform: scaleX(1); }
.makale .tt-tur-kart:hover { transform: translateY(-6px); border-color: rgba(0, 196, 214, 0.40); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.30); }
.makale .tt-tur-ikon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; transition: transform 0.3s ease; }
.makale .tt-tur-kart:hover .tt-tur-ikon { transform: scale(1.1) rotate(-5deg); }
.makale .tt-tur-ikon.ttk-yesil { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 15px rgba(16, 185, 129, 0.35); }
.makale .tt-tur-ikon.ttk-mavi { background: linear-gradient(135deg, #4285f4, #1a73e8); box-shadow: 0 4px 15px rgba(66, 133, 244, 0.35); }
.makale .tt-tur-ikon.ttk-turuncu { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35); }
.makale .tt-tur-ikon.ttk-mor { background: linear-gradient(135deg, #8b5cf6, #6d28d9); box-shadow: 0 4px 15px rgba(139, 92, 246, 0.35); }
.makale .tt-tur-kart h4 { font-size: 14px; color: #fff; margin: 0 0 8px; font-weight: 700; }
.makale .tt-tur-kart p { font-size: 12px; color: var(--ba-txt-3); margin: 0; line-height: 1.55; }
.makale .tt-uyari-serit { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background: linear-gradient(90deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.03)); border-left: 4px solid #ef4444; border-radius: 0 var(--ba-r-2) var(--ba-r-2) 0; margin: 24px 0; }
.makale .tt-us-ikon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #ef4444, #dc2626); display: grid; place-items: center; color: #fff; font-size: 16px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); animation: ttUyari 2s ease-in-out infinite; }
@keyframes ttUyari { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.makale .tt-us-metin { flex: 1; font-size: 13.5px; color: var(--ba-txt-2); line-height: 1.6; }
.makale .tt-us-metin strong { color: #ef4444; }
.makale .tt-karsilastirma { background: var(--ba-bg-2); border: 1px solid var(--ba-border); border-radius: var(--ba-r-2); overflow: hidden; margin: 28px 0; }
.makale .tt-k-satir { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 1px solid rgba(196, 200, 206, 0.06); }
.makale .tt-k-satir:last-child { border-bottom: none; }
.makale .tt-k-satir.tt-k-baslik { background: linear-gradient(90deg, rgba(0, 196, 214, 0.15), rgba(66, 133, 244, 0.08)); border-bottom: 2px solid rgba(0, 196, 214, 0.30); }
.makale .tt-k-hucre { padding: 14px 16px; font-size: 13px; color: var(--ba-txt-2); display: flex; align-items: center; gap: 8px; border-right: 1px solid rgba(196, 200, 206, 0.05); }
.makale .tt-k-hucre:last-child { border-right: none; }
.makale .tt-k-satir.tt-k-baslik .tt-k-hucre { font-weight: 700; color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.makale .tt-k-klasik { background: rgba(16, 185, 129, 0.04); }
.makale .tt-k-sosyal { background: rgba(66, 133, 244, 0.06); }
.makale .tt-k-hucre i { font-size: 11px; flex-shrink: 0; }
.makale .tt-k-klasik i { color: #10b981; }
.makale .tt-k-sosyal i { color: #4285f4; }
.makale .sss-tab-tt { background: var(--ba-bg-2); border: 1px solid var(--ba-border); border-radius: var(--ba-r-2); overflow: hidden; margin: 28px 0; }
.makale .sss-tab-basliklar-tt { display: flex; flex-wrap: wrap; gap: 3px; padding: 10px; background: var(--ba-bg-1); border-bottom: 1px solid var(--ba-border); }
.makale .sss-tab-btn-tt { padding: 8px 16px; border-radius: var(--ba-r-1); background: var(--ba-bg-3); color: var(--ba-txt-2); font-size: 12px; font-weight: 600; border: 1px solid var(--ba-border); cursor: pointer; transition: all 0.25s ease; font-family: inherit; }
.makale .sss-tab-btn-tt:hover { background: var(--ba-bg-4); color: #fff; border-color: var(--ba-border-2); }
.makale .sss-tab-btn-tt.aktif { background: linear-gradient(135deg, #00c4d6, #4285f4); color: #fff; border-color: transparent; box-shadow: 0 2px 12px rgba(0, 196, 214, 0.35); }
.makale .sss-tab-icerik-tt { display: none; padding: 22px 20px; }
.makale .sss-tab-icerik-tt.aktif { display: block; }
.makale .sss-tab-icerik-tt h4 { font-size: 15px; color: #fff; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.makale .sss-tab-icerik-tt h4 i { color: #00c4d6; }
.makale .sss-tab-icerik-tt p { font-size: 13.5px; color: var(--ba-txt-2); line-height: 1.7; margin: 0; }
.makale .sss-tab-icerik-tt a { color: #00c4d6; border-bottom: 1px dashed #00c4d6; }
.makale .sss-tab-icerik-tt a:hover { color: #fff; border-bottom-style: solid; }
.makale .tt-taktik-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 28px 0; }
.makale .tt-taktik-kart { background: var(--ba-bg-2); border: 1px solid var(--ba-border); border-radius: var(--ba-r-2); padding: 20px 18px; position: relative; overflow: hidden; transition: all 0.3s ease; }
.makale .tt-taktik-kart:hover { transform: translateY(-4px); border-color: rgba(0, 196, 214, 0.40); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); }
.makale .tt-taktik-no { position: absolute; top: 12px; right: 16px; font-family: var(--ba-mono); font-size: 28px; font-weight: 700; color: rgba(0, 196, 214, 0.12); line-height: 1; transition: color 0.3s ease; }
.makale .tt-taktik-kart:hover .tt-taktik-no { color: rgba(0, 196, 214, 0.25); }
.makale .tt-taktik-kart h4 { font-size: 14px; color: #fff; margin: 0 0 8px; padding-right: 40px; }
.makale .tt-taktik-kart p { font-size: 12.5px; color: var(--ba-txt-3); margin: 0; line-height: 1.6; }
@media (max-width: 768px) { .makale .tt-tur-grid { grid-template-columns: 1fr 1fr; } .makale .tt-taktik-grid { grid-template-columns: 1fr; } .makale .tt-k-satir { grid-template-columns: 1fr; } .makale .tt-k-hucre { border-right: none; border-bottom: 1px solid rgba(196, 200, 206, 0.05); } .makale .tt-k-satir.tt-k-baslik { display: none; } .makale .sss-tab-basliklar-tt { flex-direction: column; } .makale .sss-tab-btn-tt { width: 100%; text-align: left; } }
@media (max-width: 480px) { .makale .tt-tur-grid { grid-template-columns: 1fr; } .makale .tt-kutu { flex-direction: column; align-items: center; text-align: center; } }