﻿/* =====================================================
   1001RENK — Özel CSS (Konsolide)
   ===================================================== */

/* ── Temel sıfırlama & kaydırma çubuğu gizleme ────── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ── CSS Değişkenleri & Sayfa Temeli ─────────────── */
:root {
    --brand-dark:    #030712;
    --brand-indigo:  #6366f1;
    --brand-fuchsia: #d946ef;
    --brand-emerald: #10b981;
}
html { scroll-behavior: smooth; margin: 0; padding: 0; background-color: #030712; }
body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background-color: #f8fafc;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
html.page-leaving body { opacity: 1; }
/* Admin sayfaları için koyu arka plan */
body.admin-page { background-color: #0f172a; }

/* ── Aurora Arka Plan Animasyonu (background-position) ── */
@keyframes aurora-bg-anim {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.aurora-bg {
    background: linear-gradient(-45deg, #0f172a, #1e1b4b, #0f172a, #0c1445);
    background-size: 400% 400%;
    animation: aurora-bg-anim 18s ease infinite;
}

/* ---- Parçacık (pulse) animasyonu ---- */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.05); }
}
.animate-pulse-slow { animation: pulse-slow 4s ease-in-out infinite; }

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-12px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* ---- Glassmorphism kartlar ---- */
.glass-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ── Navbar ──────────────────────────────────────── */
#navbar {
    transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
    background: rgba(3,7,18,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
#navbar.scrolled {
    background: rgba(3,7,18,0.97);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 2px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Geri Dön Butonu ─────────────────────────────── */
#back-to-top {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* ---- Mobil menü ---- */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}
#mobile-menu.open {
    max-height: 400px;
}

/* ---- Oda kartı hover efekti ---- */
.room-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.room-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

/* ---- Online sayaç pulsing dot ---- */
@keyframes ping-slow {
    0%   { transform: scale(1);   opacity: 0.75; }
    70%  { transform: scale(1.8); opacity: 0; }
    100% { transform: scale(1.8); opacity: 0; }
}
.ping-slow { animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* ---- Gradient text ---- */
.gradient-text {
    background: linear-gradient(135deg, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Scroll reveal (JS ile .visible eklenir) ---- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
    opacity: 1;
    transform: none;
}



/* ---- Küçük etiket (badge) ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Toast bildirimleri ---- */
.toast {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 9999;
    min-width: 260px;
    padding: 0.85rem 1.25rem;
    border-radius: 0.625rem;
    font-size: 0.9rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    animation: slideInRight 0.3s ease forwards;
}
@keyframes slideInRight {
    from { opacity:0; transform: translateX(60px); }
    to   { opacity:1; transform: translateX(0);    }
}

/* ─────────────────────────────────────────────────────
   Aurora Blob Animasyonları (Hero bloblara)
────────────────────────────────────────────────────── */
@keyframes aurora {
    0%   { transform: translate(0,0); }
    50%  { transform: translate(20px,-30px); }
    100% { transform: translate(0,0); }
}
.animate-aurora-1 { will-change: transform; animation: aurora 20s infinite ease-in-out; }
.animate-aurora-2 { will-change: transform; animation: aurora 25s infinite ease-in-out reverse; }
.animate-aurora-3 { will-change: transform; animation: aurora 30s infinite ease-in-out 3s; }
@media (prefers-reduced-motion: reduce), (max-width: 768px) {
    .animate-aurora-1, .animate-aurora-2, .animate-aurora-3 { animation: none; }
}

/* ── Shimmer Metin ───────────────────────────────── */
@keyframes shimmerText {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
.text-shimmer {
    background: linear-gradient(to right,#fff 20%,#6366f1 40%,#d946ef 60%,#fff 80%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shimmerText 5s linear infinite;
}

/* ── Emoji Yüzme Animasyonları (Hero) ────────────── */
@keyframes emoji-float-1 {
    0%, 100% { transform: translateY(0px) rotate(-4deg); }
    50%       { transform: translateY(-18px) rotate(4deg); }
}
@keyframes emoji-float-2 {
    0%, 100% { transform: translateY(0px) rotate(3deg) scale(1); }
    40%       { transform: translateY(-13px) rotate(-2deg) scale(1.08); }
    80%       { transform: translateY(-6px) rotate(5deg) scale(0.96); }
}
@keyframes emoji-float-3 {
    0%        { transform: translateY(0px) rotate(0deg); }
    30%       { transform: translateY(-16px) rotate(6deg); }
    60%       { transform: translateY(-7px) rotate(-4deg); }
    100%      { transform: translateY(0px) rotate(0deg); }
}
@keyframes emoji-float-4 {
    0%, 100% { transform: translateY(0px) rotate(-6deg) scale(1); }
    50%       { transform: translateY(-20px) rotate(3deg) scale(1.07); }
}
.emoji-float-1 { will-change: transform; animation: emoji-float-1 6s ease-in-out infinite; }
.emoji-float-2 { will-change: transform; animation: emoji-float-2 8s ease-in-out infinite; }
.emoji-float-3 { will-change: transform; animation: emoji-float-3 7s ease-in-out infinite; }
.emoji-float-4 { will-change: transform; animation: emoji-float-4 9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .emoji-float-1,.emoji-float-2,.emoji-float-3,.emoji-float-4 { animation: none; }
}

/* ── Glassmorphism ───────────────────────────────── */
.glass-panel {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
}

/* ── VIP Giriş Kartı ─────────────────────────────── */
.vip-card {
    background: linear-gradient(145deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    position: relative;
}
.vip-card::before {
    content:'';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg,#6366f1,transparent,#d946ef);
    z-index: -1;
    border-radius: inherit;
    opacity: 0.5;
}

/* ── Makale Görsel Kırpma ────────────────────────── */
.article-clip {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
}

/* ── Post Kart Hover ─────────────────────────────── */
.post-card { transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.post-card:hover { transform: translateX(8px); border-color: #c7d2fe; box-shadow: 0 20px 25px -5px rgba(99,102,241,.1),0 10px 10px -5px rgba(99,102,241,.04); }

/* ── Makale İçerik Tipografisi ───────────────────── */
.article-body p { margin-bottom: 1.5rem; color: #475569; line-height: 1.8; }
.article-body h2 { font-size: 1.75rem; font-weight: 900; color: #0f172a; margin: 2.5rem 0 1rem; letter-spacing: -0.02em; }
.article-body h3 { font-size: 1.35rem; font-weight: 900; color: #1e293b; margin: 2rem 0 0.875rem; letter-spacing: -0.01em; }
.article-body ul,.article-body ol { margin-bottom: 1.5rem; padding-left: 1.5rem; color: #475569; }
.article-body li { margin-bottom: 0.5rem; line-height: 1.7; }
.article-body ul { list-style-type: disc; }
.article-body ol { list-style-type: decimal; }
.article-body strong { color: #1e293b; font-weight: 700; }
.article-body a { color: #6366f1; text-decoration: underline; }
.article-body a:hover { color: #4f46e5; }
.article-body blockquote { border-left: 4px solid #6366f1; background: linear-gradient(to right,rgba(99,102,241,0.05),transparent); padding: 1.5rem 2rem; margin: 2rem 0; border-radius: 0 1rem 1rem 0; font-style: italic; color: #334155; }
.article-body code { background: #f1f5f9; color: #6366f1; padding: 0.125rem 0.375rem; border-radius: 0.375rem; font-size: 0.875em; font-family: monospace; }
.article-body pre { background: #0f172a; color: #e2e8f0; padding: 1.5rem; border-radius: 1rem; overflow-x: auto; margin-bottom: 1.5rem; }
.article-body pre code { background: none; color: inherit; padding: 0; }

/* ── Blockquote Nova ─────────────────────────────── */
.blockquote-nova {
    position: relative;
    background: linear-gradient(to right, rgba(99,102,241,.05), transparent);
    border-left: 4px solid #6366f1;
    padding: 2rem;
    border-radius: 0 2rem 2rem 0;
    margin: 3rem 0;
    font-style: italic;
    color: #334155;
    font-weight: 600;
}
.blockquote-nova::before {
    content: '\F2AB';
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    font-size: 3rem;
    color: rgba(99,102,241,.1);
}

/* ── Custom Scrollbar ────────────────────────────── */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* ── Splat Mask (Avatar) ─────────────────────────── */
.splat-mask { clip-path: ellipse(48% 50% at 50% 50%); border-radius: 60% 40% 70% 30%/50% 60% 40% 50%; }

/* ── Line Clamp Yardımcıları ─────────────────────── */
.line-clamp-1 { display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-2 { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.line-clamp-3 { display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }

/* ─────────────────────────────────────────────────────
   Admin Paneli
────────────────────────────────────────────────────── */
#sidebar { transition: transform 0.3s ease; }
@media (max-width: 1024px) {
    #sidebar { transform: translateX(-100%); position: fixed; z-index: 1000; height: 100vh; }
    #sidebar.open { transform: translateX(0); }
}
body.admin-page .toast {
    animation: slideIn 0.3s ease, fadeOut 0.5s ease 3s forwards;
}
@keyframes slideIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fadeOut  { to { opacity: 0; transform: translateY(-10px); pointer-events: none; } }

/* ─────────────────────────────────────────────────────
   Yorumlar Sayfası
────────────────────────────────────────────────────── */
#yr-wrap { max-width: 72rem; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
.yr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.yr-card { background:#fff; border:1px solid #f1f5f9; border-radius: 2rem; padding: 1.75rem; position: relative; box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.yr-quote { position:absolute; top:1.25rem; right:1.25rem; font-size:2.5rem; color:#f1f5f9; line-height:1; }
.yr-avatar { width:3rem; height:3rem; border-radius:0.875rem; display:flex;align-items:center;justify-content:center; font-weight:900; font-size:1.125rem; flex-shrink:0; }
.yr-name { font-weight:700; font-size:0.875rem; color:#1e293b; }
.yr-date { font-size:0.6875rem; color:#94a3b8; font-weight:600; margin-top:0.125rem; }
.yr-stars { display:flex; gap:0.125rem; color:#f59e0b; font-size:0.75rem; margin-top:0.375rem; }
.yr-text { color:#475569; font-size:0.875rem; font-style:italic; line-height:1.65; margin-top:1rem; }
.yr-pager { display:flex; justify-content:center; gap:0.5rem; margin-top:3rem; flex-wrap:wrap; }
.yr-pg { display:inline-flex;align-items:center;justify-content:center; min-width:2.5rem; height:2.5rem; border-radius:0.875rem; font-size:0.875rem; font-weight:700; text-decoration:none; border:1.5px solid #e2e8f0; color:#475569; transition:all 0.15s; }
.yr-pg:hover { border-color:#6366f1; color:#6366f1; background:#eef2ff; }
.yr-pg.active { background:#6366f1; border-color:#6366f1; color:#fff; }

/* ─────────────────────────────────────────────────────
   Komutlar Sayfası
────────────────────────────────────────────────────── */
@keyframes km-aurora1 {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(40px,-60px) scale(1.15); }
    66%  { transform: translate(-30px,30px) scale(0.88); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes km-aurora2 {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(-50px,40px) scale(1.12); }
    66%  { transform: translate(30px,-20px) scale(0.92); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes km-aurora3 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(20px,-40px) scale(1.1); }
    100% { transform: translate(0,0) scale(1); }
}
.km-a1 { animation: km-aurora1 20s infinite ease-in-out; }
.km-a2 { animation: km-aurora2 25s infinite ease-in-out; }
.km-a3 { animation: km-aurora3 30s 3s infinite ease-in-out; }
.km-cmd-card {
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 2rem;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), border-color 0.3s, box-shadow 0.3s;
}
.km-cmd-card:hover { transform: translateY(-4px); border-color: #c7d2fe; box-shadow: 0 20px 25px -5px rgba(99,102,241,.1); }
.km-outer-grid { display:grid; grid-template-columns:1fr; gap:3rem; }
@media (min-width:1024px) { .km-outer-grid { grid-template-columns: 2fr 1fr; } }

/* ─────────────────────────────────────────────────────
   Toplist Sayfası
────────────────────────────────────────────────────── */
.toplist-page { overflow-x: hidden; background-color: #f8fafc; }
.toplist-main { background-color: transparent; }
.toplist-hero { padding-top: 10rem; padding-bottom: 10rem; position: relative; background-color: #030712; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; }
.toplist-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; color: #fff; margin-bottom: 1.5rem; }
.toplist-hero h1 span { font-size: clamp(2rem, 5vw, 3.75rem); font-style: italic; background: linear-gradient(to right, #818cf8, #e879f9); -webkit-background-clip: text; background-clip: text; color: transparent; display: block; }
.toplist-hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.toplist-hero-btn { display: inline-block; background: linear-gradient(to right, #4f46e5, #d946ef); color: #fff; font-weight: 900; padding: 1.25rem 2.5rem; border-radius: 1rem; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; box-shadow: 0 10px 30px rgba(99,102,241,0.4); transition: all 0.3s; text-decoration: none; }
.toplist-hero-btn:hover { box-shadow: 0 10px 40px rgba(217,70,239,0.5); transform: translateY(-3px); }
.toplist-overlap { margin-top: -5rem; position: relative; z-index: 20; max-width: 80rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.toplist-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .toplist-grid { grid-template-columns: 2fr 1fr; gap: 3rem; } .toplist-sidebar-sticky { position: sticky; top: 7rem; } }
.rounded-card-lg  { border-radius: 2.5rem; }
.rounded-card-xl  { border-radius: 3rem; }
.rounded-card-2xl { border-radius: 3.5rem; }
.toplist-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.toplist-card:hover { transform: translateX(8px); box-shadow: 0 20px 25px -5px rgba(99,102,241,.10), 0 10px 10px -5px rgba(99,102,241,.04); }
.sb-card { border-radius: 3.5rem; }
.sb-card-dark { background-color: #0f172a; padding: 2.5rem; text-align: center; position: relative; overflow: hidden; }
.sb-card-dark-hover { position: absolute; inset: 0; background: linear-gradient(to top, rgba(79,70,229,0.5), transparent); opacity: 0; transition: opacity 0.5s; pointer-events: none; }
.sb-card-dark:hover .sb-card-dark-hover { opacity: 1; }
.sb-card-deco { position: absolute; right: -1.5rem; top: -1.5rem; color: rgba(255,255,255,0.05); font-size: 8rem; font-weight: 900; font-style: italic; user-select: none; pointer-events: none; line-height: 1; }
.sb-gem-icon { width: 4rem; height: 4rem; background: linear-gradient(135deg, #fbbf24, #f97316); border-radius: 1rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 10px 20px rgba(249,115,22,0.3); transition: transform 0.3s; }
.sb-gem-icon i { font-size: 1.75rem; color: #fff; }
.sb-card-dark:hover .sb-gem-icon { transform: scale(1.1); }
.sb-title-dark { color: #fff; font-weight: 900; font-size: 1.5rem; font-style: italic; margin-bottom: 0.5rem; }
.sb-desc-dark { color: rgba(255,255,255,0.5); font-size: 0.875rem; font-weight: 500; margin-bottom: 1.5rem; }
.sb-cta-btn { display: block; width: 100%; background: #fff; color: #0f172a; padding: 1rem; border-radius: 0.75rem; font-weight: 900; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 4px 12px rgba(0,0,0,0.15); transition: background 0.2s, color 0.2s; text-decoration: none; }
.sb-cta-btn:hover { background: #4f46e5; color: #fff; }
.sb-card-white { background: #fff; border: 1px solid #f1f5f9; padding: 2.5rem; box-shadow: 0 10px 25px rgba(99,102,241,0.05); }
.sb-card-white-sm { background: #fff; border: 1px solid #f1f5f9; padding: 2.5rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sb-card-title { font-weight: 900; font-style: italic; font-size: 1.25rem; color: #0f172a; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.sb-rule-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.sb-rule-list li { display: flex; gap: 0.75rem; font-size: 0.875rem; font-weight: 500; color: #475569; }
.sb-rule-list li i { flex-shrink: 0; margin-top: 0.125rem; }
.sb-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sb-stat-box { background: #f8fafc; border: 1px solid #f1f5f9; border-radius: 1rem; padding: 1rem; text-align: center; }
.sb-stat-num-indigo { display: block; font-size: 1.5rem; font-weight: 900; color: #4f46e5; }
.sb-stat-num-fuchsia { display: block; font-size: 1.5rem; font-weight: 900; color: #d946ef; }
.sb-stat-label { display: block; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #94a3b8; }
.sidebar-space > * + * { margin-top: 2rem; }
@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row !important; }
    .md\:flex-col { flex-direction: column !important; }
    .md\:text-left { text-align: left !important; }
    .md\:justify-start { justify-content: flex-start !important; }
    .md\:w-auto { width: auto !important; }
    .md\:flex-none { flex: none !important; }
    .md\:flex { display: flex !important; }
    .md\:hidden { display: none !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:p-12 { padding: 3rem !important; }
}
.toplist-form-article { position: relative; }

/* ─────────────────────────────────────────────────────
   Yazar Sayfası
────────────────────────────────────────────────────── */
@keyframes yz-aurora {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(30px,-50px) scale(1.1); }
    66%  { transform: translate(-20px,20px) scale(.9); }
    100% { transform: translate(0,0) scale(1); }
}
.yz-a1 { animation: yz-aurora 15s infinite ease-in-out; }
.yz-a2 { animation: yz-aurora 18s infinite ease-in-out reverse; }
@keyframes yz-sh { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.yz-shimmer { background: linear-gradient(to right,#fff 20%,#6366f1 40%,#d946ef 60%,#fff 80%); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: yz-sh 5s linear infinite; display: inline-block; }
.yz-hex { clip-path: polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }
.yz-pc { transition: all .35s cubic-bezier(.4,0,.2,1); }
.yz-pc:hover { transform:translateX(8px); border-color:#c7d2fe; box-shadow:0 20px 25px -5px rgba(99,102,241,.1); }
#yz-wrap { background:transparent; }
.yz-hero { background-color: #030712; padding-top: 10rem; padding-bottom: 8rem; position: relative; overflow: hidden; text-align: center; z-index: 1; }
.yz-blob { position: absolute; border-radius: 50%; pointer-events: none; }
.yz-blob-1 { width: 500px; height: 500px; background: rgba(99,102,241,.2); filter: blur(100px); top: 20%; left: 15%; }
.yz-blob-2 { width: 400px; height: 400px; background: rgba(217,70,239,.2); filter: blur(80px); bottom: 10%; right: 15%; }
.yz-blob-1b { top: 25%; left: 25%; }
.yz-blob-2b { bottom: 0; right: 25%; }
.yz-grid-bg { position: absolute; inset: 0; opacity: .25; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='g' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 0 10 L 40 10 M 10 0 L 10 40' fill='none' stroke='rgba(255,255,255,0.04)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E"); }
.yz-bc-row { display:flex; align-items:center; justify-content:center; gap:.75rem; margin-bottom:2.5rem; }
.yz-bc-a { font-size:.65rem; font-weight:700; color:rgba(255,255,255,.4); text-transform:uppercase; letter-spacing:.15em; transition:color .2s; text-decoration:none; }
.yz-bc-a:hover { color:white; }
.yz-bc-sep { color:rgba(255,255,255,.2); font-size:.65rem; }
.yz-bc-pill { display:inline-flex; align-items:center; background:rgba(99,102,241,.2); color:#a5b4fc; border:1px solid rgba(99,102,241,.3); padding:.2rem .85rem; border-radius:9999px; font-size:.62rem; font-weight:900; text-transform:uppercase; letter-spacing:.1em; }
.yz-av { width:9rem; height:9rem; margin:0 auto 2rem; display:flex; align-items:center; justify-content:center; font-size:3.75rem; font-weight:900; color:white; filter: drop-shadow(0 0 40px rgba(99,102,241,.4)); }
.yz-sb-row { display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap; }
.yz-sb { width:3rem; height:3rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:1rem; display:inline-flex; align-items:center; justify-content:center; color:white; transition:all .25s; text-decoration:none; }
.yz-sb:hover { background:rgba(255,255,255,.18); border-color:transparent; color:white; }
.yz-card   { background:#fff; border-radius:2rem;   border:1px solid #f1f5f9; box-shadow:0 4px 20px rgba(0,0,0,.04); }
.yz-card-l { background:#fff; border-radius:2.5rem; border:1px solid #f1f5f9; box-shadow:0 20px 60px rgba(99,102,241,.06); }
.yz-bio-ico { width:3rem;height:3rem;background:#eef2ff;color:#4f46e5;border-radius:1rem;display:flex;align-items:center;justify-content:center; }
.yz-stat     { background:#fff; border-radius:2.5rem; border:1px solid #f1f5f9; box-shadow:0 4px 20px rgba(99,102,241,.04); padding:2.5rem; }
.yz-s-indigo  { background:#eef2ff; border-radius:1.5rem; padding:1.5rem; text-align:center; }
.yz-s-fuchsia { background:#fdf4ff; border-radius:1.5rem; padding:1.5rem; text-align:center; }
.yz-s-emerald { background:#ecfdf5; border-radius:1.5rem; padding:1.5rem 2rem; display:flex;align-items:center;justify-content:space-between; grid-column:span 2/span 2; }
.yz-sw { background:#fff; border-radius:2.5rem; border:1px solid #f1f5f9; box-shadow:0 4px 20px rgba(99,102,241,.04); padding:2.5rem; }
.yz-sl { display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:1rem;transition:all .2s;border:1px solid transparent;text-decoration:none;color:#475569; }
.yz-sl:hover { background:#f8fafc; border-color:#f1f5f9; color:#475569; }
.yz-sl-ico { width:2.5rem;height:2.5rem;background:#f8fafc;border-radius:.75rem;display:flex;align-items:center;justify-content:center;color:#64748b;transition:all .2s;flex-shrink:0; }
.yz-sl:hover .yz-sl-ico { background:#4f46e5; color:white; }
.yz-ac { background:white; border:1px solid #f1f5f9; border-radius:2rem; padding:2rem; display:flex; align-items:flex-start; gap:1.5rem; text-decoration:none; transition:all .35s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 8px rgba(0,0,0,.03); }
.yz-ac:hover { transform:translateX(8px); border-color:#c7d2fe; box-shadow:0 20px 25px -5px rgba(99,102,241,.1); }
.yz-micro { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; }

/* ─────────────────────────────────────────────────────
   İletişim / Hakkımızda (page.php)
────────────────────────────────────────────────────── */
@keyframes ct-aurora {
    0%   { transform: translate(0,0) scale(1); }
    33%  { transform: translate(30px,-50px) scale(1.1); }
    66%  { transform: translate(-20px,20px) scale(0.9); }
    100% { transform: translate(0,0) scale(1); }
}
.ct-aurora-1 { animation: ct-aurora 20s infinite ease-in-out; }
.ct-aurora-2 { animation: ct-aurora 25s infinite ease-in-out reverse; }
.ct-aurora-3 { animation: ct-aurora 30s infinite ease-in-out 3s; }
.ct-hero { background-color:#030712; padding-top:12rem; padding-bottom:12rem; position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; overflow:hidden; }
.ct-blob  { position:absolute; border-radius:50%; pointer-events:none; }
.ct-overlap { max-width:80rem; margin:-3rem auto 0; padding:0 1.5rem; position:relative; z-index:20; box-sizing:border-box; }
.ct-grid { display:grid; grid-template-columns:1fr; gap:2rem; }
@media (min-width:1024px) { .ct-grid { grid-template-columns:2fr 1fr; gap:3rem; } }
.ct-info-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px) { .ct-info-grid { grid-template-columns:1fr 1fr; } }
.ct-info-card { background:#fff; padding:2rem; border-radius:2.5rem; border:1px solid #f1f5f9; box-shadow:0 1px 3px rgba(0,0,0,.05); display:flex; align-items:center; gap:1.5rem; transition:border-color .2s; }
.ct-info-icon { width:3.5rem; height:3.5rem; border-radius:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.5rem; transition:transform .2s; }
.ct-info-card:hover .ct-info-icon { transform:scale(1.1); }
.ct-form-article { background:#fff; border-radius:3rem; padding:2rem; border:1px solid #f1f5f9; box-shadow:0 25px 50px rgba(99,102,241,.05); }
@media (min-width:768px) { .ct-form-article { padding:3rem; } }
.ct-form-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid #f1f5f9; }
.ct-form-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; }
@media (min-width:640px) { .ct-form-grid { grid-template-columns:1fr 1fr; } }
.ct-label { display:block; font-size:.6875rem; font-weight:900; color:#94a3b8; text-transform:uppercase; letter-spacing:.1em; margin-left:.5rem; margin-bottom:.5rem; }
.ct-input-wrap { position:relative; }
.ct-input-icon  { position:absolute; top:0; bottom:0; left:0; padding-left:1rem; display:flex; align-items:center; pointer-events:none; color:#94a3b8; }
.ct-textarea-icon { position:absolute; top:1rem; left:1rem; pointer-events:none; color:#94a3b8; }
.ct-input    { width:100%; background:#f8fafc; border:1px solid #e2e8f0; border-radius:1rem; padding:1rem 1rem 1rem 3rem; font-size:.875rem; font-weight:600; color:#1e293b; outline:none; transition:border-color .2s,background .2s,box-shadow .2s; box-sizing:border-box; font-family:inherit; }
.ct-input:focus  { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.ct-select   { width:100%; background:#f8fafc; border:1px solid #e2e8f0; border-radius:1rem; padding:1rem 3rem 1rem 3rem; font-size:.875rem; font-weight:600; color:#1e293b; outline:none; transition:border-color .2s,box-shadow .2s; appearance:none; cursor:pointer; box-sizing:border-box; font-family:inherit; }
.ct-select:focus { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.ct-select-arrow { position:absolute; top:0; bottom:0; right:0; padding-right:1rem; display:flex; align-items:center; pointer-events:none; color:#94a3b8; }
.ct-textarea { width:100%; background:#f8fafc; border:1px solid #e2e8f0; border-radius:1rem; padding:1rem 1.25rem 1rem 3rem; font-size:.875rem; font-weight:600; color:#1e293b; outline:none; transition:border-color .2s,box-shadow .2s; resize:none; box-sizing:border-box; font-family:inherit; }
.ct-textarea:focus { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.1); }
.ct-submit-btn { width:100%; background:linear-gradient(to right,#4f46e5,#d946ef); color:#fff; font-weight:900; padding:1.25rem; border-radius:1rem; text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; border:none; cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:.75rem; font-family:inherit; }
.ct-submit-btn:hover { box-shadow:0 10px 40px rgba(99,102,241,.4); transform:translateY(-2px); }
.ct-sidebar { display:flex; flex-direction:column; gap:2rem; }
@media (min-width:1024px) { .ct-sidebar { position:sticky; top:7rem; } }
.ct-sb-menu { background:#fff; border:1px solid #f1f5f9; border-radius:3.5rem; padding:2.5rem; box-shadow:0 10px 25px rgba(99,102,241,.05); }
.ct-sb-menu-item { display:flex; align-items:center; justify-content:space-between; padding:1.25rem; border-radius:1rem; margin-bottom:.75rem; text-decoration:none; transition:background .2s,border-color .2s; }
.ct-sb-menu-item:last-child { margin-bottom:0; }
.ct-sb-security { background:#0f172a; border-radius:3.5rem; padding:2.5rem; text-align:center; position:relative; overflow:hidden; }
.ct-sb-sec-hover { position:absolute; inset:0; background:linear-gradient(to top,rgba(79,70,229,.5),transparent); opacity:0; transition:opacity .5s; pointer-events:none; }
.ct-sb-security:hover .ct-sb-sec-hover { opacity:1; }
.ct-sb-social { background:#fff; border-radius:3.5rem; padding:2.5rem; border:1px solid #f1f5f9; text-align:center; }
.ct-social-btn { width:3.5rem; height:3.5rem; border-radius:1rem; background:#f8fafc; border:1px solid #f1f5f9; display:inline-flex; align-items:center; justify-content:center; font-size:1.25rem; text-decoration:none; color:#64748b; transition:all .2s; }
.ct-social-btn:hover { background:#1DA1F2; color:#fff; border-color:transparent; }
.ct-social-btn.ig:hover { background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7); color:#fff; border-color:transparent; }
.ct-social-btn.yt:hover { background:#FF0000; color:#fff; border-color:transparent; }

/* ─────────────────────────────────────────────────────
   Blog / Detay Sayfası
────────────────────────────────────────────────────── */
@keyframes bl-a1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}}
@keyframes bl-a2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.2)}}
.bl-a1{animation:bl-a1 10s ease-in-out infinite}
.bl-a2{animation:bl-a2 13s ease-in-out infinite}
.bl-outer{max-width:80rem;margin:-2.5rem auto 0;padding:0 1.5rem 5rem;position:relative;z-index:20}
.bl-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.bl-grid{grid-template-columns:2fr 1fr}}
.bl-article{background:white;border-radius:2.5rem;box-shadow:0 20px 60px -15px rgba(15,23,42,0.1);overflow:hidden;margin-bottom:2rem}
.bl-img-wrap{width:100%;aspect-ratio:21/9;overflow:hidden}
.bl-img-wrap img{width:100%;height:100%;object-fit:cover}
.bl-body{padding:2rem 2.5rem}
.bl-tags-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;border-top:1px solid #f1f5f9;padding-top:2rem;margin-top:2.5rem}
.bl-tag{background:#f8fafc;color:#64748b;padding:0.5rem 1rem;border-radius:0.75rem;font-size:0.625rem;font-weight:900;text-transform:uppercase;letter-spacing:0.1em;text-decoration:none}
.bl-tag:hover{background:#eef2ff;color:#6366f1}
.bl-share-btn{width:2.5rem;height:2.5rem;background:#f8fafc;color:#475569;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;border:none;cursor:pointer;font-size:0.875rem;transition:background 0.2s,color 0.2s}
.bl-share-btn:hover{background:#6366f1;color:white}
.bl-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:2rem}
@media(max-width:640px){.bl-nav-grid{grid-template-columns:1fr}}
.bl-nav-card{background:white;padding:1.5rem;border-radius:2rem;border:1px solid #f1f5f9;display:flex;align-items:center;gap:1rem;text-decoration:none;box-shadow:0 2px 8px rgba(15,23,42,0.05);transition:border-color 0.2s}
.bl-nav-card:hover{border-color:#a5b4fc}

/* ── Quill Editör İçerik Stilleri (front-end render) ── */
.ql-bio p{margin:0 0 0.75em;}
.ql-bio p:last-child{margin-bottom:0;}
.ql-bio strong{font-weight:700;}
.ql-bio em{font-style:italic;}
.ql-bio u{text-decoration:underline;}
.ql-bio ol,.ql-bio ul{padding-left:1.5em;margin:0 0 0.75em;}
.ql-bio a{color:#6366f1;text-decoration:underline;}
.ql-align-justify{text-align:justify}
.ql-align-center{text-align:center}
.ql-align-right{text-align:right}
.ql-align-left{text-align:left}
.ql-indent-1{padding-left:3em}
.ql-indent-2{padding-left:6em}
.ql-indent-3{padding-left:9em}
.ql-indent-4{padding-left:12em}
.ql-indent-5{padding-left:15em}
.ql-indent-6{padding-left:18em}
.ql-indent-7{padding-left:21em}
.ql-indent-8{padding-left:24em}
.bl-nav-card.right{justify-content:flex-end;text-align:right}
.bl-nav-icon{width:3rem;height:3rem;background:#f8fafc;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#94a3b8;flex-shrink:0}
.bl-nav-card:hover .bl-nav-icon{background:#eef2ff;color:#6366f1}
.bl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:640px){.bl-related-grid{grid-template-columns:1fr}}
.bl-related-card{background:white;border-radius:1.25rem;overflow:hidden;border:1px solid #f1f5f9;box-shadow:0 2px 8px rgba(15,23,42,0.04);text-decoration:none;display:block;transition:border-color 0.2s}
.bl-related-card:hover{border-color:#a5b4fc}
.bl-related-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.bl-related-placeholder{width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#e0e7ff,#fae8ff);display:flex;align-items:center;justify-content:center;}
.bl-related-body{padding:1rem}
.bl-pop-thumb{width:3.5rem;height:3.5rem;border-radius:0.75rem;object-fit:cover;flex-shrink:0}
.bl-pop-thumb-placeholder{width:3.5rem;height:3.5rem;border-radius:0.75rem;background:linear-gradient(135deg,#e0e7ff,#fae8ff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bl-sb-card{background:white;border-radius:2rem;padding:1.5rem;border:1px solid #f1f5f9;box-shadow:0 2px 8px rgba(15,23,42,0.05);margin-bottom:1.5rem}
.bl-sb-dark{background:#0f172a;border-radius:2rem;padding:1.75rem;margin-bottom:1.5rem;text-align:center;position:relative;overflow:hidden}
.bl-sb-dark::before{content:'';position:absolute;inset:0;background:linear-gradient(to bottom right,rgba(124,58,237,0.3),rgba(217,70,239,0.3));opacity:0;transition:opacity 0.3s}
.bl-sb-dark:hover::before{opacity:1}
.bl-cat-item{display:flex;align-items:center;gap:0.75rem;padding:0.75rem;border-radius:1rem;text-decoration:none;margin-bottom:0.375rem}
.bl-cat-item:hover{background:#f8fafc}
.bl-cat-icon{width:2.25rem;height:2.25rem;border-radius:0.75rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bl-pop-item{display:flex;align-items:center;gap:0.875rem;padding:0.75rem 0;border-bottom:1px solid #f1f5f9;text-decoration:none;}
.bl-pop-item:last-child{border-bottom:none;padding-bottom:0}
.bl-pop-num{width:2rem;height:2rem;border-radius:0.5rem;background:#f1f5f9;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:0.625rem;color:#94a3b8;flex-shrink:0}
.bl-pop-item:hover .bl-pop-num{background:#eef2ff;color:#6366f1}
.bl-comments{background:white;border-radius:2.5rem;box-shadow:0 4px 24px rgba(15,23,42,0.07);padding:2rem 2.5rem;margin-top:2rem}
.bl-comment-bubble{display:flex;gap:1rem;margin-bottom:1.5rem}
.bl-comment-avatar{width:3rem;height:3rem;border-radius:50%;background:#e0e7ff;color:#6366f1;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.125rem;flex-shrink:0}
.bl-comment-body{flex:1;background:#f8fafc;border:1px solid #f1f5f9;border-radius:0 1.5rem 1.5rem 1.5rem;padding:1rem 1.25rem}
.bl-form-input{width:100%;background:white;border:1px solid #e2e8f0;border-radius:0.75rem;padding:0.75rem 1rem;font-size:0.875rem;outline:none;box-sizing:border-box;font-family:inherit}
.bl-form-input:focus{border-color:#a5b4fc;box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.bl-submit-btn{background:#0f172a;color:white;font-weight:900;font-size:0.6875rem;text-transform:uppercase;letter-spacing:0.1em;padding:1rem 2rem;border-radius:0.75rem;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem}
.bl-submit-btn:hover{background:#6366f1}

/* ── Yazdır ─────────────────────────────────────── */
@media print {
    #navbar, #back-to-top, footer { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}
