/* ==========================================================
ŞikayetVar — Premium Enhancement Layer (v1)
style.css üzerine binen zenginleştirme katmanı.
Header, Footer, Slider, Auth, Complaint Wizard.
========================================================== */
:root{
--grad-primary:linear-gradient(135deg,#ff4757 0%,#e63946 45%,#c1121f 100%);
--grad-royal:linear-gradient(135deg,#1d3557 0%,#2d5a8e 100%);
--grad-mesh:radial-gradient(circle at 10% 10%, rgba(230,57,70,.18), transparent 40%),
radial-gradient(circle at 90% 20%, rgba(52,152,219,.18), transparent 40%),
radial-gradient(circle at 50% 90%, rgba(243,156,18,.14), transparent 45%);
--glass:rgba(255,255,255,.7);
--glass-brd:rgba(255,255,255,.4);
--ring:0 0 0 4px rgba(230,57,70,.18);
}
/* ========== HEADER — Premium Glass + Gradient Accent ========== */
.site-header{position:sticky;top:0;z-index:200}
.site-header::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,#e63946,#f39c12,#3498db,#2ecc71,#9b59b6,#e63946);
background-size:300% 100%;
animation:headerSheen 9s linear infinite;
opacity:.9;z-index:5;
}
@keyframes headerSheen{0%{background-position:0 0}100%{background-position:300% 0}}
.topbar{padding:8px 0 !important}
.topbar::before{
content:"";position:absolute;top:0;bottom:0;left:-50%;width:50%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
animation:topbarShine 6s linear infinite;
}
@keyframes topbarShine{0%{left:-50%}100%{left:150%}}
.navbar{padding:14px 0 !important;background:linear-gradient(180deg,#ffffff 0%,#fbfcfe 100%);position:relative}
.navbar::after{
content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);
width:70%;height:1px;
background:linear-gradient(90deg,transparent,rgba(230,57,70,.25),transparent);
}
/* Search box premium */
.search-box{position:relative;flex:1;max-width:520px}
.search-box input{
width:100%;padding:13px 50px 13px 48px !important;
border:2px solid transparent !important;
background:linear-gradient(#fff,#fff) padding-box,
linear-gradient(135deg,rgba(230,57,70,.25),rgba(29,53,87,.2)) border-box !important;
border-radius:14px !important;
font-size:14px;transition:all .3s ease;
box-shadow:0 2px 10px rgba(0,0,0,.04);
}
.search-box input:focus{
outline:none;
box-shadow:0 6px 24px rgba(230,57,70,.18),0 0 0 4px rgba(230,57,70,.1) !important;
transform:translateY(-1px);
}
.search-box::before{
content:"\f002";font-family:"Font Awesome 6 Free";font-weight:900;
position:absolute;left:18px;top:50%;transform:translateY(-50%);
color:var(--muted);pointer-events:none;font-size:13px;z-index:2;
}
.search-box input ~ i, .search-box > i{display:none}
.search-box button{
position:absolute !important;right:6px;top:50%;transform:translateY(-50%);
width:38px;height:38px;border:0;border-radius:10px;
background:var(--grad-primary);color:#fff;cursor:pointer;
box-shadow:0 4px 12px rgba(230,57,70,.3);
transition:all .2s ease;
}
.search-box button:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 6px 18px rgba(230,57,70,.45)}
/* Complaint CTA premium */
.btn-complaint{
position:relative;overflow:hidden;
background:var(--grad-primary) !important;
color:#fff !important;padding:11px 20px !important;
border-radius:12px !important;font-weight:700;
box-shadow:0 6px 20px rgba(230,57,70,.35),inset 0 1px 0 rgba(255,255,255,.25);
transition:all .3s cubic-bezier(.4,0,.2,1);
}
.btn-complaint::before{
content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
transition:left .6s ease;
}
.btn-complaint:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(230,57,70,.5)}
.btn-complaint:hover::before{left:100%}
/* Icon buttons / notification bell */
.icon-btn{
width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
border-radius:12px;background:#f3f5f9;color:var(--secondary);
transition:all .25s ease;position:relative;
}
.icon-btn:hover{background:var(--grad-primary);color:#fff;transform:translateY(-2px);box-shadow:0 6px 16px rgba(230,57,70,.3)}
.icon-btn .badge{
position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
background:var(--grad-primary);color:#fff;border:2px solid #fff;
border-radius:999px;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
/* User menu button */
.user-menu-btn{
display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border:1px solid var(--border);
border-radius:999px;background:#fff;cursor:pointer;transition:all .25s ease;
}
.user-menu-btn:hover{border-color:var(--primary);box-shadow:0 4px 14px rgba(230,57,70,.15)}
.user-menu-btn img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 2px rgba(230,57,70,.25)}
.user-menu-btn span{font-weight:600;font-size:13px;color:var(--secondary)}
/* Categories bar premium */
.categories-bar{background:#fff;border-bottom:1px solid #eef2f7;padding:9px 0}
.categories-bar .cats{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none}
.categories-bar .cats::-webkit-scrollbar{display:none}
.cat{
flex-shrink:0;display:inline-flex;align-items:center;gap:9px;
padding:6px 14px 6px 6px;background:#fff;border:1px solid #edf1f6;
border-radius:999px;font-size:13px;font-weight:600;color:#475569;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;
}
/* Renkli ikon rozeti — her kategorinin kendi gradyanı */
.cat:not(.all) > i:first-child{
width:30px;height:30px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
background:var(--cc,var(--grad-primary));color:#fff;font-size:13px;
box-shadow:0 4px 10px -3px rgba(15,23,42,.3);transition:transform .2s ease;
}
.cat:not(.all):hover{transform:translateY(-2px);border-color:#dbe3ee;box-shadow:0 8px 20px -8px rgba(15,23,42,.22);color:#0f172a}
.cat:not(.all):hover > i:first-child{transform:scale(1.08) rotate(-4deg)}
/* ========== FOOTER — Richer, layered ========== */
.site-footer{
background:
radial-gradient(circle at 20% 0%, rgba(230,57,70,.18), transparent 40%),
radial-gradient(circle at 80% 100%, rgba(52,152,219,.15), transparent 40%),
linear-gradient(180deg,#0f1a2d 0%, #0a1322 100%) !important;
color:#c7d0de !important;
position:relative;overflow:hidden;margin-top:60px;
}
.site-footer::before{
content:"";position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(230,57,70,.6),transparent);
}
.site-footer::after{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.7) 1px, transparent 0);
background-size:24px 24px;
}
/* Footer CTA */
.footer-cta{
position:relative;z-index:2;
margin:-40px auto 0;max-width:1100px;
display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
padding:30px 40px;border-radius:20px;
background:var(--grad-primary);
box-shadow:0 24px 60px -20px rgba(230,57,70,.55);
overflow:hidden;
}
.footer-cta::before{
content:"";position:absolute;inset:0;background:
radial-gradient(circle at 0% 0%, rgba(255,255,255,.18), transparent 40%),
radial-gradient(circle at 100% 100%, rgba(0,0,0,.15), transparent 40%);
}
.footer-cta h3{color:#fff !important;margin:0 0 6px;font-size:22px;position:relative;z-index:1}
.footer-cta p{color:rgba(255,255,255,.9);margin:0;position:relative;z-index:1}
.footer-cta .btn{
background:#fff !important;color:var(--primary) !important;padding:14px 26px !important;
border-radius:12px !important;font-weight:800;border:0;position:relative;z-index:1;
box-shadow:0 10px 24px rgba(0,0,0,.18);transition:all .25s ease;
}
.footer-cta .btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 16px 36px rgba(0,0,0,.25)}
.footer-grid{padding:60px 0 30px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:40px;position:relative;z-index:2}
@media(max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}}
.footer-grid h4{color:#fff !important;font-size:15px;text-transform:uppercase;letter-spacing:1.2px;margin:0 0 18px;position:relative;padding-bottom:10px}
.footer-grid h4::after{content:"";position:absolute;bottom:0;left:0;width:32px;height:3px;background:var(--grad-primary);border-radius:2px}
.footer-grid a{color:#a8b3c4 !important;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}
.footer-grid a:hover{color:#fff !important;transform:translateX(4px)}
.footer-grid a i{font-size:10px;color:var(--primary);transition:transform .2s ease}
.footer-grid a:hover i{transform:translateX(2px)}
.footer-grid ul li{margin-bottom:10px}
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.footer-brand .logo-icon{width:40px;height:40px;border-radius:12px;background:var(--grad-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;box-shadow:0 8px 20px rgba(230,57,70,.45)}
.footer-brand strong{color:#fff;font-size:18px;letter-spacing:.3px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{
width:40px;height:40px;border-radius:12px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
display:inline-flex;align-items:center;justify-content:center;color:#c7d0de !important;
transition:all .25s ease;
}
.social a:hover{background:var(--grad-primary);color:#fff !important;transform:translateY(-3px) rotate(-4deg);box-shadow:0 10px 22px rgba(230,57,70,.4);border-color:transparent}
.newsletter-form{display:flex;gap:8px;margin-top:10px}
.newsletter-form input{
flex:1;padding:12px 14px;border-radius:10px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
color:#fff;font-size:13px;transition:all .2s ease;
}
.newsletter-form input::placeholder{color:#758096}
.newsletter-form input:focus{outline:none;background:rgba(255,255,255,.1);border-color:rgba(230,57,70,.5)}
.newsletter-form button{
width:46px;border:0;border-radius:10px;cursor:pointer;
background:var(--grad-primary);color:#fff;
box-shadow:0 6px 18px rgba(230,57,70,.4);transition:all .2s ease;
}
.newsletter-form button:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(230,57,70,.55)}
.trust-row{
display:flex;gap:20px;flex-wrap:wrap;justify-content:center;
padding:24px 0;border-top:1px solid rgba(255,255,255,.08);
border-bottom:1px solid rgba(255,255,255,.08);
position:relative;z-index:2;
}
.trust-row .t{
display:inline-flex;align-items:center;gap:8px;
padding:8px 16px;border-radius:999px;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
font-size:12px;color:#a8b3c4;transition:all .2s ease;
}
.trust-row .t:hover{background:rgba(230,57,70,.12);border-color:rgba(230,57,70,.3);color:#fff;transform:translateY(-2px)}
.trust-row .t i{color:var(--primary);font-size:14px}
.footer-bottom{padding:20px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;position:relative;z-index:2;font-size:12px;color:#758096}
.footer-bottom a{color:#a8b3c4 !important}
.footer-bottom a:hover{color:#fff !important}
/* ========== AUTH (LOGIN / REGISTER) — Premium split layout ========== */
.auth-wrap{
min-height:calc(100vh - 100px);
display:grid;grid-template-columns:1.05fr 1fr;
position:relative;overflow:hidden;
}
.auth-wrap::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:var(--grad-mesh);
}
@media(max-width:960px){.auth-wrap{grid-template-columns:1fr}}
.auth-side{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#0f1a2d 0%,#1d3557 50%,#2d5a8e 100%);
color:#fff;padding:60px 50px;display:flex;align-items:center;
}
.auth-side::before{
content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
background:
radial-gradient(circle at 20% 20%, rgba(230,57,70,.4), transparent 40%),
radial-gradient(circle at 80% 80%, rgba(52,152,219,.35), transparent 40%);
}
.auth-side::after{
content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
background-image:linear-gradient(rgba(255,255,255,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.4) 1px,transparent 1px);
background-size:40px 40px;
}
.auth-side-inner{position:relative;z-index:1;max-width:480px;margin:auto;width:100%}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:40px}
.auth-brand .logo-icon{width:46px;height:46px;border-radius:14px;background:var(--grad-primary);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#fff;box-shadow:0 10px 28px rgba(230,57,70,.5)}
.auth-brand span{font-size:20px;font-weight:800;color:#fff}
.auth-title{font-size:38px;line-height:1.15;color:#fff !important;margin:0 0 14px;letter-spacing:-.5px}
.auth-subtitle{font-size:15px;color:rgba(255,255,255,.75);margin:0 0 32px;line-height:1.6}
.auth-benefits{display:flex;flex-direction:column;gap:14px;margin-bottom:34px}
.auth-benefits .b{
display:flex;align-items:flex-start;gap:14px;
padding:14px 16px;border-radius:14px;
background:rgba(255,255,255,.06);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.08);
transition:all .25s ease;
}
.auth-benefits .b:hover{background:rgba(255,255,255,.1);transform:translateX(4px);border-color:rgba(230,57,70,.4)}
.auth-benefits .ico{
width:40px;height:40px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
border-radius:12px;background:var(--grad-primary);color:#fff;
box-shadow:0 6px 16px rgba(230,57,70,.4);
}
.auth-benefits .b strong{display:block;color:#fff;font-size:14px;margin-bottom:3px}
.auth-benefits .b span{color:rgba(255,255,255,.7);font-size:12.5px;line-height:1.5}
.auth-counters{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
padding:20px;border-radius:16px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(8px);
}
.auth-counters .c{text-align:center}
.auth-counters .n{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px;background:linear-gradient(135deg,#fff,#ff9ba3);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.auth-counters .l{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:1px;margin-top:4px}
/* Right side — the form */
.auth-form-side{display:flex;align-items:center;justify-content:center;padding:60px 40px;background:#fff;position:relative;z-index:1}
.auth-form{width:100%;max-width:440px}
.auth-form h1{font-size:30px;margin:0 0 8px;color:var(--secondary) !important;letter-spacing:-.5px}
.auth-form .lead{color:var(--muted);font-size:14px;margin-bottom:26px}
.auth-form .lead a{color:var(--primary);font-weight:700}
.auth-form .form-group{margin-bottom:16px}
.auth-form label{display:block;margin-bottom:7px;font-size:13px;font-weight:600;color:var(--secondary)}
.input-icon{position:relative}
.input-icon > i:first-child{
position:absolute;left:16px;top:50%;transform:translateY(-50%);
color:var(--muted);font-size:14px;pointer-events:none;transition:color .2s ease;z-index:2;
}
.input-icon input{
width:100%;padding:13px 16px 13px 44px;
border:2px solid var(--border);border-radius:12px;
font-size:14px;background:#fafbfd;transition:all .2s ease;
}
.input-icon input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:var(--ring)}
.input-icon input:focus + i, .input-icon:focus-within > i:first-child{color:var(--primary)}
.pw-toggle{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
background:none;border:0;color:var(--muted);cursor:pointer;font-size:14px;padding:6px;
width:32px;height:32px;border-radius:8px;transition:all .2s ease;
}
.pw-toggle:hover{background:#f3f5f9;color:var(--primary)}
.pw-strength{height:5px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:8px}
.pw-strength .bar{height:100%;width:0;background:var(--danger);border-radius:3px;transition:all .3s ease}
.pw-label{font-size:11px;color:var(--muted);margin-top:4px}
.auth-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-light)}
.auth-row a{color:var(--primary);font-weight:600}
.auth-row label{display:inline-flex;align-items:center;gap:8px;margin:0 !important;cursor:pointer;font-weight:500 !important}
.auth-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--primary)}
.auth-submit{
width:100%;padding:14px;border:0;border-radius:12px;
background:var(--grad-primary);color:#fff;font-weight:700;font-size:15px;
cursor:pointer;margin:6px 0 14px;
box-shadow:0 10px 28px rgba(230,57,70,.35);
transition:all .25s cubic-bezier(.4,0,.2,1);
position:relative;overflow:hidden;
}
.auth-submit::before{
content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
transition:left .6s ease;
}
.auth-submit:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(230,57,70,.5)}
.auth-submit:hover::before{left:100%}
.divider-or{text-align:center;margin:18px 0;color:var(--muted);font-size:12px;position:relative;text-transform:uppercase;letter-spacing:1.5px;font-weight:600}
.divider-or::before,.divider-or::after{content:"";position:absolute;top:50%;width:42%;height:1px;background:var(--border)}
.divider-or::before{left:0}.divider-or::after{right:0}
.social-login{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.social-btn{
padding:12px;border:2px solid var(--border);border-radius:12px;
background:#fff;cursor:pointer;font-weight:600;font-size:13px;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
transition:all .2s ease;color:var(--text);
}
.social-btn:hover{border-color:transparent;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.1)}
.social-btn.g:hover{background:#fff;color:#ea4335}
.social-btn.f:hover{background:#1877f2;color:#fff}
.social-btn i{font-size:16px}
.auth-switch{text-align:center;margin-top:18px;font-size:13px;color:var(--muted)}
.auth-switch a{color:var(--primary);font-weight:700}
/* auth-compact variant (forgot / reset) */
.auth-compact{min-height:calc(100vh - 100px);display:flex;align-items:center;justify-content:center;padding:40px 20px;background:var(--grad-mesh)}
.auth-card{
max-width:440px;width:100%;
background:#fff;border-radius:20px;padding:40px;
box-shadow:0 30px 80px -20px rgba(0,0,0,.2);
text-align:center;border:1px solid var(--border);position:relative;overflow:hidden;
}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-primary)}
.ac-icon{width:72px;height:72px;margin:0 auto 18px;border-radius:50%;background:var(--grad-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 14px 34px rgba(230,57,70,.4)}
.auth-card h2{margin:0 0 10px;font-size:24px;color:var(--secondary)}
.auth-lead{color:var(--muted);font-size:14px;margin-bottom:22px;line-height:1.6}
.btn-block{width:100%;padding:14px !important}
.form-links{margin-top:14px;font-size:13px}
/* ========== MAIN SLIDER — polish ========== */
.main-slider{position:relative}
.main-slider .live-pulse{
position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:10;
display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
background:rgba(0,0,0,.55);backdrop-filter:blur(10px);
color:#fff;font-size:12px;font-weight:600;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 10px 30px rgba(0,0,0,.3);
}
.main-slider .live-pulse .dot{
width:8px;height:8px;border-radius:50%;background:#e63946;position:relative;
box-shadow:0 0 0 0 rgba(230,57,70,.7);animation:livePulse 2s ease-out infinite;
}
@keyframes livePulse{
0%{box-shadow:0 0 0 0 rgba(230,57,70,.7)}
100%{box-shadow:0 0 0 14px rgba(230,57,70,0)}
}
.slide{min-height:480px;position:relative;overflow:hidden;display:flex;align-items:center}
.slide.active{display:flex}
.slide-bg{position:absolute;inset:0;z-index:0}
.slide-bg .grid-pattern{
position:absolute;inset:0;opacity:.08;
background-image:linear-gradient(rgba(255,255,255,.9) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.9) 1px,transparent 1px);
background-size:50px 50px;
mask-image:radial-gradient(circle at center, #000 20%, transparent 70%);
-webkit-mask-image:radial-gradient(circle at center, #000 20%, transparent 70%);
}
.slide-bg .beam{position:absolute;top:-50%;left:-20%;width:140%;height:200%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);animation:beam 8s ease-in-out infinite}
@keyframes beam{0%,100%{transform:translateX(-10%)}50%{transform:translateX(10%)}}
.slide-bg .blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.slide-bg .b1{width:320px;height:320px;background:#e63946;top:-80px;left:-80px;animation:blob 12s ease-in-out infinite}
.slide-bg .b2{width:260px;height:260px;background:#3498db;bottom:-60px;right:10%;animation:blob 14s ease-in-out infinite reverse}
.slide-bg .b3{width:200px;height:200px;background:#f39c12;top:30%;right:-60px;animation:blob 16s ease-in-out infinite}
@keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-20px,30px) scale(.95)}}
.slide.theme-1{background:linear-gradient(135deg,#0f1a2d,#1d3557 70%,#2d3a5f)}
.slide.theme-2{background:linear-gradient(135deg,#1a1a2e,#16213e 70%,#0f3460)}
.slide-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;max-width:1200px;width:100%;margin:0 auto;padding:60px 20px;align-items:center;color:#fff}
@media(max-width:900px){.slide-inner{grid-template-columns:1fr;padding:50px 20px}}
.slide-text .kicker{
display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
border-radius:999px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
margin-bottom:18px;backdrop-filter:blur(8px);
}
.slide-text .kicker i{color:#f39c12}
.slide-text h2{font-size:42px;line-height:1.1;color:#fff !important;margin:0 0 14px;letter-spacing:-1px;font-weight:800}
.slide-text h2 .grad{background:linear-gradient(135deg,#ff6b7a,#f39c12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.slide-text p{color:rgba(255,255,255,.8);font-size:16px;line-height:1.6;margin:0 0 22px;max-width:520px}
.slider-search{display:flex;gap:8px;max-width:520px;background:rgba(255,255,255,.08);padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px)}
.slider-search input{flex:1;padding:12px 16px;border:0;border-radius:10px;background:transparent;color:#fff;font-size:14px;outline:none}
.slider-search input::placeholder{color:rgba(255,255,255,.5)}
.slider-search button{padding:12px 24px;border:0;border-radius:10px;background:var(--grad-primary);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(230,57,70,.4);transition:all .2s ease}
.slider-search button:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(230,57,70,.55)}
.quick-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;font-size:13px;color:rgba(255,255,255,.6)}
.quick-tags a{padding:5px 12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#fff !important;font-size:12px;font-weight:500;transition:all .2s ease}
.quick-tags a:hover{background:var(--primary);border-color:transparent;transform:translateY(-1px)}
.slide-visual{position:relative;height:420px}
.v-card{
position:absolute;width:300px;padding:16px;border-radius:16px;
background:rgba(255,255,255,.95);backdrop-filter:blur(20px);color:var(--text);
box-shadow:0 20px 50px rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.5);
animation:cardFloat 6s ease-in-out infinite;
}
.v-card.c1{top:10%;left:0;animation-delay:0s;transform:rotate(-4deg)}
.v-card.c2{top:35%;right:0;animation-delay:2s;transform:rotate(3deg)}
.v-card.c3{bottom:5%;left:15%;animation-delay:4s;transform:rotate(-2deg)}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.vc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.vc-logo{width:36px;height:36px;border-radius:10px;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.vc-title{font-weight:700;font-size:14px;color:var(--secondary)}
.vc-meta{font-size:11px;color:var(--muted)}
.vc-body{font-size:13px;color:var(--text);line-height:1.5;margin-bottom:10px}
.vc-status{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.vc-status.resolved{background:#dcfce7;color:#166534}
.vc-status.responded{background:#dbeafe;color:#1e40af}
.vc-status.open{background:#fef3c7;color:#92400e}
/* ========== COMPLAINT WIZARD — Rich upgrade ========== */
.wizard{background:#fff;border-radius:20px;box-shadow:0 20px 60px -20px rgba(0,0,0,.15);overflow:hidden;margin:30px 0 60px;border:1px solid var(--border)}
.wizard-head{
padding:34px 40px;
background:linear-gradient(135deg,#fafbfd 0%,#f3f6fb 100%);
position:relative;border-bottom:1px solid var(--border);
}
.wizard-head::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-primary)}
.wizard-head h2{font-size:26px;color:var(--secondary);margin:0 0 6px;display:flex;align-items:center;gap:10px}
.wizard-head h2 i{color:var(--primary)}
.wizard-head p{color:var(--muted);margin:0 0 22px;font-size:14px}
.wizard-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;position:relative}
.wizard-step{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:#fff;border:2px solid var(--border);transition:all .3s ease;font-size:13px;font-weight:600;color:var(--muted)}
.wizard-step .n{width:32px;height:32px;border-radius:50%;background:var(--border);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex-shrink:0;transition:all .3s ease}
.wizard-step.active{border-color:var(--primary);color:var(--secondary);box-shadow:0 8px 20px rgba(230,57,70,.15)}
.wizard-step.active .n{background:var(--grad-primary);box-shadow:0 6px 16px rgba(230,57,70,.4)}
.wizard-step.done{border-color:var(--success);color:var(--secondary)}
.wizard-step.done .n{background:var(--success)}
.wizard-step.done .n::before{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900}
.wizard-step.done .n{font-size:0}
.wizard-step.done .n::before{font-size:13px}
.wizard-progress-bar{height:5px;background:var(--border);border-radius:3px;overflow:hidden}
.wizard-progress-bar .fill{height:100%;background:var(--grad-primary);border-radius:3px;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(230,57,70,.5)}
.wizard-body{padding:40px}
.wizard-panel{display:none;animation:panelIn .4s ease}
.wizard-panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.wizard-panel h3{font-size:18px;color:var(--secondary);margin:0 0 16px}
.brand-picker-search{margin-bottom:16px}
.brand-picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;max-height:420px;overflow:auto;padding:4px 4px 10px}
.brand-picker .pick{
border:2px solid var(--border);border-radius:14px;padding:14px 10px;text-align:center;cursor:pointer;
transition:all .25s ease;background:#fff;position:relative;overflow:hidden;
}
.brand-picker .pick::before{content:"";position:absolute;inset:0;background:var(--grad-primary);opacity:0;transition:opacity .25s ease;z-index:0}
.brand-picker .pick > *{position:relative;z-index:1}
.brand-picker .pick:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.1);border-color:var(--primary)}
.brand-picker .pick.selected{border-color:var(--primary);box-shadow:0 10px 24px rgba(230,57,70,.25)}
.brand-picker .pick.selected::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;top:6px;right:6px;width:22px;height:22px;background:var(--grad-primary);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;z-index:2}
.brand-picker .pick .logo{width:48px;height:48px;margin:0 auto 8px;border-radius:12px;background:#f3f5f9;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:var(--secondary);overflow:hidden}
.brand-picker .pick .logo img{width:100%;height:100%;object-fit:cover}
.brand-picker .pick .nm{font-size:12.5px;font-weight:600;color:var(--secondary);line-height:1.3}
.wizard .form-control{width:100%;padding:13px 14px;border:2px solid var(--border);border-radius:12px;background:#fafbfd;font-size:14px;transition:all .2s ease}
.wizard .form-control:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:var(--ring)}
.wizard .char-counter{font-size:12px;color:var(--muted);margin-top:5px;text-align:right}
.wizard .char-counter.warn{color:var(--warning)}
.wizard .char-counter.danger{color:var(--danger)}
.wizard .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.wizard .form-row{grid-template-columns:1fr}}
.file-dropzone{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:28px;border:2px dashed var(--border);border-radius:14px;background:#fafbfd;
cursor:pointer;transition:all .25s ease;text-align:center;
}
.file-dropzone:hover{border-color:var(--primary);background:#fff5f6}
.file-dropzone input{display:none}
.file-dropzone i{font-size:32px;color:var(--primary);margin-bottom:4px}
.file-dropzone small{color:var(--muted);font-size:12px}
.dropzone-preview{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.dropzone-preview .thumb{width:88px;height:88px;border-radius:12px;overflow:hidden;border:2px solid var(--border);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.dropzone-preview .thumb img{width:100%;height:100%;object-fit:cover}
.tag-input-wrap{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border:2px solid var(--border);border-radius:12px;background:#fafbfd;align-items:center}
.tag-input-wrap:focus-within{border-color:var(--primary);background:#fff;box-shadow:var(--ring)}
.tag-input-wrap input{flex:1;min-width:160px;border:0;background:transparent;outline:none;font-size:14px;padding:4px}
.tag-input-wrap .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--grad-primary);color:#fff;font-size:12px;font-weight:600}
.tag-input-wrap .chip button{background:none;border:0;color:rgba(255,255,255,.8);cursor:pointer;font-size:15px;line-height:1;padding:0}
.tag-input-wrap .chip button:hover{color:#fff}
.review-box{margin-top:16px;padding:20px;border-radius:14px;background:linear-gradient(135deg,#fff5f6,#fff);border:1px dashed rgba(230,57,70,.3)}
.review-box h4{margin:0 0 10px;color:var(--primary);font-size:14px;display:flex;align-items:center;gap:8px}
.review-box p{margin:0 0 6px;font-size:13px}
.review-box .muted{color:var(--muted)}
.wizard-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid var(--border)}
.btn-next,.wizard-nav .btn-primary{
background:var(--grad-primary);color:#fff;border:0;padding:12px 22px;border-radius:12px;font-weight:700;cursor:pointer;
box-shadow:0 8px 22px rgba(230,57,70,.35);transition:all .25s ease;display:inline-flex;align-items:center;gap:8px;font-size:14px;
}
.btn-next:hover:not(:disabled),.wizard-nav .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(230,57,70,.5)}
.btn-next:disabled{background:#cfd4db;box-shadow:none;cursor:not-allowed;opacity:.7}
.btn-back{padding:12px 22px;border-radius:12px;border:2px solid var(--border);background:#fff;color:var(--secondary);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s ease}
.btn-back:hover{border-color:var(--secondary);background:#f8f9fb}
/* breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:8px;padding:16px 0;font-size:13px;color:var(--muted);flex-wrap:wrap}
.breadcrumb a{color:var(--muted);font-weight:500}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb span{display:inline-flex;align-items:center;gap:8px}
.breadcrumb span::before{content:"/";color:var(--muted);opacity:.5}
/* Generic alert polish */
.alert{padding:12px 16px;border-radius:12px;font-size:13.5px;margin:10px 0;display:flex;align-items:flex-start;gap:8px;border:1px solid transparent}
.alert i{flex-shrink:0;margin-top:2px}
.alert-success{background:#dcfce7;color:#166534;border-color:#bbf7d0}
.alert-error,.alert-danger{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.alert-warning{background:#fef3c7;color:#92400e;border-color:#fde68a}
.alert-info{background:#dbeafe;color:#1e40af;border-color:#bfdbfe}
/* Floating theme + to-top buttons */
.theme-toggle,.to-top{
position:fixed;right:20px;z-index:80;
width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
background:var(--grad-primary);color:#fff;
box-shadow:0 10px 30px rgba(230,57,70,.45);
display:inline-flex;align-items:center;justify-content:center;font-size:16px;
transition:all .25s ease;
}
.theme-toggle{bottom:80px}
.to-top{bottom:20px;opacity:0;pointer-events:none;transform:translateY(20px)}
.to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.theme-toggle:hover,.to-top:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 14px 38px rgba(230,57,70,.6)}
/* ==========================================================
PRO AUTH — Centered, premium, top-tier membership flow
========================================================== */
.pro-auth{
min-height:calc(100vh - 100px);
position:relative;display:flex;align-items:center;justify-content:center;
padding:50px 20px 70px;overflow:hidden;
background:
radial-gradient(circle at 0% 0%, rgba(230,57,70,.08), transparent 45%),
radial-gradient(circle at 100% 100%, rgba(29,53,87,.08), transparent 45%),
linear-gradient(180deg,#f8f9fb 0%,#ffffff 100%);
}
.pro-auth-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.pro-auth-bg .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.35}
.pro-auth-bg .o1{width:400px;height:400px;background:#e63946;top:-150px;left:-100px;animation:orbFloat 14s ease-in-out infinite}
.pro-auth-bg .o2{width:320px;height:320px;background:#3498db;bottom:-120px;right:-80px;animation:orbFloat 18s ease-in-out infinite reverse}
.pro-auth-bg .o3{width:240px;height:240px;background:#f39c12;top:40%;right:10%;animation:orbFloat 22s ease-in-out infinite;opacity:.18}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}
.pro-auth-container{position:relative;z-index:1;width:100%;max-width:560px}
.pro-auth-card{
background:#fff;border-radius:24px;padding:40px 44px 34px;
box-shadow:
0 1px 2px rgba(0,0,0,.04),
0 8px 20px rgba(0,0,0,.06),
0 30px 80px -20px rgba(29,53,87,.25);
border:1px solid rgba(230,234,240,.8);
position:relative;
}
.pro-auth-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:24px 24px 0 0;
background:linear-gradient(90deg,#e63946,#f39c12,#3498db,#e63946);
background-size:200% 100%;
animation:headerSheen 6s linear infinite;
}
.pro-auth-sm{max-width:460px}
.pa-head{text-align:center;margin-bottom:22px}
.pa-logo{display:inline-flex;margin-bottom:14px}
.pa-logo .logo-icon{
width:56px;height:56px;border-radius:16px;
background:var(--grad-primary);color:#fff;font-weight:900;font-size:28px;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 14px 36px rgba(230,57,70,.4);
}
.pa-head h1{font-size:26px;color:var(--secondary) !important;margin:0 0 6px;letter-spacing:-.5px;font-weight:800}
.pa-head p{color:var(--text-light);font-size:14px;margin:0 auto;max-width:420px;line-height:1.6}
.pa-head p strong{color:var(--secondary)}
.pa-social{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.pro-auth-sm .pa-social{grid-template-columns:repeat(3,1fr)}
.pa-social-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 14px;border:1.5px solid var(--border);border-radius:12px;
background:#fff;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text);
transition:all .2s ease;font-family:inherit;
}
.pa-social-btn:hover{border-color:var(--secondary);transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.08);background:#fafbfd}
.pa-social-btn svg{flex-shrink:0}
.pa-social-btn i{font-size:16px}
.pa-divider{text-align:center;margin:20px 0;position:relative}
.pa-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border)}
.pa-divider span{position:relative;background:#fff;padding:0 14px;color:var(--muted);font-size:12px;font-weight:500}
.pa-form{margin:0}
.pa-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.pa-row{grid-template-columns:1fr}}
.pa-field{margin-bottom:14px}
.pa-field label{
display:flex;justify-content:space-between;align-items:center;
font-size:12.5px;font-weight:600;color:var(--secondary);margin-bottom:6px;
}
.pa-field label .req{color:var(--primary);margin-left:2px}
.pa-field label .pa-opt{color:var(--muted);font-weight:400;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.pa-fgp{color:var(--primary);font-size:12px;font-weight:600}
.pa-fgp:hover{text-decoration:underline}
.pa-input{position:relative}
.pa-input > i:first-child{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:var(--muted);font-size:13px;pointer-events:none;z-index:2;transition:color .2s ease;
}
.pa-input input{
width:100%;padding:13px 14px 13px 40px;
border:1.5px solid var(--border);border-radius:11px;
font-size:14px;background:#fafbfd;transition:all .2s ease;color:var(--text);
font-family:inherit;
}
.pa-input input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(230,57,70,.1)}
.pa-input:focus-within > i:first-child{color:var(--primary)}
.pa-eye{
position:absolute;right:8px;top:50%;transform:translateY(-50%);
background:none;border:0;color:var(--muted);cursor:pointer;
width:32px;height:32px;border-radius:8px;font-size:13px;transition:all .2s ease;
}
.pa-eye:hover{background:#f3f5f9;color:var(--primary)}
.pa-phone{
display:flex;align-items:stretch;
border:1.5px solid var(--border);border-radius:11px;background:#fafbfd;
transition:all .2s ease;overflow:hidden;
}
.pa-phone:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px rgba(230,57,70,.1)}
.pa-phone-flag{
display:flex;align-items:center;gap:6px;padding:0 12px;
background:#f3f5f9;border-right:1.5px solid var(--border);
font-size:13px;font-weight:600;color:var(--secondary);
}
.pa-phone-flag .flag{font-size:16px}
.pa-phone input{flex:1;border:0;background:transparent;padding:13px 14px;font-size:14px;outline:none;font-family:inherit}
.pa-hint{font-size:11.5px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px;line-height:1.4}
.pa-hint i{color:var(--success);font-size:11px}
.pa-strength{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.pa-strength span{height:4px;border-radius:2px;background:var(--border);transition:background .3s ease}
.pa-check{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:13px;line-height:1.5;color:var(--text-light);cursor:pointer}
.pa-check input[type=checkbox]{width:18px;height:18px;margin-top:1px;accent-color:var(--primary);flex-shrink:0;cursor:pointer}
.pa-check a{color:var(--primary);font-weight:600}
.pa-check a:hover{text-decoration:underline}
.pa-check-soft{font-size:12.5px;color:var(--muted)}
.pa-submit{
width:100%;padding:14px;border:0;border-radius:12px;
background:var(--grad-primary);color:#fff;font-weight:700;font-size:15px;
cursor:pointer;margin:10px 0 8px;font-family:inherit;
display:inline-flex;align-items:center;justify-content:center;gap:10px;
box-shadow:0 10px 28px rgba(230,57,70,.35),inset 0 1px 0 rgba(255,255,255,.2);
transition:all .25s cubic-bezier(.4,0,.2,1);
position:relative;overflow:hidden;
}
.pa-submit::before{
content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
transition:left .6s ease;
}
.pa-submit:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(230,57,70,.5)}
.pa-submit:hover::before{left:100%}
.pa-footer{text-align:center;font-size:13px;color:var(--muted);margin-top:14px}
.pa-footer a{color:var(--primary);font-weight:700}
.pa-footer a:hover{text-decoration:underline}
.pa-trust{
display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
margin-top:22px;padding-top:18px;border-top:1px solid var(--border);
}
.pa-trust span{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;color:var(--muted);font-weight:500;
}
.pa-trust i{color:var(--success);font-size:12px}
/* Kill legacy split layout if any page still uses it */
.auth-wrap{display:block !important;grid-template-columns:1fr !important}
.auth-side{display:none !important}
.auth-form-side{display:block !important;padding:0 !important;background:transparent !important}
@media(max-width:520px){
.pro-auth-card{padding:28px 22px 24px;border-radius:18px}
.pa-head h1{font-size:22px}
.pro-auth-sm .pa-social{grid-template-columns:1fr}
}
/* ==========================================================
CATEGORIES PAGE — Pro layout
========================================================== */
.cats-page{background:linear-gradient(180deg,#f8f9fb,#ffffff)}
.cats-hero{
position:relative;padding:60px 0 50px;overflow:hidden;
background:linear-gradient(135deg,#0f1a2d 0%,#1d3557 55%,#2d5a8e 100%);
color:#fff;margin-bottom:30px;
}
.cats-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cats-hero-bg .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.45}
.cats-hero-bg .o1{width:420px;height:420px;background:#e63946;top:-140px;left:-80px;animation:orbFloat 15s ease-in-out infinite}
.cats-hero-bg .o2{width:340px;height:340px;background:#3498db;bottom:-120px;right:-60px;animation:orbFloat 18s ease-in-out infinite reverse}
.cats-hero-bg .o3{width:220px;height:220px;background:#f39c12;top:30%;right:30%;opacity:.25;animation:orbFloat 22s ease-in-out infinite}
.cats-hero-bg .grid-pattern{
position:absolute;inset:0;opacity:.07;
background-image:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px);
background-size:50px 50px;
mask-image:radial-gradient(circle at center,#000 30%,transparent 75%);
-webkit-mask-image:radial-gradient(circle at center,#000 30%,transparent 75%);
}
.cats-hero-inner{position:relative;z-index:1;text-align:center;max-width:780px;margin:0 auto}
.cats-hero .kicker{
display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
border-radius:999px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
margin-bottom:14px;backdrop-filter:blur(8px);
}
.cats-hero .kicker i{color:#f39c12}
.cats-hero h1{font-size:40px;line-height:1.1;color:#fff !important;margin:0 0 12px;letter-spacing:-1px;font-weight:800}
.cats-hero h1 .grad{background:linear-gradient(135deg,#ff6b7a,#f39c12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cats-hero p{color:rgba(255,255,255,.8);font-size:15px;line-height:1.6;margin:0 auto 26px;max-width:620px}
.cats-hero p strong{color:#fff}
.cats-search{
position:relative;max-width:600px;margin:0 auto 24px;
display:flex;align-items:center;gap:8px;
background:rgba(255,255,255,.1);padding:6px;border-radius:14px;
border:1px solid rgba(255,255,255,.15);backdrop-filter:blur(10px);
}
.cats-search > i{position:absolute;left:22px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.6);pointer-events:none}
.cats-search input{flex:1;padding:13px 16px 13px 42px;border:0;background:transparent;color:#fff;font-size:14px;outline:none}
.cats-search input::placeholder{color:rgba(255,255,255,.5)}
.cats-search button{padding:12px 24px;border:0;border-radius:10px;background:var(--grad-primary);color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(230,57,70,.4)}
.cats-search button:hover{transform:translateY(-2px)}
.cats-clear{position:absolute;right:90px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;z-index:2}
.cats-clear:hover{background:rgba(255,255,255,.22);color:#fff}
.cats-stats{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:640px;margin:0 auto}
.cats-stats .cs{
flex:1;min-width:130px;padding:16px 12px;border-radius:14px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);
text-align:center;transition:all .25s ease;
}
.cats-stats .cs:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.cats-stats .n{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px}
.cats-stats .l{font-size:11.5px;color:rgba(255,255,255,.65);margin-top:4px;text-transform:uppercase;letter-spacing:1px}
.cats-stats .l i{margin-right:4px;color:#f39c12}
/* Toolbar */
.cats-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:24px 0 18px;flex-wrap:wrap}
.cats-toolbar h2{font-size:20px;color:var(--secondary);margin:0;display:flex;align-items:center;gap:10px}
.cats-toolbar h2 i{color:var(--primary)}
.cats-sort{display:flex;gap:6px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:4px}
.cs-btn{
padding:8px 14px;border:0;background:transparent;cursor:pointer;border-radius:8px;
font-size:13px;font-weight:600;color:var(--text-light);display:inline-flex;align-items:center;gap:6px;
transition:all .2s ease;font-family:inherit;
}
.cs-btn:hover{color:var(--primary)}
.cs-btn.active{background:var(--grad-primary);color:#fff;box-shadow:0 4px 12px rgba(230,57,70,.35)}
/* Grid v3 */
.cats-grid-v3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;margin-bottom:40px}
.cat-card-pro{
background:#fff;border-radius:18px;border:1px solid var(--border);
overflow:hidden;transition:all .3s ease;position:relative;
box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.cat-card-pro::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,var(--g1),var(--g2));
opacity:.8;
}
.cat-card-pro:hover{transform:translateY(-6px);box-shadow:0 20px 40px -10px rgba(0,0,0,.15);border-color:transparent}
.cat-card-pro .cc-main{display:block;padding:22px;color:inherit}
.cc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cc-icon{
width:52px;height:52px;border-radius:14px;
background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:22px;
box-shadow:0 10px 24px -6px var(--g1);
}
.cc-badge{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:999px;
background:rgba(230,57,70,.1);color:var(--primary);
font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
}
.cat-card-pro h3{margin:0 0 6px;font-size:17px;color:var(--secondary);font-weight:700}
.cat-card-pro:hover h3{color:var(--primary)}
.cc-desc{font-size:12.5px;color:var(--muted);margin:0 0 14px;line-height:1.5}
.cc-meta{display:flex;gap:14px;font-size:12px;color:var(--text-light);margin-bottom:12px;flex-wrap:wrap}
.cc-mi{display:inline-flex;align-items:center;gap:5px}
.cc-mi i{color:var(--g1);font-size:11px}
.cc-bar{position:relative;height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin-top:4px}
.cc-bar-fill{height:100%;background:linear-gradient(90deg,var(--g1),var(--g2));border-radius:3px;transition:width .6s ease}
.cc-bar-label{display:block;font-size:11px;color:var(--muted);margin-top:6px;font-weight:500}
.cc-subs{padding:0 16px 16px;display:flex;flex-direction:column;gap:4px;border-top:1px dashed var(--border);margin:4px 6px 0}
.cc-sub{
display:flex;align-items:center;gap:8px;padding:8px 10px;
border-radius:8px;font-size:12.5px;color:var(--text-light);
transition:all .2s ease;
}
.cc-sub:hover{background:var(--bg);color:var(--secondary);transform:translateX(3px)}
.cc-sub i{width:14px;text-align:center;color:var(--g1);font-size:11px}
.cc-sub-n{margin-left:auto;font-size:10.5px;color:var(--muted);background:var(--bg);padding:1px 8px;border-radius:999px;font-weight:600}
.cc-sub-more{color:var(--primary);font-weight:700;justify-content:space-between}
.cc-sub-more i{color:var(--primary)}
/* Empty + CTA */
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state i{font-size:56px;opacity:.25;margin-bottom:14px;display:block;color:var(--primary)}
.empty-state h3{color:var(--secondary);margin:0 0 8px}
.empty-state p{margin:0 0 18px}
.cats-cta{
margin:30px 0 60px;padding:26px 32px;border-radius:20px;
background:linear-gradient(135deg,#fff5f6 0%,#fff 100%);
border:1px dashed rgba(230,57,70,.35);
display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.cats-cta h3{margin:0 0 4px;color:var(--secondary);font-size:18px}
.cats-cta h3 i{color:var(--primary);margin-right:6px}
.cats-cta p{margin:0;color:var(--text-light);font-size:13.5px}
.cats-cta .btn{background:var(--grad-primary);color:#fff;border:0;padding:13px 22px;border-radius:12px;font-weight:700;box-shadow:0 10px 24px rgba(230,57,70,.35)}
.cats-cta .btn:hover{transform:translateY(-2px)}
/* ==========================================================
COMPLAINT-NEW — Premium wizard w/ sidebar
========================================================== */
.cn-page{background:linear-gradient(180deg,#f8f9fb,#fff)}
.cn-hero{
position:relative;padding:50px 0 40px;overflow:hidden;margin-bottom:10px;
background:linear-gradient(135deg,#1a1a2e 0%,#16213e 55%,#0f3460 100%);
color:#fff;
}
.cn-hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cn-hero-bg .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.4}
.cn-hero-bg .o1{width:360px;height:360px;background:#e63946;top:-130px;left:-80px;animation:orbFloat 14s ease-in-out infinite}
.cn-hero-bg .o2{width:280px;height:280px;background:#f39c12;bottom:-100px;right:-60px;animation:orbFloat 18s ease-in-out infinite reverse}
.cn-hero-inner{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto}
.cn-hero .kicker{
display:inline-flex;align-items:center;gap:6px;padding:6px 14px;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
border-radius:999px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
margin-bottom:12px;
}
.cn-hero .kicker i{color:#ff6b7a}
.cn-hero h1{font-size:34px;color:#fff !important;margin:0 0 10px;letter-spacing:-.5px;font-weight:800}
.cn-hero h1 .grad{background:linear-gradient(135deg,#ff6b7a,#f39c12);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cn-hero p{color:rgba(255,255,255,.78);font-size:15px;margin:0 auto 18px;max-width:580px;line-height:1.6}
.cn-hero p strong{color:#f39c12}
.cn-trust{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cn-trust span{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:12px;color:rgba(255,255,255,.8)}
.cn-trust span i{color:#2ecc71}
.cn-layout{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:flex-start;margin-bottom:60px}
@media(max-width:980px){.cn-layout{grid-template-columns:1fr}}
/* Severity picker */
.severity-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px}
@media(max-width:640px){.severity-picker{grid-template-columns:repeat(2,1fr)}}
.severity-picker .sev input{display:none}
.severity-picker .sev span{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:14px 10px;border:2px solid var(--border);border-radius:14px;
background:#fff;cursor:pointer;text-align:center;transition:all .25s ease;
}
.severity-picker .sev span i{font-size:22px;color:var(--muted);transition:color .25s ease}
.severity-picker .sev span strong{font-size:13px;color:var(--secondary)}
.severity-picker .sev span small{font-size:11px;color:var(--muted)}
.severity-picker .sev:hover span{border-color:var(--primary);transform:translateY(-2px)}
.severity-picker .sev[data-level="1"] input:checked + span{border-color:#2ecc71;background:#ecfdf5}
.severity-picker .sev[data-level="1"] input:checked + span i{color:#2ecc71}
.severity-picker .sev[data-level="2"] input:checked + span{border-color:#f39c12;background:#fffbeb}
.severity-picker .sev[data-level="2"] input:checked + span i{color:#f39c12}
.severity-picker .sev[data-level="3"] input:checked + span{border-color:#e67e22;background:#fff7ed}
.severity-picker .sev[data-level="3"] input:checked + span i{color:#e67e22}
.severity-picker .sev[data-level="4"] input:checked + span{border-color:#e74c3c;background:#fef2f2;box-shadow:0 6px 18px rgba(231,76,60,.2)}
.severity-picker .sev[data-level="4"] input:checked + span i{color:#e74c3c}
/* Prompts */
.cn-prompts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 10px;font-size:12px;color:var(--muted)}
.cn-prompts > span{margin-right:4px;font-weight:600}
.cn-prompt{
padding:6px 12px;border:1px solid var(--border);border-radius:999px;
background:#fff;cursor:pointer;font-size:12px;color:var(--secondary);font-weight:500;
transition:all .2s ease;font-family:inherit;
}
.cn-prompt:hover{background:var(--grad-primary);border-color:transparent;color:#fff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(230,57,70,.3)}
/* Hint */
.cn-hint{font-size:12px;color:var(--muted);margin-top:6px;display:flex;align-items:center;gap:6px;transition:all .2s ease}
.cn-hint i{color:var(--primary)}
/* Quality meter */
.quality-meter{margin-top:12px;padding:14px;border-radius:12px;background:linear-gradient(135deg,#fafbfd,#fff);border:1px solid var(--border)}
.qm-label{font-size:13px;color:var(--text-light);margin-bottom:8px}
.qm-label strong{color:var(--primary);font-weight:700}
.qm-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:10px}
.qm-fill{height:100%;width:0;background:var(--grad-primary);border-radius:3px;transition:width .4s ease,background .4s ease}
.qm-tips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
@media(max-width:560px){.qm-tips{grid-template-columns:1fr}}
.qm-tips li{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;transition:all .2s ease}
.qm-tips li i{font-size:11px;color:var(--muted)}
.qm-tips li.done{color:var(--success)}
.qm-tips li.done i{color:var(--success)}
/* Expect picker */
.expect-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
@media(max-width:640px){.expect-picker{grid-template-columns:repeat(2,1fr)}}
.expect-picker .exp input{display:none}
.expect-picker .exp span{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;
background:#fff;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-light);
transition:all .2s ease;
}
.expect-picker .exp span i{color:var(--muted);transition:color .2s ease}
.expect-picker .exp:hover span{border-color:var(--primary);color:var(--secondary)}
.expect-picker .exp input:checked + span{background:linear-gradient(135deg,#fff5f6,#fff);border-color:var(--primary);color:var(--primary);box-shadow:0 6px 14px rgba(230,57,70,.15)}
.expect-picker .exp input:checked + span i{color:var(--primary)}
/* Sidebar */
.cn-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:100px}
@media(max-width:980px){.cn-sidebar{position:static}}
.cn-side-card{
background:#fff;border-radius:16px;padding:20px;border:1px solid var(--border);
box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.cn-side-card h4{margin:0 0 12px;font-size:14px;color:var(--secondary);display:flex;align-items:center;gap:8px}
.cn-side-card h4 i{color:var(--primary)}
.cn-tips{position:relative;overflow:hidden;background:linear-gradient(135deg,#fff 0%,#fff5f6 100%)}
.cn-tips::before{content:"";position:absolute;top:0;right:0;width:120px;height:120px;background:radial-gradient(circle,rgba(230,57,70,.12),transparent 70%);pointer-events:none}
.cn-side-icon{width:42px;height:42px;border-radius:12px;background:var(--grad-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:10px;box-shadow:0 8px 20px rgba(230,57,70,.35)}
.cn-tips ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cn-tips ul li{font-size:12.5px;color:var(--text-light);display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.cn-tips ul li i{flex-shrink:0;margin-top:3px;width:14px;text-align:center}
.cn-tips ul li i.fa-check{color:var(--success)}
.cn-tips ul li i.fa-times{color:var(--danger)}
.cn-tips ul li strong{color:var(--secondary)}
/* Live Preview card */
.cn-preview-card{padding:14px;border-radius:12px;background:linear-gradient(135deg,#fafbfd,#fff);border:1px dashed var(--border)}
.cpc-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cpc-avatar{width:34px;height:34px;border-radius:50%;background:var(--grad-primary);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.cpc-user{font-weight:700;font-size:13px;color:var(--secondary)}
.cpc-meta{font-size:11px;color:var(--muted)}
.cpc-title{font-weight:700;color:var(--secondary);font-size:14px;margin-bottom:6px;line-height:1.35}
.cpc-body{font-size:12.5px;color:var(--text-light);line-height:1.5;margin-bottom:10px;min-height:40px}
.cpc-foot{display:flex;gap:8px}
.cpc-sev{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.cpc-sev.sev-1{background:#ecfdf5;color:#059669}
.cpc-sev.sev-2{background:#fffbeb;color:#d97706}
.cpc-sev.sev-3{background:#fff7ed;color:#ea580c}
.cpc-sev.sev-4{background:#fef2f2;color:#dc2626}
/* Stats card */
.cn-st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.cn-st-grid > div{padding:10px 6px;background:var(--bg);border-radius:10px}
.cn-st-grid strong{display:block;font-size:18px;color:var(--primary);font-weight:800;letter-spacing:-.5px}
.cn-st-grid span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:2px;display:block}
/* ==========================================================
HEADER V2 — Mega menu, news ticker, extras
========================================================== */
/* Categories bar — reshape with mega + extras */
.categories-bar{padding:8px 0 !important;position:relative;z-index:30}
.categories-bar .cats{align-items:center;overflow:visible !important}
/* Yatay scroll sadece chip'lerde — mega panel kırpılmasın */
.categories-bar .cats-scroll{display:flex;gap:8px;align-items:center;overflow-x:auto;overflow-y:visible;flex:1;min-width:0;scrollbar-width:none;-ms-overflow-style:none;padding:2px 0}
.categories-bar .cats-scroll::-webkit-scrollbar{display:none}
/* Mega dropdown */
.cat-mega{position:relative}
.cat-mega-btn{
display:inline-flex;align-items:center;gap:8px;
padding:9px 16px;border:0;cursor:pointer;font-weight:700;font-size:13px;
color:#fff !important;background:var(--grad-royal) !important;
border-radius:999px;box-shadow:0 6px 16px rgba(29,53,87,.25);
font-family:inherit;transition:all .2s ease;
}
.cat-mega-btn::before{display:none !important}
.cat-mega-btn .ca-down{font-size:10px;transition:transform .3s ease;margin-left:2px}
.cat-mega-btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(29,53,87,.4)}
.cat-mega.open .cat-mega-btn{box-shadow:0 8px 20px rgba(230,57,70,.3);background:var(--grad-primary) !important}
.cat-mega.open .ca-down{transform:rotate(-180deg)}
.cat-mega-panel{
position:absolute;top:calc(100% + 10px);left:0;z-index:200;
width:640px;max-width:95vw;padding:20px;border-radius:18px;
background:#fff;border:1px solid var(--border);
box-shadow:0 30px 80px -20px rgba(29,53,87,.35);
opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
transition:all .25s ease;
}
.cat-mega.open .cat-mega-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.cat-mega-panel::before{
content:"";position:absolute;top:-6px;left:24px;width:12px;height:12px;
background:#fff;transform:rotate(45deg);border-left:1px solid var(--border);border-top:1px solid var(--border);
}
.cmp-head{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cmp-head i{color:var(--primary)}
/* Gradient banner header */
.cmp-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-20px -20px 16px;padding:16px 20px;border-radius:18px 18px 0 0;background:linear-gradient(120deg,#1d3557,#2d5a8e 55%,#e63946);color:#fff;position:relative;overflow:hidden}
.cmp-banner::after{content:"";position:absolute;right:-30px;top:-40px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.08)}
.cmp-banner-txt{display:flex;flex-direction:column;gap:3px;position:relative;z-index:1}
.cmp-banner-txt strong{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.cmp-banner-txt span{font-size:12px;opacity:.85}
.cmp-banner-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:#fff;color:#e63946;font-size:12.5px;font-weight:800;white-space:nowrap;position:relative;z-index:1;transition:transform .2s ease,box-shadow .2s ease}
.cmp-banner-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.25)}
@media(max-width:640px){.cmp-banner-cta{display:none}}
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media(max-width:640px){.cmp-grid{grid-template-columns:repeat(2,1fr)}.cat-mega-panel{width:95vw}}
.cmp-item{
display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
transition:all .2s ease;color:var(--text);position:relative;overflow:hidden;
}
.cmp-item::before{content:"";position:absolute;inset:0;background:var(--cc);opacity:0;transition:opacity .2s ease;z-index:0}
.cmp-item > *{position:relative;z-index:1}
.cmp-item:hover{color:#fff;transform:translateX(2px)}
.cmp-item:hover::before{opacity:1}
.cmp-icon{width:32px;height:32px;border-radius:10px;background:var(--bg);display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--secondary);flex-shrink:0;transition:all .2s ease}
.cmp-item:hover .cmp-icon{background:rgba(255,255,255,.2);color:#fff}
.cmp-name{flex:1;font-size:13px;font-weight:600;line-height:1.2}
.cmp-num{font-size:11px;color:var(--muted);background:var(--bg);padding:2px 8px;border-radius:999px;font-weight:700;transition:all .2s ease}
.cmp-item:hover .cmp-num{background:rgba(255,255,255,.25);color:#fff}
.cmp-all{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;padding:12px;border-radius:12px;background:var(--bg);font-size:13px;font-weight:700;color:var(--primary);transition:all .2s ease}
.cmp-all:hover{background:var(--grad-primary);color:#fff}
/* Extras right side */
.cats-extras{margin-left:auto;display:flex;gap:4px;align-items:center}
@media(max-width:900px){.cats-extras{display:none}}
.ce-link{
display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
border-radius:8px;font-size:12.5px;font-weight:600;color:var(--text-light);
transition:all .2s ease;
}
.ce-link:hover{background:var(--bg);color:var(--primary)}
.ce-link i{font-size:11px;color:var(--muted)}
.ce-link:hover i{color:var(--primary)}
/* News ticker */
.news-ticker{
background:linear-gradient(90deg,#0f1a2d 0%,#1d3557 50%,#0f1a2d 100%);
color:#c7d0de;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);
position:relative;overflow:hidden;
}
.news-ticker::before{content:"";position:absolute;top:0;left:-50%;bottom:0;width:50%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);animation:topbarShine 8s linear infinite}
.nt-inner{display:flex;align-items:center;gap:18px}
.nt-label{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;background:var(--grad-primary);color:#fff;
font-size:10.5px;font-weight:800;letter-spacing:1px;flex-shrink:0;
box-shadow:0 4px 12px rgba(230,57,70,.4);
}
.nt-label .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:livePulse 2s ease-out infinite}
.nt-stats{display:flex;gap:16px;font-size:12px;flex-shrink:0}
.nt-stats span{display:inline-flex;align-items:center;gap:5px;color:rgba(255,255,255,.75)}
.nt-stats strong{color:#fff;font-weight:800}
.nt-stats i{color:#f39c12;font-size:11px}
@media(max-width:760px){.nt-stats{display:none}}
.nt-scroll{flex:1;overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.nt-scroll-track{display:flex;gap:38px;white-space:nowrap;animation:tickerScroll 50s linear infinite;width:max-content}
.nt-scroll:hover .nt-scroll-track{animation-play-state:paused}
.nt-item{font-size:12px;color:rgba(255,255,255,.65);display:inline-flex;align-items:center;gap:8px}
.nt-item i{color:#ff6b7a;font-size:10px}
.nt-item strong{color:#fff;font-weight:700}
@keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* ==========================================================
SLIDER V2 — Side rail, scroll hint, richer visuals
========================================================== */
.main-slider{min-height:560px;position:relative}
.main-slider .slides{position:relative}
/* Side rail with numbered steps */
.slide-rail{
position:absolute;right:40px;top:50%;transform:translateY(-50%);z-index:8;
display:flex;flex-direction:column;gap:12px;pointer-events:none;
}
@media(max-width:1100px){.slide-rail{display:none}}
.slide-rail .sr-item{
pointer-events:auto;cursor:pointer;
display:flex;align-items:center;gap:10px;padding:10px 14px;
border-radius:12px;background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
color:rgba(255,255,255,.55);font-size:12px;font-weight:600;
transition:all .3s cubic-bezier(.4,0,.2,1);min-width:140px;
backdrop-filter:blur(8px);
}
.slide-rail .sr-item:hover{background:rgba(255,255,255,.1);color:#fff;transform:translateX(-4px)}
.slide-rail .sr-item.active{
background:var(--grad-primary);color:#fff;border-color:transparent;
box-shadow:0 14px 30px rgba(230,57,70,.5);transform:translateX(-8px);
}
.slide-rail .sr-num{font-weight:800;font-size:11px;opacity:.7;letter-spacing:1px}
.slide-rail .sr-item.active .sr-num{opacity:1}
.slide-rail .sr-title{font-size:13px;font-weight:700}
/* Scroll hint */
.scroll-hint{
position:absolute;bottom:20px;left:50%;transform:translateX(-50%);z-index:8;
color:rgba(255,255,255,.6);font-size:11px;letter-spacing:2px;text-transform:uppercase;
display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:600;
pointer-events:none;
}
.scroll-hint span{
width:24px;height:40px;border:2px solid rgba(255,255,255,.4);border-radius:12px;
position:relative;
}
.scroll-hint span::before{
content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
width:4px;height:8px;background:#fff;border-radius:2px;
animation:scrollWheel 2s ease-in-out infinite;
}
@keyframes scrollWheel{0%,100%{transform:translate(-50%,0);opacity:1}50%{transform:translate(-50%,10px);opacity:.3}}
@media(max-width:760px){.scroll-hint{display:none}}
/* Ken-burns background on slide */
.main-slider .slide-bg{animation:kenBurns 20s ease-in-out infinite alternate}
@keyframes kenBurns{from{transform:scale(1)}to{transform:scale(1.1)}}
/* Enhanced dots — segmented progress */
.main-slider .dots{
position:absolute;bottom:30px;left:40px;z-index:8;
display:flex;gap:10px;
}
.main-slider .dots button{
width:40px;height:4px;border-radius:2px;border:0;cursor:pointer;
background:rgba(255,255,255,.25);transition:all .3s ease;position:relative;overflow:hidden;padding:0;
}
.main-slider .dots button.active{width:60px;background:rgba(255,255,255,.25)}
.main-slider .dots button.active::after{
content:"";position:absolute;inset:0;background:var(--grad-primary);
animation:dotFill 6s linear forwards;transform-origin:left;
}
@keyframes dotFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Arrows upgrade */
.main-slider .arrow{
position:absolute;top:50%;transform:translateY(-50%);z-index:7;
width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.08);color:#fff;backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,.12);font-size:16px;
transition:all .25s ease;
}
.main-slider .arrow.prev{left:20px}
.main-slider .arrow.next{right:20px}
@media(max-width:1100px){.main-slider .arrow.next{right:20px}}
.main-slider .arrow:hover{background:var(--grad-primary);border-color:transparent;transform:translateY(-50%) scale(1.1);box-shadow:0 10px 30px rgba(230,57,70,.5)}
/* Enhance live-pulse badge */
.main-slider .live-pulse{
top:26px !important;
background:rgba(0,0,0,.65) !important;border:1px solid rgba(255,255,255,.15) !important;
padding:8px 18px !important;font-size:12.5px !important;
}
.main-slider .live-pulse strong{color:#ff6b7a}
/* 3D tilt on visual cards */
.main-slider .slide-visual{perspective:1200px}
.main-slider .v-card{
transform-style:preserve-3d;
box-shadow:0 30px 70px rgba(0,0,0,.45) !important;
background:rgba(255,255,255,.98) !important;
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.6) !important;
transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s ease;
}
.main-slider .v-card.c1{transform:rotate(-5deg) rotateY(6deg)}
.main-slider .v-card.c2{transform:rotate(4deg) rotateY(-5deg)}
.main-slider .v-card.c3{transform:rotate(-3deg) rotateY(4deg)}
.main-slider .v-card:hover{transform:rotate(0) rotateY(0) scale(1.06);box-shadow:0 40px 90px rgba(0,0,0,.55) !important;z-index:5}
.main-slider .v-card::before{
content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
transition:left .6s ease;pointer-events:none;
}
.main-slider .v-card:hover::before{left:100%}
/* Slider text — bigger, more impact */
.main-slider .slide-text h2{font-size:50px !important;line-height:1.05 !important;font-weight:900 !important;letter-spacing:-1.5px !important}
@media(max-width:900px){.main-slider .slide-text h2{font-size:34px !important}}
.main-slider .slide-text .kicker{
background:rgba(255,255,255,.1) !important;
padding:8px 16px !important;font-size:12px !important;letter-spacing:1.5px !important;
}
.main-slider .slider-search{
box-shadow:0 20px 60px -10px rgba(0,0,0,.5);
border-color:rgba(255,255,255,.2) !important;
}
.main-slider .slider-search input{font-size:15px !important;padding:14px 18px !important}
.main-slider .slider-search button{padding:14px 26px !important;font-size:14px !important}
/* Quick-tags enhanced */
.main-slider .quick-tags a{
background:rgba(255,255,255,.1) !important;
border:1px solid rgba(255,255,255,.18) !important;
font-weight:600 !important;
transition:all .25s ease;
}
.main-slider .quick-tags a:hover{background:var(--grad-primary) !important;border-color:transparent !important;transform:translateY(-3px) scale(1.05);box-shadow:0 10px 24px rgba(230,57,70,.4)}
/* Slide CTAs premium */
.main-slider .slide-cta{
display:inline-flex;align-items:center;gap:8px;
padding:14px 24px;border-radius:12px;font-weight:700;font-size:14px;
background:var(--grad-primary);color:#fff !important;
box-shadow:0 14px 34px rgba(230,57,70,.45),inset 0 1px 0 rgba(255,255,255,.2);
transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;
}
.main-slider .slide-cta::before{
content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
transition:left .6s ease;
}
.main-slider .slide-cta:hover{transform:translateY(-3px);box-shadow:0 20px 48px rgba(230,57,70,.6)}
.main-slider .slide-cta:hover::before{left:100%}
.main-slider .slide-cta.ghost{
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
box-shadow:none;backdrop-filter:blur(10px);
}
.main-slider .slide-cta.ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4)}
/* Brand ring polish */
.main-slider .brand-ring .b-logo{
box-shadow:0 20px 40px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.1) !important;
transition:all .3s ease;
}
.main-slider .brand-ring .b-logo:hover{
transform:scale(1.15);
box-shadow:0 26px 50px rgba(230,57,70,.5),0 0 0 3px rgba(230,57,70,.5) !important;
z-index:2;
}
.main-slider .brand-ring .b-center{
box-shadow:inset 0 0 40px rgba(230,57,70,.2), 0 0 60px rgba(230,57,70,.3);
}
.main-slider .brand-ring .b-center .big{
background:linear-gradient(135deg,#fff,#ff9ba3);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* Testimonial stack polish */
.main-slider .testimonial{
background:rgba(255,255,255,.97) !important;
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.4) !important;
box-shadow:0 30px 70px rgba(0,0,0,.45) !important;
transition:transform .3s ease;
}
.main-slider .testimonial:hover{transform:scale(1.03) translateY(-4px)}
.main-slider .testimonial .stars{
color:#f39c12;letter-spacing:2px;font-size:16px;
text-shadow:0 2px 6px rgba(243,156,18,.3);
}
.main-slider .testimonial .q::before{
content:"“";font-size:40px;color:var(--primary);line-height:0;
position:absolute;top:16px;left:6px;opacity:.3;font-family:Georgia,serif;
}
.main-slider .user-stack{
background:rgba(255,255,255,.08) !important;
backdrop-filter:blur(10px);
}
/* Mobile slider */
@media(max-width:900px){
.main-slider{min-height:auto}
.main-slider .slide{min-height:auto !important;padding-bottom:70px}
.main-slider .slide-visual{display:none}
.main-slider .slide-inner{grid-template-columns:1fr !important;text-align:center}
.main-slider .slide-text p,.main-slider .slider-search,.main-slider .quick-tags{margin-left:auto;margin-right:auto}
.main-slider .dots{left:50% !important;transform:translateX(-50%);bottom:20px}
}
/* ==========================================================
FULL-BLEED SLIDER — extends behind transparent header
========================================================== */
body.has-full-slider{background:#0f1a2d}
.main-slider.full-bleed{
margin-top:-182px; /* topbar + navbar + cats + ticker */
padding-top:182px;
min-height:760px;
}
.main-slider.full-bleed .slide{min-height:760px}
.main-slider.full-bleed .slide-inner{padding-top:40px}
@media(max-width:900px){
.main-slider.full-bleed{margin-top:-160px;padding-top:160px;min-height:auto}
.main-slider.full-bleed .slide{min-height:auto}
}
/* Make header transparent over slider on home */
body.has-full-slider .site-header{background:transparent !important;box-shadow:none !important;border-bottom:1px solid rgba(255,255,255,.06)}
body.has-full-slider .site-header::before{z-index:5}
body.has-full-slider .topbar{background:transparent !important}
body.has-full-slider .topbar::after{display:none}
body.has-full-slider .navbar{background:transparent !important;border-bottom-color:rgba(255,255,255,.08) !important}
body.has-full-slider .navbar::after{display:none}
body.has-full-slider .logo{color:#fff}
body.has-full-slider .logo-text{color:#fff}
body.has-full-slider .search-box input{
background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) padding-box,
linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.15)) border-box !important;
color:#fff;
}
body.has-full-slider .search-box input::placeholder{color:rgba(255,255,255,.55)}
body.has-full-slider .search-box::before{color:rgba(255,255,255,.6)}
body.has-full-slider .icon-btn{background:rgba(255,255,255,.1);color:#fff}
body.has-full-slider .icon-btn:hover{background:var(--grad-primary)}
body.has-full-slider .user-menu-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
body.has-full-slider .user-menu-btn span{color:#fff}
/* Categories bar on full-bleed */
body.has-full-slider .categories-bar{background:rgba(0,0,0,.2) !important;border-bottom-color:rgba(255,255,255,.08) !important;backdrop-filter:blur(10px)}
body.has-full-slider .cat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12);color:#fff}
body.has-full-slider .ce-link{color:rgba(255,255,255,.75)}
body.has-full-slider .ce-link:hover{background:rgba(255,255,255,.1);color:#fff}
body.has-full-slider .ce-link i{color:rgba(255,255,255,.5)}
body.has-full-slider .cat-mega-btn{background:rgba(255,255,255,.12) !important;backdrop-filter:blur(8px)}
body.has-full-slider .news-ticker{background:rgba(0,0,0,.35) !important;backdrop-filter:blur(10px)}
/* Header scrolled state keeps solid look */
body.has-full-slider .site-header.scrolled{background:rgba(15,26,45,.95) !important;backdrop-filter:blur(20px);border-bottom-color:rgba(255,255,255,.08)}
body.has-full-slider .site-header.scrolled .topbar,body.has-full-slider .site-header.scrolled .navbar,body.has-full-slider .site-header.scrolled .categories-bar,body.has-full-slider .site-header.scrolled .news-ticker{background:transparent !important}
/* Login/Register button icons */
.btn-ghost,.btn-outline{display:inline-flex !important;align-items:center;gap:7px}
.btn-ghost{
padding:10px 16px;border-radius:10px;font-weight:600;font-size:13.5px;
color:var(--secondary);background:transparent;border:0;transition:all .2s ease;
}
.btn-ghost i{font-size:13px}
.btn-ghost:hover{background:var(--bg);color:var(--primary)}
.btn-outline{
padding:10px 18px;border-radius:10px;font-weight:700;font-size:13.5px;
background:var(--grad-primary);color:#fff !important;border:0;
box-shadow:0 6px 18px rgba(230,57,70,.35);transition:all .25s ease;
}
.btn-outline i{font-size:13px}
.btn-outline:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(230,57,70,.5);color:#fff}
body.has-full-slider .btn-ghost{color:rgba(255,255,255,.85)}
body.has-full-slider .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
/* Slide text starts higher */
.main-slider .slide-inner{align-items:flex-start !important;padding-top:60px !important}
/* ==========================================================
METRICS PANEL — premium stats replacement
========================================================== */
/* METRICS PANEL v2 — açık tema, borderless kartlar */
.metrics-panel{
position:relative;margin:30px auto 40px;max-width:1280px;
padding:0 16px;background:transparent;color:#0f172a;z-index:1;
}
.mp-bg,.mp-head,.mp-bottom{display:none !important}
.mp-inner{position:relative;z-index:1;padding:0 !important}
.mp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:960px){.mp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.mp-grid{grid-template-columns:1fr}}
.mp-card{
position:relative;padding:22px;border-radius:18px;
background:#fff;border:1px solid #eef0f3;overflow:hidden;
transition:all .28s cubic-bezier(.4,0,.2,1);
box-shadow:0 4px 14px -8px rgba(15,23,42,.08);
}
.mp-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:var(--mp-g,linear-gradient(90deg,#e63946,#ff6b7a));
}
.mp-card::after{
content:"";position:absolute;top:0;right:0;width:120px;height:120px;border-radius:50%;
background:var(--mp-g);opacity:.06;transform:translate(40%,-40%);
transition:.3s;
}
.mp-card.mp-c1{--mp-g:linear-gradient(135deg,#e63946,#ff6b7a);--mp-c:#e63946}
.mp-card.mp-c2{--mp-g:linear-gradient(135deg,#3498db,#6dd5fa);--mp-c:#3498db}
.mp-card.mp-c3{--mp-g:linear-gradient(135deg,#9b59b6,#e91e63);--mp-c:#9b59b6}
.mp-card.mp-c4{--mp-g:linear-gradient(135deg,#2ecc71,#1abc9c);--mp-c:#2ecc71}
.mp-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px -18px rgba(15,23,42,.2);border-color:transparent}
.mp-card:hover::after{opacity:.12;transform:translate(30%,-30%) scale(1.2)}
.mp-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;position:relative;z-index:2}
.mp-ico{
width:48px;height:48px;border-radius:14px;
background:var(--mp-g);color:#fff;
display:inline-flex;align-items:center;justify-content:center;font-size:19px;
box-shadow:0 10px 24px -8px var(--mp-c);
}
.mp-chip{
display:inline-flex;align-items:center;gap:4px;padding:5px 10px;
border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.3px;
background:#f3f5f8;color:#4b5563;border:1px solid #e5e7eb;
}
.mp-chip.up{background:#e6f9ee;color:#0f8a46;border-color:#c7f0d6}
.mp-chip i{font-size:9px}
.mp-num{
font-size:36px;font-weight:900;line-height:1;margin-bottom:6px;
color:#0f172a;letter-spacing:-1.2px;font-variant-numeric:tabular-nums;
position:relative;z-index:2;
}
.mp-lbl{font-size:13.5px;color:#6b7280;font-weight:600;margin-bottom:16px;position:relative;z-index:2}
.mp-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;position:relative;z-index:2}
.mp-sub{font-size:10.5px;color:#9ca3af;text-transform:uppercase;letter-spacing:1px;font-weight:700}
.mp-spark{width:110px;height:32px;display:block}
.mp-dots{display:flex;gap:3px;align-items:flex-end;height:28px}
.mp-dots span{width:4px;background:var(--mp-c,#3498db);border-radius:2px;animation:barBounce 1.4s ease-in-out infinite;opacity:.55}
.mp-dots span:nth-child(1){height:40%}
.mp-dots span:nth-child(2){height:70%}
.mp-dots span:nth-child(3){height:50%}
.mp-dots span:nth-child(4){height:90%}
.mp-dots span:nth-child(5){height:60%}
.mp-dots span:nth-child(6){height:80%}
.mp-dots span:nth-child(7){height:45%}
.mp-dots span:nth-child(8){height:75%}
.mp-dots span:nth-child(9){height:55%}
.mp-dots span:nth-child(10){height:85%}
@keyframes barBounce{0%,100%{transform:scaleY(.5);opacity:.35}50%{transform:scaleY(1);opacity:.85}}
.mp-avatars{display:flex;align-items:center}
.mp-avatars span{
width:28px;height:28px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
color:#fff;font-size:10.5px;font-weight:800;margin-left:-9px;
border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.mp-avatars span:first-child{margin-left:0}
.mp-avatars .more{background:#f3f5f8;color:#6b7280}
.mp-ring{position:relative;width:52px;height:52px}
.mp-ring svg{width:100%;height:100%}
.mp-ring-lbl{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:800;color:#0f8a46;letter-spacing:-.3px;
}
@media(max-width:640px){
.metrics-panel{margin:20px auto 30px;padding:0 12px}
.mp-num{font-size:28px}
.mp-ico{width:40px;height:40px;font-size:16px;border-radius:12px}
.mp-card{padding:18px}
}
/* =========================================================
SON ŞİKAYETLER — şikayetvar.com tarzı yatay kayan kartlar
========================================================= */
.sl-section{margin:40px 0 50px}
.sl-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.sl-left h2{font-size:26px;font-weight:900;margin:0 0 4px;color:#0f172a;letter-spacing:-.6px}
.sl-sub{font-size:13px;color:#6b7280;font-weight:500}
.sl-right{display:flex;align-items:center;gap:10px}
.sl-nav{
width:40px;height:40px;border-radius:50%;
background:#fff;border:1px solid #e5e7eb;color:#4b5563;
cursor:pointer;display:grid;place-items:center;
box-shadow:0 4px 10px -4px rgba(15,23,42,.1);
transition:.2s;font-size:13px;
}
.sl-nav:hover{background:#e63946;color:#fff;border-color:#e63946;box-shadow:0 6px 14px -4px rgba(230,57,70,.45);transform:translateY(-1px)}
.sl-all{
display:inline-flex;align-items:center;gap:6px;
padding:9px 16px;border-radius:999px;text-decoration:none;
background:#fff;border:1px solid #e5e7eb;color:#0f172a;font-weight:700;font-size:13px;
transition:.2s;
}
.sl-all:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.sl-scroll-wrap{position:relative;margin:0 -12px}
.sl-scroll{
display:flex;gap:18px;
padding:8px 12px 20px;
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;scroll-behavior:smooth;
scrollbar-width:none;
}
.sl-scroll::-webkit-scrollbar{display:none}
.sl-card{
flex:0 0 420px;max-width:420px;
min-height:220px;
display:flex;flex-direction:column;
padding:22px;border-radius:18px;
background:#fff;border:1px solid #eef0f3;
text-decoration:none;color:#0f172a;
box-shadow:0 6px 18px -10px rgba(15,23,42,.1);
transition:.28s cubic-bezier(.4,0,.2,1);
scroll-snap-align:start;
position:relative;overflow:hidden;
}
.sl-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 50px -22px rgba(15,23,42,.25);
border-color:transparent;
}
.sl-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sl-avatar{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:grid;place-items:center;overflow:hidden;
color:#fff;font-size:17px;font-weight:800;
box-shadow:0 4px 10px -3px rgba(15,23,42,.15);
}
.sl-avatar img{width:100%;height:100%;object-fit:cover}
.sl-meta{flex:1;min-width:0;display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sl-u-row{display:flex;flex-direction:column;gap:3px;min-width:0}
.sl-u-row strong{font-size:14px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-brand-link{
display:inline-flex;align-items:center;gap:5px;
font-size:12.5px;font-weight:700;color:#6c5ce7;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.sl-brand-link i{font-size:10px;opacity:.7}
.sl-v-row{
display:inline-flex;align-items:center;gap:5px;
font-size:12px;color:#6b7280;font-weight:600;
flex-shrink:0;
}
.sl-v-row i{font-size:10px}
.sl-title{
margin:0 0 14px;
font-size:17px;font-weight:800;line-height:1.35;color:#0f172a;
letter-spacing:-.2px;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;flex:1;
}
.sl-card:hover .sl-title{color:#e63946}
.sl-thumb{
width:100%;height:120px;border-radius:12px;overflow:hidden;
margin-bottom:14px;background:#f3f5f8;
}
.sl-thumb img{width:100%;height:100%;object-fit:cover;transition:.4s}
.sl-card:hover .sl-thumb img{transform:scale(1.05)}
.sl-foot{
display:flex;align-items:center;gap:14px;
padding-top:12px;border-top:1px solid #f1f2f5;
font-size:12px;color:#6b7280;font-weight:600;
margin-top:auto;
}
.sl-foot i{font-size:11px;opacity:.7}
.sl-time{display:inline-flex;align-items:center;gap:5px}
.sl-stat{display:inline-flex;align-items:center;gap:5px}
@media(max-width:640px){
.sl-card{flex:0 0 86%;max-width:86%;padding:18px}
.sl-left h2{font-size:20px}
.sl-thumb{height:100px}
.sl-nav{width:36px;height:36px}
}
/* =========================================================
KATEGORİLER (kt-) — görsel tabanlı modern kart grid
========================================================= */
.kt-section{margin:50px 0 60px}
.kt-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.kt-title-wrap h2{font-size:28px;font-weight:900;margin:0 0 6px;color:#0f172a;letter-spacing:-.6px}
.kt-title-wrap p{margin:0;font-size:14px;color:#6b7280}
.kt-all{
display:inline-flex;align-items:center;gap:6px;
padding:10px 18px;border-radius:999px;text-decoration:none;
background:#fff;border:1px solid #e5e7eb;color:#0f172a;
font-weight:700;font-size:13.5px;transition:.2s;
}
.kt-all:hover{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;border-color:transparent;box-shadow:0 10px 20px -8px rgba(230,57,70,.5)}
/* Otomatik kayan kategori marquee */
.kt-marquee{
position:relative;
overflow:hidden;
padding:10px 0 24px;
margin:0 -12px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
}
.kt-track{
display:flex;gap:20px;
width:max-content;
padding:0 12px;
animation:ktScroll 45s linear infinite;
}
.kt-marquee:hover .kt-track{animation-play-state:paused}
@keyframes ktScroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.kt-card{
position:relative;
flex:0 0 280px;
width:280px;
display:flex;flex-direction:column;
background:#fff;
border:1px solid #eef0f3;
border-radius:18px;
overflow:hidden;
text-decoration:none;color:#0f172a;
box-shadow:0 4px 14px -8px rgba(15,23,42,.08);
transition:.3s cubic-bezier(.4,0,.2,1);
}
.kt-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 50px -20px rgba(15,23,42,.25);
border-color:transparent;
}
.kt-media{
position:relative;
aspect-ratio:16/10;
overflow:hidden;
background:linear-gradient(135deg,var(--c1),var(--c2));
}
.kt-media img{
width:100%;height:100%;object-fit:cover;
transition:.5s cubic-bezier(.4,0,.2,1);
}
.kt-card:hover .kt-media img{transform:scale(1.08)}
.kt-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,transparent 45%,rgba(15,23,42,.45) 100%);
pointer-events:none;
}
.kt-fallback{
position:absolute;inset:0;
display:grid;place-items:center;
color:rgba(255,255,255,.95);
font-size:56px;
}
.kt-fallback::before{
content:"";
position:absolute;inset:0;
background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.25),transparent 60%);
}
.kt-fallback i{position:relative;z-index:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.kt-badge{
position:absolute;top:12px;left:12px;
display:inline-flex;align-items:center;gap:5px;
padding:5px 11px;border-radius:999px;
background:rgba(255,255,255,.96);
color:#0f172a;font-size:11px;font-weight:800;
letter-spacing:.02em;
box-shadow:0 6px 14px -4px rgba(15,23,42,.25);
backdrop-filter:blur(6px);
}
.kt-body{
padding:16px 18px 18px;
display:flex;flex-direction:column;gap:4px;
}
.kt-body h3{
margin:0;
font-size:16px;font-weight:800;
color:#0f172a;letter-spacing:-.2px;
transition:.2s;
}
.kt-card:hover .kt-body h3{color:var(--c1)}
.kt-body p{
margin:0;
font-size:12.5px;color:#6b7280;font-weight:500;
line-height:1.45;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kt-explore{
display:inline-flex;align-items:center;gap:6px;
color:var(--c1) !important;font-weight:700 !important;
}
.kt-explore i{transition:.2s;font-size:11px}
.kt-card:hover .kt-explore i{transform:translateX(3px)}
@media(max-width:640px){
.kt-title-wrap h2{font-size:22px}
.kt-body h3{font-size:15px}
.kt-fallback{font-size:42px}
.kt-card{flex:0 0 240px;width:240px}
.kt-track{animation-duration:35s;gap:14px}
}
/* =========================================================
ŞİKAYETVAR-style HERO (sv-hero) — LIGHT VARIANT
Uyumlu navbar altına kaynayan açık temalı hero
========================================================= */
/* Hero header'a yasla — site-main padding'ini iptal et */
.site-main > .sv-hero:first-child{margin-top:-30px}
.sv-hero{
position:relative;
margin:0 0 40px;
padding:44px 0 60px;
min-height:calc(100vh - 230px);
display:block;
background:
radial-gradient(1200px 600px at 85% -5%, rgba(230,57,70,.14), transparent 62%),
radial-gradient(1000px 600px at -8% 100%, rgba(29,53,87,.12), transparent 60%),
conic-gradient(from 220deg at 100% 0%, rgba(243,156,18,.08), transparent 35%),
linear-gradient(180deg,#f6f9ff 0%,#eef2fa 100%);
color:#1f2937;
overflow:hidden;
isolation:isolate;
border-bottom:1px solid rgba(15,23,42,.06);
}
/* Üst incecik vurgu çizgisi — kategori barından hero'ya akış */
.sv-hero::before{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,transparent,rgba(230,57,70,.55),rgba(52,152,219,.55),rgba(46,204,113,.55),transparent);
opacity:.8;z-index:3;
}
/* Nokta deseni overlay */
.sv-hero::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background-image:radial-gradient(rgba(15,23,42,.08) 1px, transparent 1px);
background-size:22px 22px;
-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 80%,transparent 100%);
opacity:.55;
}
.sv-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.sv-grid{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.sv-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:svOrbFloat 14s ease-in-out infinite}
.sv-orb.o1{width:520px;height:520px;top:-160px;right:-120px;background:radial-gradient(circle,#ffb3bb,#ffd6d9 55%,transparent 72%);animation-delay:0s;opacity:.6}
.sv-orb.o2{width:460px;height:460px;bottom:-180px;left:-160px;background:radial-gradient(circle,#b8cbff,#d8e3ff 55%,transparent 72%);animation-delay:-4s;opacity:.5}
.sv-orb.o3{width:280px;height:280px;top:55%;left:55%;background:radial-gradient(circle,#fde1b8,#fff0d8 55%,transparent 72%);animation-delay:-8s;opacity:.35}
@keyframes svOrbFloat{
0%,100%{transform:translate(0,0) scale(1)}
33%{transform:translate(30px,-20px) scale(1.05)}
66%{transform:translate(-20px,25px) scale(.97)}
}
body.dark .sv-orb.o1{background:radial-gradient(circle,rgba(230,57,70,.35),rgba(230,57,70,.1) 60%,transparent 70%)}
body.dark .sv-orb.o2{background:radial-gradient(circle,rgba(59,130,246,.28),rgba(59,130,246,.08) 60%,transparent 70%)}
body.dark .sv-orb.o3{background:radial-gradient(circle,rgba(245,158,11,.22),rgba(245,158,11,.05) 60%,transparent 70%);opacity:.35}
.sv-hero-inner{
position:relative;z-index:2;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(340px,420px);
gap:40px;
align-items:start;
padding-top:14px;
padding-bottom:10px;
}
/* ── Ribbon (canlı duyuru + KPI şeridi) ── */
.sv-ribbon{
position:relative;z-index:2;
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-bottom:22px;padding:10px 14px;
background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,.55));
backdrop-filter:blur(10px);
border:1px solid rgba(15,23,42,.08);
border-radius:14px;
box-shadow:0 14px 32px -22px rgba(15,23,42,.25);
}
.sv-rb-left{display:flex;align-items:center;gap:10px;flex:1;min-width:260px}
.sv-rb-pill{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;
font-size:11px;font-weight:900;letter-spacing:.1em;
box-shadow:0 6px 16px -6px rgba(230,57,70,.6);
}
.sv-rb-msg{font-size:13px;color:#334155}
.sv-rb-msg b{color:#0f172a;font-weight:800}
.sv-rb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sv-rb-kpi{
display:inline-flex;align-items:center;gap:6px;
padding:5px 11px;border-radius:999px;
background:#fff;border:1px solid #e5e7eb;
font-size:11.5px;font-weight:700;color:#475569;
}
.sv-rb-kpi i{font-size:10px;color:#e63946}
.sv-rb-verified{background:linear-gradient(135deg,#e0f2fe,#ede9fe);border-color:#c7d2fe;color:#3730a3}
.sv-rb-verified i{color:#3730a3}
body.dark .sv-ribbon{background:linear-gradient(90deg,rgba(15,23,42,.7),rgba(15,23,42,.45));border-color:rgba(255,255,255,.08)}
body.dark .sv-rb-msg{color:#cbd5e1}
body.dark .sv-rb-msg b{color:#f1f5f9}
body.dark .sv-rb-kpi{background:rgba(15,23,42,.6);border-color:rgba(255,255,255,.08);color:#cbd5e1}
body.dark .sv-rb-verified{background:linear-gradient(135deg,rgba(30,58,138,.4),rgba(76,29,149,.4));border-color:rgba(99,102,241,.3);color:#c7d2fe}
body.dark .sv-hero{
background:
radial-gradient(1200px 600px at 85% -5%, rgba(230,57,70,.22), transparent 62%),
radial-gradient(1000px 600px at -8% 100%, rgba(59,130,246,.14), transparent 60%),
conic-gradient(from 220deg at 100% 0%, rgba(245,158,11,.08), transparent 35%),
linear-gradient(180deg,#0f172a 0%,#0b1220 100%);
color:#e5e7eb;
border-bottom-color:rgba(255,255,255,.06);
}
body.dark .sv-hero::after{background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px)}
/* ── Left panel ── */
.sv-main{min-width:0}
.sv-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.sv-live{
display:inline-flex;align-items:center;gap:8px;
padding:6px 12px;border-radius:999px;
background:rgba(230,57,70,.1);
color:#c1121f;font-size:11px;font-weight:800;letter-spacing:.12em;
border:1px solid rgba(230,57,70,.28);
}
.sv-live-dot{width:8px;height:8px;border-radius:50%;background:#e63946;box-shadow:0 0 0 0 rgba(230,57,70,.55);animation:svPulse 1.6s ease-in-out infinite}
@keyframes svPulse{
0%{box-shadow:0 0 0 0 rgba(230,57,70,.55)}
70%{box-shadow:0 0 0 10px rgba(230,57,70,0)}
100%{box-shadow:0 0 0 0 rgba(230,57,70,0)}
}
.sv-badge{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;
background:#f3f5f8;color:#4b5563;
font-size:11px;font-weight:600;letter-spacing:.04em;
border:1px solid #e5e7eb;
}
.sv-badge i{font-size:10px;color:#e63946}
.sv-title{
font-size:clamp(36px,4.6vw,56px);line-height:1.05;font-weight:900;
margin:0 0 14px;letter-spacing:-.03em;
color:#0f172a;
}
.sv-accent{
position:relative;
background:linear-gradient(90deg,#e63946 0%,#c1121f 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
.sv-accent::after{
content:"";position:absolute;left:0;right:0;bottom:-4px;height:10px;
background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%;
opacity:.8;
}
body.dark .sv-title{color:#f1f5f9}
.sv-sub-title{display:block;font-size:19px;font-weight:500;color:#4b5563;margin-top:6px;letter-spacing:-.01em}
.sv-sub-title b{color:#0f172a;font-weight:800}
/* ── Search ── */
.sv-search{margin:22px 0 22px}
.sv-search-inner{
position:relative;display:flex;align-items:center;
background:#fff;
border-radius:16px;
padding:8px 8px 8px 56px;
border:1px solid #e5e7eb;
box-shadow:0 14px 36px -12px rgba(15,23,42,.18);
transition:.25s;
}
.sv-search-inner:focus-within{
border-color:rgba(230,57,70,.4);
box-shadow:0 20px 44px -12px rgba(230,57,70,.32),0 0 0 3px rgba(230,57,70,.12);
transform:translateY(-2px);
}
.sv-s-ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#9aa3b2;font-size:18px}
.sv-search input{
flex:1;border:0;outline:0;background:transparent;
padding:16px 10px;font-size:16px;color:#1f2937;font-weight:500;min-width:0;
}
.sv-search input::placeholder{color:#9aa3b2}
.sv-s-btn{
display:inline-flex;align-items:center;gap:8px;
background:linear-gradient(135deg,#e63946,#c1121f);
color:#fff;border:0;padding:12px 22px;border-radius:12px;
font-size:15px;font-weight:700;cursor:pointer;letter-spacing:.01em;
box-shadow:0 8px 20px -6px rgba(230,57,70,.55);
transition:.2s;white-space:nowrap;
}
.sv-s-btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -6px rgba(230,57,70,.7)}
.sv-s-btn i{font-size:14px}
.sv-search-quick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding-left:4px}
.sv-sq-lbl{font-size:12px;color:#6b7280;font-weight:700;letter-spacing:.04em}
.sv-sq-lbl i{color:#e63946;margin-right:2px}
.sv-search-quick a{
font-size:13px;padding:6px 12px;border-radius:999px;
background:#fff;color:#374151;font-weight:600;
border:1px solid #e5e7eb;text-decoration:none;
transition:.2s;
}
.sv-search-quick a:hover{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;transform:translateY(-1px);border-color:transparent;box-shadow:0 6px 14px -4px rgba(230,57,70,.4)}
/* ── CTAs ── */
.sv-actions{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 26px}
.sv-cta{
display:inline-flex;align-items:center;gap:14px;
padding:14px 20px;border-radius:14px;text-decoration:none;
transition:.25s;min-width:240px;
position:relative;overflow:hidden;
}
.sv-cta-primary{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;box-shadow:0 12px 28px -10px rgba(230,57,70,.6)}
.sv-cta-primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -10px rgba(230,57,70,.75)}
.sv-cta-ghost{background:#fff;color:#0f172a;border:1px solid #e5e7eb;box-shadow:0 8px 20px -10px rgba(15,23,42,.18)}
.sv-cta-ghost:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(15,23,42,.25)}
.sv-cta-ico{
width:44px;height:44px;border-radius:12px;
background:rgba(255,255,255,.22);
display:grid;place-items:center;font-size:18px;flex-shrink:0;
}
.sv-cta-ghost .sv-cta-ico{background:linear-gradient(135deg,#f3f5f8,#e5e7eb);color:#e63946}
.sv-cta-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.sv-cta-txt strong{font-size:15px;font-weight:800;letter-spacing:.01em}
.sv-cta-txt small{font-size:11.5px;opacity:.8;font-weight:500;margin-top:3px}
.sv-cta-arr{margin-left:auto;font-size:14px;opacity:.8;transition:.2s}
.sv-cta:hover .sv-cta-arr{transform:translateX(4px);opacity:1}
/* ── How it works steps ── */
.sv-steps{
display:flex;align-items:stretch;gap:10px;
margin:0 0 18px;padding:14px 16px;
background:rgba(255,255,255,.65);
backdrop-filter:blur(8px);
border:1px solid #e5e7eb;border-radius:16px;
box-shadow:0 8px 24px -16px rgba(15,23,42,.2);
}
.sv-step{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.sv-step-n{
width:32px;height:32px;flex:0 0 32px;
border-radius:50%;
background:linear-gradient(135deg,#e63946,#c1121f);
color:#fff;font-weight:900;font-size:14px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 14px -6px rgba(230,57,70,.55);
}
.sv-step:nth-child(3) .sv-step-n{background:linear-gradient(135deg,#3498db,#1a6fa5);box-shadow:0 6px 14px -6px rgba(52,152,219,.55)}
.sv-step:nth-child(5) .sv-step-n{background:linear-gradient(135deg,#2ecc71,#17a556);box-shadow:0 6px 14px -6px rgba(46,204,113,.55)}
.sv-step strong{display:block;font-size:13.5px;color:#0f172a;line-height:1.2}
.sv-step small{display:block;font-size:11px;color:#6b7280;margin-top:2px;line-height:1.2}
.sv-step-arr{color:#cbd5e1;font-size:14px;align-self:center}
body.dark .sv-steps{background:rgba(15,23,42,.5);border-color:rgba(255,255,255,.08)}
body.dark .sv-step strong{color:#e5e7eb}
body.dark .sv-step small{color:#94a3b8}
body.dark .sv-step-arr{color:#475569}
/* ── Trust bar ── */
.sv-trust{
display:flex;align-items:center;gap:20px;
padding:20px 24px;border-radius:18px;
background:linear-gradient(135deg,#ffffff,#f5f8ff);
border:1px solid #e8edf6;
box-shadow:0 18px 40px -20px rgba(15,23,42,.22);
flex-wrap:wrap;position:relative;overflow:hidden;
}
.sv-trust::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
background:linear-gradient(180deg,#e63946,#3498db,#2ecc71);
}
.sv-t-item{flex:1;min-width:100px;position:relative;transition:transform .25s ease}
.sv-t-item:hover{transform:translateY(-3px)}
.sv-t-num{font-size:26px;font-weight:900;color:#0f172a;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sv-t-lbl{font-size:11.5px;color:#6b7280;font-weight:600;margin-top:6px;letter-spacing:.02em;display:flex;align-items:center;gap:4px}
.sv-t-lbl i{color:#e63946;font-size:11px}
.sv-t-sep{width:1px;height:36px;background:linear-gradient(180deg,transparent,#dbe2ee,transparent)}
.sv-t-hi{position:relative}
.sv-t-hi .sv-t-num{background:linear-gradient(90deg,#e63946,#c1121f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-t-hi .sv-t-lbl i{animation:svBolt 1.8s ease-in-out infinite}
@keyframes svBolt{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}}
body.dark .sv-trust{background:linear-gradient(135deg,rgba(15,23,42,.7),rgba(11,18,32,.7));border-color:rgba(255,255,255,.08)}
body.dark .sv-t-num{color:#f1f5f9}
body.dark .sv-t-sep{background:linear-gradient(180deg,transparent,rgba(255,255,255,.12),transparent)}
/* ── Right: Live feed ── */
.sv-feed{
width:100%;min-width:0;max-width:100%;
background:#fff;
border:1px solid #e5e7eb;
border-radius:20px;
overflow:hidden;
box-shadow:0 20px 50px -20px rgba(15,23,42,.2);
max-height:620px;
display:flex;flex-direction:column;
box-sizing:border-box;
}
.sv-feed-head{
display:flex;align-items:center;justify-content:space-between;
padding:16px 18px;
background:linear-gradient(135deg,#fff5f5,#fff);
border-bottom:1px solid #f1f2f5;
}
.sv-feed-title{display:flex;align-items:center;gap:12px}
.sv-feed-ico{
width:42px;height:42px;border-radius:12px;
background:linear-gradient(135deg,#e63946,#c1121f);
display:grid;place-items:center;color:#fff;font-size:16px;
box-shadow:0 6px 16px -4px rgba(230,57,70,.5);
}
.sv-feed-title strong{display:block;font-size:15px;font-weight:800;color:#0f172a}
.sv-feed-title small{display:block;font-size:11.5px;color:#6b7280;margin-top:2px}
.sv-feed-live{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;border-radius:999px;
background:rgba(230,57,70,.1);color:#c1121f;
font-size:10px;font-weight:800;letter-spacing:.15em;
border:1px solid rgba(230,57,70,.25);
}
.sv-feed-body{
flex:1;overflow:hidden;position:relative;
mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.sv-feed-track{
display:flex;flex-direction:column;gap:10px;
padding:14px;
animation:svFeedScroll 40s linear infinite;
}
.sv-feed:hover .sv-feed-track{animation-play-state:paused}
@keyframes svFeedScroll{
0%{transform:translateY(0)}
100%{transform:translateY(-50%)}
}
.sv-feed-item{
display:flex;gap:12px;padding:12px;
background:#fff;
border:1px solid #eef0f3;
border-radius:12px;text-decoration:none;color:#0f172a;
transition:.2s;flex-shrink:0;
min-width:0;max-width:100%;box-sizing:border-box;
}
.sv-feed-track{min-width:0;max-width:100%;box-sizing:border-box}
.sv-feed-item:hover{
background:#fafbfc;
border-color:#e63946;
transform:translateX(-2px);
box-shadow:0 10px 22px -10px rgba(230,57,70,.3);
}
.sv-feed-brand{
width:42px;height:42px;border-radius:10px;flex-shrink:0;
display:grid;place-items:center;overflow:hidden;
font-size:13px;font-weight:800;color:#fff;
box-shadow:0 4px 10px -2px rgba(15,23,42,.15);
}
.sv-feed-brand img{width:100%;height:100%;object-fit:cover}
.sv-feed-info{flex:1;min-width:0}
.sv-feed-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:3px}
.sv-feed-top strong{font-size:13px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-feed-time{font-size:10.5px;color:#9ca3af;font-weight:500;white-space:nowrap}
.sv-feed-txt{
font-size:12.5px;color:#4b5563;line-height:1.4;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
margin-bottom:6px;
}
.sv-feed-tags{display:flex;flex-wrap:wrap;gap:5px}
.sv-tag{
display:inline-flex;align-items:center;gap:4px;
font-size:10px;font-weight:700;
padding:3px 8px;border-radius:999px;
background:#f3f5f8;color:#4b5563;
}
.sv-tag i{font-size:9px}
.sv-tag-st.resolved{background:#e6f9ee;color:#0f8a46}
.sv-tag-st.responded{background:#e7f2fb;color:#1a6fa5}
.sv-tag-st.open{background:#fdf3e0;color:#b87404}
.sv-tag-v{background:#f4ecf7;color:#7d3c98}
.sv-feed-empty{padding:30px 20px;text-align:center;color:#6b7280;font-size:13px}
.sv-feed-empty a{color:#e63946;font-weight:700}
.sv-feed-foot{
display:flex;justify-content:space-between;align-items:center;
padding:12px 18px;
background:#fafbfc;
border-top:1px solid #eef0f3;
font-size:12.5px;
}
.sv-feed-foot span{color:#4b5563}
.sv-feed-foot strong{color:#0f172a;font-weight:800}
.sv-feed-more{
display:inline-flex;align-items:center;gap:6px;
color:#e63946;text-decoration:none;font-weight:800;
padding:5px 10px;border-radius:8px;transition:.2s;
}
.sv-feed-more:hover{background:rgba(230,57,70,.08);transform:translateX(2px)}
/* ── Activity Center (sağ panel v2) ── */
.ac-panel{
width:100%;min-width:0;max-width:100%;
display:flex;flex-direction:column;gap:14px;box-sizing:border-box;
position:relative;
}
/* Panel arkasında hafif aksan glow */
.ac-panel::before{
content:"";position:absolute;inset:-30px -20px -20px -30px;z-index:-1;
background:
radial-gradient(380px 260px at 80% 0%, rgba(230,57,70,.14), transparent 65%),
radial-gradient(360px 300px at 0% 100%, rgba(52,152,219,.12), transparent 65%);
filter:blur(8px);opacity:.9;
}
/* Platform Nabzı */
.ac-pulse{
background:linear-gradient(135deg,#fff,#fafbfc);
border:1px solid #eef0f3;border-radius:18px;
padding:16px;box-shadow:0 10px 24px -16px rgba(15,23,42,.18);
box-sizing:border-box;
}
.ac-pulse-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ac-pulse-title{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#0f172a;letter-spacing:.04em;text-transform:uppercase}
.ac-pulse-dot{width:8px;height:8px;border-radius:50%;background:#e63946;box-shadow:0 0 0 0 rgba(230,57,70,.5);animation:svPulse 1.6s ease-in-out infinite}
.ac-online{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:#4b5563;font-weight:600}
.ac-online i{color:#2ecc71;font-size:7px;animation:acOnlineBlink 2s ease-in-out infinite}
.ac-online strong{color:#0f172a;font-weight:800}
@keyframes acOnlineBlink{0%,100%{opacity:1}50%{opacity:.3}}
.ac-pulse-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ac-pulse-item{
position:relative;
display:flex;flex-direction:column;align-items:flex-start;gap:2px;
padding:10px 12px;border-radius:12px;
background:#fff;border:1px solid #eef0f3;
transition:.2s;min-width:0;overflow:hidden;
}
.ac-pulse-item i{font-size:11px;position:absolute;top:10px;right:10px;opacity:.5}
.ac-pulse-item .ac-p-num{font-size:20px;font-weight:900;color:#0f172a;line-height:1;letter-spacing:-.5px}
.ac-pulse-item .ac-p-lbl{font-size:10.5px;color:#6b7280;font-weight:600}
.ac-p-new{border-color:#fce7ea}.ac-p-new i,.ac-p-new .ac-p-num{color:#e63946}
.ac-p-res{border-color:#cef0dc}.ac-p-res i,.ac-p-res .ac-p-num{color:#0f8a46}
.ac-p-com{border-color:#dcebfa}.ac-p-com i,.ac-p-com .ac-p-num{color:#1a6fa5}
.ac-pulse-item:hover{transform:translateY(-2px);box-shadow:0 6px 14px -8px rgba(15,23,42,.15)}
/* Tabbed feed */
.ac-feed{
background:#fff;border:1px solid #eef0f3;border-radius:18px;
box-shadow:0 16px 34px -20px rgba(15,23,42,.18);
overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;
}
.ac-tabs{
position:relative;
display:flex;align-items:stretch;gap:0;
padding:6px;background:#f8fafc;border-bottom:1px solid #eef0f3;
}
.ac-tab{
position:relative;z-index:1;
flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
padding:9px 8px;border:0;background:transparent;cursor:pointer;
font-size:12px;font-weight:700;color:#6b7280;border-radius:10px;
transition:color .2s;min-width:0;
}
.ac-tab i{font-size:11px}
.ac-tab.active{color:#fff}
.ac-tab:hover:not(.active){color:#0f172a}
.ac-tab-ind{
position:absolute;top:6px;bottom:6px;left:0;width:0;
background:linear-gradient(135deg,#e63946,#c1121f);border-radius:10px;
transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1);
box-shadow:0 6px 14px -4px rgba(230,57,70,.5);
z-index:0;pointer-events:none;
}
.ac-pane{display:none;padding:10px;flex-direction:column;gap:8px;max-height:440px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e5e7eb transparent}
.ac-pane.active{display:flex}
.ac-pane::-webkit-scrollbar{width:4px}
.ac-pane::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:4px}
.ac-item{
position:relative;display:flex;gap:10px;padding:10px 12px 10px 16px;
background:#fff;border:1px solid #eef0f3;border-radius:12px;
text-decoration:none;color:#0f172a;transition:.2s;
min-width:0;overflow:hidden;box-sizing:border-box;
}
.ac-item:hover{border-color:#e63946;transform:translateX(-2px);box-shadow:0 10px 22px -12px rgba(230,57,70,.3)}
.ac-bar{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0}
.ac-logo{
width:38px;height:38px;border-radius:10px;flex-shrink:0;
display:grid;place-items:center;overflow:hidden;
color:#fff;font-size:11.5px;font-weight:800;
box-shadow:0 4px 8px -2px rgba(15,23,42,.15);
}
.ac-logo img{width:100%;height:100%;object-fit:cover}
.ac-info{flex:1;min-width:0}
.ac-row1{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-bottom:2px}
.ac-row1 strong{font-size:12.5px;font-weight:800;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-st{flex-shrink:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:9px}
.ac-st-resolved{background:#e6f9ee;color:#0f8a46}
.ac-st-responded{background:#e7f2fb;color:#1a6fa5}
.ac-st-open{background:#fdf3e0;color:#b87404}
.ac-txt{font-size:12px;color:#374151;line-height:1.4;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ac-row2{display:flex;gap:10px;flex-wrap:wrap;font-size:10.5px;color:#9ca3af;font-weight:600}
.ac-row2 i{font-size:9px;opacity:.7;margin-right:3px}
.ac-time{color:#e63946;font-weight:700}
.ac-time i{color:#e63946;opacity:.9}
.ac-empty{padding:40px 20px;text-align:center;color:#6b7280}
.ac-empty i{font-size:28px;opacity:.4;margin-bottom:8px;display:block}
.ac-empty p{margin:0;font-size:13px}
.ac-all{
display:flex;align-items:center;justify-content:center;gap:6px;
padding:12px;border-top:1px solid #eef0f3;
background:#fafbfc;
color:#e63946;font-weight:800;font-size:12.5px;text-decoration:none;
letter-spacing:.02em;transition:.2s;
}
.ac-all:hover{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff}
.ac-all i{font-size:11px;transition:.2s}
.ac-all:hover i{transform:translateX(3px)}
/* ── Brand marquee ── */
.sv-marquee{
position:relative;z-index:2;
margin-top:30px;
padding:18px 0;
background:linear-gradient(135deg,#fff,#f8fafc);
border-top:1px solid #e5e7eb;
border-bottom:1px solid #e5e7eb;
overflow:hidden;
mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.sv-marquee-track{
display:flex;align-items:center;gap:36px;
width:max-content;
animation:svMarquee 50s linear infinite;
}
.sv-marquee:hover .sv-marquee-track{animation-play-state:paused}
@keyframes svMarquee{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
.sv-mq-item{
display:grid;place-items:center;
min-width:140px;height:58px;padding:0 20px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
text-decoration:none;color:#4b5563;
font-weight:700;font-size:14px;
transition:.25s;
flex-shrink:0;
}
.sv-mq-item:hover{
background:#fff;
border-color:#e63946;
color:#0f172a;
transform:translateY(-2px);
box-shadow:0 10px 22px -10px rgba(230,57,70,.35);
}
.sv-mq-item img{max-width:100px;max-height:36px;object-fit:contain;filter:grayscale(.4) opacity(.8);transition:.25s}
.sv-mq-item:hover img{filter:none;opacity:1}
.sv-mq-txt{white-space:nowrap}
/* ── Responsive ── */
@media(max-width:1180px){
.sv-hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:22px}
}
@media(max-width:1020px){
.sv-hero-inner{grid-template-columns:1fr;gap:24px}
.sv-feed{max-height:500px}
.sv-title{font-size:38px}
}
@media(max-width:760px){
.sv-hero{padding:30px 0 0}
.sv-title{font-size:30px}
.sv-sub-title{font-size:16px}
.sv-search-inner{padding:6px 6px 6px 48px}
.sv-s-ico{left:16px;font-size:16px}
.sv-search input{font-size:15px;padding:13px 8px}
.sv-s-btn{padding:10px 14px;font-size:13px}
.sv-s-btn span{display:none}
.sv-cta{min-width:0;flex:1 1 100%}
.sv-trust{padding:14px;gap:12px}
.sv-t-sep{display:none}
.sv-t-item{flex:1 1 45%;min-width:0}
.sv-t-num{font-size:20px}
.sv-mq-item{min-width:110px;height:52px;font-size:12px}
}
@media(max-width:480px){
.sv-title{font-size:24px}
.sv-badges{gap:6px}
.sv-badge,.sv-live{font-size:10px;padding:5px 9px}
}
/* ================================================================
NAVBAR POLISH — v15
================================================================ */
/* Sticky navbar with subtle shadow on scroll */
.site-header{position:sticky;top:0;z-index:100;transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 6px 24px -10px rgba(15,23,42,.12)}
/* Logo — gradient icon + shine sweep */
.navbar .logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;position:relative;transition:transform .25s ease}
.navbar .logo:hover{transform:translateY(-1px)}
.navbar .logo-icon{
width:42px;height:42px;border-radius:12px;
background:linear-gradient(135deg,#e63946,#c1121f);
color:#fff;display:inline-flex;align-items:center;justify-content:center;
font-weight:900;font-size:22px;letter-spacing:-.5px;
box-shadow:0 6px 16px rgba(230,57,70,.38), inset 0 1px 0 rgba(255,255,255,.25);
position:relative;overflow:hidden;
}
.navbar .logo-icon::after{
content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-20deg);
animation:logoShine 4.5s ease-in-out infinite;
}
@keyframes logoShine{
0%,70%{left:-60%}
85%{left:120%}
100%{left:120%}
}
.navbar .logo-text{font-weight:800;font-size:20px;color:#0f172a;letter-spacing:-.4px;line-height:1}
/* Search box — magnifier glow + focus ring */
.search-box{position:relative;flex:1;max-width:560px}
.search-box input{
width:100%;height:44px;padding:0 52px 0 44px;
border:1.5px solid #e5e7eb;border-radius:12px;background:#f8fafc;
font-size:13.5px;color:#0f172a;transition:all .25s ease;outline:none;
}
.search-box input:focus{
border-color:#e63946;background:#fff;
box-shadow:0 0 0 4px rgba(230,57,70,.12), 0 4px 14px rgba(15,23,42,.06);
}
.search-box input::placeholder{color:#9ca3af}
.search-box::before{
content:"\f002";font-family:"Font Awesome 6 Free";font-weight:900;
position:absolute;left:16px;top:50%;transform:translateY(-50%);
color:#9ca3af;font-size:13px;pointer-events:none;transition:color .25s ease;
}
.search-box:focus-within::before{color:#e63946}
.search-box button{
position:absolute;right:6px;top:50%;transform:translateY(-50%);
width:34px;height:34px;border:0;border-radius:8px;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 4px 12px rgba(230,57,70,.35);transition:all .25s ease;
}
.search-box button:hover{transform:translateY(-50%) scale(1.08);box-shadow:0 6px 18px rgba(230,57,70,.45)}
/* Icon button + live badge pulse */
.icon-btn{
position:relative;width:42px;height:42px;border-radius:12px;
background:#f3f4f6;color:#374151;display:inline-flex;align-items:center;justify-content:center;
border:1px solid #e5e7eb;transition:all .25s ease;font-size:15px;
}
.icon-btn:hover{
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;border-color:transparent;
transform:translateY(-2px);box-shadow:0 6px 16px rgba(230,57,70,.35);
}
.icon-btn .badge{
position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:#e63946;color:#fff;font-size:10.5px;font-weight:800;
display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 0 0 2px #fff, 0 4px 10px rgba(230,57,70,.5);
animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.12)}
}
/* Complaint CTA button */
.btn-complaint{
display:inline-flex;align-items:center;gap:8px;
padding:10px 18px;border-radius:12px;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;
font-weight:700;font-size:13.5px;text-decoration:none;
box-shadow:0 6px 18px rgba(230,57,70,.38);
position:relative;overflow:hidden;transition:all .25s ease;isolation:isolate;
}
.btn-complaint::before{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
transform:translateX(-110%);transition:transform .6s ease;z-index:-1;
}
.btn-complaint:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(230,57,70,.52)}
.btn-complaint:hover::before{transform:translateX(110%)}
/* User menu — dropdown animation */
.user-menu-btn{
display:inline-flex;align-items:center;gap:8px;
padding:5px 12px 5px 5px;background:#f3f4f6;border:1px solid #e5e7eb;
border-radius:999px;cursor:pointer;transition:all .25s ease;
}
.user-menu-btn:hover{
border-color:#e63946;background:#fff;
box-shadow:0 4px 14px rgba(230,57,70,.18);
}
.user-menu-btn img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 2px rgba(230,57,70,.28)}
.user-menu-btn span{font-weight:600;font-size:13px;color:#0f172a}
.user-menu-btn .fa-caret-down{font-size:11px;color:#6b7280;transition:transform .25s ease}
.dropdown:hover .user-menu-btn .fa-caret-down{transform:rotate(180deg)}
.dropdown-menu{
opacity:0;visibility:hidden;transform:translateY(8px);
transition:all .2s ease;pointer-events:none;
}
.dropdown:hover .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.dropdown-menu a{transition:all .2s ease}
.dropdown-menu a:hover{background:linear-gradient(90deg,rgba(230,57,70,.08),transparent);color:#e63946;padding-left:18px}
/* News ticker — richer live dot */
.news-ticker .nt-label .dot{
width:8px;height:8px;border-radius:50%;background:#ef4444;
box-shadow:0 0 0 4px rgba(239,68,68,.2);
animation:tkDot 1.4s ease-in-out infinite;
}
@keyframes tkDot{
0%,100%{box-shadow:0 0 0 4px rgba(239,68,68,.15)}
50%{box-shadow:0 0 0 8px rgba(239,68,68,.05)}
}
/* Topbar pill polish */
.tp-pill{
display:inline-flex;align-items:center;gap:6px;
padding:4px 10px;border-radius:999px;
background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.08));
color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.3px;
border:1px solid rgba(255,255,255,.18);
}
.tp-pill i{color:#fbbf24}
/* ================================================================
FOOTER v2 — rich, professional, multi-column
================================================================ */
.sf2{
position:relative;background:#0f172a;color:rgba(255,255,255,.75);
margin-top:60px;font-size:14px;line-height:1.6;
}
.sf2::before{
content:"";position:absolute;top:0;left:0;right:0;height:4px;
background:linear-gradient(90deg,#e63946,#f59e0b,#10b981,#0ea5e9,#9333ea,#e63946);
background-size:300% 100%;animation:sfBar 12s linear infinite;
}
@keyframes sfBar{0%{background-position:0 0}100%{background-position:300% 0}}
/* CTA band */
.sf2-cta{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;padding:28px 0;position:relative;overflow:hidden}
.sf2-cta::before{
content:"";position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(circle at 15% 30%, rgba(255,255,255,.12), transparent 40%),
radial-gradient(circle at 85% 70%, rgba(255,255,255,.08), transparent 45%);
}
.sf2-cta-in{position:relative;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between}
.cta-text h3{margin:0 0 4px;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.4px}
.cta-text h3 i{margin-right:8px;opacity:.85}
.cta-text p{margin:0;color:rgba(255,255,255,.9);font-size:14px}
.cta-text strong{color:#fff;font-weight:800}
.cta-btns{display:flex;gap:10px;flex-wrap:wrap}
.cta-btns .btn-a, .cta-btns .btn-b{
display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;
font-weight:800;font-size:14px;text-decoration:none;transition:all .25s ease;white-space:nowrap;
}
.cta-btns .btn-a{background:#fff;color:#c1121f;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.cta-btns .btn-a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3)}
.cta-btns .btn-b{background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cta-btns .btn-b:hover{background:rgba(255,255,255,.25);transform:translateY(-2px)}
/* Stat shelf */
.sf2-stats{background:#131d33;border-bottom:1px solid rgba(255,255,255,.06)}
.sf2-stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:24px 0}
@media(max-width:768px){.sf2-stats-in{grid-template-columns:repeat(2,1fr)}}
.sf2-stat{display:flex;align-items:center;gap:14px;min-width:0}
.sf2-stat .s-ico{
width:50px;height:50px;border-radius:14px;flex-shrink:0;
background:linear-gradient(135deg,color-mix(in srgb, var(--c) 85%, transparent), color-mix(in srgb, var(--c) 55%, #000 10%));
color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;
box-shadow:0 8px 18px -8px var(--c);
}
.sf2-stat strong{display:block;color:#fff;font-size:22px;font-weight:800;line-height:1;letter-spacing:-.5px}
.sf2-stat span{display:block;color:rgba(255,255,255,.55);font-size:12px;margin-top:4px;text-transform:uppercase;letter-spacing:.6px}
/* Main grid */
.sf2-main{
display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:36px;
padding:48px 0 36px;
}
@media(max-width:1100px){.sf2-main{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:700px){.sf2-main{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.sf2-main{grid-template-columns:1fr}}
.sf2-col{min-width:0}
/* About block */
.sf2-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-bottom:14px}
.sf2-logo{
width:46px;height:46px;border-radius:14px;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-weight:900;font-size:22px;
box-shadow:0 10px 22px rgba(230,57,70,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.sf2-brand strong{display:block;color:#fff;font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.1}
.sf2-brand small{display:block;color:rgba(255,255,255,.55);font-size:11.5px;margin-top:3px;letter-spacing:.3px}
.sf2-about-text{color:rgba(255,255,255,.7);font-size:13.5px;line-height:1.7;margin:0 0 16px;max-width:360px}
.sf2-contact{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:9px}
.sf2-contact li{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:rgba(255,255,255,.72)}
.sf2-contact li i{color:#e63946;width:16px;text-align:center;margin-top:3px;flex-shrink:0}
.sf2-contact li a{color:inherit;text-decoration:none;transition:color .2s}
.sf2-contact li a:hover{color:#fff}
.sf2-social{display:flex;gap:8px;flex-wrap:wrap}
.sf2-social a{
width:38px;height:38px;border-radius:10px;
background:rgba(255,255,255,.06);color:rgba(255,255,255,.8);
display:inline-flex;align-items:center;justify-content:center;font-size:15px;
border:1px solid rgba(255,255,255,.08);transition:all .25s ease;
}
.sf2-social a:hover{color:#fff;transform:translateY(-2px);box-shadow:0 8px 18px -6px rgba(0,0,0,.4);border-color:transparent}
.sf2-social .s-fb:hover{background:#1877f2}
.sf2-social .s-x:hover {background:#000}
.sf2-social .s-ig:hover{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.sf2-social .s-yt:hover{background:#ff0000}
.sf2-social .s-in:hover{background:#0a66c2}
.sf2-social .s-tk:hover{background:#000}
/* Heading */
.sf2-h{
display:flex;align-items:center;gap:10px;margin:0 0 16px;
color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}
.sf2-h .bar{width:4px;height:18px;background:linear-gradient(180deg,#e63946,#c1121f);border-radius:2px;flex-shrink:0}
/* Links */
.sf2-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.sf2-links li a{
display:inline-flex;align-items:center;gap:8px;
color:rgba(255,255,255,.65);text-decoration:none;font-size:13.5px;
transition:all .2s ease;padding:3px 0;
}
.sf2-links li a i{color:#e63946;font-size:9px;transition:transform .2s}
.sf2-links li a:hover{color:#fff;transform:translateX(4px)}
.sf2-links li a:hover i{transform:translateX(2px)}
/* Newsletter */
.sf2-nl-text{margin:0 0 12px;color:rgba(255,255,255,.65);font-size:13px;line-height:1.5}
.sf2-nl-wrap{
position:relative;display:flex;align-items:center;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
border-radius:12px;padding:4px 4px 4px 14px;transition:all .25s ease;
}
.sf2-nl-wrap:focus-within{border-color:#e63946;background:rgba(255,255,255,.12);box-shadow:0 0 0 4px rgba(230,57,70,.15)}
.sf2-nl-wrap > i{color:rgba(255,255,255,.5);font-size:13px;margin-right:8px}
.sf2-nl-wrap input{
flex:1;min-width:0;background:none;border:0;outline:none;
color:#fff;font-size:13.5px;padding:10px 0;
}
.sf2-nl-wrap input::placeholder{color:rgba(255,255,255,.4)}
.sf2-nl-wrap button{
width:36px;height:36px;border:0;border-radius:9px;cursor:pointer;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-size:13px;
box-shadow:0 4px 12px rgba(230,57,70,.4);transition:all .2s;
}
.sf2-nl-wrap button:hover{transform:scale(1.06)}
.sf2-nl-opt{display:flex;align-items:flex-start;gap:8px;margin-top:10px;color:rgba(255,255,255,.55);font-size:11.5px;line-height:1.5;cursor:pointer}
.sf2-nl-opt input{accent-color:#e63946;margin-top:2px}
.sf2-nl .form-msg{font-size:12px;margin-top:6px;color:#10b981}
/* App badges */
.sf2-apps{display:flex;flex-direction:column;gap:8px}
.app-badge{
display:flex;align-items:center;gap:12px;padding:10px 14px;
background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
border-radius:12px;color:#fff;text-decoration:none;transition:all .25s;
}
.app-badge:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);transform:translateY(-2px)}
.app-badge i{font-size:22px}
.app-badge span{display:flex;flex-direction:column;line-height:1.2}
.app-badge small{font-size:10.5px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.4px}
.app-badge strong{font-size:13.5px;font-weight:700;color:#fff}
/* Popüler markalar şeridi */
.sf2-tags{padding:20px 0;border-top:1px solid rgba(255,255,255,.06)}
.sf2-tags-h{color:rgba(255,255,255,.75);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin:0 0 10px}
.sf2-tags-h i{color:#f59e0b;margin-right:6px}
.sf2-tags-list{display:flex;flex-wrap:wrap;gap:6px}
.sf2-tags-list a{
padding:5px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
border-radius:999px;color:rgba(255,255,255,.75);text-decoration:none;font-size:12.5px;font-weight:500;
transition:all .2s ease;
}
.sf2-tags-list a:hover{background:#e63946;border-color:#e63946;color:#fff;transform:translateY(-1px)}
.sf2-tags-list a.more{background:rgba(230,57,70,.15);border-color:rgba(230,57,70,.4);color:#ff8a94}
.sf2-tags-list a.more:hover{background:#e63946;color:#fff}
/* Trust row */
.sf2-corp{display:flex;align-items:flex-start;gap:10px;padding:14px 0 0;font-size:12px;color:rgba(255,255,255,.5);line-height:1.6}
.sf2-corp i{margin-top:2px;opacity:.6}
.sf2-corp strong{color:rgba(255,255,255,.72);font-weight:700}
.sf2-disc{display:block;font-size:11.5px;color:rgba(255,255,255,.4);margin-top:4px}
.sf2-trust{
display:flex;gap:22px;flex-wrap:wrap;justify-content:center;
padding:20px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);
}
.sf2-trust span{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.65);font-weight:500}
.sf2-trust i{color:#10b981;font-size:13px}
/* Bottom */
.sf2-bottom{
padding:16px 0 20px;background:#0a1020;
border-top:1px solid rgba(255,255,255,.06);
}
.sf2-bottom-in{
display:flex;align-items:center;gap:14px 20px;justify-content:space-between;flex-wrap:wrap;
padding-right:72px; /* space for fixed to-top button */
}
.sf2-copy{color:rgba(255,255,255,.55);font-size:12.5px;line-height:1.5}
.sf2-copy strong{color:#fff;font-weight:700}
.sf2-legal{
display:flex;gap:2px;flex-wrap:wrap;align-items:center;
margin:0 auto;
}
.sf2-legal a{
padding:6px 11px;color:rgba(255,255,255,.65);font-size:12.5px;text-decoration:none;
border-radius:6px;transition:color .15s, background .15s;white-space:nowrap;
}
.sf2-legal a:hover{color:#fff;background:rgba(255,255,255,.06)}
.sf2-lang{
display:inline-flex;align-items:center;gap:7px;
color:rgba(255,255,255,.7);font-size:12px;font-weight:600;
padding:5px 11px;border-radius:7px;
background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
}
.sf2-lang i{color:#fbbf24;font-size:11px}
.sf2-lang select{
background:transparent;border:0;
color:#fff;padding:0;font-size:12px;cursor:pointer;outline:none;
font-family:inherit;font-weight:600;
appearance:none;-webkit-appearance:none;padding-right:14px;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right center;
}
.sf2-lang select option{background:#0f172a;color:#fff}
@media (max-width:820px){
.sf2-bottom-in{
flex-direction:column;align-items:center;text-align:center;gap:12px;
padding-right:0;padding-bottom:56px; /* room below for to-top button */
}
.sf2-legal{justify-content:center}
.sf2-legal a{padding:5px 9px;font-size:12px}
}
/* ================================================================
COMPLAINT DETAIL v2 — rich / şikayetvar-tarzı
================================================================ */
.cd-wrap{padding:20px 0 60px}
.cd-crumb{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-size:13px;color:#6b7280;margin-bottom:14px;
padding:8px 14px;background:#fff;border:1px solid #eef0f3;border-radius:12px;
box-shadow:0 2px 8px rgba(15,23,42,.03);
}
.cd-crumb a{color:#6b7280;text-decoration:none;transition:color .2s}
.cd-crumb a:hover{color:#e63946}
.cd-crumb .sep{font-size:9px;color:#cbd5e1}
.cd-crumb .current{color:#0f172a;font-weight:600}
.cd2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:24px;align-items:flex-start}
@media(max-width:1024px){.cd2-grid{grid-template-columns:1fr}}
/* ── HERO ── */
.cd2-hero{
position:relative;border-radius:22px;overflow:hidden;background:#fff;
border:1px solid #eef0f3;padding:28px;margin-bottom:18px;
box-shadow:0 10px 30px -15px rgba(15,23,42,.12);
}
.cd2-hero-bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(circle at 0% 0%, rgba(230,57,70,.08), transparent 40%),
radial-gradient(circle at 100% 0%, rgba(59,130,246,.07), transparent 45%);
}
.cd2-hero > *{position:relative;z-index:1}
.cd2-hero-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.cd2-brand-chip{
display:inline-flex;align-items:center;gap:10px;
padding:6px 14px 6px 6px;background:#f8fafc;border:1px solid #e5e7eb;
border-radius:999px;text-decoration:none;transition:all .2s;
}
.cd2-brand-chip:hover{border-color:#e63946;background:#fff;box-shadow:0 4px 12px rgba(230,57,70,.1)}
.cd2-brand-chip .b-logo{
width:38px;height:38px;border-radius:50%;background:#fff;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;
font-weight:900;color:#e63946;font-size:12px;border:2px solid #fff;
box-shadow:0 2px 8px rgba(15,23,42,.08);
}
.cd2-brand-chip .b-logo img{width:100%;height:100%;object-fit:cover}
.cd2-brand-chip .b-name{display:block;font-weight:700;font-size:14px;color:#0f172a;line-height:1.1}
.cd2-brand-chip .b-name .verify{color:#0ea5e9;font-size:12px;margin-left:2px}
.cd2-brand-chip .b-stats{display:block;font-size:11px;color:#6b7280;margin-top:2px}
.cd2-status{
display:inline-flex;align-items:center;gap:6px;
padding:6px 12px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.3px;
}
.cd2-status.st-open,.cd2-status.st-pending{background:#fff3cd;color:#92400e;border:1px solid #fde68a}
.cd2-status.st-responded{background:#dbeafe;color:#1e3a8a;border:1px solid #bfdbfe}
.cd2-status.st-resolved{background:#dcfce7;color:#065f46;border:1px solid #86efac}
.cd2-status.st-rejected{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.cd2-title{
font-size:30px;line-height:1.22;font-weight:800;color:#0f172a;
letter-spacing:-.5px;margin:0 0 14px;
}
@media(max-width:640px){.cd2-title{font-size:22px}}
.cd2-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px dashed #eef0f3}
.cd2-author{display:flex;align-items:center;gap:10px}
.cd2-author img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 2px #eef0f3}
.cd2-author strong{display:block;color:#0f172a;font-size:14px;line-height:1.1}
.cd2-author span{display:block;color:#6b7280;font-size:12px;margin-top:2px}
.cd2-meta-divider{width:1px;height:32px;background:#e5e7eb}
.cd2-meta-items{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:#6b7280}
.cd2-meta-items > *{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:inherit}
.cd2-meta-items a:hover{color:#e63946}
.cd2-meta-items i{color:#9ca3af}
.cd2-stat-row{
display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;
margin:16px 0;padding:14px;background:linear-gradient(180deg,#f8fafc,#fff);
border:1px solid #eef0f3;border-radius:14px;
}
.cd2-rating{display:inline-flex;align-items:center;gap:3px;font-weight:700;color:#0f172a;font-size:13px}
.cd2-rating i{color:#d1d5db;font-size:15px}
.cd2-rating i.on{color:#f59e0b;text-shadow:0 0 8px rgba(245,158,11,.35)}
.cd2-rating span{margin-left:6px;font-weight:800;color:#0f172a;font-size:14px}
.cd2-stat{display:flex;flex-direction:column;gap:2px;border-left:1px solid #eef0f3;padding-left:10px}
.cd2-stat:first-child,.cd2-stat.cd2-rating{border-left:0;padding-left:0}
.cd2-stat i{color:#9ca3af;font-size:12px}
.cd2-stat strong{font-size:16px;font-weight:800;color:#0f172a;line-height:1}
.cd2-stat small{color:#6b7280;font-size:11px;letter-spacing:.3px}
.cd2-stat.good i{color:#10b981}
.cd2-stat.good strong{color:#059669}
/* ── TIMELINE ── */
.cd2-timeline{
display:flex;align-items:center;gap:0;margin-top:18px;padding:16px;
background:#fff;border:1px solid #eef0f3;border-radius:14px;overflow-x:auto;
}
.tl-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:80px;position:relative}
.tl-ico{
width:44px;height:44px;border-radius:50%;
background:#f3f4f6;color:#9ca3af;
display:inline-flex;align-items:center;justify-content:center;font-size:16px;
transition:all .3s;border:2px solid #e5e7eb;
}
.tl-step.done .tl-ico{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(230,57,70,.38)}
.tl-step.current .tl-ico{animation:tlPulse 1.8s ease-in-out infinite}
@keyframes tlPulse{0%,100%{box-shadow:0 0 0 0 rgba(230,57,70,.5)}50%{box-shadow:0 0 0 10px rgba(230,57,70,0)}}
.tl-lbl{font-size:12px;font-weight:700;color:#0f172a;text-align:center;white-space:nowrap}
.tl-step:not(.done) .tl-lbl{color:#9ca3af}
.tl-date{font-size:10.5px;color:#6b7280;text-align:center}
.tl-bar{flex:1;height:3px;background:#e5e7eb;border-radius:3px;margin:0 4px;align-self:center;margin-top:-18px;min-width:20px}
.tl-bar.done{background:linear-gradient(90deg,#e63946,#c1121f)}
/* ── ACTIONS ── */
.cd2-actions{
display:flex;gap:8px;flex-wrap:wrap;align-items:center;
padding:12px;background:#fff;border:1px solid #eef0f3;border-radius:14px;
margin-bottom:18px;box-shadow:0 2px 10px rgba(15,23,42,.03);
}
.cd2-actions .ax{
display:inline-flex;align-items:center;gap:6px;padding:9px 14px;
background:#f8fafc;border:1px solid #e5e7eb;border-radius:10px;
font-size:13px;font-weight:600;color:#374151;cursor:pointer;text-decoration:none;
transition:all .2s;
}
.cd2-actions .ax:hover{background:#fff;border-color:#e63946;color:#e63946;transform:translateY(-1px);box-shadow:0 4px 10px rgba(230,57,70,.1)}
.cd2-actions .ax em{background:#fff;padding:2px 8px;border-radius:999px;font-style:normal;font-weight:800;font-size:11px;color:#0f172a}
.cd2-actions .ax.liked{background:linear-gradient(135deg,#fee2e2,#fecaca);border-color:#fca5a5;color:#b91c1c}
.cd2-actions .ax.liked i{color:#dc2626}
.cd2-actions .ax.btn-report:hover{border-color:#dc2626;color:#dc2626}
.cd2-actions .metoo.active{background:linear-gradient(135deg,#e0f2fe,#bae6fd);border-color:#7dd3fc;color:#075985}
.cd2-actions .metoo.active i{color:#0284c7}
.metoo-pop{position:absolute;top:-14px;right:4px;background:#10b981;color:#fff;padding:2px 6px;border-radius:8px;font-size:11px;font-weight:800;animation:mtPop .9s ease forwards}
@keyframes mtPop{0%{opacity:0;transform:translateY(10px)}30%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-18px)}}
.ax-share{position:relative}
.ax-share-dd{
position:absolute;top:calc(100% + 6px);right:0;z-index:20;
background:#fff;border:1px solid #e5e7eb;border-radius:12px;
min-width:200px;padding:6px;box-shadow:0 12px 30px -10px rgba(15,23,42,.2);
opacity:0;visibility:hidden;transform:translateY(8px);transition:all .2s;
}
.ax-share-dd.open{opacity:1;visibility:visible;transform:translateY(0)}
.ax-share-dd a, .ax-share-dd button{
display:flex;align-items:center;gap:10px;width:100%;
padding:9px 12px;background:none;border:0;border-radius:8px;
color:#374151;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;
transition:all .15s;text-align:left;
}
.ax-share-dd a:hover, .ax-share-dd button:hover{background:#f3f4f6;color:#e63946}
.ax-share-dd i{width:18px;text-align:center;color:#9ca3af}
/* ── MARKA YANITI ── */
.cd2-brand-reply{
position:relative;background:linear-gradient(135deg,#ecfdf5,#f0fdf4);
border:2px solid #86efac;border-radius:16px;padding:18px;margin-bottom:18px;
box-shadow:0 8px 22px -10px rgba(16,185,129,.35);
}
.cd2-brand-reply::before{
content:"";position:absolute;left:-2px;top:-2px;bottom:-2px;width:5px;
background:linear-gradient(180deg,#10b981,#059669);border-radius:16px 0 0 16px;
}
.br-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.br-logo{
width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff;
display:inline-flex;align-items:center;justify-content:center;
font-weight:900;color:#059669;border:2px solid #fff;box-shadow:0 2px 8px rgba(16,185,129,.25);flex-shrink:0;
}
.br-logo img{width:100%;height:100%;object-fit:cover}
.br-who{flex:1;min-width:0}
.br-who strong{display:block;color:#065f46;font-size:15px;font-weight:800}
.br-who strong i{color:#10b981;margin-left:4px;font-size:13px}
.br-who span{display:block;color:#047857;font-size:12px;margin-top:2px}
.br-badge{
display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
background:#10b981;color:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;
}
.br-body{color:#064e3b;font-size:14.5px;line-height:1.65;padding-left:60px}
@media(max-width:640px){.br-body{padding-left:0}}
/* ── COVER + İÇERİK ── */
.cd2-cover{margin:0 0 18px;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px -10px rgba(15,23,42,.15)}
.cd2-cover img{width:100%;display:block}
.cd2-order{
display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
background:#fff;border:1px solid #eef0f3;border-radius:14px;padding:14px;margin-bottom:18px;
}
.cd2-order .itm{display:flex;align-items:center;gap:12px;padding:10px;background:#f8fafc;border-radius:10px}
.cd2-order .itm i{width:36px;height:36px;border-radius:10px;background:#fff;color:#e63946;display:inline-flex;align-items:center;justify-content:center;font-size:14px;border:1px solid #eef0f3}
.cd2-order .itm span{display:block;font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.cd2-order .itm strong{display:block;color:#0f172a;font-size:14px;font-weight:700;margin-top:2px}
.cd2-content{padding:24px;margin-bottom:18px;border-radius:16px}
.cd2-body{font-size:15.5px;line-height:1.8;color:#1f2937;word-wrap:break-word}
.cd2-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:18px}
.cd2-gallery .thumb{position:relative;display:block;border-radius:10px;overflow:hidden;aspect-ratio:1;background:#f3f4f6;transition:all .2s}
.cd2-gallery .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.cd2-gallery .thumb:hover{transform:translateY(-3px);box-shadow:0 8px 18px -6px rgba(15,23,42,.2)}
.cd2-gallery .thumb:hover img{transform:scale(1.08)}
.cd2-gallery .zoom{position:absolute;inset:0;background:rgba(15,23,42,.45);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.cd2-gallery .thumb:hover .zoom{opacity:1}
.cd2-tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:18px;padding-top:18px;border-top:1px dashed #eef0f3}
.cd2-tags .lbl{font-size:11px;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-right:4px}
.cd2-trust{
display:flex;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid #f3f4f6;
font-size:12px;color:#6b7280;
}
.cd2-trust i{color:#10b981;margin-right:4px}
/* ── SOSYAL KANIT ── */
.cd2-social-proof{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
padding:14px 18px;margin-bottom:18px;border-radius:14px;
background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;
color:#9a3412;font-size:13.5px;font-weight:500;
}
.cd2-social-proof i{color:#f97316}
.cd2-social-proof strong{color:#c2410c;font-weight:800}
/* ── YORUMLAR ── */
.cd2-comments{background:#fff;border:1px solid #eef0f3;border-radius:16px;padding:22px;margin-bottom:18px}
.cc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #eef0f3}
.cc-head h3{margin:0;font-size:17px;color:#0f172a;display:flex;align-items:center;gap:8px}
.cc-head .count{background:#f3f4f6;color:#374151;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700}
.cc-sort{display:flex;gap:4px;background:#f3f4f6;padding:3px;border-radius:10px}
.cc-sort button{padding:5px 11px;background:none;border:0;border-radius:7px;font-size:12px;font-weight:600;color:#6b7280;cursor:pointer}
.cc-sort button.active{background:#fff;color:#e63946;box-shadow:0 2px 6px rgba(15,23,42,.08)}
.cd2-cform{display:flex;gap:12px;margin-bottom:18px}
.cd2-cform .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cd2-cform .cf-body{flex:1;min-width:0}
.cd2-cform textarea{
width:100%;min-height:80px;padding:12px;border:1.5px solid #e5e7eb;border-radius:10px;
resize:vertical;font:inherit;font-size:14px;color:#0f172a;outline:none;transition:all .2s;
}
.cd2-cform textarea:focus{border-color:#e63946;box-shadow:0 0 0 4px rgba(230,57,70,.1)}
.cf-bot{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:8px}
.cf-bot .form-msg{flex:1;font-size:13px}
.cf-count{font-size:11px;color:#9ca3af;font-variant-numeric:tabular-nums}
.cd2-login-nag{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;padding:14px 16px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:12px;margin-bottom:16px;color:#075985}
.cd2-login-nag a{color:#0369a1;text-decoration:underline;font-weight:600}
.cd2-empty{text-align:center;padding:36px 12px;color:#9ca3af}
.cd2-empty i{font-size:36px;opacity:.5;display:block;margin-bottom:10px}
.cd2-empty p{margin:0}
.cc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.cc-item{display:flex;gap:12px;padding:14px;background:#f8fafc;border:1px solid #eef0f3;border-radius:12px;transition:all .2s}
.cc-item:hover{background:#fff;border-color:#d1d5db;box-shadow:0 4px 12px rgba(15,23,42,.05)}
.cc-item .ava{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cc-body{flex:1;min-width:0}
.cc-hd{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cc-hd strong{color:#0f172a;font-size:13.5px}
.cc-hd .when{color:#9ca3af;font-size:11.5px;margin-left:auto}
.cc-text{color:#374151;font-size:14px;line-height:1.6}
.cc-acts{display:flex;gap:12px;margin-top:8px}
.cc-acts button{background:none;border:0;padding:4px 0;font-size:12px;color:#6b7280;cursor:pointer;display:inline-flex;align-items:center;gap:5px;font-weight:500;transition:color .15s}
.cc-acts button:hover{color:#e63946}
.cc-acts button i{font-size:11px}
.cc-acts button em{background:#e5e7eb;color:#374151;padding:1px 7px;border-radius:999px;font-style:normal;font-size:11px;font-weight:700}
/* ── SIDEBAR ── */
.cd2-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.cd2-sc{background:#fff;border:1px solid #eef0f3;border-radius:14px;padding:16px;box-shadow:0 2px 10px rgba(15,23,42,.03)}
.cd2-sc .sc-h{margin:0 0 12px;font-size:13px;color:#0f172a;font-weight:700;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.5px}
.cd2-sc .sc-h i{color:#e63946;font-size:14px}
/* Marka kartı */
.cd2-brand .bc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bc-logo{width:54px;height:54px;border-radius:14px;background:linear-gradient(135deg,#f8fafc,#e5e7eb);display:inline-flex;align-items:center;justify-content:center;font-weight:900;color:#e63946;font-size:16px;overflow:hidden;flex-shrink:0;border:1px solid #eef0f3}
.bc-logo img{width:100%;height:100%;object-fit:cover}
.cd2-brand .bc-head strong{display:block;color:#0f172a;font-weight:800;font-size:15px}
.cd2-brand .bc-head .verified{display:inline-flex;align-items:center;gap:4px;color:#0ea5e9;font-size:11px;font-weight:600;margin-top:2px}
.bc-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.bc-metrics .mt{text-align:center;padding:10px 4px;background:#f8fafc;border:1px solid #eef0f3;border-radius:10px}
.bc-metrics .mt-val{font-size:17px;font-weight:800;color:#0f172a;line-height:1}
.bc-metrics .mt-lbl{font-size:10.5px;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.bc-bars{margin-bottom:14px}
.bc-bars .bar{margin-bottom:10px}
.bc-bars .bl{display:flex;justify-content:space-between;font-size:12px;color:#6b7280;margin-bottom:4px}
.bc-bars .bl strong{color:#0f172a;font-weight:800}
.bc-bars .bt{height:6px;background:#f3f4f6;border-radius:999px;overflow:hidden}
.bc-bars .bt i{display:block;height:100%;background:linear-gradient(90deg,#e63946,#c1121f);border-radius:999px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.bc-bars .bt.ok i{background:linear-gradient(90deg,#10b981,#059669)}
.bc-avg{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#f0f9ff;border:1px solid #bae6fd;border-radius:10px;color:#075985;font-size:12.5px;margin-top:10px}
.bc-avg strong{color:#0369a1;font-weight:800}
.bc-btns{display:flex;flex-direction:column;gap:6px}
.bc-btns .btn{width:100%;justify-content:center}
/* Yazar kartı */
.sc-author{display:flex;align-items:center;gap:10px;position:relative}
.sc-author img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 0 0 2px #eef0f3}
.sc-author strong{display:block;color:#0f172a;font-size:14px}
.sc-author span{display:block;color:#6b7280;font-size:11.5px;margin-top:2px}
.sc-profile{position:absolute;right:0;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#f3f4f6;color:#6b7280;display:inline-flex;align-items:center;justify-content:center;font-size:11px;transition:all .2s}
.sc-profile:hover{background:#e63946;color:#fff;transform:translateY(-50%) translateX(2px)}
/* İlgili şikayetler listesi */
.sc-rel{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}
.sc-rel li a{display:block;padding:10px;border-radius:10px;text-decoration:none;color:inherit;transition:all .15s;border-left:3px solid transparent}
.sc-rel li a:hover{background:#f8fafc;border-left-color:#e63946;transform:translateX(2px)}
.sc-rel .t{display:block;color:#0f172a;font-size:13px;font-weight:600;line-height:1.4;margin-bottom:4px}
.sc-rel .m{display:block;color:#9ca3af;font-size:11px}
.sc-rel .m i{margin-right:3px}
.sc-rel .m i:not(:first-child){margin-left:8px}
/* CTA kartı */
.cd2-cta{text-align:center;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;border:0;padding:22px}
.cd2-cta .ico{font-size:30px;margin-bottom:8px;opacity:.9}
.cd2-cta h4{margin:0 0 6px;color:#fff;font-size:16px;font-weight:800}
.cd2-cta p{margin:0 0 14px;color:rgba(255,255,255,.9);font-size:13px;line-height:1.5}
.cd2-cta a{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:#fff;color:#e63946;font-weight:800;border-radius:10px;text-decoration:none;transition:transform .2s;font-size:13.5px}
.cd2-cta a:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.2)}
/* ── FLOATING BAR ── */
.cd2-floatbar{
position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);
display:flex;gap:6px;padding:8px;background:rgba(15,23,42,.92);backdrop-filter:blur(14px);
border-radius:999px;z-index:90;box-shadow:0 12px 40px rgba(0,0,0,.25);
opacity:0;visibility:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);
}
.cd2-floatbar.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.cd2-floatbar .fb{
width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);
color:#fff;border:0;display:inline-flex;align-items:center;justify-content:center;
cursor:pointer;transition:all .2s;text-decoration:none;position:relative;
}
.cd2-floatbar .fb:hover{background:rgba(255,255,255,.18);transform:scale(1.08)}
.cd2-floatbar .fb em{
position:absolute;top:-4px;right:-4px;background:#e63946;color:#fff;
font-size:10px;font-weight:800;padding:1px 5px;border-radius:999px;font-style:normal;min-width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;
}
.cd2-floatbar .fb.liked{background:#e63946}
/* ── Print ── */
@media print{
.site-header, .site-footer, .cd2-actions, .cd2-floatbar, .cd2-side,
.reading-progress, .to-top, .theme-toggle, .news-ticker, .cd-crumb{display:none !important}
.cd2-grid{grid-template-columns:1fr}
.cd2-hero, .cd2-content, .cd2-comments{box-shadow:none;border:1px solid #ccc}
body{background:#fff}
}
/* Responsive */
@media(max-width:640px){
.cd2-hero{padding:18px}
.cd2-title{font-size:22px}
.cd2-actions{padding:10px}
.cd2-actions .ax{padding:8px 11px;font-size:12px}
.cd2-actions .ax span{display:none}
.tl-step{min-width:64px}
.tl-ico{width:36px;height:36px;font-size:13px}
.tl-lbl{font-size:10.5px}
.cd2-content{padding:18px}
}
/* ═══════════════════════════════════════════════════════════
HERO SLIDER v2 — .hs2
═══════════════════════════════════════════════════════════ */
.hs2{padding:24px 0}
.hs2-box{
position:relative;border-radius:20px;overflow:hidden;
background:#0f172a;
box-shadow:0 30px 60px -20px rgba(15,23,42,.25), 0 10px 30px -10px rgba(15,23,42,.15);
outline:none;
}
.hs2-viewport{position:relative;height:340px;overflow:hidden}
.hs2-track{position:relative;width:100%;height:100%}
/* Each slide fills the viewport, fade+scale transition */
.hs2-slide{
position:absolute;inset:0;
opacity:0;visibility:hidden;transform:scale(1.02);
transition:opacity .7s ease, transform .9s ease, visibility 0s .7s;
overflow:hidden;
display:flex;align-items:center;
}
.hs2-slide.active{
opacity:1;visibility:visible;transform:none;z-index:2;
transition:opacity .7s ease, transform 1.2s ease;
}
/* Per-theme backgrounds */
.hs2-bg{position:absolute;inset:0;z-index:0}
.hs2-t-red .hs2-bg{background:linear-gradient(135deg,#7f1d1d 0%,#b91c1c 40%,#dc2626 100%)}
.hs2-t-green .hs2-bg{background:linear-gradient(135deg,#065f46 0%,#0f766e 40%,#059669 100%)}
.hs2-t-amber .hs2-bg{background:linear-gradient(135deg,#78350f 0%,#b45309 40%,#d97706 100%)}
.hs2-t-blue .hs2-bg{background:linear-gradient(135deg,#0c4a6e 0%,#0e7490 40%,#0369a1 100%)}
.hs2-bg::after{
content:"";position:absolute;inset:0;
background-image:
radial-gradient(rgba(255,255,255,.08) 1px,transparent 1px),
radial-gradient(circle at 85% 20%,rgba(255,255,255,.15),transparent 45%);
background-size:30px 30px, auto;
opacity:.75;
}
.hs2-shape{
position:absolute;border-radius:50%;filter:blur(50px);opacity:.45;pointer-events:none;
animation:hs2Float 14s ease-in-out infinite;
}
.hs2-shape-a{width:340px;height:340px;top:-120px;right:-80px;background:rgba(255,255,255,.3)}
.hs2-shape-b{width:280px;height:280px;bottom:-100px;left:-70px;background:rgba(0,0,0,.35);animation-delay:-5s}
@keyframes hs2Float{
0%,100%{transform:translate(0,0)}
50%{transform:translate(30px,-20px)}
}
.hs2-inner{
position:relative;z-index:1;
display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;
width:100%;height:100%;padding:36px 40px;color:#fff;
}
/* Content */
.hs2-content{animation:hs2In .8s ease both}
.hs2-slide.active .hs2-content{animation:hs2In .8s ease both .1s}
@keyframes hs2In{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hs2-kicker{
display:inline-flex;align-items:center;gap:7px;
padding:6px 13px;border-radius:999px;
background:rgba(255,255,255,.15);backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.22);
font-size:11px;font-weight:800;letter-spacing:1px;
margin-bottom:16px;
}
.hs2-kicker i{color:#fbbf24}
.hs2-title{
font-size:34px;line-height:1.15;font-weight:900;letter-spacing:-.6px;
margin:0 0 12px;text-shadow:0 3px 16px rgba(0,0,0,.25);
max-width:640px;
}
.hs2-lead{
margin:0 0 22px;font-size:15px;line-height:1.6;
color:rgba(255,255,255,.88);max-width:580px;
}
.hs2-ctas{display:flex;gap:10px;flex-wrap:wrap}
.hs2-btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 20px;border-radius:10px;
font-size:14px;font-weight:700;text-decoration:none;
transition:transform .2s, box-shadow .2s, background .2s;
}
.hs2-btn-primary{
background:#fff;color:#0f172a;
box-shadow:0 10px 30px -8px rgba(0,0,0,.3);
}
.hs2-btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 36px -8px rgba(0,0,0,.4)}
.hs2-btn-ghost{
background:rgba(255,255,255,.1);color:#fff;
border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);
}
.hs2-btn-ghost:hover{background:rgba(255,255,255,.18)}
/* Visual card */
.hs2-visual{
position:relative;display:flex;align-items:center;justify-content:center;min-height:240px;
}
.hs2-card{
position:relative;z-index:2;
width:200px;height:200px;border-radius:22px;
background:rgba(255,255,255,.12);backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,.25);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
animation:hs2CardFloat 5s ease-in-out infinite;
}
@keyframes hs2CardFloat{
0%,100%{transform:translateY(0) rotate(-2deg)}
50%{transform:translateY(-10px) rotate(2deg)}
}
.hs2-badge{
position:absolute;top:-10px;padding:5px 12px;border-radius:20px;
background:#fbbf24;color:#78350f;font-size:11px;font-weight:800;letter-spacing:1px;
box-shadow:0 6px 16px -4px rgba(251,191,36,.6);
}
.hs2-ico{
width:70px;height:70px;border-radius:18px;
background:rgba(255,255,255,.2);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:30px;
}
.hs2-meta{
font-size:12px;color:rgba(255,255,255,.85);font-weight:600;
display:inline-flex;align-items:center;gap:5px;
}
.hs2-meta i{color:#fbbf24}
.hs2-orb{
position:absolute;border-radius:50%;filter:blur(20px);
background:rgba(255,255,255,.25);
animation:hs2OrbF 7s ease-in-out infinite;
}
.hs2-orb-1{width:80px;height:80px;top:10%;left:10%}
.hs2-orb-2{width:60px;height:60px;bottom:15%;right:10%;animation-delay:-3s}
@keyframes hs2OrbF{
0%,100%{transform:translate(0,0) scale(1);opacity:.5}
50%{transform:translate(12px,-10px) scale(1.15);opacity:.8}
}
/* Nav arrows */
.hs2-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:10;
width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.95);color:#0f172a;
display:flex;align-items:center;justify-content:center;
font-size:14px;
box-shadow:0 8px 20px -4px rgba(0,0,0,.25);
transition:background .15s, transform .15s, box-shadow .15s;
}
.hs2-nav:hover{background:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 12px 26px -4px rgba(0,0,0,.35)}
.hs2-prev{left:16px}
.hs2-next{right:16px}
/* Bottom bar: dots + pause */
.hs2-bar{
position:absolute;bottom:16px;left:40px;right:40px;z-index:5;
display:flex;align-items:center;gap:14px;
}
.hs2-dots{display:flex;gap:8px;align-items:center}
.hs2-dot{
width:26px;height:6px;padding:0;border:0;border-radius:3px;cursor:pointer;
background:rgba(255,255,255,.25);
transition:background .25s, width .35s;
position:relative;overflow:hidden;
}
.hs2-dot:hover{background:rgba(255,255,255,.45)}
.hs2-dot.on{width:46px;background:rgba(255,255,255,.9)}
.hs2-dot span{display:none}
.hs2-pause{
margin-left:auto;
width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;
background:rgba(255,255,255,.15);color:#fff;backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;font-size:11px;
border:1px solid rgba(255,255,255,.25);
transition:background .2s;
}
.hs2-pause:hover{background:rgba(255,255,255,.28)}
/* Timer bar */
.hs2-timer{
position:absolute;bottom:0;left:0;right:0;height:3px;z-index:4;
background:rgba(0,0,0,.2);
}
.hs2-timer-fill{
height:100%;width:0;
background:linear-gradient(90deg,#fff,rgba(255,255,255,.5));
}
/* Dark mode */
body.dark .hs2-box{background:#0b1220;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
/* Responsive */
@media (max-width:960px){
.hs2-viewport{height:auto;min-height:380px}
.hs2-inner{grid-template-columns:1fr;padding:30px 28px 60px;gap:20px}
.hs2-visual{min-height:180px;order:-1}
.hs2-card{width:150px;height:150px}
.hs2-ico{width:54px;height:54px;font-size:22px}
.hs2-title{font-size:24px;letter-spacing:-.3px}
.hs2-lead{font-size:13.5px}
.hs2-bar{left:16px;right:16px}
.hs2-nav{width:36px;height:36px;font-size:12px}
.hs2-prev{left:8px}.hs2-next{right:8px}
}
@media (max-width:520px){
.hs2-viewport{min-height:420px}
.hs2-title{font-size:21px}
.hs2-btn{padding:10px 14px;font-size:13px}
.hs2-visual{min-height:140px}
}
/* ═══════════════════════════════════════════════════════════
TICKER v2 — .tk2 (unified live news stream)
═══════════════════════════════════════════════════════════ */
.tk2{
position:relative;
background:linear-gradient(90deg,#0f172a 0%,#1e293b 50%,#0f172a 100%);
color:#e5e7eb;
border-top:1px solid rgba(255,255,255,.06);
border-bottom:1px solid rgba(255,255,255,.06);
font-size:13px;
overflow:hidden;
}
.tk2::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(600px 80px at 12% 50%,rgba(239,68,68,.15),transparent 70%),
radial-gradient(700px 80px at 88% 50%,rgba(59,130,246,.12),transparent 70%);
}
.tk2-in{
position:relative;z-index:1;display:flex;align-items:stretch;gap:14px;
min-height:44px;padding:6px 0;
}
/* CANLI + radar */
.tk2-live{
display:flex;align-items:center;gap:8px;
padding:0 14px;border-right:1px dashed rgba(255,255,255,.1);
flex-shrink:0;
}
.tk2-radar{position:relative;width:22px;height:22px;display:inline-block}
.tk2-radar .dot{
position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;
background:#ef4444;box-shadow:0 0 12px #ef4444;z-index:2;
}
.tk2-radar .wave{
position:absolute;inset:0;border-radius:50%;
border:2px solid #ef4444;opacity:0;
animation:tk2Pulse 2s ease-out infinite;
}
.tk2-radar .wave:nth-child(2){animation-delay:1s}
@keyframes tk2Pulse{
0%{transform:scale(.3);opacity:1}
100%{transform:scale(1.6);opacity:0}
}
.tk2-live-lbl{
font-weight:800;font-size:11px;letter-spacing:1.5px;color:#fca5a5;
text-transform:uppercase;
}
/* Stat chips */
.tk2-stats{
display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.tk2-chip{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;border-radius:20px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
font-size:11.5px;font-weight:600;line-height:1;
transition:background .2s, transform .2s;
}
.tk2-chip:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
.tk2-chip i{font-size:11px}
.tk2-chip b{font-weight:800;font-size:13px}
.tk2-chip small{opacity:.7;font-size:10.5px;font-weight:500}
.tk2-chip.tk-new i,.tk2-chip.tk-new b{color:#60a5fa}
.tk2-chip.tk-res i,.tk2-chip.tk-res b{color:#34d399}
.tk2-chip.tk-resp i,.tk2-chip.tk-resp b{color:#fbbf24}
.tk2-chip.tk-brand i,.tk2-chip.tk-brand b{color:#c084fc}
/* Feed / marquee */
.tk2-feed{
flex:1;min-width:0;overflow:hidden;position:relative;
mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);
}
.tk2-track{
display:flex;align-items:center;gap:14px;white-space:nowrap;
width:max-content;
animation:tk2Scroll 80s linear infinite;
}
.tk2-feed:hover .tk2-track{animation-play-state:paused}
@keyframes tk2Scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
/* Item */
.tk2-item{
display:inline-flex;align-items:center;gap:8px;
padding:5px 12px;border-radius:8px;
background:rgba(255,255,255,.03);
border:1px solid rgba(255,255,255,.06);
color:#e5e7eb;text-decoration:none;
transition:background .2s,border-color .2s,transform .2s;
max-width:520px;
}
.tk2-item:hover{
background:rgba(255,255,255,.08);
border-color:rgba(255,255,255,.15);
transform:translateY(-1px);
color:#fff;
}
.ti-bdg{
display:inline-flex;align-items:center;gap:5px;
padding:3px 8px;border-radius:5px;
font-size:10px;font-weight:800;letter-spacing:.5px;
flex-shrink:0;
}
.ti-bdg i{font-size:10px}
.tk2-item.tk-new .ti-bdg{background:rgba(96,165,250,.18);color:#93c5fd}
.tk2-item.tk-res .ti-bdg{background:rgba(52,211,153,.18);color:#6ee7b7}
.tk2-item.tk-resp .ti-bdg{background:rgba(251,191,36,.18);color:#fcd34d}
.tk2-item.tk-hot .ti-bdg{background:rgba(239,68,68,.18);color:#fca5a5}
.ti-brand{
font-weight:700;color:#fff;font-size:12.5px;
max-width:120px;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;
}
.ti-title{
color:#cbd5e1;font-size:12.5px;
overflow:hidden;text-overflow:ellipsis;max-width:340px;
}
.ti-time{
display:inline-flex;align-items:center;gap:4px;
color:#94a3b8;font-size:11px;flex-shrink:0;
}
.ti-time i{font-size:10px}
/* Controls + clock */
.tk2-ctrl{
display:flex;align-items:center;gap:8px;padding:0 14px;
border-left:1px dashed rgba(255,255,255,.1);flex-shrink:0;
}
.tk2-btn{
width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.12);
background:rgba(255,255,255,.04);color:#e5e7eb;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
transition:background .2s,border-color .2s;font-size:11px;
}
.tk2-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.tk2-sep{width:1px;height:18px;background:rgba(255,255,255,.1)}
.tk2-clock{
display:inline-flex;align-items:center;gap:6px;
font-family:"SF Mono","Consolas",monospace;font-size:12px;
color:#fbbf24;font-weight:600;
}
.tk2-clock i{color:#fbbf24;font-size:11px}
/* Paused state */
.tk2.is-paused .tk2-track{animation-play-state:paused}
/* Responsive */
@media (max-width:1024px){
.tk2-stats .tk2-chip small{display:none}
.ti-title{max-width:220px}
.ti-brand{max-width:90px}
}
@media (max-width:768px){
.tk2-stats,.tk2-ctrl{display:none}
.tk2-in{min-height:38px}
.tk2-live{padding:0 10px}
.tk2-live-lbl{font-size:10px}
.tk2-item{max-width:380px;padding:4px 10px}
.ti-title{max-width:180px;font-size:12px}
}
/* ═══════════════════════════════════════════════════════════
STICKY HEADER v2 — compact mode on scroll
═══════════════════════════════════════════════════════════ */
.site-header{
transition:box-shadow .3s ease, transform .3s ease;
will-change:transform;
}
.site-header .topbar,
.site-header .navbar,
.site-header .categories-bar{
transition:max-height .35s ease, padding .25s ease, opacity .25s ease, transform .25s ease;
}
/* Scrolled = soft compact: only tiny padding reduction + shadow */
.site-header.scrolled{
box-shadow:0 6px 22px -10px rgba(15,23,42,.15), 0 1px 0 rgba(15,23,42,.04);
}
.site-header.scrolled .navbar{padding:10px 0 !important}
.site-header.scrolled .categories-bar{padding:8px 0}
/* Topbar stays fully visible on scroll — no hide behavior */
/* No more translate-hide on fast scroll (disabled) */
.site-header.hide-up{transform:none}
/* Reading progress bar (top of header) */
.sp-bar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:999;
background:transparent;pointer-events:none;
}
.sp-bar .sp-fill{
height:100%;width:0;
background:linear-gradient(90deg,#e63946 0%,#ff6b7a 50%,#f39c12 100%);
box-shadow:0 0 10px rgba(230,57,70,.5);
transition:width .1s linear;
}
/* Ctrl/Cmd+K hint inside search */
.search-box{position:relative}
.search-kbd{
position:absolute;right:56px;top:50%;transform:translateY(-50%);
display:inline-flex;align-items:center;gap:3px;
padding:3px 7px;border-radius:5px;
background:rgba(15,23,42,.06);border:1px solid rgba(15,23,42,.08);
font-size:10.5px;font-weight:700;color:#64748b;
font-family:"SF Mono","Consolas",monospace;
pointer-events:none;user-select:none;
}
.search-box input:focus ~ .search-kbd{opacity:0}
@media (max-width:900px){.search-kbd{display:none}}
/* Smooth scroll for anchor jumps under sticky header */
html{scroll-behavior:smooth;scroll-padding-top:180px}
.site-header.scrolled ~ *{--sp-top:90px}
/* Back to top v2 */
.to-top{
bottom:24px !important;right:24px !important;
width:46px !important;height:46px !important;
background:linear-gradient(135deg,#e63946,#c1121f) !important;
box-shadow:0 10px 30px -8px rgba(230,57,70,.5) !important;
transition:transform .25s ease, opacity .25s ease !important;
}
.to-top:hover{transform:translateY(-3px) scale(1.05)}
/* ═══════════════════════════════════════════════════════════
COMMAND PALETTE
═══════════════════════════════════════════════════════════ */
.cmdp{
position:fixed;inset:0;z-index:2000;
display:none;align-items:flex-start;justify-content:center;
padding:90px 20px 20px;
}
.cmdp.open{display:flex;animation:cmdpIn .15s ease}
@keyframes cmdpIn{from{opacity:0}to{opacity:1}}
.cmdp-backdrop{
position:absolute;inset:0;
background:rgba(15,23,42,.55);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.cmdp-box{
position:relative;width:100%;max-width:640px;
background:#fff;border-radius:14px;
box-shadow:0 30px 80px -15px rgba(15,23,42,.5), 0 10px 30px -10px rgba(15,23,42,.3);
overflow:hidden;
animation:cmdpSlide .25s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes cmdpSlide{from{transform:translateY(-20px) scale(.96);opacity:0}to{transform:none;opacity:1}}
.cmdp-head{
display:flex;align-items:center;gap:10px;
padding:14px 16px;border-bottom:1px solid #e5e7eb;
}
.cmdp-head > i{color:#94a3b8;font-size:16px}
.cmdp-head input{
flex:1;border:0;outline:0;background:transparent;
font-size:16px;font-weight:500;color:#0f172a;
font-family:inherit;
}
.cmdp-head input::placeholder{color:#94a3b8;font-weight:400}
.cmdp-esc{
padding:3px 8px;border-radius:5px;
background:#f1f5f9;border:1px solid #e2e8f0;
font-size:10.5px;font-weight:700;color:#64748b;
font-family:"SF Mono","Consolas",monospace;
}
.cmdp-body{max-height:55vh;overflow-y:auto;padding:6px 0}
.cmdp-body::-webkit-scrollbar{width:6px}
.cmdp-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.cmdp-section{padding:6px 0}
.cmdp-label{
padding:6px 16px 4px;
font-size:10.5px;font-weight:800;letter-spacing:1px;
color:#94a3b8;text-transform:uppercase;
}
.cmdp-item{
display:flex;align-items:center;gap:12px;
padding:10px 16px;margin:1px 6px;border-radius:8px;
color:#1f2937;text-decoration:none;cursor:pointer;
transition:background .12s ease;
}
.cmdp-item > i{
width:28px;height:28px;border-radius:7px;
display:flex;align-items:center;justify-content:center;
background:#f1f5f9;color:#475569;font-size:13px;flex-shrink:0;
transition:background .12s, color .12s;
}
.cmdp-item span{flex:1;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmdp-item small{color:#94a3b8;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.cmdp-item kbd{
padding:2px 7px;border-radius:4px;
background:#f1f5f9;border:1px solid #e2e8f0;
font-size:10px;font-weight:700;color:#64748b;
font-family:"SF Mono","Consolas",monospace;
}
.cmdp-item:hover,.cmdp-item.active{background:linear-gradient(90deg,#eff6ff,#f5f3ff)}
.cmdp-item.active > i,.cmdp-item:hover > i{background:var(--primary,#e63946);color:#fff}
.cmdp-empty{
padding:38px 20px;text-align:center;color:#94a3b8;font-size:13px;
display:flex;flex-direction:column;align-items:center;gap:10px;
}
.cmdp-empty i{font-size:28px;opacity:.5}
.cmdp-foot{
display:flex;align-items:center;gap:14px;
padding:9px 16px;border-top:1px solid #e5e7eb;
background:#f8fafc;font-size:11.5px;color:#64748b;
}
.cmdp-foot kbd{
padding:1px 6px;border-radius:4px;background:#fff;border:1px solid #e2e8f0;
font-family:"SF Mono","Consolas",monospace;font-size:10px;margin-right:3px;
}
.cmdp-brand{margin-left:auto;font-weight:700;color:#e63946}
.cmdp-brand i{margin-right:4px}
/* Dark */
body.dark .cmdp-box{background:#1a2942;color:#e5e7eb}
body.dark .cmdp-head{border-color:#263349}
body.dark .cmdp-head input{color:#f1f5f9}
body.dark .cmdp-esc,body.dark .cmdp-foot kbd,body.dark .cmdp-item kbd{background:#0f172a;border-color:#263349;color:#cbd5e1}
body.dark .cmdp-item{color:#e5e7eb}
body.dark .cmdp-item > i{background:#263349;color:#cbd5e1}
body.dark .cmdp-item:hover,body.dark .cmdp-item.active{background:rgba(230,57,70,.12)}
body.dark .cmdp-foot{background:#0f172a;border-color:#263349}
@media (max-width:600px){
.cmdp{padding:60px 12px 12px}
.cmdp-foot span:not(.cmdp-brand){display:none}
}
/* ═══════════════════════════════════════════════════════════
COOKIE CONSENT
═══════════════════════════════════════════════════════════ */
.cc-bar{
position:fixed;left:16px;right:16px;bottom:16px;z-index:1500;
transform:translateY(120%);opacity:0;transition:transform .4s cubic-bezier(.2,.9,.3,1.1), opacity .3s;
pointer-events:none;
}
.cc-bar.show{transform:none;opacity:1;pointer-events:auto}
.cc-in{
max-width:980px;margin:0 auto;
display:flex;align-items:center;gap:16px;
padding:14px 18px;
background:#fff;
border:1px solid #e5e7eb;border-radius:14px;
box-shadow:0 20px 50px -10px rgba(15,23,42,.25);
}
.cc-ico{
width:44px;height:44px;border-radius:11px;flex-shrink:0;
background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:19px;
box-shadow:0 8px 20px -5px rgba(245,158,11,.5);
}
.cc-text{flex:1;min-width:0}
.cc-text strong{display:block;font-size:14px;color:#0f172a;margin-bottom:2px}
.cc-text p{margin:0;font-size:12.5px;color:#64748b;line-height:1.5}
.cc-text a{color:#e63946;font-weight:600}
.cc-btns{display:flex;gap:8px;flex-shrink:0}
.cc-btn{
padding:9px 16px;border-radius:8px;border:1px solid transparent;
font-size:13px;font-weight:700;cursor:pointer;
transition:transform .15s, box-shadow .15s, background .15s;
}
.cc-rej{background:#f1f5f9;color:#475569;border-color:#e2e8f0}
.cc-rej:hover{background:#e2e8f0}
.cc-acc{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 6px 18px -4px rgba(16,185,129,.5)}
.cc-acc:hover{transform:translateY(-2px);box-shadow:0 10px 24px -4px rgba(16,185,129,.6)}
body.dark .cc-in{background:#1a2942;border-color:#263349}
body.dark .cc-text strong{color:#f1f5f9}
body.dark .cc-text p{color:#cbd5e1}
body.dark .cc-rej{background:#0f172a;color:#cbd5e1;border-color:#263349}
@media (max-width:720px){
.cc-in{flex-direction:column;align-items:stretch;text-align:center;padding:14px}
.cc-ico{margin:0 auto}
.cc-btns{justify-content:center}
}
/* ═══════════════════════════════════════════════════════════
TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════ */
.toast-host{
position:fixed;top:84px;right:20px;z-index:1900;
display:flex;flex-direction:column;gap:10px;
max-width:380px;pointer-events:none;
}
.toast{
display:flex;align-items:flex-start;gap:12px;
padding:12px 14px;padding-right:36px;position:relative;
background:#fff;border-radius:11px;
box-shadow:0 18px 40px -12px rgba(15,23,42,.3), 0 4px 12px -3px rgba(15,23,42,.12);
border:1px solid #e5e7eb;border-left:4px solid #64748b;
transform:translateX(120%);opacity:0;
transition:transform .35s cubic-bezier(.2,.9,.3,1.1), opacity .3s;
pointer-events:auto;
overflow:hidden;
}
.toast.show{transform:none;opacity:1}
.toast.out{transform:translateX(120%);opacity:0}
.toast-ico{
width:30px;height:30px;border-radius:8px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:14px;color:#fff;
}
.toast-body{flex:1;min-width:0}
.toast-title{font-size:13px;font-weight:800;color:#0f172a;margin-bottom:1px}
.toast-msg{font-size:12.5px;color:#475569;line-height:1.45;word-wrap:break-word}
.toast-close{
position:absolute;top:8px;right:8px;
width:22px;height:22px;border-radius:5px;border:0;
background:transparent;color:#94a3b8;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:11px;
transition:background .15s, color .15s;
}
.toast-close:hover{background:#f1f5f9;color:#0f172a}
.toast-bar{
position:absolute;left:0;bottom:0;height:3px;width:100%;
background:currentColor;opacity:.5;
transform-origin:left;
animation:toastTimer linear forwards;
}
@keyframes toastTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.toast.t-success{border-left-color:#10b981;color:#10b981}
.toast.t-success .toast-ico{background:#10b981}
.toast.t-error{border-left-color:#ef4444;color:#ef4444}
.toast.t-error .toast-ico{background:#ef4444}
.toast.t-warning{border-left-color:#f59e0b;color:#f59e0b}
.toast.t-warning .toast-ico{background:#f59e0b}
.toast.t-info{border-left-color:#0ea5e9;color:#0ea5e9}
.toast.t-info .toast-ico{background:#0ea5e9}
body.dark .toast{background:#1a2942;border-color:#263349}
body.dark .toast-title{color:#f1f5f9}
body.dark .toast-msg{color:#cbd5e1}
body.dark .toast-close:hover{background:#0f172a;color:#f1f5f9}
@media (max-width:520px){
.toast-host{left:12px;right:12px;max-width:none;top:70px}
.toast{transform:translateY(-120%)}
.toast.show{transform:none}
.toast.out{transform:translateY(-120%)}
}
/* ═══════════════════════════════════════════════════════════
PAGE NAV LOADING BAR (NProgress style)
═══════════════════════════════════════════════════════════ */
.pgbar{
position:fixed;top:0;left:0;right:0;height:3px;z-index:2100;
pointer-events:none;opacity:0;transition:opacity .2s;
}
.pgbar.on{opacity:1}
.pgbar .pgbar-fill{
height:100%;width:0;
background:linear-gradient(90deg,#e63946,#f59e0b,#10b981);
background-size:200% 100%;
box-shadow:0 0 14px rgba(230,57,70,.6);
transition:width .3s ease;
animation:pgbarShift 2s linear infinite;
}
@keyframes pgbarShift{from{background-position:0 0}to{background-position:200% 0}}
.pgbar .pgbar-spin{
position:absolute;top:3px;right:6px;
width:14px;height:14px;border-radius:50%;
border:2px solid rgba(230,57,70,.2);border-top-color:#e63946;
animation:pgbarSpin .7s linear infinite;
opacity:0;transition:opacity .2s;
}
.pgbar.on .pgbar-spin{opacity:1}
@keyframes pgbarSpin{to{transform:rotate(360deg)}}
/* ═══════════════════════════════════════════════════════════
PWA INSTALL HINT
═══════════════════════════════════════════════════════════ */
.pwa-hint{
position:fixed;left:16px;bottom:16px;z-index:1400;
display:none;align-items:center;gap:10px;
padding:10px 14px;background:linear-gradient(135deg,#1d3557,#2d5a8e);color:#fff;
border-radius:12px;box-shadow:0 14px 36px -10px rgba(29,53,87,.5);
font-size:13px;font-weight:600;cursor:pointer;
animation:pwaIn .4s cubic-bezier(.2,.9,.3,1.1);
max-width:320px;
}
.pwa-hint.show{display:flex}
@keyframes pwaIn{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.pwa-hint i.pwa-dl{font-size:18px;color:#fbbf24}
/* ═══════════════════════════════════════════════════════════
AUTH v2 — split-screen login / register / forgot / reset
═══════════════════════════════════════════════════════════ */
.av2{
display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
min-height:calc(100vh - 160px);
background:#f8fafc;
}
.av2.av2-solo{grid-template-columns:1fr}
.av2.av2-solo .av2-mlogo{display:inline-flex}
@media (max-width:960px){
.av2{grid-template-columns:1fr}
.av2-side{display:none !important}
}
/* LEFT brand panel */
.av2-side{
position:relative;overflow:hidden;
color:#fff;padding:42px 40px;
display:flex;flex-direction:column;gap:22px;justify-content:space-between;
min-height:100%;
}
.av2-side-bg{
position:absolute;inset:0;z-index:0;
background:
radial-gradient(800px 400px at 110% -10%, rgba(245,158,11,.25), transparent 60%),
radial-gradient(700px 500px at -10% 110%, rgba(239,68,68,.3), transparent 60%),
linear-gradient(135deg,#1d3557 0%,#243b5d 50%,#162238 100%);
}
.av2-side-bg::after{
content:"";position:absolute;inset:0;
background-image:
radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
background-size:22px 22px;
opacity:.4;
}
.av2-side-in{position:relative;z-index:1;display:flex;flex-direction:column;gap:22px;flex:1}
.av2-logo{
display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
font-weight:800;font-size:18px;align-self:flex-start;
}
.av2-logo-ico{
width:36px;height:36px;border-radius:9px;
background:linear-gradient(135deg,#e63946,#c1121f);
display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;
box-shadow:0 8px 20px -6px rgba(230,57,70,.5);
}
.av2-hero-h{
font-size:32px;line-height:1.18;font-weight:800;margin:0 0 12px;
letter-spacing:-.5px;
}
.av2-hero-p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78);margin:0;max-width:440px}
/* Illustration */
.av2-illus{
position:relative;
margin:4px -10px 4px;
display:flex;align-items:center;justify-content:center;
}
.av2-svg{width:100%;height:auto;max-height:280px;display:block}
.av2-float { animation: av2Float 6s ease-in-out infinite; transform-origin: 280px 195px; }
.av2-float-slow { animation: av2Float 8s ease-in-out infinite -2s; }
.av2-float-delay { animation: av2Float 7s ease-in-out infinite -3s; }
@keyframes av2Float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){
.av2-float,.av2-float-slow,.av2-float-delay{animation:none}
}
.av2-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.av2-features li{
display:flex;align-items:flex-start;gap:12px;
padding:12px 14px;border-radius:11px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(6px);
}
.av2-features i{
width:34px;height:34px;border-radius:9px;
background:rgba(255,255,255,.1);color:#fbbf24;
display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.av2-features strong{display:block;font-size:13.5px;color:#fff;margin-bottom:2px}
.av2-features span{font-size:12.5px;color:rgba(255,255,255,.7);line-height:1.5}
.av2-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
}
.av2-stat b{display:block;font-size:22px;font-weight:800;color:#fff;letter-spacing:-.3px}
.av2-stat span{font-size:11.5px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.av2-quote{
padding:16px 18px;border-radius:12px;
background:rgba(0,0,0,.2);border-left:3px solid #fbbf24;
position:relative;
}
.av2-quote > i{position:absolute;top:10px;right:14px;color:rgba(251,191,36,.3);font-size:28px}
.av2-quote p{margin:0 0 10px;font-size:13px;color:rgba(255,255,255,.88);font-style:italic;line-height:1.55}
.av2-quote-who{display:flex;align-items:center;gap:10px}
.av2-av{
width:32px;height:32px;border-radius:50%;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;
}
.av2-quote-who strong{font-size:12.5px;color:#fff;display:block}
.av2-quote-who small{font-size:11px;color:rgba(255,255,255,.6)}
/* RIGHT form panel */
.av2-main{
display:flex;align-items:center;justify-content:center;
padding:48px 24px;
}
.av2-card{
width:100%;max-width:440px;
background:transparent;
}
.av2-card-wide{max-width:560px}
.av2-mlogo{display:none;align-items:center;gap:8px;margin-bottom:22px;color:#0f172a;text-decoration:none;font-weight:800}
.av2-mlogo-ico{
width:30px;height:30px;border-radius:7px;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;
display:flex;align-items:center;justify-content:center;font-weight:900;
}
@media (max-width:960px){.av2-mlogo{display:inline-flex}}
.av2-head{margin-bottom:22px}
.av2-head h1{font-size:26px;font-weight:800;color:#0f172a;margin:0 0 6px;letter-spacing:-.4px}
.av2-head p{font-size:14px;color:#64748b;margin:0}
.av2-head a{color:#e63946;font-weight:700;text-decoration:none}
.av2-head a:hover{text-decoration:underline}
/* Social buttons */
.av2-social{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.av2-sbtn{
display:inline-flex;align-items:center;justify-content:center;gap:7px;
padding:11px 10px;border-radius:10px;
background:#fff;border:1px solid #e5e7eb;
font-size:13px;font-weight:600;color:#0f172a;cursor:pointer;
transition:border-color .15s, transform .15s, box-shadow .15s;
}
.av2-sbtn:hover{border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 12px -3px rgba(15,23,42,.1)}
.av2-sbtn i{font-size:15px}
@media (max-width:420px){.av2-social{grid-template-columns:1fr 1fr}.av2-sbtn:nth-child(3){grid-column:1/-1}}
.av2-sep{display:flex;align-items:center;gap:12px;margin:14px 0 16px;color:#94a3b8;font-size:12px}
.av2-sep::before,.av2-sep::after{content:"";flex:1;height:1px;background:#e5e7eb}
/* Errors */
.av2-err{
display:flex;align-items:flex-start;gap:10px;
padding:11px 13px;border-radius:10px;margin-bottom:12px;
background:#fef2f2;border:1px solid #fecaca;color:#991b1b;
font-size:13px;line-height:1.5;
}
.av2-err i{color:#ef4444;margin-top:1px}
.av2-ok{
display:flex;align-items:flex-start;gap:14px;
padding:16px 18px;border-radius:12px;margin-bottom:16px;
background:linear-gradient(135deg,#f0fdf4,#ecfdf5);border:1px solid #bbf7d0;
}
.av2-ok-ico{
width:44px;height:44px;border-radius:10px;flex-shrink:0;
background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;
display:flex;align-items:center;justify-content:center;font-size:17px;
}
.av2-ok-green{background:linear-gradient(135deg,#10b981,#059669)}
.av2-ok strong{display:block;font-size:14px;color:#065f46;margin-bottom:3px}
.av2-ok p{margin:0;font-size:12.5px;color:#047857;line-height:1.5}
/* Form */
.av2-form{display:flex;flex-direction:column;gap:14px}
.av2-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.av2-grid{grid-template-columns:1fr}}
.av2-fld{display:flex;flex-direction:column;gap:6px}
.av2-lbl{
display:flex;justify-content:space-between;align-items:baseline;
font-size:12.5px;font-weight:700;color:#334155;letter-spacing:.1px;
}
.av2-opt{color:#94a3b8;font-weight:500;font-size:11px}
.av2-req{color:#e63946;font-weight:900}
.av2-link{color:#e63946;font-weight:700;font-size:12px;text-decoration:none}
.av2-link:hover{text-decoration:underline}
.av2-wrap{
display:flex;align-items:center;gap:0;
background:#fff;border:1.5px solid #e5e7eb;border-radius:10px;
padding:0 12px;transition:border-color .15s, box-shadow .15s, background .15s;
position:relative;
}
.av2-wrap:focus-within{
border-color:#e63946;
box-shadow:0 0 0 4px rgba(230,57,70,.1);
background:#fff;
}
.av2-lead{color:#94a3b8;font-size:14px;width:18px;text-align:center;margin-right:10px;flex-shrink:0}
.av2-wrap input{
flex:1;border:0;outline:0;background:transparent;
padding:12px 0;font-size:14px;color:#0f172a;font-family:inherit;
min-width:0;
}
.av2-wrap input::placeholder{color:#cbd5e1}
.av2-eye{
background:transparent;border:0;cursor:pointer;color:#94a3b8;
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
border-radius:6px;font-size:13px;
transition:color .15s, background .15s;
}
.av2-eye:hover{color:#0f172a;background:#f1f5f9}
.av2-check-ico{
width:20px;height:20px;color:#10b981;
opacity:0;transform:scale(.6);transition:opacity .15s, transform .15s;
display:flex;align-items:center;justify-content:center;
}
.av2-check-ico.ok{opacity:1;transform:scale(1)}
/* Phone */
.av2-phone{padding-left:0}
.av2-dial{
padding:0 12px;color:#475569;font-size:13px;font-weight:700;
border-right:1px solid #e5e7eb;white-space:nowrap;align-self:stretch;
display:flex;align-items:center;
}
.av2-phone input{padding-left:12px}
/* Help text */
.av2-help{font-size:11.5px;color:#94a3b8;line-height:1.4}
/* Password meter */
.av2-meter{display:flex;gap:4px;margin:2px 0}
.av2-meter span{flex:1;height:4px;border-radius:2px;background:#e5e7eb;transition:background .2s}
/* Checkbox */
.av2-check{
display:flex;align-items:flex-start;gap:10px;
font-size:13px;color:#475569;line-height:1.5;cursor:pointer;user-select:none;
}
.av2-check input{position:absolute;opacity:0;pointer-events:none}
.av2-box{
width:18px;height:18px;border-radius:5px;flex-shrink:0;margin-top:1px;
background:#fff;border:1.5px solid #cbd5e1;
display:flex;align-items:center;justify-content:center;
transition:background .15s, border-color .15s;
}
.av2-box i{color:#fff;font-size:10px;opacity:0;transition:opacity .15s}
.av2-check input:checked ~ .av2-box{background:#e63946;border-color:#e63946}
.av2-check input:checked ~ .av2-box i{opacity:1}
.av2-check a{color:#e63946;font-weight:600;text-decoration:none}
.av2-check a:hover{text-decoration:underline}
/* Submit button */
.av2-submit{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
padding:13px 18px;margin-top:4px;
border:0;border-radius:10px;cursor:pointer;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;
font-size:14.5px;font-weight:700;letter-spacing:.2px;
box-shadow:0 10px 22px -6px rgba(230,57,70,.45);
transition:transform .15s, box-shadow .15s, opacity .15s;
text-decoration:none;
}
.av2-submit:hover{transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(230,57,70,.55)}
.av2-submit:active{transform:translateY(0)}
.av2-submit-ghost{background:#fff;color:#334155;border:1.5px solid #e5e7eb;box-shadow:none}
.av2-submit-ghost:hover{background:#f8fafc;box-shadow:0 4px 12px -3px rgba(15,23,42,.08)}
.av2-altlink{text-align:center;font-size:13px;color:#64748b;margin-top:14px}
.av2-altlink a{color:#e63946;font-weight:700;text-decoration:none}
.av2-altlink a:hover{text-decoration:underline}
/* Trust / notes */
.av2-trust{
display:flex;align-items:center;justify-content:center;gap:10px;
margin-top:22px;padding-top:18px;border-top:1px solid #e5e7eb;
font-size:11.5px;color:#94a3b8;font-weight:600;
}
.av2-trust i{color:#10b981;margin-right:4px}
.av2-dot{color:#cbd5e1}
.av2-notes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.av2-note{
display:flex;align-items:center;gap:10px;
padding:12px 14px;border-radius:10px;
background:#fff;border:1px solid #e5e7eb;
}
.av2-note > i{
width:34px;height:34px;border-radius:8px;
background:linear-gradient(135deg,#eff6ff,#dbeafe);color:#2563eb;
display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
}
.av2-note strong{display:block;font-size:13px;color:#0f172a}
.av2-note span{font-size:11.5px;color:#64748b}
/* Dark mode */
body.dark .av2{background:#0f172a}
body.dark .av2-side-bg{background:linear-gradient(135deg,#0b1628,#111c35 50%,#080f1f 100%)}
body.dark .av2-sbtn{background:#1a2942;border-color:#263349;color:#e5e7eb}
body.dark .av2-sbtn:hover{border-color:#3b4a66}
body.dark .av2-head h1{color:#f1f5f9}
body.dark .av2-head p{color:#94a3b8}
body.dark .av2-lbl{color:#cbd5e1}
body.dark .av2-wrap{background:#1a2942;border-color:#263349}
body.dark .av2-wrap input{color:#f1f5f9}
body.dark .av2-wrap input::placeholder{color:#475569}
body.dark .av2-dial{color:#cbd5e1;border-color:#263349}
body.dark .av2-sep{color:#64748b}
body.dark .av2-sep::before,body.dark .av2-sep::after{background:#263349}
body.dark .av2-err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:#fca5a5}
body.dark .av2-ok{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.3)}
body.dark .av2-ok strong{color:#6ee7b7}
body.dark .av2-ok p{color:#a7f3d0}
body.dark .av2-check{color:#cbd5e1}
body.dark .av2-box{background:#1a2942;border-color:#3b4a66}
body.dark .av2-trust{border-color:#263349;color:#64748b}
body.dark .av2-note{background:#1a2942;border-color:#263349}
body.dark .av2-note strong{color:#f1f5f9}
body.dark .av2-mlogo{color:#f1f5f9}
body.dark .av2-meter span{background:#263349}
body.dark .av2-altlink{color:#94a3b8}
/* Older auth styles (.pro-auth / .auth-compact) — keep but hide legacy orbs when av2 not used, they're separate */
.pwa-hint .pwa-close{
background:rgba(255,255,255,.15);border:0;color:#fff;
width:22px;height:22px;border-radius:5px;cursor:pointer;font-size:11px;
display:flex;align-items:center;justify-content:center;margin-left:auto;
}
/* =========================================================
ARTICLE / MAKALE SAYFASI — profesyonel SEO makale tasarımı
========================================================= */
.art-wrap{padding:0 0 40px}
.art-container{max-width:1180px}
.art-crumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:14px 0;font-size:13px;color:#6b7280}
.art-crumb a{color:#e63946;text-decoration:none;font-weight:600}
.art-crumb a:hover{text-decoration:underline}
.art-crumb i.fa-chevron-right{font-size:9px;color:#cbd5e1}
.art-crumb span{color:#0f172a;font-weight:700}
.art-article{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:36px 40px;box-shadow:0 20px 48px -30px rgba(15,23,42,.2);margin-bottom:32px}
.art-head{border-bottom:1px solid #e5e7eb;padding-bottom:20px;margin-bottom:26px}
.art-title{font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:900;letter-spacing:-.02em;color:#0f172a;margin:0 0 14px}
.art-meta{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:#6b7280}
.art-m{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.art-m i{color:#e63946;font-size:11px}
.art-grid{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.art-toc{position:sticky;top:100px}
.art-toc-inner{background:linear-gradient(180deg,#fff,#fafbfd);border:1px solid #e5e7eb;border-radius:14px;padding:16px}
.art-toc-title{font-size:12px;font-weight:800;color:#0f172a;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.art-toc-title i{color:#e63946;margin-right:6px}
.art-toc-list{list-style:none;padding:0;margin:0;counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.art-toc-list li{counter-increment:toc}
.art-toc-list a{display:flex;align-items:flex-start;gap:8px;padding:7px 10px;border-radius:8px;color:#475569;font-size:13px;font-weight:500;text-decoration:none;border-left:2px solid transparent;transition:.2s;line-height:1.35}
.art-toc-list a::before{content:counter(toc,decimal-leading-zero);font-size:10px;font-weight:800;color:#94a3b8;min-width:22px}
.art-toc-list a:hover{background:#f8fafc;color:#0f172a}
.art-toc-list a.active{background:rgba(230,57,70,.08);color:#c1121f;border-left-color:#e63946}
.art-toc-list a.active::before{color:#e63946}
.art-toc-share{margin-top:14px;padding-top:14px;border-top:1px dashed #e5e7eb}
.art-toc-lbl{font-size:11px;font-weight:800;color:#0f172a;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:8px}
.art-toc-lbl i{color:#e63946;margin-right:4px}
.art-share-row{display:flex;gap:6px;flex-wrap:wrap}
.art-sh{width:32px;height:32px;border-radius:8px;border:1px solid #e5e7eb;background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#64748b;text-decoration:none;font-size:13px;transition:.18s}
.art-sh:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(15,23,42,.2)}
.art-sh.tw:hover{background:#1da1f2;color:#fff;border-color:#1da1f2}
.art-sh.fb:hover{background:#1877f2;color:#fff;border-color:#1877f2}
.art-sh.wa:hover{background:#25d366;color:#fff;border-color:#25d366}
.art-sh.li:hover{background:#0a66c2;color:#fff;border-color:#0a66c2}
.art-sh.cp:hover{background:#e63946;color:#fff;border-color:#e63946}
.art-body{font-size:16px;line-height:1.75;color:#334155;min-width:0}
.art-body-full{max-width:760px;margin:0 auto}
.art-body h2{font-size:24px;font-weight:800;color:#0f172a;margin:32px 0 14px;line-height:1.25;letter-spacing:-.01em;scroll-margin-top:90px;padding-bottom:6px;border-bottom:2px solid #f1f5f9}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:18px;font-weight:800;color:#0f172a;margin:24px 0 10px;line-height:1.3}
.art-body p{margin:0 0 14px}
.art-body ul,.art-body ol{margin:0 0 16px;padding-left:26px}
.art-body li{margin-bottom:6px}
.art-body ul li::marker{color:#e63946}
.art-body ol li::marker{color:#e63946;font-weight:800}
.art-body strong{color:#0f172a;font-weight:800}
.art-body a{color:#e63946;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.art-body a:hover{color:#c1121f}
.art-body blockquote{margin:18px 0;padding:14px 18px;border-left:4px solid #e63946;background:linear-gradient(90deg,rgba(230,57,70,.05),transparent);border-radius:0 10px 10px 0;color:#475569;font-style:italic}
.art-body blockquote p:last-child{margin-bottom:0}
.art-body code{padding:2px 6px;background:#f1f5f9;border-radius:5px;font-family:ui-monospace,monospace;font-size:13px;color:#c1121f}
.art-body em{color:#475569}
.art-cta{margin-top:32px;padding:20px 22px;background:linear-gradient(135deg,#fef2f2,#fff7ed);border:1px solid rgba(230,57,70,.2);border-radius:16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.art-cta-ico{width:48px;height:48px;border-radius:12px;flex:0 0 48px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 10px 22px -10px rgba(230,57,70,.6)}
.art-cta-txt{flex:1;min-width:200px}
.art-cta-txt strong{display:block;font-size:16px;color:#0f172a;margin-bottom:2px}
.art-cta-txt span{font-size:13px;color:#64748b}
.art-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-weight:800;font-size:14px;text-decoration:none;box-shadow:0 10px 22px -8px rgba(230,57,70,.55);transition:.2s}
.art-cta-btn:hover{transform:translateY(-2px);box-shadow:0 14px 26px -8px rgba(230,57,70,.7)}
.art-related{margin-top:24px}
.art-related h3{font-size:20px;font-weight:800;color:#0f172a;margin:0 0 16px;display:inline-flex;align-items:center;gap:8px}
.art-related h3 i{color:#e63946}
.art-rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.art-rel-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #e5e7eb;text-decoration:none;color:#0f172a;font-weight:600;transition:.2s}
.art-rel-card > i:first-child{width:34px;height:34px;flex:0 0 34px;border-radius:8px;background:rgba(230,57,70,.08);color:#e63946;display:flex;align-items:center;justify-content:center;font-size:13px}
.art-rel-card span{flex:1;font-size:14px;line-height:1.35}
.art-rel-arr{color:#cbd5e1;font-size:12px;transition:.2s}
.art-rel-card:hover{border-color:rgba(230,57,70,.3);box-shadow:0 10px 24px -14px rgba(230,57,70,.3);transform:translateY(-2px)}
.art-rel-card:hover .art-rel-arr{color:#e63946;transform:translateX(3px)}
body.dark .art-article{background:#0f172a;border-color:rgba(255,255,255,.08)}
body.dark .art-title{color:#f1f5f9}
body.dark .art-head{border-color:rgba(255,255,255,.08)}
body.dark .art-body{color:#cbd5e1}
body.dark .art-body h2,body.dark .art-body h3,body.dark .art-body strong{color:#f1f5f9}
body.dark .art-body h2{border-color:rgba(255,255,255,.08)}
body.dark .art-body blockquote{background:linear-gradient(90deg,rgba(230,57,70,.1),transparent);color:#cbd5e1}
body.dark .art-body code{background:rgba(255,255,255,.06);color:#fca5a5}
body.dark .art-toc-inner{background:linear-gradient(180deg,#0f172a,#0b1220);border-color:rgba(255,255,255,.08)}
body.dark .art-toc-title{color:#f1f5f9}
body.dark .art-toc-list a{color:#94a3b8}
body.dark .art-toc-list a:hover{background:rgba(255,255,255,.04);color:#f1f5f9}
body.dark .art-sh{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:#94a3b8}
body.dark .art-cta{background:linear-gradient(135deg,rgba(230,57,70,.15),rgba(245,158,11,.08));border-color:rgba(230,57,70,.3)}
body.dark .art-cta-txt strong{color:#f1f5f9}
body.dark .art-rel-card{background:#0f172a;border-color:rgba(255,255,255,.08);color:#f1f5f9}
@media (max-width:880px){.art-grid{grid-template-columns:1fr}.art-toc{position:static}}
@media (max-width:680px){
.art-article{padding:22px 18px;border-radius:14px}
.art-meta{gap:10px;font-size:12px}
.art-cta{padding:16px;gap:12px}
.art-cta-btn{width:100%;justify-content:center}
}
/* =========================================================
SSS v2 (faq2)
========================================================= */
.faq2{padding:16px 0 50px}
.faq2-hero{text-align:center;padding:24px 0 28px;max-width:720px;margin:0 auto}
.faq2-hero-ico{width:66px;height:66px;margin:0 auto 14px;border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:28px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;box-shadow:0 16px 32px -14px rgba(230,57,70,.55)}
.faq2-hero h1{font-size:clamp(28px,3.6vw,40px);font-weight:900;color:#0f172a;margin:0 0 8px;letter-spacing:-.02em}
.faq2-hero p{color:#64748b;font-size:15px;margin:0 0 20px}
.faq2-hero a{color:#e63946;font-weight:700}
.faq2-search{position:relative;max-width:560px;margin:0 auto 16px}
.faq2-search i.fa-search{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:15px}
.faq2-search input{width:100%;padding:14px 60px 14px 48px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;font-size:15px;box-shadow:0 10px 26px -16px rgba(15,23,42,.22);outline:none;transition:.2s}
.faq2-search input:focus{border-color:rgba(230,57,70,.4);box-shadow:0 14px 32px -14px rgba(230,57,70,.32),0 0 0 3px rgba(230,57,70,.1)}
.faq2-search kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);padding:3px 8px;background:#f1f5f9;border:1px solid #e5e7eb;border-radius:6px;font-size:11px;color:#64748b;font-weight:700}
.faq2-stats{display:flex;justify-content:center;align-items:center;gap:10px;color:#64748b;font-size:13px;flex-wrap:wrap}
.faq2-stats strong{color:#0f172a;font-weight:800}
.faq2-stats .faq2-dot{color:#cbd5e1}
.faq2-stats i{color:#e63946;margin-right:3px}
.faq2-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0 22px;padding:0 10px}
.faq2-tab{--fc:#64748b;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;color:#475569;font-size:13px;font-weight:700;cursor:pointer;transition:.18s}
.faq2-tab i{color:var(--fc);font-size:11px}
.faq2-tab span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:2px 7px;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:11px;font-weight:800}
.faq2-tab:hover{border-color:var(--fc);color:var(--fc);transform:translateY(-1px)}
.faq2-tab.active{background:var(--fc,#e63946);border-color:var(--fc,#e63946);color:#fff;box-shadow:0 10px 22px -10px rgba(230,57,70,.45)}
.faq2-tab.active i,.faq2-tab.active span{color:#fff;background:rgba(255,255,255,.2)}
.faq2-body{max-width:860px;margin:0 auto}
.faq2-group{margin-bottom:28px}
.faq2-gh{--fc:#e63946;display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:#0f172a;margin:0 0 12px;padding:6px 14px;border-left:4px solid var(--fc);background:linear-gradient(90deg,rgba(255,255,255,.8),transparent)}
.faq2-gh i{color:var(--fc)}
.faq2-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:10px;overflow:hidden;transition:.2s;box-shadow:0 6px 16px -14px rgba(15,23,42,.2)}
.faq2-item:hover{border-color:#d1d5db;box-shadow:0 14px 28px -18px rgba(15,23,42,.25)}
.faq2-item.open{border-color:rgba(230,57,70,.3);box-shadow:0 18px 36px -18px rgba(230,57,70,.25)}
.faq2-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border:0;background:transparent;cursor:pointer;text-align:left}
.faq2-q-txt{font-size:15px;font-weight:700;color:#0f172a;flex:1}
.faq2-q-ic{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:#f1f5f9;color:#64748b;display:flex;align-items:center;justify-content:center;font-size:11px;transition:.25s}
.faq2-item.open .faq2-q-ic{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;transform:rotate(45deg)}
.faq2-a{max-height:0;overflow:hidden;padding:0 20px;transition:max-height .3s ease,padding .2s ease;color:#475569;font-size:14.5px;line-height:1.75}
.faq2-item.open .faq2-a{max-height:600px;padding:0 20px 18px;border-top:1px dashed #e5e7eb;margin-top:-1px;padding-top:14px}
.faq2-a a{color:#e63946;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.faq2-empty{text-align:center;padding:50px 20px;background:#fff;border:1px dashed #e5e7eb;border-radius:14px}
.faq2-empty i{font-size:40px;color:#cbd5e1;display:block;margin-bottom:12px}
.faq2-empty h3{margin:0 0 6px;font-size:18px;color:#0f172a}
.faq2-empty p{color:#64748b;margin:0}
.faq2-empty a{color:#e63946;font-weight:700}
.faq2-cta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:32px;max-width:860px;margin-left:auto;margin-right:auto}
.faq2-cta{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;text-decoration:none;color:#0f172a;transition:.2s}
.faq2-cta:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(15,23,42,.25);border-color:#d1d5db}
.faq2-cta-ico{width:40px;height:40px;flex:0 0 40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:0 10px 20px -10px rgba(0,0,0,.3)}
.faq2-cta strong{display:block;font-size:14px;font-weight:800}
.faq2-cta small{display:block;font-size:11.5px;color:#64748b;margin-top:2px}
body.dark .faq2-hero h1,body.dark .faq2-gh{color:#f1f5f9}
body.dark .faq2-hero p,body.dark .faq2-stats{color:#94a3b8}
body.dark .faq2-search input{background:#0f172a;border-color:rgba(255,255,255,.08);color:#f1f5f9}
body.dark .faq2-tab{background:#0f172a;border-color:rgba(255,255,255,.08);color:#cbd5e1}
body.dark .faq2-tab span{background:rgba(255,255,255,.06)}
body.dark .faq2-item{background:#0f172a;border-color:rgba(255,255,255,.08)}
body.dark .faq2-q-txt{color:#f1f5f9}
body.dark .faq2-q-ic{background:rgba(255,255,255,.06);color:#94a3b8}
body.dark .faq2-a{color:#cbd5e1}
body.dark .faq2-cta{background:#0f172a;border-color:rgba(255,255,255,.08);color:#f1f5f9}
/* =========================================================
404 sayfası v2 (e404)
========================================================= */
.e404-wrap{padding:30px 0 60px}
.e404-hero{text-align:center;padding:10px 0 32px;max-width:720px;margin:0 auto}
.e404-digits{display:flex;justify-content:center;align-items:center;gap:8px;margin-bottom:18px;line-height:1}
.e404-d{font-size:clamp(90px,14vw,170px);font-weight:900;letter-spacing:-.06em;background:linear-gradient(135deg,#e63946,#c1121f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 20px 40px rgba(230,57,70,.25))}
.e404-d.d0{position:relative;color:transparent;background:none;filter:none}
.e404-d.d0::before{content:"0";font-weight:900;background:linear-gradient(135deg,#1d3557,#2d5a8e);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 20px 40px rgba(29,53,87,.25));animation:e404Spin 6s linear infinite;display:inline-block}
@keyframes e404Spin{to{transform:rotate(360deg)}}
.e404-title{font-size:clamp(22px,2.8vw,30px);font-weight:900;color:#0f172a;margin:0 0 8px;letter-spacing:-.02em}
.e404-sub{color:#64748b;font-size:15px;max-width:480px;margin:0 auto 22px}
.e404-search{position:relative;max-width:560px;margin:0 auto 18px;display:flex;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:6px 6px 6px 50px;box-shadow:0 14px 30px -18px rgba(15,23,42,.25);transition:.2s}
.e404-search:focus-within{border-color:rgba(230,57,70,.4);box-shadow:0 18px 34px -14px rgba(230,57,70,.32),0 0 0 3px rgba(230,57,70,.1)}
.e404-search > i{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:15px}
.e404-search input{flex:1;border:0;outline:0;padding:12px 10px;font-size:15px;background:transparent;color:#0f172a;min-width:0}
.e404-search button{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:0;border-radius:10px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-weight:800;cursor:pointer;font-size:14px}
.e404-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.e404-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:10px;text-decoration:none;font-weight:700;font-size:13.5px;background:#fff;color:#0f172a;border:1px solid #e5e7eb;transition:.2s}
.e404-btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(15,23,42,.3)}
.e404-btn.ghost{background:transparent}
.e404-btn.primary{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;border-color:transparent;box-shadow:0 10px 20px -8px rgba(230,57,70,.45)}
.e404-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:24px}
.e404-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 14px 28px -20px rgba(15,23,42,.2)}
.e404-card.e404-wide{grid-column:1 / -1}
.e404-card h3{font-size:14px;font-weight:800;color:#0f172a;margin:0 0 12px;display:flex;align-items:center;gap:8px;letter-spacing:-.01em}
.e404-card h3 i{color:#e63946}
.e404-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.e404-list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#0f172a;text-decoration:none;font-size:13.5px;font-weight:500;transition:.15s}
.e404-list a:hover{background:#f8fafc;transform:translateX(3px)}
.e404-list img,.e404-list .e404-ph{width:28px;height:28px;border-radius:7px;object-fit:cover;flex:0 0 28px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}
.e404-list > li > a > span:not(.e404-ph){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.e404-list .fa-chevron-right{color:#cbd5e1;font-size:10px;margin-left:auto}
.e404-list a:hover .fa-chevron-right{color:#e63946}
.e404-cats a > i:first-child{width:28px;height:28px;border-radius:7px;background:rgba(230,57,70,.08);color:#e63946;display:flex;align-items:center;justify-content:center;font-size:12px;flex:0 0 28px}
.e404-help{text-align:center;padding:16px;background:linear-gradient(135deg,#fef2f2,#fff7ed);border:1px dashed rgba(230,57,70,.25);border-radius:12px;color:#64748b;font-size:14px}
.e404-help i{color:#f39c12;margin-right:6px}
.e404-help a{color:#e63946;font-weight:700}
body.dark .e404-title{color:#f1f5f9}
body.dark .e404-search,body.dark .e404-card,body.dark .e404-btn{background:#0f172a;border-color:rgba(255,255,255,.08);color:#f1f5f9}
body.dark .e404-list a{color:#f1f5f9}
body.dark .e404-list a:hover{background:rgba(255,255,255,.04)}
body.dark .e404-help{background:linear-gradient(135deg,rgba(230,57,70,.1),rgba(245,158,11,.06));border-color:rgba(230,57,70,.3)}
/* =========================================================
İletişim v2 (ct2)
========================================================= */
.ct2{padding:16px 0 60px}
.ct2-hero{text-align:center;padding:20px 0 30px;max-width:720px;margin:0 auto}
.ct2-hero-ico{width:62px;height:62px;margin:0 auto 14px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,#3498db,#1a6fa5);color:#fff;box-shadow:0 14px 28px -14px rgba(52,152,219,.5)}
.ct2-hero h1{font-size:clamp(28px,3.4vw,38px);font-weight:900;color:#0f172a;margin:0 0 8px;letter-spacing:-.02em}
.ct2-hero p{color:#64748b;font-size:15px;margin:0 0 16px}
.ct2-hero strong{color:#0f172a;font-weight:800}
.ct2-kpis{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;background:rgba(255,255,255,.75);border:1px solid #e5e7eb;border-radius:999px;font-size:12.5px;color:#475569;font-weight:600}
.ct2-kpis i{color:#e63946;margin-right:4px}
.ct2-kpis .ct2-dot{color:#cbd5e1}
.ct2-sh{font-size:18px;font-weight:800;color:#0f172a;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.ct2-sh i{color:#e63946}
.ct2-depts{margin-bottom:30px}
.ct2-dept-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ct2-dept{display:flex;align-items:center;gap:12px;padding:14px;border-radius:12px;background:#fff;border:1px solid #e5e7eb;text-decoration:none;color:#0f172a;transition:.2s;min-width:0}
.ct2-dept:hover{transform:translateY(-3px);border-color:#d1d5db;box-shadow:0 16px 28px -18px rgba(15,23,42,.22)}
.ct2-dept-ic{width:42px;height:42px;flex:0 0 42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;box-shadow:0 10px 20px -10px rgba(0,0,0,.3)}
.ct2-dept > div{min-width:0;flex:1}
.ct2-dept strong{display:block;font-size:14px;font-weight:800;color:#0f172a;line-height:1.2}
.ct2-dept span{display:block;font-size:12px;color:#e63946;font-weight:600;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct2-dept em{display:block;font-size:11px;color:#94a3b8;font-style:normal;margin-top:2px}
.ct2-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:20px;margin-bottom:24px}
@media (max-width:960px){.ct2-grid{grid-template-columns:1fr}}
.ct2-form-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:28px;box-shadow:0 20px 40px -24px rgba(15,23,42,.2)}
.ct2-sub{color:#64748b;font-size:13.5px;margin:-8px 0 20px}
.ct2-form .ct2-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:600px){.ct2-form .ct2-row{grid-template-columns:1fr}}
.ct2-fld{display:block;margin-bottom:14px}
.ct2-fld > span{display:block;font-size:13px;font-weight:700;color:#0f172a;margin-bottom:6px}
.ct2-fld > span em{color:#e63946;font-style:normal;font-weight:800}
.ct2-wrap{position:relative}
.ct2-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:14px;pointer-events:none}
.ct2-wrap input,.ct2-wrap select,.ct2-form textarea{width:100%;padding:12px 14px 12px 42px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:14px;color:#0f172a;outline:none;transition:.18s;font-family:inherit}
.ct2-wrap select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.ct2-form textarea{padding:12px 14px;min-height:130px;resize:vertical}
.ct2-wrap input:focus,.ct2-wrap select:focus,.ct2-form textarea:focus{border-color:rgba(230,57,70,.4);box-shadow:0 0 0 3px rgba(230,57,70,.1)}
.ct2-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#475569;margin:10px 0 16px;cursor:pointer}
.ct2-check input{margin-top:2px;accent-color:#e63946}
.ct2-check a{color:#e63946;font-weight:600}
.ct2-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border:0;border-radius:12px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 16px 30px -12px rgba(230,57,70,.55);transition:.2s}
.ct2-submit:hover{transform:translateY(-2px);box-shadow:0 20px 36px -12px rgba(230,57,70,.7)}
.ct2-side{display:flex;flex-direction:column;gap:12px}
.ct2-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px}
.ct2-card-ic{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;margin-bottom:10px;box-shadow:0 10px 20px -10px rgba(230,57,70,.45)}
.ct2-card h4{margin:0 0 6px;font-size:14px;font-weight:800;color:#0f172a}
.ct2-card p{margin:0 0 4px;color:#475569;font-size:13.5px;line-height:1.5}
.ct2-card p a{color:#e63946;font-weight:600}
.ct2-muted{font-size:12px;color:#94a3b8}
.ct2-link{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:#e63946;font-weight:600;margin-top:6px;text-decoration:none}
.ct2-link:hover{text-decoration:underline}
.ct2-socs{display:flex;gap:6px;flex-wrap:wrap}
.ct2-socs a{width:34px;height:34px;border-radius:9px;background:#f1f5f9;color:#475569;display:flex;align-items:center;justify-content:center;font-size:14px;text-decoration:none;transition:.15s}
.ct2-socs a:hover{transform:translateY(-2px)}
.ct2-socs .s-fb:hover{background:#1877f2;color:#fff}
.ct2-socs .s-tw:hover{background:#1da1f2;color:#fff}
.ct2-socs .s-ig:hover{background:linear-gradient(135deg,#e4405f,#f77737);color:#fff}
.ct2-socs .s-in:hover{background:#0a66c2;color:#fff}
.ct2-socs .s-yt:hover{background:#ff0000;color:#fff}
.ct2-faq-hint{display:flex;align-items:center;gap:14px;padding:16px 20px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid #fcd34d;border-radius:14px;flex-wrap:wrap}
.ct2-fh-ic{width:42px;height:42px;flex:0 0 42px;border-radius:11px;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.ct2-faq-hint > div{flex:1;min-width:200px}
.ct2-faq-hint strong{display:block;font-size:14px;color:#92400e}
.ct2-faq-hint p{margin:2px 0 0;font-size:13px;color:#78350f}
.ct2-fh-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:#92400e;color:#fff;border-radius:10px;text-decoration:none;font-weight:700;font-size:13px}
.ct2-fh-btn:hover{background:#78350f}
body.dark .ct2-hero h1,body.dark .ct2-dept strong,body.dark .ct2-card h4,body.dark .ct2-sh{color:#f1f5f9}
body.dark .ct2-hero p,body.dark .ct2-card p,body.dark .ct2-kpis{color:#94a3b8}
body.dark .ct2-dept,body.dark .ct2-form-card,body.dark .ct2-card,body.dark .ct2-kpis{background:#0f172a;border-color:rgba(255,255,255,.08)}
body.dark .ct2-wrap input,body.dark .ct2-wrap select,body.dark .ct2-form textarea{background:#0b1220;border-color:rgba(255,255,255,.08);color:#f1f5f9}
body.dark .ct2-socs a{background:rgba(255,255,255,.06);color:#cbd5e1}
body.dark .ct2-faq-hint{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.14));border-color:rgba(245,158,11,.3)}
body.dark .ct2-faq-hint strong{color:#fcd34d}
body.dark .ct2-faq-hint p{color:#fde68a}
/* ===== v33: Category-first Complaint Wizard ===== */
.step1-block{margin-bottom:28px}
.step1-block + .step1-block{padding-top:24px;border-top:1px dashed #e2e8f0;margin-top:24px}
.step1-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.step1-badge{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-weight:800;font-size:13px;display:inline-flex;align-items:center;justify-content:center;letter-spacing:.5px;box-shadow:0 4px 12px rgba(230,57,70,.3)}
.step1-head h3{margin:0;font-size:18px;font-weight:800;color:#0f172a}
.step1-sub{margin:3px 0 0;color:#64748b;font-size:13px}
.step1-sub a{color:#e63946;font-weight:700;text-decoration:underline}
.cat-search{position:relative;margin-bottom:14px}
.cat-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:14px}
.cat-search input{padding-left:40px;height:46px;border-radius:12px;border:2px solid #e2e8f0;font-size:14px;width:100%;background:#fff;transition:all .2s ease}
.cat-search input:focus{border-color:#e63946;box-shadow:0 0 0 4px rgba(230,57,70,.08);outline:0}
.cat-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:900px){.cat-picker{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.cat-picker{grid-template-columns:repeat(2,1fr)}}
.cat-pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 14px;border:2px solid #e2e8f0;border-radius:16px;background:#fff;cursor:pointer;transition:all .22s ease;text-align:center;overflow:hidden}
.cat-pick::before{content:"";position:absolute;inset:0;background:var(--cc);opacity:0;transition:opacity .22s ease;z-index:0}
.cat-pick > *{position:relative;z-index:1}
.cat-pick:hover{transform:translateY(-3px);border-color:var(--cc);box-shadow:0 12px 28px rgba(15,23,42,.10)}
.cat-pick.selected{border-color:var(--cc);background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0)),var(--cc);color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.cat-pick.selected::before{opacity:1}
.cat-ic{width:50px;height:50px;border-radius:14px;background:color-mix(in srgb,var(--cc) 12%,#fff);color:var(--cc);display:inline-flex;align-items:center;justify-content:center;font-size:20px;transition:all .22s ease}
.cat-pick.selected .cat-ic{background:rgba(255,255,255,.22);color:#fff}
.cat-nm{font-weight:700;font-size:14px;color:#0f172a;line-height:1.3}
.cat-pick.selected .cat-nm{color:#fff}
.cat-ct{font-size:11px;color:#64748b;font-weight:600}
.cat-pick.selected .cat-ct{color:rgba(255,255,255,.85)}
.cat-tick{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:#fff;color:var(--cc);font-size:11px;display:none;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(0,0,0,.12);z-index:2}
.cat-pick.selected .cat-tick{display:inline-flex}
.brand-picker .pick{position:relative}
.pick-verified{position:absolute;top:6px;right:6px;background:#3b82f6;color:#fff;width:18px;height:18px;border-radius:50%;font-size:10px;display:inline-flex;align-items:center;justify-content:center;z-index:2;box-shadow:0 2px 6px rgba(59,130,246,.4)}
.pick-cnt{font-size:11px;color:#94a3b8;font-weight:600;margin-top:2px}
.pick.selected .pick-cnt{color:rgba(255,255,255,.85)}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:#64748b;text-align:center;gap:8px}
.empty-state i.fa-search-minus{font-size:32px;opacity:.4}
.empty-state h4{margin:4px 0 0;color:#0f172a;font-size:15px}
.empty-state p{margin:0;font-size:13px}
.empty-state a{color:#e63946;font-weight:700}
body.dark .step1-head h3{color:#f1f5f9}
body.dark .step1-sub{color:#94a3b8}
body.dark .cat-search input{background:#1a2740;border-color:#263349;color:#e2e8f0}
body.dark .cat-pick{background:#1a2740;border-color:#263349}
body.dark .cat-nm{color:#e2e8f0}
body.dark .cat-ct{color:#94a3b8}
body.dark .empty-state h4{color:#e2e8f0}
body.dark .step1-block + .step1-block{border-top-color:#263349}
/* Body scroll lock for mobile nav open */
body.nav-open{overflow:hidden}
/* ===== v34: Auth split layout (login / register) ===== */
.av2.av2-split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 200px);max-width:1180px;margin:0 auto;padding:24px 16px;gap:32px;align-items:center}
@media(max-width:980px){.av2.av2-split{grid-template-columns:1fr}.av2-aside{display:none}}
.av2-aside{position:relative;border-radius:28px;overflow:hidden;padding:48px 44px;background:linear-gradient(135deg,#1d3557 0%,#2d5a8e 60%,#e63946 140%);color:#fff;min-height:640px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 30px 80px rgba(29,53,87,.35)}
.av2-aside-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.av2-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.av2-orb.o1{width:320px;height:320px;top:-80px;right:-100px;background:#e63946}
.av2-orb.o2{width:260px;height:260px;bottom:-80px;left:-80px;background:#3498db}
.av2-orb.o3{width:200px;height:200px;top:50%;right:20%;background:#fbbf24;opacity:.35}
.av2-aside-inner{position:relative;z-index:1}
.av2-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:12px;font-weight:700;letter-spacing:.3px;margin-bottom:20px;border:1px solid rgba(255,255,255,.2)}
.av2-kicker i{color:#fbbf24}
.av2-aside h2{font-size:38px;line-height:1.12;font-weight:800;margin:0 0 14px;letter-spacing:-1px}
.av2-grad{background:linear-gradient(135deg,#fbbf24,#f97316);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.av2-aside > .av2-aside-inner > p{font-size:15px;line-height:1.6;opacity:.9;margin:0 0 22px;max-width:90%}
.av2-aside > .av2-aside-inner > p strong{color:#fbbf24}
.av2-benefits{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:10px}
.av2-benefits li{display:flex;align-items:center;gap:10px;font-size:14px;opacity:.95}
.av2-benefits i{color:#10b981;font-size:16px;flex-shrink:0}
.av2-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:22px}
.av2-stats > div{text-align:center}
.av2-stats strong{display:block;font-size:24px;font-weight:800;line-height:1;color:#fff}
.av2-stats span{font-size:11px;opacity:.75;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.av2-quote{position:relative;padding:18px 18px 16px 48px;border-radius:16px;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12)}
.av2-quote i.fa-quote-left{position:absolute;left:18px;top:16px;font-size:20px;color:#fbbf24;opacity:.8}
.av2-quote p{margin:0 0 6px;font-size:13.5px;line-height:1.5;font-style:italic;opacity:.95}
.av2-quote cite{font-size:12px;opacity:.7;font-style:normal;font-weight:600}
/* Password generator button inside input wrap */
.av2-gen{background:linear-gradient(135deg,#8b5cf6,#6366f1);border:0;color:#fff;width:34px;height:34px;border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;margin-right:4px;transition:all .2s ease;box-shadow:0 3px 10px rgba(99,102,241,.3)}
.av2-gen:hover{transform:translateY(-1px) rotate(-8deg);box-shadow:0 5px 14px rgba(99,102,241,.45)}
.av2-help a#pw-gen-link{color:#6366f1;font-weight:700;text-decoration:underline;cursor:pointer;margin-left:4px}
body.dark .av2-aside{background:linear-gradient(135deg,#0f1b2d 0%,#162338 60%,#3a0a15 140%)}
/* ===== v35: Footer white-line fix + Auth tabs + Brand apply ===== */
.sf2{margin-top:0 !important} /* Beyaz boşluk kaldırıldı */
.site-main{padding-bottom:60px}
body{background:#fff}
body.dark{background:#0f172a}
body.dark .site-main{background:#0f172a}
/* Auth: tab switcher (Üye / Marka) */
.av2-tabs{display:flex;gap:6px;padding:4px;background:#f1f5f9;border-radius:14px;margin:0 0 20px;border:1px solid #e2e8f0}
.av2-tab{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;background:transparent;border:0;border-radius:10px;font-family:inherit;font-weight:700;font-size:13.5px;color:#64748b;cursor:pointer;transition:all .2s ease;text-decoration:none}
.av2-tab:hover{color:#0f172a;background:rgba(255,255,255,.5)}
.av2-tab.active{background:#fff;color:#e63946;box-shadow:0 2px 8px rgba(15,23,42,.08);border:1px solid #fee2e2}
.av2-tab i{font-size:13px}
body.dark .av2-tabs{background:#162338;border-color:#263349}
body.dark .av2-tab{color:#94a3b8}
body.dark .av2-tab:hover{color:#e2e8f0;background:rgba(255,255,255,.04)}
body.dark .av2-tab.active{background:#1a2740;color:#f87171;border-color:#3f1a1a}
/* ==================================================
v36 — Reactions, Bookmark, Nested replies
================================================== */
.cd2-reactions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 16px;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;border-radius:14px;margin:10px 0 16px;position:relative}
.cd2-reactions .rx-lbl{font-size:13px;color:#64748b;font-weight:600;margin-right:6px;display:inline-flex;align-items:center;gap:6px}
.rx-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1.5px solid #e2e8f0;background:#fff;border-radius:999px;cursor:pointer;transition:all .2s;font-size:13px;font-weight:600;color:#475569;position:relative}
.rx-btn:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.rx-btn .rx-emo{font-size:16px;line-height:1}
.rx-btn .rx-cnt{background:#f1f5f9;color:#475569;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;min-width:22px;text-align:center}
.rx-btn.active{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(230,57,70,.3)}
.rx-btn.active .rx-cnt{background:rgba(255,255,255,.25);color:#fff}
.rx-btn .rx-pop{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:22px;animation:rxpop .7s ease-out forwards;pointer-events:none}
@keyframes rxpop{0%{opacity:1;transform:translate(-50%,0) scale(.8)}100%{opacity:0;transform:translate(-50%,-28px) scale(1.4)}}
@media (max-width:720px){.rx-btn .rx-lab{display:none}.cd2-reactions .rx-lbl{width:100%}}
.btn-bookmark.saved{background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;color:#fff!important;border-color:transparent!important}
.btn-bookmark.saved i{color:#fff}
.cc-reply-btn{background:none;border:none;color:#64748b;font-size:13px;cursor:pointer;padding:4px 8px;border-radius:6px;display:inline-flex;align-items:center;gap:4px;font-weight:600}
.cc-reply-btn:hover{background:#f1f5f9;color:#1d3557}
.cc-reply-form{display:none;margin-top:10px}
.cc-reply-form.open{display:block;animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.cc-reply-form textarea{width:100%;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:10px;font-family:inherit;font-size:13px;resize:vertical;min-height:60px;margin-bottom:6px}
.cc-reply-form textarea:focus{outline:none;border-color:#3498db}
.cc-replies{list-style:none;margin:10px 0 0;padding:0 0 0 24px;border-left:2px solid #e2e8f0}
.cc-reply{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed #f1f5f9}
.cc-reply:last-child{border-bottom:none}
.cc-reply .ava{width:32px;height:32px;border-radius:50%;object-fit:cover;flex-shrink:0}
.cc-reply .cc-hd{display:flex;gap:8px;align-items:baseline;font-size:13px;margin-bottom:3px}
.cc-reply .cc-hd .when{color:#94a3b8;font-size:11px}
.cc-reply .cc-text{font-size:13px;color:#334155;line-height:1.5}
/* ==================== RICH EDITOR (v36) ==================== */
.sv-rich{border:2px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden}
.sv-rich textarea{border:none !important;outline:none;width:100%;padding:14px;min-height:120px;resize:vertical;font:14px/1.6 system-ui,sans-serif}
.sv-rich-bar{display:flex;gap:4px;align-items:center;padding:8px 10px;background:#f8fafc;border-bottom:1px solid #e2e8f0;flex-wrap:wrap}
.sv-rich-bar button{background:transparent;border:1px solid transparent;padding:6px 10px;border-radius:6px;cursor:pointer;color:#475569;font-size:14px;transition:.15s}
.sv-rich-bar button:hover{background:#fff;border-color:#cbd5e1;color:#1d3557}
.sv-rich-bar button.active{background:#1d3557;color:#fff;border-color:#1d3557}
.sv-rich-sep{flex:1}
.sv-rich-count{font-size:11px;color:#94a3b8;padding:4px 8px;background:#fff;border-radius:6px;border:1px solid #e2e8f0;font-variant-numeric:tabular-nums}
.sv-rich-count.over{color:#dc2626;background:#fee2e2;border-color:#fca5a5;font-weight:700}
.sv-rich-preview{padding:14px;min-height:120px;border-top:1px solid #e2e8f0;background:#fafbfd}
.sv-rich-preview p{margin:0 0 10px}
.sv-rich-preview h1,.sv-rich-preview h2,.sv-rich-preview h3{margin:14px 0 8px}
.sv-rich-preview code{background:#eef2f7;padding:2px 6px;border-radius:4px;font-size:.9em}
.sv-rich-preview pre{background:#0f172a;color:#a7f3d0;padding:12px;border-radius:8px;overflow-x:auto}
.sv-rich-preview blockquote{border-left:3px solid #e63946;margin:10px 0;padding:6px 12px;background:#fff5f5;color:#475569}
.sv-rich-preview a{color:#1d3557;font-weight:600}
.sv-rich-preview .mention,.sv-rich-preview .hashtag{display:inline-block;background:#dbeafe;color:#1d3557;padding:1px 7px;border-radius:6px;font-weight:600;text-decoration:none;font-size:13px}
.sv-rich-preview .hashtag{background:#fef3c7;color:#92400e}
.sv-rich-preview img{max-width:100%;border-radius:8px;margin:8px 0}
.sv-emoji-picker{background:#fff;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:10px;width:320px;z-index:9999}
.sv-emoji-picker .ep-search{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:13px;margin-bottom:8px}
.sv-emoji-picker .ep-grid{max-height:320px;overflow-y:auto}
.sv-emoji-picker .ep-cat{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin:8px 0 4px}
.sv-emoji-picker .ep-row{display:grid;grid-template-columns:repeat(9,1fr);gap:2px}
.sv-emoji-picker .ep-btn{border:none;background:transparent;font-size:20px;padding:4px;border-radius:6px;cursor:pointer;transition:.15s}
.sv-emoji-picker .ep-btn:hover{background:#f1f5f9;transform:scale(1.2)}
.sv-mention-dd{position:absolute;background:#fff;border:1px solid #cbd5e1;border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);min-width:240px;max-width:320px;z-index:9999;overflow:hidden}
.sv-md-item{display:flex;gap:8px;align-items:center;padding:8px 12px;cursor:pointer;font-size:13px}
.sv-md-item:hover,.sv-md-item.active{background:#f1f5f9}
.sv-md-item img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.sv-md-item small{color:#94a3b8;font-weight:400}
/* ═══════════════════════════════════════════════
HERO v3 (hx) — premium, sade + görsel + işlevsel
═══════════════════════════════════════════════ */
.site-main > .hx:first-child{margin-top:-30px}
.hx{
position:relative;overflow:hidden;isolation:isolate;
padding:46px 0 0;margin-bottom:38px;
background:
radial-gradient(700px 380px at 92% -12%, rgba(230,57,70,.06), transparent 60%),
radial-gradient(640px 420px at -6% 110%, rgba(59,130,246,.05), transparent 60%),
#ffffff;
color:#1f2937;
border-bottom:1px solid #eef2f7;
}
/* Arka plan katmanları */
.hx-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hx-orb{position:absolute;border-radius:50%;filter:blur(72px);opacity:.4;animation:hxFloat 16s ease-in-out infinite}
.hx-orb.a{width:480px;height:480px;top:-200px;right:-120px;background:radial-gradient(circle,#ffd6da,#ffe8ea 55%,transparent 72%);opacity:.5}
.hx-orb.b{width:440px;height:440px;bottom:-240px;left:-160px;background:radial-gradient(circle,#d6e4ff,#eaf1ff 55%,transparent 72%);opacity:.45;animation-delay:-5s}
.hx-orb.c{width:280px;height:280px;top:40%;left:48%;background:radial-gradient(circle,#efe2ff,#f6efff 55%,transparent 72%);opacity:.35;animation-delay:-9s}
@keyframes hxFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(34px,-26px) scale(1.06)}66%{transform:translate(-24px,30px) scale(.96)}}
.hx-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(15,23,42,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.045) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 40%,transparent 100%);mask-image:radial-gradient(ellipse 80% 60% at 50% 35%,#000 40%,transparent 100%)}
.hx-glow{position:absolute;top:-1px;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,rgba(230,57,70,.55),rgba(59,130,246,.55),rgba(46,204,113,.5),transparent)}
.hx-inner{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,430px);gap:46px;align-items:start;padding-top:8px}
/* ── SOL ── */
.hx-left{min-width:0}
.hx-live{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.8);border:1px solid rgba(15,23,42,.08);backdrop-filter:blur(10px);box-shadow:0 8px 22px -14px rgba(15,23,42,.3);font-size:12px;font-weight:700;letter-spacing:.05em;color:#475569;margin-bottom:20px}
.hx-live strong{color:#0f172a}
.hx-live i{color:#10b981;font-size:11px}
.hx-live-sep{width:1px;height:13px;background:rgba(15,23,42,.14)}
.hx-live-dot{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:hxPulse 1.6s ease-in-out infinite}
@keyframes hxPulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.hx-title{font-size:clamp(34px,4.4vw,54px);line-height:1.06;font-weight:900;letter-spacing:-.03em;margin:0 0 16px;color:#0f172a}
.hx-accent{position:relative;background:linear-gradient(90deg,#e63946,#c1121f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-accent::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:9px;background:url("data:image/svg+xml;utf8,") no-repeat center/100% 100%;opacity:.85}
.hx-title-2{display:block;font-size:clamp(18px,2vw,24px);font-weight:600;color:#64748b;margin-top:8px;letter-spacing:-.01em}
.hx-title-2 b{color:#0f172a;font-weight:800}
.hx-lead{font-size:15.5px;line-height:1.6;color:#5b677d;max-width:540px;margin:0 0 24px}
/* Arama */
.hx-search{position:relative;margin-bottom:14px;max-width:600px}
.hx-search .hx-s-ico{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:17px;z-index:2}
.hx-search input{width:100%;height:60px;padding:0 130px 0 52px;border-radius:16px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-size:16px;font-weight:500;box-shadow:0 18px 44px -20px rgba(15,23,42,.28);transition:box-shadow .25s,border-color .25s;outline:none}
.hx-search input::placeholder{color:#94a3b8}
.hx-search input:focus{border-color:#e63946;box-shadow:0 0 0 4px rgba(230,57,70,.14),0 18px 44px -20px rgba(15,23,42,.28)}
.hx-s-btn{position:absolute;right:8px;top:8px;bottom:8px;padding:0 22px;border:0;border-radius:12px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-weight:800;font-size:14.5px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s}
.hx-s-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(230,57,70,.7)}
.hx-s-btn i{font-size:12px;transition:transform .2s}
.hx-s-btn:hover i{transform:translateX(3px)}
/* Autocomplete */
.hx-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border-radius:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;z-index:30;max-height:380px;overflow-y:auto}
.hx-suggest.open{opacity:1;visibility:visible;transform:translateY(0)}
.hx-sg-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #f1f5f9;color:#1f2937;transition:background .15s}
.hx-sg-item:last-child{border-bottom:0}
.hx-sg-item:hover{background:#f8fafc}
.hx-sg-type{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#e63946;background:rgba(230,57,70,.08);padding:3px 8px;border-radius:6px;flex-shrink:0;min-width:62px;text-align:center}
.hx-sg-title{flex:1;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-sg-item i{color:#cbd5e1;font-size:12px}
/* Popüler */
.hx-pop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.hx-pop-lbl{font-size:12.5px;font-weight:700;color:#64748b}
.hx-pop-lbl i{color:#f59e0b}
.hx-pop a{font-size:12.5px;font-weight:600;color:#475569;background:rgba(255,255,255,.75);border:1px solid #e2e8f0;padding:5px 12px;border-radius:999px;transition:all .2s}
.hx-pop a:hover{background:#0f172a;color:#fff;border-color:#0f172a;transform:translateY(-2px)}
/* CTA */
.hx-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.hx-btn{display:inline-flex;align-items:center;gap:13px;padding:15px 24px;border-radius:15px;transition:transform .2s,box-shadow .2s;min-width:210px}
.hx-btn i{font-size:18px}
.hx-btn span{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.hx-btn strong{font-size:15px;font-weight:800}
.hx-btn small{font-size:11.5px;opacity:.8;font-weight:500}
.hx-btn.primary{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;box-shadow:0 16px 38px -12px rgba(230,57,70,.55)}
.hx-btn.primary:hover{transform:translateY(-3px);box-shadow:0 22px 48px -12px rgba(230,57,70,.7)}
.hx-btn.ghost{background:#fff;border:1px solid #e2e8f0;color:#1f2937;box-shadow:0 10px 26px -16px rgba(15,23,42,.3)}
.hx-btn.ghost:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(15,23,42,.32);border-color:#cbd5e1}
.hx-btn.ghost i{color:#3b82f6}
/* İstatistik */
.hx-stats{display:flex;gap:14px;flex-wrap:wrap;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.7);border:1px solid #e8edf6;backdrop-filter:blur(10px);box-shadow:0 16px 40px -22px rgba(15,23,42,.22)}
.hx-stat{flex:1;min-width:96px;position:relative;transition:transform .25s}
.hx-stat:hover{transform:translateY(-3px)}
.hx-stat:not(:last-child)::after{content:"";position:absolute;right:-7px;top:50%;transform:translateY(-50%);width:1px;height:34px;background:#dbe2ee}
.hx-stat-num{font-size:27px;font-weight:900;color:#0f172a;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hx-stat-lbl{font-size:11.5px;color:#6b7280;font-weight:600;margin-top:7px;display:flex;align-items:center;gap:5px}
.hx-stat-lbl i{font-size:11px;color:#e63946}
.hx-stat-hi .hx-stat-num{background:linear-gradient(90deg,#e63946,#c1121f);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-stat-hi .hx-stat-lbl i{color:#e63946;animation:hxBolt 1.8s ease-in-out infinite}
@keyframes hxBolt{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.25)}}
/* ── SAĞ: Canlı akış kartı ── */
.hx-right{min-width:0;position:relative}
/* ── Yüzen rozet kartları ── */
.hx-float{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:15px;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 40px -16px rgba(15,23,42,.32);backdrop-filter:blur(8px);animation:hxBob 5s ease-in-out infinite;animation-delay:var(--d,0s)}
.hx-float strong{display:block;font-size:13px;font-weight:800;color:#0f172a;line-height:1.2}
.hx-float small{display:block;font-size:11px;color:#64748b;line-height:1.3}
@keyframes hxBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.hx-float-rating{top:-22px;right:14px}
.hxf-stars{color:#fbbf24;font-size:12px;letter-spacing:1px}
.hxf-rt{font-size:11.5px;color:#475569;font-weight:600;margin-top:2px}
.hx-float-rating{flex-direction:column;align-items:flex-start;gap:2px}
.hx-float-resolved{bottom:46px;left:-26px}
.hxf-check{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;box-shadow:0 8px 18px -6px rgba(16,185,129,.6);flex-shrink:0}
.hx-float-bell{top:80px;right:-22px}
.hxf-bell{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 8px 18px -6px rgba(230,57,70,.6);flex-shrink:0;animation:hxRing 2.4s ease-in-out infinite}
@keyframes hxRing{0%,90%,100%{transform:rotate(0)}93%{transform:rotate(-14deg)}96%{transform:rotate(12deg)}}
@media(max-width:980px){.hx-float{display:none}}
.hx-card{background:#fff;border:1px solid #e8edf6;border-radius:20px;padding:18px;box-shadow:0 28px 60px -28px rgba(15,23,42,.3)}
.hx-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hx-card-title{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#0f172a}
.hx-pulse-dot{width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:hxPulseRed 1.5s ease-in-out infinite}
@keyframes hxPulseRed{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.hx-mini{display:flex;gap:9px}
.hx-mini span{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#64748b}
.hx-mini i{font-size:9px;color:#10b981}
.hx-tabs{position:relative;display:flex;gap:4px;padding:4px;background:#f1f5f9;border-radius:12px;margin-bottom:12px}
.hx-tab{flex:1;position:relative;z-index:2;border:0;background:transparent;cursor:pointer;padding:9px 6px;border-radius:9px;font-size:12.5px;font-weight:700;color:#64748b;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:color .2s;font-family:inherit}
.hx-tab i{font-size:11px}
.hx-tab.active{color:#0f172a}
.hx-tab-ind{position:absolute;top:4px;bottom:4px;left:0;background:#fff;border-radius:9px;z-index:1;transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s;box-shadow:0 3px 10px rgba(15,23,42,.12)}
.hx-pane{display:none;flex-direction:column;gap:6px}
.hx-pane.active{display:flex;animation:hxFade .35s ease}
@keyframes hxFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.hx-item{display:flex;gap:11px;padding:10px;border-radius:12px;transition:background .18s}
.hx-item:hover{background:#f8fafc}
.hx-logo{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px;flex-shrink:0;overflow:hidden}
.hx-logo img{width:100%;height:100%;object-fit:cover}
.hx-item-body{flex:1;min-width:0}
.hx-item-top{display:flex;align-items:center;gap:7px;margin-bottom:2px}
.hx-item-top strong{font-size:13px;color:#0f172a;font-weight:700}
.hx-st{width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:8px;color:#fff;flex-shrink:0}
.hx-st-resolved{background:#22c55e}.hx-st-responded{background:#3b82f6}.hx-st-open{background:#f59e0b}
.hx-item-txt{font-size:12.5px;color:#475569;line-height:1.4;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-item-meta{display:flex;gap:11px}
.hx-item-meta span{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:#94a3b8;font-weight:600}
.hx-item-meta i{font-size:9px}
.hx-empty{text-align:center;padding:30px 0;color:#94a3b8}
.hx-empty i{font-size:30px;opacity:.4;margin-bottom:8px}
.hx-empty p{font-size:13px;margin:0}
.hx-card-all{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:11px;border-radius:11px;background:#f8fafc;border:1px solid #eef2f7;color:#475569;font-size:13px;font-weight:700;transition:all .2s}
.hx-card-all:hover{background:#0f172a;color:#fff;border-color:#0f172a}
/* Marka şeridi */
.hx-marquee{margin-top:36px;padding:18px 0 20px;border-top:1px solid rgba(15,23,42,.07);overflow:hidden;position:relative;z-index:2}
.hx-marquee-label{text-align:center;font-size:12.5px;font-weight:700;color:#64748b;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px}
.hx-marquee-label i{color:#10b981}
.hx-marquee-track{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hx-marquee-track{display:flex;gap:40px;width:max-content;animation:hxScroll 40s linear infinite}
.hx:hover .hx-marquee-track{animation-play-state:paused}
@keyframes hxScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hx-mq-item{display:inline-flex;align-items:center;gap:9px;height:52px;padding:0 18px;border-radius:14px;background:#fff;border:1px solid #eef2f7;box-shadow:0 8px 20px -12px rgba(15,23,42,.2);transition:transform .2s,box-shadow .2s}
.hx-mq-item:hover{transform:translateY(-3px);box-shadow:0 14px 30px -12px rgba(15,23,42,.28)}
.hx-mq-item img{height:32px;width:auto;max-width:120px;object-fit:contain}
.hx-mq-txt{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d3557,#2d5a8e);color:#fff;font-size:13px;font-weight:800;flex-shrink:0}
.hx-mq-name{font-size:14px;font-weight:700;color:#334155;white-space:nowrap}
/* Responsive */
@media(max-width:980px){
.hx-inner{grid-template-columns:1fr;gap:30px}
.hx-right{max-width:560px}
}
@media(max-width:560px){
.hx{padding:32px 0 0}
.hx-search input{height:54px;padding-right:62px;font-size:15px}
.hx-s-btn span{display:none}
.hx-s-btn{padding:0 16px}
.hx-btn{min-width:100%;justify-content:center}
.hx-stat-num{font-size:22px}
.hx-stat:not(:last-child)::after{display:none}
}
/* ═══════════ Breadcrumb (görünür) ═══════════ */
.bcrumb{background:#fff;border-bottom:1px solid #eef2f7}
body.dark .bcrumb{background:#0f1830;border-bottom-color:#1e293b}
.bcrumb-in{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:11px 0;font-size:13px}
.bcrumb-link{display:inline-flex;align-items:center;gap:6px;color:#64748b;font-weight:600;transition:color .15s}
.bcrumb-link:hover{color:#e63946}
.bcrumb-link i{font-size:11px;opacity:.7}
.bcrumb-sep{font-size:9px;color:#cbd5e1}
.bcrumb-current{color:#0f172a;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
body.dark .bcrumb-current{color:#e2e8f0}
/* ═══════════ Skeleton (yükleniyor iskeleti) ═══════════ */
.skel{position:relative;overflow:hidden;background:#eef2f7;border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
animation:skelShine 1.3s infinite}
@keyframes skelShine{100%{transform:translateX(100%)}}
.skel-line{height:12px;margin:8px 0;border-radius:6px}
.skel-line.w70{width:70%}.skel-line.w50{width:50%}.skel-line.w90{width:90%}
.skel-title{height:20px;width:60%;margin-bottom:14px;border-radius:7px}
.skel-avatar{width:44px;height:44px;border-radius:50%}
.skel-card{padding:16px;border:1px solid #eef2f7;border-radius:14px;background:#fff;display:flex;gap:12px;margin-bottom:10px}
.skel-card .skel-body{flex:1}
body.dark .skel{background:#1e293b}
body.dark .skel::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
body.dark .skel-card{background:#0f1830;border-color:#1e293b}
/* ═══════════ Empty state (boş durum) ═══════════ */
.empty2{text-align:center;padding:54px 24px;max-width:440px;margin:0 auto}
.empty2-ico{width:90px;height:90px;border-radius:26px;margin:0 auto 20px;
display:flex;align-items:center;justify-content:center;font-size:38px;
background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#94a3b8;
box-shadow:inset 0 2px 8px rgba(255,255,255,.6),0 14px 30px -16px rgba(15,23,42,.3)}
.empty2-ico.primary{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#e63946}
.empty2-ico.success{background:linear-gradient(135deg,#d1fae5,#a7f3d0);color:#10b981}
.empty2 h3{font-size:19px;font-weight:800;color:#0f172a;margin:0 0 8px}
.empty2 p{font-size:14px;color:#64748b;line-height:1.6;margin:0 0 22px}
.empty2 .empty2-cta{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;
background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-weight:700;font-size:14px;
box-shadow:0 14px 30px -12px rgba(230,57,70,.55);transition:transform .2s}
.empty2 .empty2-cta:hover{transform:translateY(-2px)}
body.dark .empty2 h3{color:#f1f5f9}
body.dark .empty2-ico{background:linear-gradient(135deg,#1e293b,#0f1830);color:#64748b}
/* ═══════════ Şu An Trend (trend2) ═══════════ */
.trend2{padding:34px 0}
.trend2-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.trend2-head h2{margin:0;font-size:22px;font-weight:900;color:#0f172a;display:inline-flex;align-items:center;gap:9px;letter-spacing:-.02em}
.trend2-head h2 i{color:#ef4444}
.trend2-dot{width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.6);animation:trpulse2 1.4s ease-in-out infinite}
@keyframes trpulse2{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 9px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.trend2-all{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#64748b;padding:7px 14px;border-radius:999px;border:1px solid #edf1f6;transition:all .2s}
.trend2-all:hover{background:#0f172a;color:#fff;border-color:#0f172a}
.trend2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.trend2-item{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #edf1f6;border-radius:16px;padding:16px;transition:transform .22s,box-shadow .22s,border-color .22s;overflow:hidden}
.trend2-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#e63946,#f59e0b);opacity:0;transition:opacity .22s}
.trend2-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(15,23,42,.25);border-color:transparent}
.trend2-item:hover::before{opacity:1}
.trend2-rank{position:absolute;top:13px;right:14px;font-size:13px;font-weight:900;color:#f59e0b;font-variant-numeric:tabular-nums}
.trend2-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.trend2-logo{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d3557,#2d5a8e);color:#fff;font-size:12px;font-weight:800;overflow:hidden}
.trend2-logo img{width:100%;height:100%;object-fit:cover}
.trend2-brand{font-size:12.5px;font-weight:700;color:#64748b}
.trend2-title{margin:0 0 12px;font-size:14.5px;font-weight:700;color:#1d3557;line-height:1.45;flex:1}
.trend2-meta{display:flex;align-items:center;gap:14px;font-size:11.5px;color:#94a3b8;font-weight:600;border-top:1px solid #f5f7fa;padding-top:10px}
.trend2-meta i{font-size:10px}
.trend2-meta span:first-child i{color:#ef4444}
.trend2-time{margin-left:auto}
@media(max-width:560px){.trend2-grid{grid-template-columns:1fr}}
/* ═══════════════════════════════════════════════════════════
DESIGN SYSTEM — Dalga 1: Tipografi + Token sistemi
═══════════════════════════════════════════════════════════ */
:root{
/* Font aileleri */
--ff-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
--ff-display:"Plus Jakarta Sans","Inter",-apple-system,sans-serif;
/* Akışkan tip ölçeği (clamp: min, tercih, max) */
--fs-xs:clamp(.72rem,.7rem + .1vw,.78rem);
--fs-sm:clamp(.82rem,.8rem + .12vw,.88rem);
--fs-base:clamp(.92rem,.9rem + .14vw,1rem);
--fs-md:clamp(1.05rem,1rem + .25vw,1.18rem);
--fs-lg:clamp(1.25rem,1.15rem + .5vw,1.5rem);
--fs-xl:clamp(1.5rem,1.3rem + 1vw,2rem);
--fs-2xl:clamp(1.9rem,1.5rem + 2vw,2.8rem);
--fs-3xl:clamp(2.4rem,1.8rem + 3vw,3.6rem);
/* 8px tabanlı boşluk ölçeği */
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
--sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
/* Köşe yarıçap ölçeği */
--r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-full:999px;
/* Elevation — katmanlı yumuşak gölgeler */
--el-1:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
--el-2:0 2px 4px rgba(15,23,42,.04),0 4px 8px -2px rgba(15,23,42,.08);
--el-3:0 4px 8px -2px rgba(15,23,42,.06),0 12px 20px -4px rgba(15,23,42,.1);
--el-4:0 8px 16px -4px rgba(15,23,42,.08),0 24px 40px -8px rgba(15,23,42,.14);
--el-5:0 16px 32px -8px rgba(15,23,42,.12),0 40px 64px -16px rgba(15,23,42,.2);
/* Renk skalası — gri (slate) */
--g-50:#f8fafc; --g-100:#f1f5f9; --g-200:#e2e8f0; --g-300:#cbd5e1;
--g-400:#94a3b8; --g-500:#64748b; --g-600:#475569; --g-700:#334155;
--g-800:#1e293b; --g-900:#0f172a;
/* Marka rengi skalası */
--brand-50:#fff1f2; --brand-100:#ffe0e3; --brand-400:#ff6b7a;
--brand-500:#e63946; --brand-600:#c1121f; --brand-700:#a10f1a;
/* Geçiş eğrileri */
--ease-out:cubic-bezier(.22,.61,.36,1);
--ease-spring:cubic-bezier(.34,1.56,.64,1);
}
/* ── Global tipografi ── */
body{
font-family:var(--ff-sans);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
font-feature-settings:"cv02","cv03","cv04","ss01";
letter-spacing:-.011em;
}
h1,h2,h3,h4,h5{font-family:var(--ff-display);letter-spacing:-.025em;line-height:1.12}
h1{font-weight:800}
h2,h3{font-weight:800}
.hx-title,.trend2-head h2,.sec-title,.section-title{font-family:var(--ff-display)}
strong,b{font-weight:700}
/* Sayısal hizalama */
.hx-stat-num,.trend2-rank,.kpi-num,.mp-num,.donut-center strong{font-variant-numeric:tabular-nums}
/* ═══════════════════════════════════════════════════════════
DESIGN SYSTEM — Dalga 2: Hareket + Mikro-etkileşim + Focus
═══════════════════════════════════════════════════════════ */
/* ── Scroll-reveal (öğeler ekrana girince belirir) ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ── Erişilebilir focus ring (klavye) ── */
:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px;border-radius:4px}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--brand-500);outline-offset:2px
}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline-offset:0;box-shadow:0 0 0 3px rgba(230,57,70,.15)}
:focus:not(:focus-visible){outline:none}
/* ── Mikro-etkileşimler: buton basma + hover ── */
button,.btn,.hx-btn,.cat,.trend2-item,.trend2-all,.empty2-cta,.cmp-banner-cta,
.hx-pop a,.hx-mq-item,.cat-mega-btn,.btn-complaint{
transition:transform .18s var(--ease-out),box-shadow .22s var(--ease-out),
background-color .2s,border-color .2s,color .2s;
}
button:active,.btn:active,.hx-btn:active,.empty2-cta:active,
.btn-complaint:active,.cat:active,.trend2-all:active{transform:translateY(1px) scale(.985)}
/* Linklerde yumuşak renk geçişi */
a{transition:color .18s var(--ease-out)}
/* Görsellerde hafif zoom (kart içinde) */
.trend2-logo img,.hx-logo img,.hx-mq-item img{transition:transform .3s var(--ease-out)}
/* İnce "shine" geçişi — primary butonlar */
.hx-btn.primary,.btn-complaint{position:relative;overflow:hidden}
.hx-btn.primary::after,.btn-complaint::after{
content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-20deg);transition:left .6s var(--ease-out)
}
.hx-btn.primary:hover::after,.btn-complaint:hover::after{left:130%}
/* Smooth scroll (anchor) */
html{scroll-behavior:smooth}
/* ═══════════════════════════════════════════════════════════
DESIGN SYSTEM — Dalga 3: Bileşen cilası + Elevation + Ritim
═══════════════════════════════════════════════════════════ */
/* ── Kartlarda katmanlı gölge (elevation) ── */
.trend2-item,.hx-card,.hx-mq-item,.kpi,.dash-card,.skel-card,
.mp-card,.sl-card,.brand-card,.cn-card{box-shadow:var(--el-2)}
.trend2-item:hover,.hx-mq-item:hover,.brand-card:hover{box-shadow:var(--el-4)}
/* ── Hairline border tutarlılığı ── */
.trend2-item,.hx-card,.hx-mq-item,.kpi,.dash-card{border-color:rgba(15,23,42,.06)}
/* ── Buton sistemi cilası ── */
.btn{border-radius:var(--r-full);font-weight:700;letter-spacing:-.01em}
.btn-complaint{box-shadow:var(--el-3)}
.btn-complaint:hover{box-shadow:var(--el-4);transform:translateY(-2px)}
/* ── Bölüm başlıkları ritmi ── */
.sec-title,.section-title,.sl-head h2,.how-works h2,.kt-section h2,
.brands-showcase h2,.top-supported h2{font-family:var(--ff-display);letter-spacing:-.025em;font-weight:800}
/* ── Bölümler arası nefes (8px ritmi) ── */
.trend2,.metrics-panel,.sl-section,.how-works,.kt-section,
.brands-showcase,.top-supported,.brand-index,.week-digest{padding-top:var(--sp-7);padding-bottom:var(--sp-7)}
/* ── Seçim rengi (premium dokunuş) ── */
::selection{background:rgba(230,57,70,.18);color:#0f172a}
/* ── Scrollbar inceltme (webkit) ── */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g-300);border-radius:99px;border:3px solid #fff;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--g-400);background-clip:padding-box}
/* ── İnce grain dokusu (hero üzerinde, çok hafif) ── */
.hx::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.025;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ── Kart geçişleri yumuşat ── */
.trend2-item,.hx-mq-item,.brand-card,.kpi,.sl-card{transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .2s}
/* ── Linkli kartlarda imleç ── */
a.trend2-item,a.hx-item,a.hx-mq-item{cursor:pointer}
/* ═══════════════════════════════════════════════════════════
GİRİŞ SAYFASI v2 (lg2) — premium çoklu giriş
═══════════════════════════════════════════════════════════ */
.lg2{
display:flex;align-items:flex-start;justify-content:center;min-height:calc(100vh - 60px);
padding:clamp(28px,5vw,64px) 20px;
background:
radial-gradient(620px 320px at 50% -8%, rgba(230,57,70,.06), transparent 60%),
radial-gradient(520px 360px at 90% 110%, rgba(59,130,246,.05), transparent 60%),
#f7f9fc;
}
/* ── SOL panel ── */
.lg2-aside{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:linear-gradient(150deg,#0b1530 0%,#15173a 50%,#2a1145 100%);display:flex}
.lg2-aside-bg{position:absolute;inset:0;z-index:0}
.lg2-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;animation:hxFloat 17s ease-in-out infinite}
.lg2-orb.a{width:460px;height:460px;top:-140px;right:-120px;background:radial-gradient(circle,#e63946,#c1121f 55%,transparent 72%);opacity:.5}
.lg2-orb.b{width:420px;height:420px;bottom:-160px;left:-130px;background:radial-gradient(circle,#3b82f6,#1d4ed8 55%,transparent 72%);opacity:.46;animation-delay:-6s}
.lg2-orb.c{width:300px;height:300px;top:44%;left:40%;background:radial-gradient(circle,#9b59b6,#6d28d9 55%,transparent 72%);opacity:.4;animation-delay:-10s}
.lg2-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 40% 40%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 40% 40%,#000,transparent 75%)}
.lg2-aside-in{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:clamp(28px,4vw,56px);width:100%}
.lg2-logo{display:inline-flex;align-items:center;gap:11px;font-size:19px;font-weight:800;color:#fff;font-family:var(--ff-display)}
.lg2-logo-ic{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#e63946,#c1121f);display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 8px 20px -6px rgba(230,57,70,.6)}
.lg2-aside-body{display:flex;flex-direction:column;gap:26px}
.lg2-kicker{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:700;letter-spacing:.02em;color:#cdd6ea;backdrop-filter:blur(8px)}
.lg2-kicker i{color:#fbbf24}
.lg2-aside-body h2{margin:0;font-size:clamp(30px,3.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-.03em;font-family:var(--ff-display)}
.lg2-grad{background:linear-gradient(90deg,#ff8a96,#ffb3bb);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg2-mini-stats{display:flex;gap:10px}
.lg2-mini-stats div{flex:1;padding:16px 14px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.lg2-mini-stats strong{display:block;font-size:24px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.lg2-mini-stats span{font-size:11.5px;color:#9fabca;font-weight:600;margin-top:5px;display:block}
.lg2-quote{padding:20px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px)}
.lg2-q-stars{color:#fbbf24;font-size:12px;letter-spacing:2px;margin-bottom:10px}
.lg2-quote p{margin:0 0 14px;font-size:15px;line-height:1.5;color:#e8edf8;font-weight:500}
.lg2-q-by{display:flex;align-items:center;gap:10px}
.lg2-q-by img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2)}
.lg2-q-by cite{font-style:normal;font-size:12.5px;color:#aab6d4;font-weight:600}
.lg2-aside-foot{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#8b98b8;font-weight:600}
.lg2-aside-foot i{color:#34d399;margin-right:5px}
/* ── SAĞ panel ── */
.lg2-main{width:100%;max-width:480px}
.lg2-card{width:100%;background:#fff;border:1px solid #eef2f7;border-radius:24px;padding:clamp(26px,4vw,40px);box-shadow:var(--el-4)}
/* Logo (beyaz tema) */
.lg2-card .lg2-logo{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:#0f172a;font-family:var(--ff-display);margin-bottom:18px}
.lg2-card .lg2-logo-ic{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 8px 18px -6px rgba(230,57,70,.55)}
/* Güven rozetleri (alt) */
.lg2-trust{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid #f1f5f9;font-size:11.5px;color:#94a3b8;font-weight:600}
.lg2-trust i{color:#10b981;margin-right:5px}
.lg2-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.lg2-back{font-size:13px;font-weight:600;color:#64748b;display:inline-flex;align-items:center;gap:7px}
.lg2-back:hover{color:#0f172a}
.lg2-noacc{font-size:13px;color:#94a3b8}
.lg2-noacc a{color:#e63946;font-weight:700}
.lg2-head{margin-bottom:22px}
.lg2-head h1{margin:0 0 6px;font-size:28px;font-weight:800;color:#0f172a;font-family:var(--ff-display);letter-spacing:-.02em}
.lg2-head p{margin:0;font-size:14.5px;color:#64748b}
/* Sekmeler */
.lg2-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:22px;padding:6px;background:#f1f5f9;border-radius:16px}
.lg2-tab{position:relative;z-index:2;display:flex;align-items:center;gap:11px;padding:12px 14px;border:0;background:transparent;border-radius:11px;cursor:pointer;font-family:inherit;color:#64748b;text-align:left;transition:color .2s}
.lg2-tab i{font-size:17px}
.lg2-tab span{display:flex;flex-direction:column;line-height:1.25}
.lg2-tab strong{font-size:13.5px;font-weight:800}
.lg2-tab small{font-size:10.5px;opacity:.8;font-weight:500}
.lg2-tab.active{color:#0f172a}
.lg2-tab-ind{position:absolute;z-index:1;top:6px;bottom:6px;left:0;background:#fff;border-radius:11px;box-shadow:var(--el-2);transition:transform .3s var(--ease-out),width .3s var(--ease-out)}
/* Paneller */
.lg2-pane{display:none;animation:lg2Fade .35s var(--ease-out)}
.lg2-pane.active{display:block}
@keyframes lg2Fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Sosyal */
.lg2-social{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;margin-bottom:18px}
.lg2-sbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px;border:1.5px solid #e2e8f0;background:#fff;border-radius:13px;font-size:13.5px;font-weight:700;color:#334155;cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .15s}
.lg2-sbtn:hover{border-color:#cbd5e1;box-shadow:var(--el-2);transform:translateY(-1px)}
.lg2-sbtn[data-social="facebook"]{padding:12px 16px}
.lg2-sep{display:flex;align-items:center;gap:14px;margin:18px 0;color:#94a3b8;font-size:12.5px;font-weight:600}
.lg2-sep::before,.lg2-sep::after{content:"";flex:1;height:1px;background:#e8edf3}
/* Form alanları */
.lg2-form{display:flex;flex-direction:column;gap:16px}
.lg2-fld{display:flex;flex-direction:column;gap:7px}
.lg2-lbl{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#334155}
.lg2-link{font-size:12.5px;color:#e63946;font-weight:700}
.lg2-wrap{position:relative;display:flex;align-items:center}
.lg2-lead{position:absolute;left:15px;color:#94a3b8;font-size:15px;z-index:1;pointer-events:none}
.lg2-wrap input{width:100%;height:52px;padding:0 48px 0 44px;border:1.5px solid #e2e8f0;border-radius:14px;font-size:14.5px;font-family:inherit;color:#0f172a;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff}
.lg2-wrap input::placeholder{color:#cbd5e1}
.lg2-wrap input:focus{border-color:#e63946;box-shadow:0 0 0 4px rgba(230,57,70,.12)}
.lg2-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;background:transparent;color:#94a3b8;cursor:pointer;border-radius:9px;transition:background .2s,color .2s}
.lg2-eye:hover{background:#f1f5f9;color:#475569}
.lg2-caps{display:none;align-items:center;gap:6px;font-size:12px;color:#f59e0b;font-weight:600}
.lg2-caps.show{display:flex}
.lg2-check{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13.5px;color:#475569;font-weight:600;user-select:none}
.lg2-check input{position:absolute;opacity:0}
.lg2-box{width:20px;height:20px;border-radius:7px;border:1.5px solid #cbd5e1;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;transition:all .2s}
.lg2-check input:checked + .lg2-box{background:linear-gradient(135deg,#e63946,#c1121f);border-color:transparent}
.lg2-submit{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:54px;border:0;border-radius:14px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 16px 34px -12px rgba(230,57,70,.55);transition:transform .2s,box-shadow .2s;margin-top:2px}
.lg2-submit:hover{transform:translateY(-2px);box-shadow:0 22px 44px -12px rgba(230,57,70,.7)}
.lg2-submit i{transition:transform .2s}
.lg2-submit:hover i{transform:translateX(4px)}
.lg2-submit-brand{background:linear-gradient(135deg,#1d3557,#2d5a8e);box-shadow:0 16px 34px -12px rgba(29,53,87,.5)}
.lg2-submit-brand:hover{box-shadow:0 22px 44px -12px rgba(29,53,87,.65)}
.lg2-brand-note{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:12px;background:#eff6ff;border:1px solid #dbeafe;color:#1e40af;font-size:12.5px;font-weight:600;margin-bottom:18px}
.lg2-brand-cta{margin-top:16px;text-align:center;font-size:13px;color:#64748b}
.lg2-brand-cta a{color:#1d3557;font-weight:700}
.lg2-err{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;font-size:13px;font-weight:600;margin-bottom:16px}
.lg2-admin{margin-top:24px;text-align:center;padding-top:18px;border-top:1px solid #f1f5f9}
.lg2-admin a{font-size:12.5px;color:#94a3b8;font-weight:600}
.lg2-admin a:hover{color:#475569}
@media(max-width:900px){
.lg2{grid-template-columns:1fr}
.lg2-aside{display:none}
}
/* ═══════════════════════════════════════════════════════════
PROFİL SAYFASI v2 (pf2)
═══════════════════════════════════════════════════════════ */
.pf2{margin-bottom:40px}
.pf2-hero{position:relative;overflow:hidden;margin-bottom:0}
.pf2-cover{position:relative;height:190px;background:linear-gradient(120deg,#1d3557,#2d5a8e 55%,#e63946);overflow:hidden}
.pf2-cover-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45}
.pf2-cover-orb.o1{width:340px;height:340px;top:-160px;right:6%;background:#ff8a96}
.pf2-cover-orb.o2{width:280px;height:280px;top:-120px;left:10%;background:#7da7ff}
.pf2-hero-in{display:flex;align-items:flex-end;gap:24px;margin-top:-60px;position:relative;z-index:2;padding-bottom:22px;flex-wrap:wrap}
.pf2-ava{position:relative;flex-shrink:0}
.pf2-ava img{width:128px;height:128px;border-radius:28px;object-fit:cover;border:5px solid #fff;box-shadow:var(--el-4);background:#fff}
.pf2-lvl-badge{position:absolute;right:-6px;bottom:-6px;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;border:3px solid #fff;box-shadow:0 6px 14px -4px rgba(239,68,70,.6)}
.pf2-id{flex:1;min-width:240px;padding-bottom:4px}
.pf2-id h1{margin:0 0 4px;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#0f172a;font-family:var(--ff-display);display:inline-flex;align-items:center;gap:9px}
.pf2-verified{color:#3b82f6;font-size:.7em}
.pf2-handle{font-size:14px;color:#64748b;font-weight:600}
.pf2-lvl-name{color:#e63946}.pf2-lvl-name i{color:#f59e0b}
.pf2-bio{margin:10px 0 0;font-size:14px;color:#475569;line-height:1.55;max-width:560px}
.pf2-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:#94a3b8;font-weight:600}
.pf2-meta i{margin-right:5px;color:#cbd5e1}
.pf2-actions{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:6px}
.pf2-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font-weight:700;font-size:13.5px;transition:transform .2s,box-shadow .2s}
.pf2-btn.primary{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;box-shadow:var(--el-3)}
.pf2-btn.primary:hover{transform:translateY(-2px);box-shadow:var(--el-4)}
.pf2-btn.ghost{background:#fff;border:1px solid #e2e8f0;color:#334155}
.pf2-btn.ghost:hover{border-color:#cbd5e1;transform:translateY(-2px)}
/* Grid */
.pf2-grid{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;margin-top:24px;align-items:start}
.pf2-card{background:#fff;border:1px solid #eef2f7;border-radius:18px;padding:18px;box-shadow:var(--el-2);margin-bottom:18px}
.pf2-card-h{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:800;color:#0f172a;margin-bottom:14px}
.pf2-card-h i{color:#e63946}
.pf2-count{margin-left:auto;background:#fef2f2;color:#e63946;font-size:12px;font-weight:800;padding:2px 9px;border-radius:999px}
/* İstatistik ızgarası */
.pf2-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.pf2-stat{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 10px;background:#fff;border:1px solid #eef2f7;border-radius:14px;box-shadow:var(--el-1);transition:transform .2s,box-shadow .2s}
.pf2-stat:hover{transform:translateY(-2px);box-shadow:var(--el-3)}
.pf2-stat i{font-size:16px;color:#e63946;margin-bottom:3px}
.pf2-stat strong{font-size:20px;font-weight:900;color:#0f172a;font-variant-numeric:tabular-nums}
.pf2-stat span{font-size:11px;color:#94a3b8;font-weight:600}
/* Çözüm halkası */
.pf2-resolve{display:flex;align-items:center;gap:16px}
.pf2-ring{width:88px;height:88px;border-radius:50%;flex-shrink:0;background:conic-gradient(#10b981 calc(var(--p)*1%),#eef2f7 0);display:grid;place-items:center}
.pf2-ring-in{width:66px;height:66px;border-radius:50%;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 1px 3px rgba(0,0,0,.06)}
.pf2-ring-in strong{font-size:19px;font-weight:900;color:#10b981;line-height:1}
.pf2-ring-in span{font-size:10px;color:#94a3b8;font-weight:600}
.pf2-resolve-tx strong{display:block;font-size:14px;color:#0f172a;font-weight:800;margin-bottom:3px}
.pf2-resolve-tx p{margin:0;font-size:12.5px;color:#64748b}
/* Seviye */
.pf2-level-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.pf2-level-ic{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;display:grid;place-items:center;font-size:19px;flex-shrink:0;box-shadow:0 8px 18px -6px rgba(239,68,70,.5)}
.pf2-level-k{display:block;font-size:11.5px;color:#94a3b8;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.pf2-level-top strong{font-size:18px;font-weight:900;color:#0f172a}
.pf2-bar{height:9px;background:#eef2f7;border-radius:999px;overflow:hidden}
.pf2-bar span{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ef4444);border-radius:999px;transition:width .8s var(--ease-out)}
.pf2-level-next{font-size:12px;color:#64748b;margin-top:7px}
.pf2-level-next strong{color:#0f172a}
/* En çok şikayet markalar */
.pf2-brands{display:flex;flex-direction:column;gap:6px}
.pf2-brand{display:flex;align-items:center;gap:11px;padding:8px;border-radius:11px;transition:background .18s}
.pf2-brand:hover{background:#f8fafc}
.pf2-brand-lo{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d3557,#2d5a8e);color:#fff;font-size:12px;font-weight:800;overflow:hidden}
.pf2-brand-lo img{width:100%;height:100%;object-fit:cover}
.pf2-brand-nm{flex:1;font-size:13.5px;font-weight:600;color:#334155}
.pf2-brand-c{font-size:12px;font-weight:800;color:#e63946;background:#fef2f2;padding:3px 10px;border-radius:999px}
/* Rozetler */
.pf2-badges{display:flex;flex-wrap:wrap;gap:10px}
.pf2-badge{display:flex;align-items:center;gap:9px;padding:9px 14px;border-radius:13px;background:color-mix(in srgb,var(--bc) 8%,#fff);border:1.5px solid color-mix(in srgb,var(--bc) 28%,#fff);transition:transform .2s}
.pf2-badge:hover{transform:translateY(-3px)}
.pf2-badge-ic{width:30px;height:30px;border-radius:50%;background:var(--bc);color:#fff;display:grid;place-items:center;font-size:14px}
.pf2-badge-nm{font-size:13px;font-weight:700;color:var(--bc)}
.pf2-empty-mini{padding:18px;background:#f8fafc;border-radius:12px;text-align:center;color:#94a3b8;font-size:13px;line-height:1.5}
.pf2-empty-mini i{color:#cbd5e1;margin-right:6px}
/* Bölüm başlığı */
.pf2-section-h{justify-content:space-between;margin:6px 0 14px;font-size:17px}
.pf2-section-h span{display:inline-flex;align-items:center;gap:9px}
.pf2-seeall{margin-left:auto;font-size:13px;font-weight:700;color:#64748b;display:inline-flex;align-items:center;gap:6px}
.pf2-seeall:hover{color:#e63946}
@media(max-width:880px){
.pf2-grid{grid-template-columns:1fr}
.pf2-hero-in{margin-top:-50px}
.pf2-ava img{width:104px;height:104px}
.pf2-actions{width:100%}
}
/* ═══════════════════════════════════════════════════════════
Bildirim çanı dropdown (nbell)
═══════════════════════════════════════════════════════════ */
.nbell{position:relative}
.nbell-panel{position:absolute;top:calc(100% + 12px);right:-8px;width:360px;max-width:92vw;z-index:300;
background:#fff;border:1px solid #eef2f7;border-radius:18px;box-shadow:var(--el-5);
opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .22s var(--ease-out);overflow:hidden}
.nbell.open .nbell-panel{opacity:1;visibility:visible;transform:none}
.nbell-panel::before{content:"";position:absolute;top:-6px;right:22px;width:12px;height:12px;background:#fff;border-left:1px solid #eef2f7;border-top:1px solid #eef2f7;transform:rotate(45deg)}
.nbell-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid #f1f5f9}
.nbell-head strong{font-size:14px;font-weight:800;color:#0f172a;display:inline-flex;align-items:center;gap:8px}
.nbell-head strong i{color:#e63946}
.nbell-readall{background:none;border:0;color:#64748b;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:7px;transition:background .2s,color .2s}
.nbell-readall:hover{background:#f1f5f9;color:#e63946}
.nbell-body{max-height:380px;overflow-y:auto}
.nbell-loading,.nbell-empty{padding:34px 16px;text-align:center;color:#94a3b8;font-size:13px}
.nbell-empty i{font-size:28px;opacity:.4;display:block;margin-bottom:8px}
.nbell-empty p{margin:0}
.nbell-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #f5f7fa;transition:background .15s;position:relative}
.nbell-item:hover{background:#f8fafc}
.nbell-item.unread{background:#fff7f7}
.nbell-item.unread::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:#e63946}
.nbell-ic{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fef2f2;color:#e63946;font-size:15px}
.nbell-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.nbell-msg{font-size:13px;color:#334155;line-height:1.4;font-weight:500}
.nbell-ago{font-size:11px;color:#94a3b8;font-weight:600}
.nbell-all{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;font-size:13px;font-weight:700;color:#475569;background:#f8fafc;border-top:1px solid #f1f5f9;transition:background .2s,color .2s}
.nbell-all:hover{background:#0f172a;color:#fff}
.nbell-badge{display:inline-flex}
/* ═══════════════════════════════════════════════════════════
Mobil alt navigasyon (mbnav)
═══════════════════════════════════════════════════════════ */
.mbnav{display:none}
@media(max-width:760px){
.mbnav{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:250;
background:rgba(255,255,255,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
border-top:1px solid #eef2f7;box-shadow:0 -8px 24px -12px rgba(15,23,42,.18);
padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));justify-content:space-around;align-items:flex-end;
}
.mbnav-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;color:#94a3b8;font-size:10px;font-weight:600;border-radius:12px;transition:color .2s;position:relative}
.mbnav-i i{font-size:18px}
.mbnav-i span:last-child{font-size:10px;line-height:1}
.mbnav-i.active{color:#e63946}
.mbnav-i.active i{transform:translateY(-1px)}
/* Ortadaki "Yaz" FAB */
.mbnav-fab{color:#e63946}
.mbnav-fab-ic{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;box-shadow:0 8px 20px -6px rgba(230,57,70,.6);margin-top:-22px;border:4px solid #fff;transition:transform .2s}
.mbnav-fab:active .mbnav-fab-ic{transform:scale(.92)}
/* Bildirim rozeti */
.mbnav-bell{position:relative;display:inline-flex}
.mbnav-bell b{position:absolute;top:-5px;right:-8px;min-width:15px;height:15px;padding:0 4px;border-radius:999px;background:#e63946;color:#fff;font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff}
/* Sayfa altına boşluk bırak (alt nav örtmesin) */
body{padding-bottom:64px}
.to-top{bottom:74px!important}
}
/* ═══════════ View Transitions (sayfa geçişleri) ═══════════ */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .22s var(--ease-out) both}
::view-transition-new(root){animation:vtIn .32s var(--ease-out) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
::view-transition-old(root),::view-transition-new(root){animation:none}
}
/* ═══════════ Marka Detay — premium katman ═══════════ */
.brand-cover{height:280px!important;border-radius:0 0 28px 28px!important;margin-bottom:-70px!important;
background:linear-gradient(125deg,#1d3557 0%,#15224a 45%,#7a1320 100%)!important}
.brand-cover .pattern{background-image:
radial-gradient(circle at 18% 28%,rgba(255,255,255,.12),transparent 42%),
radial-gradient(circle at 82% 55%,rgba(230,57,70,.28),transparent 52%),
radial-gradient(circle at 50% 120%,rgba(59,130,246,.22),transparent 55%)!important}
.brand-hero{border-radius:22px!important;box-shadow:var(--el-4)!important;border:1px solid #eef2f7;padding:26px!important;gap:26px!important}
.brand-hero .logo-box{width:130px!important;height:130px!important;border-radius:28px!important;
box-shadow:var(--el-4)!important;margin-top:-72px!important;border:5px solid #fff!important;
background:linear-gradient(135deg,#1d3557,#2d5a8e)!important;color:#fff!important;font-family:var(--ff-display)}
.brand-hero .logo-box img{background:#fff}
.brand-hero .info h1{font-family:var(--ff-display);font-weight:800;letter-spacing:-.02em;font-size:30px!important}
.brand-hero .info h1 .verified{color:#3b82f6!important}
.brand-hero .actions .btn{border-radius:13px;font-weight:700}
.brand-hero .actions .btn-primary{box-shadow:var(--el-3)}
/* Metrik kartları */
.brand-metrics{gap:16px!important}
.brand-metric{border-radius:18px!important;box-shadow:var(--el-2)!important;border:1px solid #eef2f7;padding:20px!important;
transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out)}
.brand-metric:hover{transform:translateY(-4px);box-shadow:var(--el-4)!important}
.brand-metric .ico{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;margin-bottom:12px}
.brand-metric.m1 .ico{background:linear-gradient(135deg,#e63946,#c1121f)}
.brand-metric.m2 .ico{background:linear-gradient(135deg,#3b82f6,#1d4ed8)}
.brand-metric.m3 .ico{background:linear-gradient(135deg,#10b981,#059669)}
.brand-metric.m4 .ico{background:linear-gradient(135deg,#f59e0b,#d97706)}
.brand-metric .n{font-size:26px!important;font-weight:900!important;color:#0f172a!important;font-variant-numeric:tabular-nums;font-family:var(--ff-display)}
.brand-metric .l{font-size:12px!important;color:#64748b!important;font-weight:600}
.brand-metric .prog{height:6px;background:#eef2f7;border-radius:999px;overflow:hidden;margin-top:10px}
.brand-metric .prog .fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#10b981,#059669)}
.brand-metric.m2 .prog .fill{background:linear-gradient(90deg,#3b82f6,#1d4ed8)}
/* Sekmeler */
.brand-tabs{background:#fff;border-radius:14px;padding:6px;box-shadow:var(--el-2);border:1px solid #eef2f7;display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px}
.brand-tabs a{padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:700;color:#64748b;transition:all .2s}
.brand-tabs a:hover{background:#f8fafc;color:#0f172a}
.brand-tabs a.active{background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;box-shadow:var(--el-2)}
.brand-tabs a.active em{opacity:.85!important}
@media(max-width:760px){.brand-cover{height:200px!important;margin-bottom:-60px!important}.brand-hero .logo-box{width:100px!important;height:100px!important;margin-top:-60px!important}}
/* ═══════════ Onboarding (onb) ═══════════ */
.onb{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .25s}
.onb.show{opacity:1}
.onb-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px)}
.onb-box{position:relative;width:100%;max-width:400px;background:#fff;border-radius:24px;padding:36px 30px 24px;box-shadow:var(--el-5);text-align:center;transform:scale(.94);transition:transform .3s var(--ease-spring)}
.onb.show .onb-box{transform:scale(1)}
.onb-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;background:#f1f5f9;color:#64748b;border-radius:10px;cursor:pointer;font-size:15px;transition:background .2s}
.onb-x:hover{background:#e2e8f0}
.onb-step{display:none;flex-direction:column;align-items:center;animation:onbIn .4s var(--ease-out)}
.onb-step.active{display:flex}
@keyframes onbIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.onb-ic{width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 70%,#000));color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;margin-bottom:20px;box-shadow:0 16px 32px -10px var(--c)}
.onb-step h3{margin:0 0 10px;font-size:21px;font-weight:800;color:#0f172a;font-family:var(--ff-display)}
.onb-step p{margin:0;font-size:14.5px;color:#64748b;line-height:1.6;max-width:300px}
.onb-dots{display:flex;justify-content:center;gap:8px;margin:24px 0 20px}
.onb-dots span{width:8px;height:8px;border-radius:999px;background:#e2e8f0;transition:all .25s}
.onb-dots span.active{width:24px;background:#e63946}
.onb-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.onb-skip{background:none;border:0;color:#94a3b8;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;padding:10px 14px;border-radius:10px;transition:color .2s}
.onb-skip:hover{color:#64748b}
.onb-next{flex:1;max-width:200px;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border:0;border-radius:13px;background:linear-gradient(135deg,#e63946,#c1121f);color:#fff;font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:var(--el-3);transition:transform .2s,box-shadow .2s}
.onb-next:hover{transform:translateY(-2px);box-shadow:var(--el-4)}
/* ═══════════ Markalar listesi — premium katman ═══════════ */
.brands-grid{gap:18px!important}
.brand-card-v2{border-radius:20px!important;box-shadow:var(--el-2)!important;border:1px solid #eef2f7!important;padding:26px 22px!important;
transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .2s!important}
.brand-card-v2::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#e63946,#3498db);opacity:0;transition:opacity .22s}
.brand-card-v2:hover{transform:translateY(-6px)!important;box-shadow:var(--el-4)!important;border-color:transparent!important}
.brand-card-v2:hover::after{opacity:1}
.brand-card-v2 .bc-logo{width:78px!important;height:78px!important;border-radius:20px!important;
background:linear-gradient(135deg,#1d3557,#2d5a8e)!important;color:#fff!important;font-family:var(--ff-display);
box-shadow:var(--el-3)!important;font-size:24px!important;transition:transform .25s var(--ease-spring)}
.brand-card-v2:hover .bc-logo{transform:scale(1.06) rotate(-3deg)}
.brand-card-v2 .bc-logo img{background:#fff;border-radius:14px}
.brand-card-v2 h3{font-family:var(--ff-display);font-weight:800;font-size:16.5px!important;color:#0f172a!important;letter-spacing:-.01em}
.brand-card-v2 .bc-count{font-size:12px!important;color:#94a3b8!important;font-weight:600}
.verified-tag{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1e40af;font-size:10.5px;font-weight:800;box-shadow:var(--el-1)}
.brand-card-v2 .bc-bar .lbl{font-size:11px;color:#64748b;font-weight:600;display:flex;justify-content:space-between;margin-bottom:4px}
.brand-card-v2 .bc-bar .lbl strong{color:#0f172a}
.brand-card-v2 .bc-bar .track{height:6px;background:#eef2f7;border-radius:999px;overflow:hidden}
.brand-card-v2 .bc-bar:nth-child(1) .fill{background:linear-gradient(90deg,#3b82f6,#1d4ed8)}
.brand-card-v2 .bc-bar:nth-child(2) .fill{background:linear-gradient(90deg,#10b981,#059669)}
.brand-card-v2 .bc-bar .fill{height:100%;border-radius:999px}
/* ═══════════ Navbar canlı arama önerileri (premium) ═══════════ */
.search-suggest{border-radius:16px!important;box-shadow:var(--el-5)!important;border:1px solid #eef2f7!important;overflow:hidden;padding:6px!important}
.search-suggest .ss-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;transition:background .15s;color:#334155}
.search-suggest .ss-item:hover{background:#f8fafc}
.ss-ic{width:36px;height:36px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fef2f2;color:#e63946;font-size:14px}
.ss-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ss-tx strong{font-size:13.5px;font-weight:700;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-tx small{font-size:11px;color:#94a3b8;font-weight:600}
.ss-arr{color:#cbd5e1;font-size:11px}
.ss-all{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;padding:11px;border-radius:11px;background:#f8fafc;color:#475569;font-size:12.5px;font-weight:700;transition:background .2s,color .2s}
.ss-all:hover{background:#0f172a;color:#fff}
.ss-empty{padding:24px;text-align:center;color:#94a3b8;font-size:13px}