*{margin:0;padding:0;box-sizing:border-box}
body{background:#efefef;font-family:Arial,Helvetica,sans-serif;color:#333}
a{text-decoration:none;color:inherit}
.app {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    box-shadow: 0 0 20px rgba(0,0,0,.06);
    padding-top: 72px; /* Sabit menünün arkasında içerik kalmaması için üst boşluk ekler */
}

.topbar {
    position: fixed; /* Menüyü ekrana sabitler */
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* 900px genişliğindeki ana yapıyla ortalar */
    width: 100%;
    max-width: 900px;
    height: 72px;
    background: #D94B67;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    color: #fff;
    z-index: 100; /* İçeriklerin üstünde kalmasını sağlar */
}
.logo-img{height:54px;width:auto}
.icon-btn{font-size:28px;color:#fff;background:none;border:none;cursor:pointer}

.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.25s;z-index:40}
.overlay.show{opacity:1;visibility:visible}
.sidebar {
    position: fixed;
    top: 0;
    left: -280px;
    width: 280px;
    height: 100vh;
    background: #fff;
    transition: .25s;
    z-index: 1000; /* Katman değerini artırarak üst menünün ve diğer her şeyin önüne geçmesini sağlar */
    box-shadow: 2px 0 20px rgba(0,0,0,.15);
}
.sidebar.show{left:0}
.sidebar-header{height:72px;background:#D94B67;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 18px}
.sidebar nav a{display:block;padding:16px 18px;border-bottom:1px solid #f1f1f1;color:#333;font-weight:600}

.search-box{padding:16px;background:#fafafa;border-bottom:1px solid #eee}
.search-grid{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;align-items:center}
.search-box select{width:100%;padding:13px 14px;border:1px solid #ddd;border-radius:14px;background:#fff;font-size:15px;color:#333}
.search-btn{padding:13px 18px;border:none;border-radius:14px;background:#D94B67;color:#fff;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap}

/* Grid (eski - kart şeklinde) */
.grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;padding:16px}
.card{background:#fff;border:1px solid #eee;border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.04);display:flex;flex-direction:column;height:100%}
.card-media{position:relative;width:100%;height:340px;overflow:hidden;background:#f5f5f5;flex-shrink:0}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.online{position:absolute;top:10px;left:10px;background:#18a34a;color:#fff;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700}
.card-body{padding:12px;text-align:center}
.name{color:#D94B67;font-size:16px;font-weight:700;margin-bottom:6px}
.meta{font-size:13px;color:#666}



.load-more-wrap{padding:0 16px 18px}
.load-more-btn{width:100%;padding:14px;border:2px solid #f1b6c2;border-radius:16px;background:#fff;color:#D94B67;font-size:16px;font-weight:700;cursor:pointer}

.seo-box{margin:0 16px 22px;padding:22px;background:#fff;border:1px solid #eee;border-radius:20px;line-height:1.7}
.seo-box h2{font-size:22px;margin-bottom:12px;color:#333}
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.seo-item h3{font-size:16px;margin-bottom:6px;color:#333}
.seo-item p{font-size:14px;color:#666}
.seo-icon{font-size:28px;color:#D94B67;margin-bottom:8px}

.bottom-nav{background:#D94B67;display:flex;justify-content:space-around;padding:14px 0;color:#fff;margin-top:10px}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:13px;font-weight:700}
.bottom-nav .icon{font-size:24px}

.page-title{padding:18px 22px 12px;border-bottom:1px solid #eee}
.page-title h1{font-size:22px;margin-bottom:6px;color:#333}
.page-title p{color:#666}

.profile-layout{display:flex;flex-direction:column;gap:20px;padding:2px}
.profile-photo{position:relative}
.profile-photo img{width:100%;max-height:380px;object-fit:cover;border-radius:22px}
.profile-summary{display:flex;flex-direction:column;gap:16px}
.summary-card{background:#fff;border:1px solid #eee;border-radius:15px;padding:12px}
.summary-card h3{margin-bottom:12px;color:#333}
.summary-card p{color:#555;line-height:1.7}
.detail{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f1f1f1}
.detail:last-child{border-bottom:none}

.profile-actions{display:flex;gap:12px}
.profile-actions a{flex:1;padding:14px;border:none;border-radius:16px;font-size:16px;font-weight:700;cursor:pointer;text-align:center}
.primary{background:#D94B67;color:#fff;display:block}
.secondary{background:#f4f4f4;color:#333}

.tags{display:flex;flex-wrap:wrap;gap:10px}
.tags span{background:#f5f5f5;padding:8px 12px;border-radius:999px;font-size:14px;color:#555}

/* Yazı İçeriği Stilleri - the_content() için */
.summary-card h2,
.summary-card h3,
.summary-card h4,
.summary-card h5,
.summary-card h6{
  margin:16px 0 12px 0;
  color:#333;
  font-weight:700;
}

.summary-card h2{font-size:22px;color:#D94B67;border-bottom:2px solid #f1b6c2;padding-bottom:8px}
.summary-card h3{font-size:18px;color:#333}
.summary-card h4{font-size:16px;color:#555}
.summary-card h5{font-size:15px;color:#666}
.summary-card h6{font-size:14px;color:#777}

.summary-card p{color:#555;line-height:1.8;margin-bottom:12px}
.summary-card p:last-of-type{margin-bottom:0}

.summary-card a{color:#D94B67;font-weight:600;text-decoration:none;border-bottom:1px solid #f1b6c2;transition:color 0.2s}
.summary-card a:hover{color:#b83a52;border-bottom-color:#D94B67}

.summary-card strong,
.summary-card b{color:#333;font-weight:700}

.summary-card em,
.summary-card i{color:#666;font-style:italic}

.summary-card ul,
.summary-card ol{margin:12px 0 12px 24px;color:#555}

.summary-card ul li,
.summary-card ol li{margin-bottom:8px;line-height:1.8}

.summary-card ul li:last-child,
.summary-card ol li:last-child{margin-bottom:0}

.summary-card ul{list-style-type:disc}
.summary-card ol{list-style-type:decimal}

.summary-card blockquote{
  margin:16px 0;
  padding:16px;
  border-left:4px solid #D94B67;
  background:#f9f9f9;
  color:#666;
  font-style:italic;
  line-height:1.8;
}

.summary-card code{
  background:#f5f5f5;
  padding:3px 8px;
  border-radius:4px;
  font-family:'Courier New', monospace;
  font-size:14px;
  color:#c7254e;
}

.summary-card pre{
  background:#f5f5f5;
  padding:14px;
  border-radius:8px;
  overflow-x:auto;
  margin:12px 0;
  line-height:1.6;
}

.summary-card pre code{
  background:none;
  padding:0;
  color:#333;
}

.summary-card img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  margin:16px 0;
  display:block;
}

.summary-card table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
}

.summary-card table thead{background:#f9f9f9}
.summary-card table th{
  padding:12px;
  text-align:left;
  font-weight:700;
  border-bottom:2px solid #f1b6c2;
  color:#333;
}

.summary-card table td{
  padding:10px 12px;
  border-bottom:1px solid #f1f1f1;
  color:#555;
}

.summary-card table tbody tr:hover{background:#fafafa}

.summary-card hr{
  margin:20px 0;
  border:none;
  border-top:2px solid #f1f1f1;
}

.summary-card span{color:inherit}

/* Yazı başında fotoğraf varsa uyum */
.summary-card > *:first-child{margin-top:0}

@media (min-width:1200px){
  .grid{grid-template-columns:repeat(3, 1fr);gap:18px;padding:18px}
  .card-media{height:360px}
}

@media (min-width:900px) and (max-width:1199px){
  .grid{grid-template-columns:repeat(3, 1fr);gap:18px;padding:18px}
  .card-media{height:360px}
}

@media (min-width:700px) and (max-width:899px){
  .grid{grid-template-columns:repeat(3, 1fr);gap:16px;padding:16px}
  .card-media{height:340px}
}

@media (min-width:560px) and (max-width:699px){
  .grid{grid-template-columns:repeat(2, 1fr);gap:14px;padding:14px}
  .card-media{height:300px}
}

@media (max-width:559px){
  .grid{grid-template-columns:repeat(2, 1fr);gap:12px;padding:12px}
  .card-media{height:260px}
  .seo-grid{grid-template-columns:1fr}
}

.profile-layout{flex-direction:column;gap:20px;padding:20px}

@media (min-width:700px){
  .profile-layout{flex-direction:row;align-items:flex-start;gap:24px;padding:24px}
  .profile-photo{width:320px;flex-shrink:0}
  .profile-photo img{height:430px;max-height:none}
  .profile-summary{flex:1}
}

.intro-card{ margin:16px; padding:18px; background:#fff; border:1px solid #eee; border-radius:20px; display:flex; align-items:center; gap:14px; box-shadow:0 2px 10px rgba(0,0,0,.04); } 
.intro-icon{ width:48px; height:48px; border-radius:14px; background:#FCE8ED; color:#D94B67; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; } 
.intro-text h1{ font-size:22px; line-height:1.2; margin-bottom:4px; color:#333; font-weight:700; } 
.intro-text p{ font-size:14px; color:#777; line-height:1.5; } 
@media (min-width:700px){ 
.intro-card{ margin:18px; padding:20px; } 
.intro-text h1{ font-size:26px; } 
.intro-text p{ font-size:15px; } 
}

/* Profil mesaj alanı */

.comments-wrap {
    margin-top:0;
}


/* Başlık balonları */

.message-title,
.comment-form-wrap .comment-reply-title {

    background:#fff0f5;
    color:#d85b7c;
    padding:14px 20px;
    border-radius:20px;
    font-size:20px;
    font-weight:600;
    margin-bottom:20px;
    margin-top:0;

}


/* Her mesaj ayrı balon */

.comment-item {

    display:flex;
    gap:12px;
    margin-bottom:18px;
    background:#fff0f5;
    border-radius:20px;
    padding:15px;

}


/* Avatar */

.comment-avatar img {

    width:48px;
    height:48px;
    border-radius:50%;

}


/* Mesaj iç alan */

.comment-content {

    flex:1;

}


/* Rumuz ve tarih */

.comment-head {

    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;

}


.comment-head strong {

    font-size:16px;
    color:#d85b7c;

}


.comment-head span {

    font-size:12px;
    color:#999;

}


/* Mesaj balonu */

.comment-bubble {

    background:#ffffff;
    padding:12px 15px;
    border-radius:15px;
    line-height:1.5;

}



/* Mesaj gönder formu */

.comment-form-wrap {

    margin-top:15px;
    background:#fff;
    padding:20px;
    border-radius:15px;

}


.comment-form-wrap input,
.comment-form-wrap textarea {

    width:100%;
    border:1px solid #ddd;
    border-radius:10px;
    padding:12px;
    font-size:15px;

}


.comment-form-wrap textarea {

    resize:none;

}


.comment-form-wrap input[type="submit"] {

    background:#e85d75;
    color:#fff;
    border:none;
    cursor:pointer;
    margin-top:10px;
    border-radius:20px;
    padding:10px 25px;

}
/* SEO Sayfalama Alanı Genel Tasarım */
.seo-pagination {
    text-align: center;
    padding: 15px 16px 25px 16px;
}

.seo-pagination .page-numbers {
    display: inline-block;
    padding: 10px 16px;
    margin: 0 3px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    color: #333;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.seo-pagination .page-numbers.current {
    background: #D94B67;
    color: #fff;
    border-color: #D94B67;
}

/* MOBİL İÇİN ÖZEL AYRIM (768px ve altı ekranlar) */
@media (max-width: 768px) {
    .seo-pagination {
        padding: 12px 10px 20px 10px;
    }

    /* Mobilde parmakla dokunmayı kolaylaştırmak ve taşmayı önlemek için boyut ayarlaması */
    .seo-pagination .page-numbers {
        padding: 8px 12px;
        margin: 2px;
        font-size: 13px;
        border-radius: 8px;
    }

    /* Çok fazla sayfa numarası olduğunda alt alta kaydırılabilmesi için esnek yapı */
    .seo-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }
}

/* Mobil mesaj formu düzenleme */

@media (max-width:768px){

    .comment-form-wrap {

        margin:15px 0;
        padding:15px;
        border-radius:20px;

    }


    .comment-form-wrap .comment-reply-title {

        font-size:18px;
        padding:12px 15px;
        border-radius:18px;

    }


    .comment-form-wrap input,
    .comment-form-wrap textarea {

        width:100%;
        box-sizing:border-box;
        font-size:16px;
        padding:14px;
        border-radius:12px;

    }


    .comment-form-wrap textarea {

        min-height:130px;

    }


    .comment-form-wrap input[type="submit"] {

        width:100%;
        padding:13px;
        font-size:16px;
        border-radius:25px;

    }


    .comment-item {

        padding:12px;
        border-radius:18px;
        gap:10px;

    }


    .comment-avatar img {

        width:40px;
        height:40px;

    }


    .comment-head strong {

        font-size:16px;

    }


    .comment-bubble {

        font-size:15px;
        padding:10px 12px;

    }

}
@media(max-width:768px){

    .profile-layout{
        padding-left:10px !important;
        padding-right:10px !important;
    }

}