
        :root {
            --bg: #f3f5f7;
            --panel: #ffffff;
            --ink: #10151b;
            --muted: #56636e;
            --line: #dde3e8;
            --accent: #ff9c27;
            --accent-ink: #7a4600;
            --accent-soft: #fff1de;
            --signal: #0f8b8d;
            --shadow: rgba(16, 21, 27, 0.06);
        }

        body.dark {
            --bg: #1a1f26;
            --panel: #10161f;
            --ink: #e7edf3;
            --muted: #93a2b1;
            --line: #1e2733;
            --accent: #ffb15c;
            --accent-ink: #ffe2b8;
            --accent-soft: #221b0f;
            --signal: #37c9c1;
            --shadow: rgba(0, 0, 0, 0.35);
        }

        * {
            box-sizing: border-box;
        }

        body {
            padding:10px 20px;
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: "Ubuntu", -apple-system, BlinkMacSystemFont, sans-serif;
            transition: background-color 0.25s ease, color 0.25s ease;
        }

        a {
            color: inherit;
        }

        /* ---------- Üst çubuk (header yerine) ---------- */
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px clamp(20px, 4vw, 56px);
            border-bottom: 1px solid var(--line);
        }

        .topbar .wordmark {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: "Ubuntu Mono", monospace;
            font-size: 1.2rem;
            letter-spacing: 0.02em;
        }

        .topbar .wordmark .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .topbar .wordmark .path {
            color: var(--muted);
        }

        .topbar .actions {
            display: flex;
            align-items: center;
            gap: 18px;
        }

        /* ---------- Üst çubuk (header yerine) ---------- */
        /* ... (mevcut stiller) ... */

        /* Mevcut stilin altına ekle: */
    .topbar .wordmark .typing-text {
        position: relative; /* İmleci konumlandırmak için */
        display: inline-block; /* Genişliği metne göre ayarlasın */
    }

    /* Yanıp sönen imleç pseudo-elementi */
        .topbar .wordmark .typing-text::after {
        content: ''; /* Boş içerik */
        position: absolute;
        top: 50%;
        right: -20px; /* Metnin sağında, biraz boşlukla dursun */
        width: 8px; /* İmleç genişliği */
        height: 80%; /* Metinden biraz daha kısa */
        transform: translateY(-50%); /* Dikeyde ortala */
        background-color: #cf6969; /* Metin rengiyle aynı olsun */
        animation: blink 1s step-start infinite; /* Yanıp sönme animasyonu */
    }

    /* Animasyon tanımı */
    @keyframes blink {
        0%, 100% {
        opacity: 1; /* Görünür */
        }
        50% {
        opacity: 0; /* Gizli */
        }
    }

        .back-link {
            font-family: "Ubuntu Mono", monospace;
            font-size: 1.2rem;
            text-decoration: none;
            color: var(--muted);
            border-bottom: 1px solid transparent;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .back-link:hover {
            color: var(--ink);
            border-color: var(--line);
        }

        #theme-toggle {
            background: var(--panel);
            color: var(--ink);
            border: 1px solid var(--line);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* ---------- Ana içerik grid ---------- */
        .shell {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 0;
            width: 100%;
        }

        .rail {
            padding: 40px 28px 40px clamp(20px, 4vw, 56px);
            border-right: 1px solid var(--line);
        }

        .rail-heading {
            font-family: "Ubuntu Mono", monospace;
            font-size: 1rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
            margin: 0 0 18px;
        }

        .post-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .post-item {
            display: block;
            text-decoration: none;
            color: var(--ink);
            padding: 12px 14px;
            border-radius: 10px;
            margin-bottom: 4px;
            border-left: 2px solid transparent;
        }

        .post-item .row {
            display: flex;
            align-items: baseline;
            gap: 10px;
        }

        .post-item .idx {
            font-family: "Ubuntu Mono", monospace;
            font-size: 1rem;
            color: var(--muted);
            min-width: 26px;
        }

        .post-item .status {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--line);
            flex-shrink: 0;
        }

        .post-item .title {
            font-size: 0.92rem;
            line-height: 1.35;
        }

        .post-item:hover {
            background: var(--accent-soft);
        }

        .post-item.active {
            background: var(--accent-soft);
            border-left-color: var(--accent);
        }

        .post-item.active .status {
            background: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
            animation: pulse 2.4s ease-in-out infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .post-item.active .status {
                animation: none;
            }
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
            50% { box-shadow: 0 0 0 6px var(--accent-soft); }
        }

        .empty-note {
            font-size: 0.88rem;
            color: var(--muted);
        }

        /* ---------- Makale paneli ---------- */
        .article-panel {
            padding: 44px clamp(24px, 4vw, 56px) 80px;
        }
        /* Metin içindeki <code> alanlarının tasarımı */
        .article-panel code {
            /*background-color: #5ba970; /* Hafif grimsi/mavimsi açık arka plan */
            color: #cf6969;           /* Github tarzı tatlı bir pembe/kırmızı yazı rengi */
            padding: 3px 6px;         /* Yazının etrafına biraz boşluk */
            /*border-radius: 5px;       /* Köşeleri hafif yuvarlatma */
            /*font-family: "Courier New", Courier, monospace; /* Tam bir kod fontu görünümü */
            /*font-size: 0.9em;         /* Normal metinden bir tık daha küçük */
       }
       /* Her code etiketinin başına seçilemeyen '>' işareti ekler */
        .article-panel code::before {
            content: "> ";                     /* Ekranda görünecek işaret ve yanındaki boşluk */
            color: #a0aec0;                    /* Ana metinden rol çalmaması için hafif grimsi bir renk */
            font-weight: bold;                 /* İşareti biraz belirginleştirir */
    
            /* Kullanıcının bu işareti fareyle seçmesini kesin olarak engeller */
            user-select: none;                 
            -webkit-user-select: none;         /* Safari desteği */
            -moz-user-select: none;            /* Firefox desteği */
            -ms-user-select: none;             /* Eski tarayıcı desteği */
        }
        .log-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 4px 0;
            font-family: "Ubuntu Mono", monospace;
            font-size: 1rem;
            color: var(--muted);
            margin-bottom: 28px;
        }

        .log-strip span {
            padding-right: 16px;
            margin-right: 16px;
            border-right: 1px solid var(--line);
        }

        .log-strip span:last-child {
            border-right: none;
        }

        .log-strip strong {
            color: var(--ink);
            font-weight: 500;
        }

        h1.post-title {
            font-family: "Ubuntu", sans-serif;
            font-weight: 600;
            font-size: clamp(1.9rem, 3.4vw, 2.75rem);
            line-height: 1.12;
            margin: 0 0 28px;
            color: #0f8b8d; /* Buraya istediğiniz rengin kodunu yazın */
        }

        .empty-state h1 {
            font-family: "Ubuntu", sans-serif;
            font-size: 2.1rem;
            margin-bottom: 12px;
        }

        .empty-state p {
            color: var(--muted);
        }

        .post-content {
            font-size: 1.3rem;
            line-height: 1.85;
            color: var(--ink);
        }

        .post-content p,
        .post-content ul,
        .post-content ol {
            margin: 0 0 20px;
        }

        .post-content blockquote {
            margin: 28px 0;
            padding: 4px 0 4px 20px;
            border-left: 2px solid var(--accent);
            color: var(--muted);
            font-style: italic;
        }

        .post-content a {
            color: var(--signal);
            text-decoration: underline;
            text-decoration-color: var(--line);
            text-underline-offset: 3px;
        }

        @media (max-width: 860px) {
            .shell {
                grid-template-columns: 1fr;
            }
            .rail {
                border-right: none;
                border-bottom: 1px solid var(--line);
                padding: 28px 0;
            }
            .article-panel {
                padding: 32px 20px 60px;
            }
        }

   /* ---------- Admin panel stilleri ---------- */
        
        .admin-card{max-width:1200px;width:100%;margin:0 auto;background:#fff;padding:28px;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,0.07)}
        .form-group{margin-bottom:16px}
        .form-group select,
        .form-group input[type="text"],
        .form-group textarea,
        .form-group .form-control {
            width: 100%;
            box-sizing: border-box;
            padding: 14px 18px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
        }
        textarea.form-control {
            width: 100%;
            box-sizing: border-box;
            min-height: 600px;
            padding: 14px 18px;
        }
        textarea#content {
            display: block;
            visibility: visible;
        }
        .form-group select {
            height: 48px;
            padding: 14px 18px;
            border: 1px solid #d1d5db;
            background: #ffffff;
            border-radius: 8px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            cursor: pointer;
        }
        .btn{display:inline-block;padding:10px 14px;border-radius:4px;text-decoration:none}
        .btn-primary{background:#007bff;color:#fff;border:none}
        .btn-secondary{background:#6c757d;color:#fff;border:none}
        .logout-button{pointer-events:auto;}
        .logout-button:hover{opacity:.95}
        /* Make textarea fill available width */
        textarea.form-control{width:100%;box-sizing:border-box}
        @media (min-width:1400px){
            .admin-card{max-width:1400px}
        }
    