Notes

/* --- GENEL AYARLAR & TYPOGRAPHY --- */
:root {
--cyber-gold: #ffcc00;
--cyber-cyan: #00f3ff;
--cyber-purple: #bc13fe;
--cyber-bg: #0d0221;
}

/* --- NAVBAR --- */
#navbar {
background: linear-gradient(rgba(13, 2, 33, 0.9), rgba(13, 2, 33, 0.95)),
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 243, 255, 0.05) 3px);
border-bottom: 2px solid var(--cyber-cyan);
border-left: 5px solid var(--cyber-gold);
box-shadow: 0px 0px 15px rgba(0, 243, 255, 0.4),
inset 0px 0px 10px rgba(188, 19, 254, 0.5);
padding: 10px 20px;
font-size: 14px;
color: var(--cyber-gold);
font-family: 'Courier New', monospace;
font-weight: bold;
text-transform: uppercase;
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
position: relative;
overflow: hidden;
backdrop-filter: blur(5px);
clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 98% 100%, 0% 100%);
}

#navbar::before {
content: "SYSTEM ONLINE";
font-size: 8px;
color: var(--cyber-cyan);
position: absolute;
top: 2px;
left: 10px;
letter-spacing: 2px;
}

/* --- NAVBAR LINKS & HOVER --- */
#navbar a {
text-decoration: none;
color: inherit;
transition: all 0.2s ease;
position: relative;
padding: 5px 10px;
}

#navbar a:hover {
color: var(--cyber-cyan);
text-shadow: 2px 2px 10px rgba(0, 243, 255, 0.8),
-2px -2px 10px rgba(188, 19, 254, 0.8);
background: rgba(188, 19, 254, 0.1);
border-bottom: 2px solid var(--cyber-gold);
transform: skewX(-10deg) scale(1.1);
cursor: crosshair;
}

/* --- BOARD HEADER --- */
#board-header {
text-align: center;
padding: 15px 10px;
margin-bottom: 15px;
background: var(--cyber-bg);
background-image: linear-gradient(90deg, rgba(255, 204, 0, 0.1) 0%, transparent 50%, rgba(0, 243, 255, 0.1) 100%);
border-top: 1px solid var(--cyber-cyan);
border-bottom: 2px solid var(--cyber-gold);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
clip-path: polygon(4% 0, 100% 0, 100% 70%, 96% 100%, 0 100%, 0% 30%);
color: var(--cyber-gold);
text-transform: uppercase;
letter-spacing: 3px;
text-shadow: 2px 2px 0px rgba(188, 19, 254, 0.6);
}

#board-header::after {
content: " /// DATA_STREAM";
font-size: 9px;
color: var(--cyber-cyan);
vertical-align: middle;
opacity: 0.7;
}

/* --- POST FORM CONTAINER --- */
#post-form-container {
max-width: 400px;
margin: 20px auto;
background: var(--cyber-bg);
border: 1px solid var(--cyber-cyan);
border-left: 4px solid var(--cyber-gold);
box-shadow: 0 0 15px rgba(188, 19, 254, 0.2);
padding: 15px;
position: relative;
clip-path: polygon(5% 0, 100% 0, 100% 95%, 95% 100%, 0 100%, 0 5%);
}

#post-form-container::before {
content: "ST-09 // POST_PROTOCOL";
display: block;
font-family: 'Courier New', monospace;
font-size: 10px;
color: var(--cyber-gold);
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 204, 0, 0.3);
padding-bottom: 5px;
}

/* --- BOX TITLE --- */
.box-title {
background: linear-gradient(90deg, #4b0082 0%, #1a0136 100%);
color: var(--cyber-cyan);
padding: 5px 12px;
font-weight: bold;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1.5px;
border-bottom: 2px solid var(--cyber-gold);
box-shadow: 0px 2px 8px rgba(188, 19, 254, 0.3);
clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%);
display: flex;
align-items: center;
gap: 8px;
}

.box-title::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background-color: var(--cyber-gold);
box-shadow: 0 0 5px var(--cyber-gold);
}

/* --- TABLE DATA --- */
.post-form-table td {
padding: 6px 10px;
vertical-align: middle;
background: rgba(13, 2, 33, 0.4);
border-bottom: 1px solid rgba(188, 19, 254, 0.2);
border-right: 1px solid rgba(0, 243, 255, 0.1);
color: #e0e0e0;
font-family: 'Consolas', monospace;
font-size: 13px;
transition: background 0.2s ease;
}

.post-form-table td:first-child {
color: var(--cyber-gold);
font-weight: bold;
text-transform: uppercase;
border-left: 2px solid var(--cyber-gold);
background: rgba(255, 204, 0, 0.05);
}

.post-form-table tr:hover td {
background: rgba(0, 243, 255, 0.1);
color: var(--cyber-cyan);
}

/* --- OP POST --- */
.op-post {
background: rgba(13, 2, 33, 0.7);
display: block;
width: 100%;
padding: 15px;
margin-top: 10px;
box-sizing: border-box;
border-left: 3px solid var(--cyber-gold);
border-right: 1px solid rgba(0, 243, 255, 0.3);
border-bottom: 1px solid rgba(0, 243, 255, 0.3);
backdrop-filter: blur(4px);
box-shadow: 10px 0 20px -10px rgba(188, 19, 254, 0.2);
clip-path: polygon(0 0, 97% 0, 100% 3%, 100% 100%, 3% 100%, 0 97%);
position: relative;
}

.op-post::after {
content: "TYPE: ORIGIN_DATA_STREAM";
position: absolute;
top: 5px;
right: 15px;
font-family: 'Courier New', monospace;
font-size: 9px;
color: var(--cyber-cyan);
opacity: 0.6;
}

.op-post::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: var(--cyber-gold);
clip-path: polygon(0 0, 100% 0, 0 100%);
}

body {
/* Koyu mor/siyah arası sabit arkaplan (Gradyan hesaplamasını azalttık) */
background: #0a0a12;
background-image: radial-gradient(circle at 50% -20%, #1a0136 0%, #0a0a12 80%);
background-attachment: fixed;

/* Yazı rengini yumuşak bir beyaza/griye çektik (Göz yormaz) */
color: #e0e0e0;

/* Fütüristik ama okunaklı fontlar */
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 1.5;

/* Sayfa genelinde seçim rengini siyan yapalım (Küçük bir detay) */
scrollbar-color: #ffcc00 #0d0221;
scrollbar-width: thin;
}

/* Metin seçildiğinde neon efekti */
::selection {
background: #00f3ff;
color: #000;
}

#board-header h2 {
/* Renk: Parlak Siyan (Cyan) */
color: #00f3ff;

/* Font: Daha modern ve teknik bir görünüm */
font-family: 'Orbitron', 'Courier New', monospace;
font-size: 1.8em;
font-weight: 900;

/* Harf Aralığı: -1px yerine geniş (+3px) yaparak fütüristik hava kattık */
letter-spacing: 3px;
text-transform: uppercase;

/* Çift katmanlı neon etkisi (Statik olduğu için kasma yapmaz) */
text-shadow:
2px 2px 0px #bc13fe, /* Mor derinlik */
0 0 10px rgba(0, 243, 255, 0.5); /* Siyan parlama */

margin: 10px 0;
display: inline-block;
position: relative;
}

/* Başlığın altına küçük bir dekoratif "barkod" çizgisi */
#board-header h2::after {
content: "";
display: block;
width: 50px;
height: 3px;
background: #ffcc00; /* Altın sarısı detay */
margin: 5px auto 0 auto;
box-shadow: 0 0 8px #ffcc00;
}

#view-toggle {
font-size: 11px; /* Biraz daha küçülterek teknik veri havası verdik */
margin-top: 8px;

/* Yazı rengi: Soft Mor (Yazıların boğulmaması için) */
color: #bc13fe;

font-family: 'Consolas', 'Courier New', monospace;
text-transform: uppercase;
letter-spacing: 1px;

/* Etrafına hafif bir çerçeve ve teknik detay */
display: inline-block;
padding: 2px 8px;
border-left: 2px solid #ffcc00; /* Altın sarısı vurgu */
background: rgba(188, 19, 254, 0.05); /* Çok hafif mor arka plan */

/* Gölgelerden kaçınarak kasma riskini sıfırladık */
position: relative;
}

/* Mod isminin önüne küçük bir "aktif" noktası */
#view-toggle::before {
content: "●";
color: #ffcc00;
margin-right: 5px;
font-size: 10px;
vertical-align: middle;
}

/* Mouse ile üzerine gelindiğinde (Eğer tıklanabilirse) */
#view-toggle:hover {
color: #00f3ff; /* Siyan rengine döner */
cursor: pointer;
background: rgba(0, 243, 255, 0.1);
transition: 0.2s;
}

#board-header a {
color: aqua;
text-decoration: none;
}

.post-form-table input[type="text"] {
width: 100%;
/* Arka plan: Koyu mor, neredeyse siyah (Tarayıcıyı yormaz) */
background: #0d0221;

/* Kenarlık: İnce Siyan (Cyan) hatlar */
border: 1px solid rgba(0, 243, 255, 0.4);
border-left: 3px solid var(--cyber-cyan);

/* Yazı: Parlak Siyan rengi, okunaklı font */
color: #00f3ff;
padding: 6px 10px;
font-size: 13px;
font-family: 'Consolas', 'Courier New', monospace;
box-sizing: border-box;

/* Keskin köşeler */
border-radius: 0;
transition: all 0.2s ease;
outline: none;
}

/* Giriş alanına tıklandığında (Fokus) */
.post-form-table input[type="text"]:focus {
/* Renk Altın sarısına döner */
border-color: #ffcc00;
border-left-color: #ffcc00;

/* Çok hafif, performansı etkilemeyen iç ışıma */
background: rgba(255, 204, 0, 0.05);
color: #ffcc00;

/* Yazının parlaması */
text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

/* Placeholder (İpucu yazısı) için Cyber-Mor rengi */
.post-form-table input[type="text"]::placeholder {
color: rgba(188, 19, 254, 0.6);
font-style: italic;
}

.post-form-table textarea {
width: 100%;
min-height: 120px;
resize: vertical;

/* Arka plan: Koyu mor panel */
background: #0d0221;
background-image: linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px);
background-size: 100% 20px; /* Defter çizgisi gibi ama dijital bir grid havası verir */

/* Kenarlıklar */
border: 1px solid rgba(188, 19, 254, 0.4); /* Mor kenarlık */
border-left: 4px solid #bc13fe; /* Kalın mor sol şerit */

/* Yazı Stili */
color: #00f3ff;
padding: 10px;
font-size: 13px;
font-family: 'Consolas', 'Courier New', monospace;
line-height: 1.6;

/* Temiz görünüm */
outline: none;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}

/* Fokus (Tıklama) Anı */
.post-form-table textarea:focus {
border-color: #00f3ff; /* Siyan'a döner */
border-left-color: #ffcc00; /* Sol şerit Altın sarısına döner */

/* Performansı etkilemeyen çok hafif bir iç parlama */
background-color: rgba(13, 2, 33, 0.95);
box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1);
}

/* Sağ alt köşedeki resize (boyutlandırma) tutamacını özelleştirme */
.post-form-table textarea::-webkit-resizer {
background-color: #ffcc00;
border: 2px solid #0d0221;
}

input {
/* Arka plan: Saf siyah yerine derin mor-siyah tonu (daha zengin durur) */
background-color: #05000a;

/* Yazı rengi: Siyan (Okunabilirlik ve neon etkisi için) */
color: #00f3ff;

/* Kenarlık: Mor tabanlı, hafif şeffaf */
border: 1px solid rgba(188, 19, 254, 0.5);

/* Sol tarafa Cyberpunk imzası: Altın sarısı kalın şerit */
border-left: 3px solid #ffcc00;

padding: 8px 12px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 13px;
outline: none;

/* Keskin köşeler şart */
border-radius: 0;

/* Geçiş efekti (kasmayan cinsten) */
transition: all 0.2s ease-in-out;
}

/* Giriş alanına tıklandığında (Fokus) */
input:focus {
/* Kenarlıklar Siyan parlamasına döner */
border-color: #00f3ff;
border-left-color: #00f3ff;

/* Hafif bir dış ışıma (performans dostu) */
box-shadow: 0 0 8px rgba(0, 243, 255, 0.3);

/* İçeride hafif mor bir parlama */
background-color: #0d0221;
}

/* Yazı yazılamayan veya pasif inputlar için */
input:disabled {
opacity: 0.5;
cursor: not-allowed;
border-left-color: #555;
}

.post-main-flow .post-header {
margin-bottom: 8px; /* Biraz daha boşluk ile ferahlık */
padding: 4px 8px;

/* Arka plan: Çok hafif mor bir şerit */
background: rgba(188, 19, 254, 0.05);

/* Siyan ve Altın detaylı sınırlar */
border-left: 3px solid #00f3ff; /* Siyan enerji hattı */
border-bottom: 1px solid rgba(255, 204, 0, 0.2); /* Hafif altın sarısı alt çizgi */

/* Yazı stili */
font-family: 'Consolas', 'Courier New', monospace;
font-size: 15px;
color: #ffcc00; /* Başlık metinleri Altın sarısı */

/* Modern Cyberpunk kesimi */
clip-path: polygon(0 0, 100% 0, 98% 100%, 0% 100%);

display: flex;
align-items: center;
gap: 10px;
}

/* Header içindeki linkler (Kullanıcı adı vb.) */
.post-main-flow .post-header a {
color: #00f3ff; /* Linkler Siyan */
text-decoration: none;
font-weight: bold;
}

.post-main-flow .post-header a:hover {
color: #ffffff;
text-shadow: 0 0 5px #00f3ff;
}

/* Tarih veya ID gibi ikincil bilgiler */
.post-main-flow .post-header span {
color: rgba(188, 19, 254, 0.8); /* İkincil veriler Mor */
font-size: 12px;
}

.reply-post {
/* Arka plan: Ana posttan biraz daha koyu, derinlik hissi için */
background: rgba(13, 2, 33, 0.9);

/* Kenarlıklar: Mor tabanlı, sağ ve alt tarafa siyan vurgusu */
border: 1px solid rgba(188, 19, 254, 0.3);
border-right: 2px solid #00f3ff;
border-bottom: 2px solid #00f3ff;

/* Sol taraf: Yanıt olduğunu belirten altın sarısı bağlantı hattı */
border-left: 3px solid #ffcc00;

margin-left: 20px;
margin-top: 5px;
padding: 12px;
display: table;
min-width: 400px;
max-width: calc(100% - 40px);
position: relative;

/* Cyberpunk kesimi: Sağ üst ve sol alt köşelerden minik kırpma */
clip-path: polygon(0 0, 98% 0, 100% 10%, 100% 100%, 2% 100%, 0 90%);

/* Yazı rengi ve font */
color: #e0e0e0;
font-family: 'Consolas', monospace;

/* Kasmayan hafif bir derinlik gölgesi */
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}

/* Yanıtın hangi ana veriye bağlı olduğunu simgeleyen küçük bir "link" ikonu havası */
.reply-post::before {
content: "RE_ACK >";
position: absolute;
top: -10px;
left: 10px;
font-size: 8px;
color: #ffcc00;
background: #0d0221;
padding: 0 5px;
border: 1px solid #ffcc00;
}

/* Hover durumunda (Mouse üzerindeyken) enerji akışı efekti */
.reply-post:hover {
border-color: #bc13fe;
background: rgba(13, 2, 33, 0.95);
box-shadow: 0 0 10px rgba(188, 19, 254, 0.2);
transition: all 0.2s ease;
}

.thread-divider {
border: none;
/* Çizgiyi ince bir lazer hattına dönüştürelim */
height: 1px;
margin: 20px 0;

/* Siyan (Cyan) ve Mor (Purple) arası geçişli lazer efekti */
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 243, 255, 0.8) 20%,
rgba(188, 19, 254, 0.8) 80%,
transparent 100%
);

position: relative;
overflow: visible;
}

/* Hattın tam ortasına minik bir "altın sarısı" işlemci çekirdeği */
.thread-divider::after {
content: "DATA_SEGMENT_BREAK";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

background: #0d0221;
color: #ffcc00;
font-family: 'Courier New', monospace;
font-size: 8px;
padding: 0 10px;
letter-spacing: 2px;
border-left: 2px solid #ffcc00;
border-right: 2px solid #ffcc00;

/* Hafif parlama (Kasma yapmaz) */
text-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

/* Çizginin altına çok ince bir gölge hattı */
.thread-divider::before {
content: "";
position: absolute;
top: 2px;
left: 10%;
width: 80%;
height: 1px;
background: rgba(188, 19, 254, 0.2);
}

.index-box {
/* Arka plan: Derin mor-lacivert, üzerine çok hafif bir tarama efekti */
background: #0d0221;
background-image: linear-gradient(rgba(0, 243, 255, 0.02) 1px, transparent 1px);
background-size: 100% 3px;

margin-bottom: 20px;
padding: 1px; /* Kenarlık efekti için iç boşluk */

/* Kenarlıklar: Mor ana hat, sol tarafta altın sarısı 'aktif' sütunu */
border: 1px solid rgba(188, 19, 254, 0.4);
border-left: 5px solid #ffcc00;

/* Modern fütüristik kesim */
clip-path: polygon(0 0, 100% 0, 100% 95%, 98% 100%, 0 100%);

/* Performans dostu derinlik gölgesi */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);

position: relative;
overflow: hidden;
}

/* Kutunun üst kısmına teknik bir seri numarası ekleyelim */
.index-box::before {
content: "INDEX_BLOCK_PRTCL_4";
position: absolute;
top: 2px;
right: 10px;
font-family: 'Courier New', monospace;
font-size: 8px;
color: #00f3ff;
opacity: 0.5;
letter-spacing: 1px;
}

/* Kutu içindeki başlık alanını (varsa) otomatik uyumlama */
.index-box .box-title {
margin: -1px -1px 10px -1px; /* Kenarlara tam otursun */
background: linear-gradient(90deg, #1a0136, #0d0221);
border-bottom: 1px solid #ffcc00;
padding: 8px 15px;
color: #ffcc00;
font-weight: bold;
text-transform: uppercase;
}

.board-table th {
/* Arka plan: Koyu mor-siyah panel, hafif siyan ışıltısı ile */
background: linear-gradient(180deg, #1a0136 0%, #0d0221 100%);

/* Yazı: Parlak Altın Sarısı (Başlıklar dikkat çekmeli) */
color: #ffcc00;

padding: 10px 12px; /* Biraz daha geniş alan */
text-align: left;
font-size: 12px;
font-family: 'Orbitron', 'Consolas', monospace;
text-transform: uppercase;
letter-spacing: 2px;

/* Alt kenarlık: Siyan (Cyan) lazer hattı */
border-bottom: 2px solid #00f3ff;

/* Sağ tarafa sütun ayırıcı küçük bir detay */
border-right: 1px solid rgba(0, 243, 255, 0.1);

/* Statik neon etkisi (Kasma yapmaz) */
text-shadow: 0 0 5px rgba(255, 204, 0, 0.4);

position: relative;
}

/* Başlığın soluna küçük bir dekoratif kare ekleyelim */
.board-table th::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
background: #ffcc00;
margin-right: 8px;
vertical-align: middle;
/* Kareyi elmasa dönüştür */
transform: rotate(45deg);
}

/* İlk sütunun başlığına özel Cyberpunk dokunuşu */
.board-table th:first-child {
border-left: 3px solid #ffcc00;
}

.board-table td {
padding: 10px 12px;
/* Arka plan: Derin gece moru, daha az yorucu */
background: #0d0221;

/* Üst çizgi: Siyah yerine mor/siyan arası ince bir hat */
border-top: 1px solid rgba(188, 19, 254, 0.2);

/* Yazı rengi: Yumuşak beyaz/gri */
color: #e0e0e0;
font-family: 'Consolas', monospace;
font-size: 13px;

transition: all 0.2s ease; /* Hover geçişini yumuşatır */
}

/* Satır üzerine gelindiğinde (Hover Etkisi) */
.board-table tr:hover td {
/* Arka plan: Daha belirgin bir mor-lacivert */
background: rgba(26, 1, 54, 0.8) !important;

/* Yazı rengi: Siyan (Okunabilirliği ve havayı artırır) */
color: #00f3ff;

/* Satırın altına ve üstüne enerji hattı */
border-top-color: #00f3ff;

/* Hafif bir iç ışık efekti (Kasma yapmaz) */
box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1);

cursor: crosshair; /* İmleci hedefleme moduna alalım */
}

/* İlk sütundaki verilere (ID veya İkon olabilir) Altın Sarısı vurgusu */
.board-table td:first-child {
color: #ffcc00;
font-weight: bold;
}

ul {
list-style: none;
padding: 10px 12px;

/* Arka plan: Koyu mor-siyah panel, %90 opaklık */
background: rgba(13, 2, 33, 0.9);

/* Kenarlık: Sol tarafa mor enerji barı, alt tarafa ince siyan hattı */
border-left: 3px solid #bc13fe;
border-bottom: 1px solid rgba(0, 243, 255, 0.2);

/* Modern fütüristik kesim (Köşeyi hafifçe kırptık) */
clip-path: polygon(0 0, 100% 0, 100% 92%, 96% 100%, 0 100%);

margin: 10px 0;
position: relative;
}

/* Liste elemanlarına (li) otomatik teknik işaretçi ekleyelim */
ul li {
color: darkviolet;
font-family: 'Consolas', monospace;
font-size: 13px;
padding: 4px 0 4px 15px;
position: relative;
}

/* Her satırın başına altın sarısı "kod" imleci */
ul li::before {
content: ">";
position: absolute;
left: 0;
color: #ffcc00;
font-weight: bold;
opacity: 0.7;
}

/* Üzerine gelindiğinde listenin parlaması */
ul:hover {
border-left-color: #00f3ff; /* Sol bar Siyan'a döner */
background: rgba(26, 1, 54, 0.95);
transition: all 0.3s ease;
}

/* --- MOBILE RESPONSIVE ADAPTATION --- */

@media (max-width: 768px) {
/* Navbar: Linklerin birbirine girmemesi için dikey veya kaydırılabilir yapı */
#navbar {
flex-wrap: wrap;
justify-content: center;
gap: 10px;
font-size: 12px;
padding: 15px 10px;
clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 95% 100%, 0% 100%);
}

#navbar::before {
font-size: 7px;
top: 1px;
}

/* Board Header: Yazı boyutunu küçültme */
#board-header h2 {
font-size: 1.3em;
letter-spacing: 1px;
}

/* Post Form: Mobilde tam genişlik */
#post-form-container {
max-width: 95%;
margin: 10px auto;
padding: 10px;
}

/* Tablo Görünümü: Mobilde tabloları blok yapıya çevirerek taşmayı önleme */
.post-form-table, .board-table {
display: block;
width: 100%;
}

.post-form-table tr, .board-table tr {
display: block;
width: 100%;
margin-bottom: 10px;
}

.post-form-table td, .board-table td, .board-table th {
display: block;
width: 100%;
box-sizing: border-box;
text-align: left;
border-right: none;
}

/* Tablo başlıklarını mobilde daha belirgin yapma */
.post-form-table td:first-child {
border-left: 3px solid var(--cyber-gold);
background: rgba(255, 204, 0, 0.15);
}

/* Reply Post: Mobilde girintiyi azaltma ve genişliği artırma */
.reply-post {
margin-left: 10px;
min-width: unset;
max-width: 95%;
padding: 10px;
font-size: 12px;
clip-path: polygon(0 0, 95% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
}

/* Post Header: Mobilde isim ve ID'nin alt alta gelmemesi için esneklik */
.post-main-flow .post-header {
flex-wrap: wrap;
font-size: 12px;
}

/* Görsel ve Input Ayarları */
input[type="text"], textarea {
font-size: 14px; /* Mobilde zoom yapmaması için ideal boyut */
}

.index-box {
margin: 10px;
clip-path: none; /* Mobilde karmaşık kesimler bazen render hatası verebilir */
border-right: 1px solid rgba(188, 19, 254, 0.4);
}

/* Thread Divider: Metni mobilde küçültme */
.thread-divider::after {
font-size: 7px;
letter-spacing: 1px;
width: auto;
white-space: nowrap;
}
}

/* Küçük telefonlar için ekstra rötuş */
@media (max-width: 480px) {
#board-header h2 {
font-size: 1.1em;
}

.op-post::after {
display: none; /* Çok dar ekranlarda teknik yazıyı gizle */
}

#navbar a {
padding: 3px 6px;
font-size: 11px;
}
}

#recent-images {
padding: 15px;
display: flex;
flex-wrap: wrap;
gap: 12px; /* Görsellerin nefes alması için boşluğu biraz artırdık */

/* Arka plan: Koyu mor-siyah ve üzerine hafif bir veri ızgarası (grid) */
background: #0d0221;
background-image:
linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
background-size: 20px 20px;

/* Kenarlık: Üstte siyan lazer hattı, altta mor enerji barı */
border-top: 2px solid #00f3ff;
border-bottom: 2px solid #bc13fe;

/* Modern Cyberpunk kesimi */
/*! clip-path: polygon(0 0, 100% 0, 100% 95%, 98% 100%, 0 100%); */

margin-top: 10px;
position: relative;
}

/* Galeri içindeki her bir görsel/kutucuk için fütüristik çerçeve */
#recent-images img, #recent-images .image-item {
border: 1px solid rgba(255, 204, 0, 0.3); /* Altın sarısı ince çerçeve */
padding: 2px;
background: #000;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Görselin üzerine gelindiğinde (Hover) */
#recent-images img:hover {
border-color: #00f3ff; /* Çerçeve Siyan'a döner */
transform: scale(1.05) rotate(1deg); /* Hafif büyüme ve teknik bir kayma */
box-shadow: 0 0 15px rgba(0, 243, 255, 0.4); /* Neon parlama */
cursor: crosshair;
z-index: 2;
}

/* Galeri başlığı gibi bir veri etiketi ekleyelim */
#recent-images::before {
content: "LIVE_VISUAL_FEED";
position: absolute;
top: -12px;
left: 20px;
background: #00f3ff;
color: #000;
font-family: 'Consolas', monospace;
font-size: 9px;
padding: 2px 8px;
font-weight: bold;
letter-spacing: 1px;
}

#site-header {
text-align: center;
padding: 40px 20px;

/* Arka Plan: Derin teknolojik mor ve görsel yer tutucu */
/* Placeholder olarak fütüristik bir devre kartı/şehir silüeti dokusu ekledik */
background:
linear-gradient(rgba(13, 2, 33, 0.8), rgba(13, 2, 33, 0.9)),
url('https://worldvectorlogo.com/static/img/placeholder.png'); /* Buraya kendi logo/banner linkini koyabilirsin */
background-size: cover;
background-position: center;

/* Alt Kenarlık: Siyan ve Altın geçişli enerji hattı */
border-bottom: 3px solid #00f3ff;
box-shadow: 0 5px 15px rgba(188, 19, 254, 0.4);

position: relative;
overflow: hidden;
}

/* Header'ın üzerine "Sistem Tarama" çizgisi ekleyelim (Opsiyonel/Şık) */
#site-header::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: rgba(0, 243, 255, 0.5);
box-shadow: 0 0 10px #00f3ff;
animation: scan 4s linear infinite;
}

@keyframes scan {
0% { top: 0%; opacity: 0; }
50% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}

/* Header içindeki yazı stili */
#site-header h1 {
color: #ffcc00; /* Altın Sarısı */
font-family: 'Orbitron', sans-serif;
text-transform: uppercase;
letter-spacing: 8px;
text-shadow: 3px 3px 0px #bc13fe, 0 0 10px rgba(255, 204, 0, 0.6);
margin: 0;
position: relative;
z-index: 1;
}

/* Alt tarafa teknik bir versiyon kodu etiketi */
#site-header::after {
content: "SYS_VER_2.026_NC";
position: absolute;
bottom: 5px;
right: 15px;
font-family: 'Consolas', monospace;
font-size: 10px;
color: #00f3ff;
opacity: 0.6;
}

#logo {
max-height: 120px;
margin-bottom: 15px;
display: none;
}

a {
color: #00f3ff; /* Parlak Siyan - Standart Cyberpunk Link Rengi */
text-decoration: none; /* Klasik alt çizgiyi kaldırıyoruz */
font-weight: 500;
position: relative;
transition: all 0.2s ease;
}

/* Üzerine gelindiğinde (Hover) */
a:hover {
color: #ffffff;
text-shadow: 0 0 8px #00f3ff, 0 0 12px #bc13fe; /* Siyan ve Mor karışımı parlama */
cursor: pointer;
}

/* Linkin altına özel bir "enerji hattı" ekleyelim */
a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #ffcc00; /* Altın Sarısı lazer hattı */
transition: width 0.3s ease;
box-shadow: 0 0 5px #ffcc00;
}

/* Üzerine gelince alttaki çizgi soldan sağa dolsun */
a:hover::after {
width: 100%;
}

/* Ziyaret edilmiş linkler için (Sistemi yormayan hafif mor) */
a:visited {
color: rgba(188, 19, 254, 0.8);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #ffcc00;
}

/* Ayarlar Başlık Alanı */
.settings-header {
/* Arka plan: Derin mor-siyah panel */
background: linear-gradient(90deg, #1a0136 0%, #0d0221 100%);

/* Alt kenarlık: Siyan enerji hattı */
border-bottom: 2px solid #00f3ff;

padding: 10px 15px;
display: flex;
justify-content: space-between;
align-items: center;

/* Yazı stili */
color: #ffcc00; /* Başlıklar Altın Sarısı */
font-family: 'Orbitron', 'Consolas', monospace;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;

/* Hafif dış ışıma */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Ayarlar Gövde Alanı */
.settings-body {
padding: 20px;
font-size: 13px;

/* Arka plan: Koyu terminal siyahı ve çok hafif bir ızgara dokusu */
background: #0d0221;
background-image: radial-gradient(rgba(188, 19, 254, 0.05) 1px, transparent 1px);
background-size: 15px 15px;

color: #e0e0e0;
font-family: 'Consolas', monospace;

/* Sol tarafa mor "güvenli bölge" hattı */
border-left: 3px solid #bc13fe;

/* Cyberpunk kesimi */
clip-path: polygon(0 0, 100% 0, 100% 100%, 2% 100%, 0 97%);
}

/* Ayarlar içindeki form elemanları veya metinler için ekstra dokunuş */
.settings-body strong {
color: #00f3ff; /* Önemli ayarlar Siyan */
text-shadow: 0 0 5px rgba(0, 243, 255, 0.5);
}

/* Header içindeki kapatma/kaydetme butonları varsa */
.settings-header button, .settings-header .close-btn {
background: transparent;
border: 1px solid #ffcc00;
color: #ffcc00;
padding: 2px 8px;
font-size: 10px;
cursor: pointer;
transition: all 0.2s;
}

.settings-header button:hover {
background: #ffcc00;
color: #000;
box-shadow: 0 0 10px #ffcc00;
}

.settings-title {
/* Renk: Daha parlak ve dijital bir kırmızı/turuncu (High-Alert Kırmızısı) */
color: cyan;

font-weight: bold;
font-size: 14px;
font-family: 'Orbitron', 'Consolas', monospace;
text-transform: uppercase;
letter-spacing: 2px;

/* Neon Işıma: Yazının arkasında hafif bir enerji patlaması */
text-shadow: 2px 2px 0px rgba(13, 2, 33, 1), 0 0 10px rgba(255, 49, 49, 0.4);

display: flex;
align-items: center;
gap: 10px;

position: relative;
padding-bottom: 5px;
}

/* Başlığın önüne "Hata/Sistem" kodu gibi bir simge ekleyelim */
.settings-title::before {
content: "[!]";
color: #ffcc00; /* Dikkat çekici Altın Sarısı */
font-size: 12px;
}

/* Yanıp sönme animasyonu (Performans dostu) */
@keyframes blink {
to { visibility: hidden; }
}

/* Başlığın hemen altına minik bir barkod çizgisi */
.settings-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: repeating-linear-gradient(
90deg,
#ff3131,
#ff3131 2px,
transparent 2px,
transparent 4px
);
}

.setting-row select {
width: 160px; /* Biraz daha geniş ve ferah */
padding: 4px 8px;

/* Arka plan: Koyu mor-siyah, derinlik hissi için */
background: #0d0221;

/* Yazı: Siyan (Neon Cyan) - Okunabilirliği en yüksek renk */
color: #00f3ff;

/* Kenarlık: Mor lazer hattı */
border: 1px solid #bc13fe;

font-family: 'Consolas', monospace;
font-size: 12px;
outline: none;
cursor: pointer;

/* Modern keskin köşeler */
border-radius: 0;

/* Hafif dış parlama */
box-shadow: inset 0 0 5px rgba(188, 19, 254, 0.2);

/* Varsayılan ok simgesini Cyberpunk temasına göre özelleştirelim (Opsiyonel) */
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, #ffcc00 50%),
linear-gradient(135deg, #ffcc00 50%, transparent 50%);
background-position: calc(100% - 15px) calc(1em + 2px),
calc(100% - 10px) calc(1em + 2px);
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}

/* Seçim kutusuna tıklandığında (Focus) */
.setting-row select:focus {
border-color: #ffcc00; /* Kenarlık Altın Sarısı'na döner */
box-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
transition: all 0.2s ease;
}

/* Dropdown menüsü içindeki seçenekler (Option) */
.setting-row select option {
background: #1a0136; /* Açılan listenin arka planı koyu kalsın */
color: #e0e0e0;
padding: 10px;
}

#pagination {
text-align: left;
margin: 15px 8px;
font-size: 13px;
display: inline-block;
padding: 6px 12px;

/* Arka plan: Koyu mor-siyah panel */
background: #0d0221;

/* Kenarlıklar: Sağ ve alt tarafı kalınlaştırarak 3D "tuş" hissi verelim */
border: 1px solid #bc13fe; /* Mor lazer sınır */
border-right: 4px solid #bc13fe;
border-bottom: 4px solid #00f3ff; /* Alt taraf siyan enerji hattı */

/* Yazı rengi: Veri sarısı */
color: #ffcc00;
font-family: 'Consolas', monospace;

/* Fütüristik kesim (Sol alt köşeyi kırptık) */
clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 85%);

/* Hafif dış parlama */
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
position: relative;
}

/* Sayfa numaraları veya linkler için ekstra dokunuş */
#pagination a, #pagination span {
padding: 2px 6px;
margin: 0 2px;
border: 1px solid transparent;
transition: all 0.2s;
}

/* Aktif sayfa veya hover durumu */
#pagination a:hover, #pagination .current {
background: rgba(0, 243, 255, 0.1);
color: #00f3ff;
border: 1px solid #00f3ff;
text-shadow: 0 0 5px #00f3ff;
}

/* Navigasyonun üzerine minik bir "PAGE_INDEX" etiketi */
#pagination::before {
content: "PAGE_STREAM";
position: absolute;
top: -10px;
left: 10px;
font-size: 8px;
background: #ffcc00;
color: #000;
padding: 0 5px;
font-weight: bold;
}

#catalog {
display: flex;
flex-wrap: wrap;
gap: 12px; /* Öğelerin birbirine girmemesi için boşluğu artırdık */
padding: 15px;

/* Arka plan: Koyu panel ve üzerine çok hafif çapraz tarama çizgileri */
background: #0d0221;
background-image: repeating-linear-gradient(
45deg,
rgba(188, 19, 254, 0.02) 0px,
rgba(188, 19, 254, 0.02) 1px,
transparent 1px,
transparent 10px
);

/* Kenarlıklar: Altın sarısı ve Siyan'ın asimetrik kullanımı */
border-left: 2px solid #ffcc00;
border-top: 1px solid rgba(0, 243, 255, 0.2);

/* Katalog kutusunun genel derinliği */
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);

position: relative;
margin-top: 10px;
}

/* Katalog içindeki her bir öğe (item) kutusu için genel stil */
#catalog > div, #catalog .catalog-item {
background: rgba(26, 1, 54, 0.6);
border: 1px solid rgba(188, 19, 254, 0.3);
padding: 10px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}

/* Bir öğenin üzerine gelindiğinde (Hover) */
#catalog > div:hover, #catalog .catalog-item:hover {
border-color: #00f3ff;
background: rgba(0, 243, 255, 0.05);
transform: translateY(-3px); /* Hafif yukarı kalkma efekti */
box-shadow: 0 5px 15px rgba(0, 243, 255, 0.2);
z-index: 5;
}

/* Katalog başlığı için teknik etiket */
#catalog::before {
content: "STORAGE_UNIT_B7";
position: absolute;
top: -12px;
right: 20px;
background: #bc13fe;
color: #fff;
font-family: 'Consolas', monospace;
font-size: 9px;
padding: 1px 6px;
letter-spacing: 1px;
}

/* Sağ alt köşeye küçük bir dekoratif üçgen (Sistem detayı) */
#catalog::after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 15px;
height: 15px;
background: linear-gradient(135deg, transparent 50%, #00f3ff 50%);
}

.catalog-subject {
margin-top: 8px; /* Biraz daha nefes alan bir boşluk */

/* Renk: Parlak Siyan (Cyan) - Karanlıkta en iyi parlayan veri rengi */
color: #00f3ff;

font-weight: bold;
font-size: 12px;
font-family: 'Orbitron', 'Consolas', monospace;

/* Yazı stili: Teknik ve endüstriyel */
text-transform: uppercase;
letter-spacing: 1px;

/* Uzun metinler için siber-kesinti (ellipsis zaten vardı, koruyoruz) */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

/* Hafif bir dijital gölge (Metni arka plandan ayırır) */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 5px rgba(0, 243, 255, 0.3);

/* Başlığın soluna küçük bir "aktif" göstergesi */
display: flex;
align-items: center;
}

.catalog-subject::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
background: #ffcc00; /* Altın Sarısı küçük bir kare */
margin-right: 6px;
box-shadow: 0 0 5px #ffcc00;
}

/* Üzerine gelindiğinde (Hover) başlık parlasın */
.catalog-item:hover .catalog-subject {
color: #ffffff;
text-shadow: 0 0 10px #00f3ff;
transition: all 0.2s ease;
}