/** 2. style **/

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}a{background-color:transparent;}a:active,a:hover{outline:0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}h1{font-size:2em;margin:0.67em 0;}mark{background:#ff0;color:#000;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:1em 40px;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}pre{overflow:auto;}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}textarea{overflow:auto;}optgroup{font-weight:bold;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}

@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

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

html, body {
    color: #4d5156;
    background-color: #f2f2f2;
    font-family:  Arial, sans-serif;
    letter-spacing: 0.2px;
    font-size: 14px;
    line-height: 1.58;
    border-style: none;
    height: 100%;
    display: flex;
    flex-direction: column;
}

a {
    color: #000;
    letter-spacing: 0.2px;
    line-height: 1.58;
    text-decoration: none;
}

a:hover {
    color: #660099;
    text-decoration: underline;
}

h1 {
    font-size: 20px;
}

/*------------------------------------------------------RowCol*/

.row::after {
    content: "";
    clear: both;
    display: table;
}

[class*="col-"] {
    float: left;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/*------------------------------------------------------Single*/

hr {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #EEEEEE -moz-use-text-color #FFFFFF;
    border-width: 1px 0 solid;
    margin: 12px 0;
}

.adblock {
    padding-top: 10px;
}

.white {
    background-color: white;
}

.f2 {
    background-color: #fff;
}

.border {
    border: 1px solid #ddd;
}

.border-s {
    border: 1px solid #000;
}

.border-b {
    border-bottom: 1px solid #ddd;
}

.border-bs {
    border-bottom: 1px solid #000;
}

.sidebar select {
    width: 100%;
    margin-bottom: 15px;
    padding: 5px;
    text-transform: none;
    word-wrap: normal;
}

/*------------------------------------------------------Margin*/

.m-0 { margin: 0; }

.m-5 { margin: 5px; }
.m-10 { margin: 10px; }
.m-15 { margin: 15px; }
.m-20 { margin: 20px; }

.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }

.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }

.mr-5 { margin-right: 5px; }
.mr-10 { margin-right: 10px; }
.mr-15 { margin-right: 15px; }
.mr-20 { margin-right: 20px; }

.ml-5 { margin-left: 5px; }
.ml-10 { margin-left: 10px; }
.ml-15 { margin-left: 15px; }
.ml-20 { margin-left: 20px; }

.mx-5 { margin-right: 5px; margin-left: 5px; }
.mx-10 { margin-right: 10px; margin-left: 10px; }
.mx-15 { margin-right: 15px; margin-left: 15px; }
.mx-20 { margin-right: 20px; margin-left: 20px; }

.my-5 { margin-top: 5px; margin-bottom: 5px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-15 { margin-top: 15px; margin-bottom: 15px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }

/*------------------------------------------------------Padding*/

.p-0 { margin: 0; }

.p-5 { padding: 5px; }
.p-10 { padding: 10px; }
.p-15 { padding: 15px; }
.p-20 { padding: 20px; }

.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }

.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }

.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }

.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }

.px-5 { padding-right: 5px; padding-left: 5px; }
.px-10 { padding-right: 10px; padding-left: 10px; }
.px-15 { padding-right: 15px; padding-left: 15px; }
.px-20 { padding-right: 20px; padding-left: 20px; }

.py-5 { padding-top: 5px; padding-bottom: 5px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-15 { padding-top: 15px; padding-bottom: 15px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }

/*------------------------------------------------------Container*/

.container {
    position: relative;
    width:100%;
    max-width:900px;
    box-sizing:border-box;
    margin: 0 auto;
    flex: 1 0 auto;
}

/* Liste içeriği */
.list-container {
    padding: 0px 0px 10px 18px;    
}

.list {
    margin-bottom: 10px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: relative;
    min-height: 70px;    
}

/* Puan ve Yorum Badge - Yan Yana */
.badgeRow {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    top: 9px;
    right: 10px;
}

/* Kategori Badge - Altta Sağda */
.categoryBadge {
    position: absolute;
    bottom: 7px;
    right: 10px;
    background-color: #f0f0f0;
    color: black;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: 8px;   
    display: inline-block;
}

/* Badge Stilleri */
.pointBadge, .commentBadge {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: 12px;   
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Yorum Badge Rengi */
.commentBadge {
    background-color: #ffdd57;
    color: black;
}

/* Font Awesome İkon Stili */
.pointBadge i, .commentBadge i {
    font-size: 14px;    
}

/* Başlık alanı */
.title {
    white-space: normal; /* Satır kaydırma özelliğini aktif hale getirir */
    word-wrap: break-word; /* Uzun kelimeleri kesip bir sonraki satıra geçirir */
    overflow-wrap: break-word; /* Kelime taşmalarını engeller */
}


/* Parent container */
.list {
    flex: 1 1 calc(50% - 20px);
    box-sizing: border-box;
    background-color: #fff;
    padding: 12px;
    border: 1px solid #ddd;
    border-top: 0;
    position: relative; /* Badge için referans noktası */
    overflow: hidden; /* İçerik taşmasını engeller */
}

.list:hover {
    background-color: #f2f2f2;
}

.list a {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

.list span {
    font-size: 18px;
    line-height: 1.3;
    letter-spacing: 0.1px;
}

.keyword-container {
    padding: 15px;
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    max-width: 100%;
    margin-bottom: 10px;
}

.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 3px;
}

.keyword-item {
    background-color: #ddd;
    color: #212529;
    padding: 2px 4px;   
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    text-transform: capitalize;
}

.keyword-item:hover {
    background-color: #f0d585;
    cursor: pointer;
}


/*------------------------------------------------------Header*/

header {
    border-bottom: solid 1px #000;

}

/*------------------------------------------------------Logo*/

.logo {
    font: 36px 'Reem Kufi', sans-serif;
    color: #000;
    font-weight: bold;
    text-decoration: none;
}

.logo:hover { color: #660099; text-decoration: none; }

/*------------------------------------------------------Search Box*/

.search-box { float: right; margin-top: 6.4px; padding: 3px 0; }

.search-box input[type=text] { padding: 8px 12px; border:1px solid #000; border-radius: 3px; }

/*------------------------------------------------------Button*/

button {
    width: 100%;
    padding: 2px 10px;
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    margin-bottom: 5px;
}

button.white {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}

button.white:hover {
    background-color: #000;
    color: #fff;
    border: solid 1px #000;
}

button.red {
    background-color: #f58f8e;
    color: #fff;
    border:solid 1px #f37d7c;
}

button.green {
    background-color: #40b771;
    color: #fff;
    border:solid 1px #4aae73;
}

button.black {
    background-color: #0a0a0a;
    color: #fff;
    border:solid 1px #000;
}

button.grey {
    background-color: #a6a6a6;
    color: #fff;
    border: solid 1px #999;
}

button:hover {
    background-color: #fff;
    color: #000;
    border: solid 1px #000;
}

/*------------------------------------------------------Table1*/

.table1 {
    border-collapse: collapse;
    width: 100%;
    margin-top: 5px;
}

.table1 td, .table1 th {
    border: 1px solid #ddd;
    padding: 8px;
}

.table1 tr:nth-child(even){background-color: #fff;}

.table1 tr {background-color: #fff;}

.table1 tr:hover {background-color: #f2f2f2;}

.table1 th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}

/*------------------------------------------------------Table2*/

.table2 {
    border-collapse: collapse;
    width: 100%;
    margin-top: 5px;
    background-color: #f7f7f7;
}

.table2 td, .table2 th {
    border: 1px solid #000;
    padding: 4px;
}

.table2 tr {background-color: #fff;}

.table2 tr:hover {background-color: #f2f2f2;}

.table2 th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    color: #000;
}

/*------------------------------------------------------Comment*/

.comment {
    border:1px solid #DDD;
    transition: all 0.3s;
    padding: 6px;
    margin-top: 15px;
    width:100%;
}

.comment:focus { border:1px solid #CC4949; }

.comment textarea {
    height: 60px;
    line-height: 150%;
}

.commentForm [type="submit"] {
    max-width: 110px;
    padding: 0 10px;
    background:#CC4949;
    border:0;
    color:white;
    font-size:24px;
    margin-top:10px;
    font-weight:700;
}

.commentForm [type="submit"]:hover { background:#CC6666; }

/*------------------------------------------------------Breadcrumb*/

.breadcrumb {
    font-size: 12px;
    background-color: #fff;
    border:1px solid #ddd;
    padding: 5px 10px;
    width: 100%;
    font-weight: bold;
}

/*------------------------------------------------------Sidebar*/

.sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 10px;
}

/*------------------------------------------------------Pagination*/

.pagination {
    float: right;
    margin: 10px;
    margin-right: 0;
    font-weight: bold;
}

.pagination a {
    margin-right: 10px;
}

.pagination span {
    margin-right: 10px;
    color: red;
}

.pagination .last {
    margin-right: 0;
}

/*------------------------------------------------------Footer*/

footer {
    padding: 2.5rem 0;
    color: #fff;
    text-align: center;
    background-color: #000;
}

footer a {
    color: #fff;
    margin: 3px;
    padding: 5px 2px 2px 3px;
    border-bottom: solid 1px #fff;
}

footer a:hover {
    color: #fff;
    border-bottom: 0;
    text-decoration: none;
}

footer p {
    padding: 10px 0;
}

/*------------------------------------------------------@media*/

@media (max-width:895px) {

    .search-box input[type=text] { font-size: 12px; }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .adblock {
        display: none;
    }

    .sidebar {
        text-align: center;
        margin-top: 20px;
        position: unset;
    }

    [class*="col-"] {
        float: left;
    }

    .col-1 { width: 100%; }
    .col-2 { width: 100%; }
    .col-3 { width: 100%; }
    .col-4 { width: 100%; }
    .col-5 { width: 100%; }
    .col-6 { width: 100%; }
    .col-7 { width: 100%; }
    .col-8 { width: 100%; }
    .col-9 { width: 100%; }
    .col-10 { width: 100%; }
    .col-11 { width: 100%; }
    .col-12 { width: 100%; }

    .pr-5 { padding-right: 0; }
    .pr-10 { padding-right: 0; }
    .pr-15 { padding-right: 0; }
    .pr-20 { padding-right: 0; }

    .pl-5 { padding-left: 0; }
    .pl-10 { padding-left: 0; }
    .pl-15 { padding-left: 0; }
    .pl-20 { padding-left: 0; }

    .mr-5 { margin-right: 0; }
    .mr-10 { margin-right: 0; }
    .mr-15 { margin-right: 0; }
    .mr-20 { margin-right: 0; }

    .ml-5 { margin-left: 0; }
    .ml-10 { margin-left: 0; }
    .ml-15 { margin-left: 0; }
    .ml-20 { margin-left: 0; }

    /* Liste içeriği */
    .list-container {
        padding: 0px;    
    }
}