:root{
    --bg-main: ;
    --card-bg: ;
    --text-main: ;
    --border-color: ;
}

body{
    margin:0;
    background:var(--bg-main);
    color:var(--text-main);
    font-family:system-ui;
}

.posts{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
    padding:20px;
}

.post-card{
    background:var(--card-bg);
    border:1px solid var(--border-color);
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    transition:.3s;
}

.post-card:hover{
    transform:translateY(-6px);
}

.post-card img{
    width:100%;
    height:160px;
    object-fit:cover;
}

.post-card h3{
    padding:14px;
}

.post-card p{
    padding:0 14px 14px;
    font-size:14px;
    opacity:.8;
}

.post-detail{
    max-width:800px;
    margin:40px auto;
    padding:20px;
}

.post-image{
    width:100%;
    max-height:420px;
    object-fit:cover;
    border-radius:16px;
    margin-bottom:24px;
}

.post-detail h1{
    margin-bottom:16px;
    font-size:28px;
}

.post-content{
    font-size:16px;
    line-height:1.7;
    opacity:.9;
}

.project-view-container{
    max-width: 1100px;
    margin: auto;
    padding: 30px 15px;
}

.project-frame{
    margin-top: 25px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
}

.project-frame iframe{
    width: 100%;
    height: 80vh;
    border: none;
    background: #000;
}

/* Mobil */
@media(max-width:768px){
    .project-frame iframe{
        height: 65vh;
    }
}
:root{
    --post-bg:#1a1a1a;
    --post-text:#ffffff;
    --post-border:#ffd000;
}

/* GENEL */
.home{
    max-width:1200px;
    margin:auto;
    padding:40px 20px;
    color:var(--post-text);
}

/* HERO */
.hero{
    text-align:center;
    padding:60px 20px;
}

.hero h1{
    font-size:2.5rem;
    margin-bottom:10px;
}

.hero p{
    opacity:.8;
}

/* SECTION */
.home-section{
    margin-top:70px;
}

.home-section h2{
    margin-bottom:30px;
    border-left:4px solid var(--post-border);
    padding-left:15px;
}

/* GRID */
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

/* CARD */
.card{
    background:var(--post-bg);
    border:1px solid rgba(255,255,255,.1);
    border-radius:16px;
    padding:18px;
    text-decoration:none;
    color:var(--post-text);
    transition:.3s ease;
}

.card:hover{
    transform:translateY(-6px);
    border-color:var(--post-border);
}

.card img{
    width:100%;
    height:160px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:15px;
}

.card h3{
    font-size:1.1rem;
}