:root {
    --dark: #2d2d2d;
    --light: #fff;
    --red: #BD4545;
    --gray: #d9d9d9;
    --navwidth: 0;
    --gutter-size: 1rem;
    --transition: .3s ease-in-out;
    --mp-gap: 5vw;
}

@media (min-width:1200px) {
    :root {
        --navwidth: 220px;
        --gutter-size: 2rem;
    }
}

html {
    font-size: 15px;
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
}


main.content {
    width: calc(100% - var(--navwidth));
    margin-right: inherit;
    margin-left: auto;
    max-width: 100%;
}

.fluid-header {
    width: calc(100% - var(--navwidth));
    margin-right: inherit;
    margin-left: auto;
    max-width: 100%;
}

.fluid-header .container-lg {
    padding: 3rem var(--gutter-size);
}

.fluid-header {
    color: var(--light);
}

.fluid-header .container-lg {
    padding: 3rem calc(2 * var(--gutter-size));
}

.container-lg {
    padding-left: var(--gutter-size);
    padding-right: var(--gutter-size);
}

/* TYPOGRAPHY */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    margin-bottom: 0.25em;
    line-height: 1.25;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
    font-weight: 700;
}

h6 {
    font-size: 1rem;
}

h5 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.35rem;
}

h3 {
    font-size: 1.75rem;
}

h2 {
    font-size: 2rem;
}

h1 {
    font-size: 2.5rem;
}


p {
    line-height: 1.5;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0.5em;
}

a {
    color: var(--red);
    text-decoration: inherit;
}

a:hover {
    color: var(--red);
}

p a {
    font-weight: 500;
    text-decoration: underline;
}

.breadcrumb {
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
}

.breadcrumb a {
    color: var(--light);
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.button {
    text-align: center;
    padding: 0.5em 1em;
    font-size: 0.85em;
    letter-spacing: 0.05em;
    min-width: 100px;
    display: inline-block;
    transition: var(--transition);
}

.button.small {
    padding: 0.25em 1em;
    font-size: 0.75em;
}


.button.red {
    background-color: var(--red);
    color: var(--light);
}

.button.red:hover {
    opacity: 0.85;
}

.button.dark {
    background-color: var(--dark);
    color: var(--light);
}

.button.dark:hover {
    opacity: 0.85;
}


.button.white {
    background-color: var(--light);
    color: var(--dark);
}

.button.white:hover {
    opacity: 0.85;
}



.button.outline {
    color: var(--dark);
}

.button.outline {
    border: 1px solid var(--dark);
}

.button.outline:hover .icon {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(288deg) brightness(107%) contrast(113%);
}

.button.outline:hover {
    background-color: var(--dark);
    color: var(--light);
}

ul.pagination {
    list-style-type: none;
    padding: 0;
    text-align: center;
}

ul.pagination li {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background-color: var(--gray);
    line-height: 1.5em;
    text-align: center;
    transition: var(--transition);
}

ul.pagination li.active {
    background-color: var(--dark);
}

ul.pagination li:hover {
    background-color: var(--dark);
}

ul.pagination li:hover a {
    color: var(--light);
}

ul.pagination li a {
    color: var(--dark);
}

ul.pagination li.active a {
    color: var(--light);
}







/* NAVBAR */
.navbar {
    height: 100vh;
    background-color: var(--red);
    width: var(--navwidth);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    padding: 0 var(--gutter-size);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.navbar-mobile {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: var(--red);
    display: flex;
    justify-content: space-between;
    z-index: 100;
}

.navbar-mobile .brand-logo {
    margin: 0.5rem 1rem;
}

.navbar-mobile .brand-logo img {
    height: 1.5rem;
}

.navlinks {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 300px;
    margin-top: 3rem;
}

.brand-logo {
    display: block;
    margin-top: 3rem;
}

.brand-logo img {
    width: 100%;
    height: auto;
}

.follow-us a {
    width: 1.5rem;
    margin-right: 0.5rem;
    display: inline-block;
    opacity: 1;
    transition: var(--transition);
}

.follow-us a:hover {
    opacity: 0.33;
}

.follow-us a img {
    width: 100%;
    height: auto;
}

.menu {
    padding: 0;
    list-style: none;
}

.menu li {
    margin-bottom: 0.25em;
}

.menu a {
    color: var(--light);
    text-decoration: none;
    opacity: 0.33;
    transition: var(--transition);
}

.menu a:hover,
.menu a:active {
    opacity: 1;
}

.arama input {
    width: 100%;
    box-sizing: border-box;
    border: none;
    background-image: url('../images/search-light.svg');
    background-position: left center;
    background-repeat: no-repeat;
    outline: none;
    background-color: transparent;
    border-bottom: 1px solid var(--light);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 2rem;
    line-height: 1.5;
    background-size: 1.5rem;
    font-size: 1.15rem;
    color: var(--light);
    opacity: 0.33;
    transition: var(--transition);
}

.arama input:focus {
    opacity: 1;
}

.hm-logo {
    text-align: center;
    padding: 0;
    margin-bottom: 3rem;
}

.hm-logo img {
    width: 100%;
    height: auto;
}

.navbar-mobile-content {
    background-color: var(--red);
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 101;
    width: 100%;
    align-items: center;
    transition: var(--transition);
    transform: translateY(-100%);
    display: flex;
    justify-content: space-between;
    height: 100dvh;
}

.navbar-mobile-content.show {
    display: flex;
    transform: translateY(0);
}

button.menu-button,
button.close-button {
    background-color: transparent;
    border: none;
}

button.menu-button {
    padding: 0;
    margin-right: 1rem;
}

button.close-button {
    align-self: flex-end;
    margin-right: 1rem;
    font-size: 2rem;
    color: var(--light);
}

button.menu-button img {
    height: 1.5rem;
}

button.close {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

.navbar-mobile-content .brand-logo img {
    width: 75vw;
    height: auto;
}

.go-to-haber {
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1em;
    letter-spacing: 0.15em;
    color: #BD4545;
    text-decoration: inherit;
    opacity: 1;
    transition: var(--transition);
}

.go-to-haber:hover {
    opacity: 0.70;
}


/* TABS */
.tabs {
    display: flex;
    margin: 2rem 0;
}

.tabs a {
    flex-grow: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--light);
    font-size: 0.85rem;
    padding: 0.5rem 0;
    color: var(--dark);
    cursor: pointer;
    background-color: var(--gray);
    letter-spacing: 0.05em;
    transition: var(--transition);
}

.tabs a:hover {
    background-color: var(--red);
    color: var(--light);
}

.tabs a.active {
    color: var(--light);
    background-color: var(--red);
}

.tab-content {
    opacity: 0;
    position: absolute;
    transition: var(--transition);
    height: 0;
    overflow: hidden;
}

.tab-content.active {
    height: auto;
    opacity: 1;
    overflow: inherit;
    z-index: 10;
    width: 100%;
}

.tab-content-container {
    position: relative;
}


/* SINGLE POST */
.single-post main.content::before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    background: var(--dark);
}

.single-dava main.content::before {
    content: '';
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 200px;
    background: var(--dark);
}

/*Zaman çizelgesi */
.single-tarih {
    margin-bottom: 3rem;
    position: relative;
}


.tab-content#zaman-cizelgesi {
    border-left: 3px solid var(--red);
    padding-left: 3rem;
    margin-left: 1rem;
}

.single-tarih::before {
    content: '';
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--red);
    position: absolute;
    left: -4.15rem;
    top: 1.35rem;
}

.tarih {
    font-size: 0.85rem;
}


/* Haber Teaser */
.haber-teaser {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.haber-teaser .featured-img,
.dava-teaser .featured-img {

    width: auto;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center center;
}

.dava-teaser .featured-img {
    height: 6rem;
    margin-left: 1rem;
}

.haber-teaser .featured-img {
    height: 10rem;
    margin-right: 1rem;
}

.haber-teaser-data h5 a {
    color: inherit;
    text-decoration: inherit;
}
.haber-teaser-data h2 a {
    color: inherit;
    text-decoration: inherit;
}

h5 a {
    transition: var(--transition);
}

h5 a:hover {
    opacity: 0.7;
}

.haber-teaser-data h5 {
    margin-bottom: 0;
}


.haber-teaser .kategoriler a {
    color: var(--dark);
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

.haber-teaser .etiketler a {
    text-decoration: inherit;
    color: var(--dark);
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

.haber-teaser .etiketler a::before {
    content: '#';
    color: var(--red);
}

.durusma-notu-teaser h5 {
    margin-bottom: 0;
}

.durusma-notu-teaser .durusma-detay {
    display: none;
}

.durusma-notu-teaser.active .durusma-detay {
    display: block;
}

.durusma-notu-teaser .open-icon {
    transform: rotate(90deg);
}

.durusma-notu-teaser.active .open-icon {
    transform: rotate(-90deg);
}


.dava-teaser {
    border-top: 1px solid var(--dark);
    padding: 0.75rem 0;
}

.dava-teaser h5 {
    margin-bottom: 0;
}

.dava-teaser .dava-detay {
    display: none;
}

.dava-teaser.active .dava-detay {
    display: flex;
}

.dava-teaser .open-icon {
    transform: rotate(90deg);
}

.dava-teaser.active .open-icon {
    transform: rotate(-90deg);
}

.dava-teaser a h5 {
    color: var(--dark);
}

.dava-teaser a {
    text-decoration: none;
}

.belge-teaser {
    padding: 1.5rem 1rem;
}

.belge-meta div {
    display: inline-block;
}

.filter .open-icon {
    transform: rotate(90deg);
}

.filter .active .open-icon {
    transform: rotate(-90deg);
}

.filter-radio .checkmark {
    border-radius: 50%;
}

.haber-teaser-data {
    width: 100%;
}

.durusma-notu-teaser a {
    text-decoration: inherit;
    transition: var(--transition);
    display: flex;
}

.durusma-notu-teaser h5 {
    color: var(--dark);
}

.durusma-notu-teaser .icon {
    height: 1.15em;
    margin-right: 0;
    transform: translateY(0.15em);
    transition: var(--transition);
}

.durusma-notu-teaser:hover .icon {
    transform: rotate(45deg);
}

/* META CARD */
.meta-container {
    padding: 0 var(--gutter-size);
    z-index: 2;
}

.meta-card {
    background-color: var(--gray);
    transform: translateY(3rem);
}


.meta-card .featured-img {
    aspect-ratio: 1;
}

.meta-card .featured-img img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.meta-card-content {
    padding: var(--gutter-size);
}

.meta-card-content a {
    display: block;
}

.meta-card-content .paylas a {
    display: inline-block;
    width: 1.5rem;
    margin-right: 0.25rem;
}

.meta-card-content h6 {
    margin-bottom: 0;
    margin-top: 1rem;
}

.meta-card-content h6:first-child {
    margin-top: 0;
}

.open-icon {
    float: right;
    margin-left: 1rem;
    transition: var(--transition);
}

.open-icon .icon {
    margin: 0;
    transform: translateY(0) translateX(-0.1em);
}

.active .open-icon .icon {
    transform: translateY(0) translateX(0.1em);
}

.filter .open-icon {
    transform: rotate(90deg);
    transform-origin: center;
}

.filter.active .open-icon {
    transform: rotate(-90deg);
    transform-origin: center;
}

.filter .open-icon svg {
    height: 1.5rem;
}

.filter a {
    color: var(--dark);
    text-decoration: inherit;
    transition: var(--transition);
}

.check-container .checkmark:after {
    left: 6px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid var(--light);
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.check-container {
    display: block;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.33em;
    cursor: pointer;
    font-size: 0.85rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 1.15rem;
    width: 1.15rem;
    background-color: var(--light);
}

.check-container:hover input~.checkmark {
    background-color: var(--light);
}

.check-container input:checked~.checkmark {
    background-color: var(--red);
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-container input:checked~.checkmark:after {
    display: block;
}

.filter-radio,
.filter-check {
    display: none;
}


.filter-radio.active,
.filter-check.active {
    display: flex;
    flex-direction: column;
    margin-top: 0.25em;
}

.filter-buttons {
    display: flex;
    justify-content: stretch;
    gap: 0.5em;
    width: 100%;
    margin-top: 2rem;
}

.siralama {
    display: flex;
    justify-content: space-between;
}

.siralama a {
    transition: var(--transition);
}

.siralama a:hover {
    opacity: 0.75;
}


.icon {
    height: 1em;
    transform: translateY(-0.075em);
    filter: invert(10%) sepia(12%) saturate(19%) hue-rotate(314deg) brightness(100%) contrast(82%);
    margin-right: 0.5em;
}

.icon.red {
    filter: invert(46%) sepia(54%) saturate(1608%) hue-rotate(329deg) brightness(77%) contrast(88%);
}

.icon.light {
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(288deg) brightness(107%) contrast(113%);
}

.button .icon {
    margin-left: 0.33em;
    margin-right: 0.33em;
}


/* CONTENT */
.half-header {
    color: var(--light);
    padding: 3rem var(--gutter-size);
    flex-direction: column;
    justify-content: end;
    position: absolute;
    height: 200px;
}

.content-container .content {
    margin-top: 200px;
    padding: var(--gutter-size);
}

.half-header h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 2.25rem;
    margin-top: 0;
}

.mobile-content-header {
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 2rem var(--gutter-size);
    color: var(--light);
}

.archive .content-container .content,
.single-page .content-container .content {
    margin-top: inherit;
    padding: var(--gutter-size);
}

.siralama {
    border-bottom: 1px solid var(--dark);
    padding-bottom: 1rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.siralama a {
    text-decoration: inherit;
    color: var(--dark);
}

.siralama a.active {
    color: var(--red);
    font-weight: bold;
}

.sonuc {
    font-style: italic;
    color: var(--red);
}

/* MAINPAGE */
.intro-head {
    padding: var(--mp-gap);
    background-color: var(--dark);
}

.intro-text {
    color: var(--light);
    font-size: 3.5vw;
    font-weight: 500;
    line-height: 1.33;
    margin-bottom: 1rem;
}


.text-red {
    color: var(--red);
}

.mainpage .durusma-notlari {
    padding: var(--mp-gap);
}

.mainpage .durusma-notlari h2:not(.haber-teaser-data h2) {
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--dark);
    margin-bottom: 0.5em;
}

.durusma-notu-teaser h3 {
    font-weight: 500;
    color: var(--dark);
    font-size: 1.15rem;
    width: 100%;
    padding-right: 1rem;
    margin-bottom: 1rem;
    line-height: 1.33;
}

.row.haberler {
    margin-left: -1rem;
    margin-right: -1rem;
}

.row.banner-horizontal {
    padding: var(--mp-gap);
}

.banner-text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.banner-horizontal .banner-text-content {
    align-items: baseline;
    padding-left: var(--mp-gap);
}

.banner-horizontal-video video {
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.row.banner-horizontal-video {
    padding: var(--mp-gap);
    position: relative;
    min-height: 75vh;
}

.row.banner-horizontal-video .banner-text-content {
    color: white;
    align-items: center;
    max-width: 800px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}



/* MOBILE */
@media (max-width:767px) {

    .single-post main.content,
    .single-dava main.content {
        margin-top: 3rem;
    }

    .half-header {
        position: inherit;
    }

    .meta-card {
        background-color: var(--gray);
        transform: inherit;
        margin-top: 2rem;
    }

    .content-container .content {
        margin-top: inherit;
        padding: var(--gutter-size);
    }

    .tabs {
        flex-direction: column;
    }

    .haber-teaser {
        flex-direction: column;
    }

    .fluid-header .container-lg {
        padding: 5rem calc(2 * var(--gutter-size)) 3rem;
    }

    .haber-teaser .featured-img,
    .dava-teaser .featured-img {
        height: auto;
        width: 100%;
        aspect-ratio: inherit;
    }

    .meta-container,
    .archive .content-container .content {
        padding: 0;
        margin-bottom: 3rem;
    }

    .dava-teaser .featured-img {
        height: auto;
        width: 100%;
        aspect-ratio: inherit;
    }

    .intro-head, .durusma-notlari, .banner-horizontal-video {
        margin-top: 2.5rem;
        padding: 3rem var(--mp-gap);
    }

    .intro-text {
        font-size: 1.75rem;
    }

    .doksanlar h2, .ikibinler h2 {
        font-weight: 500;
        font-size: 1.15rem;
        z-index: 1
      }

      .ikibinler {
        justify-content: flex-end;
        position: relative;
      }

      .ikibinler::after {
        content: '';
        display: block;
        height: 100%;
        width: 100%;
        z-index: 0;
        background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
        position: absolute;
        bottom: 0;
        left: 0;
          }

      .banner-horizontal-video video {
        height: 100%;
        object-fit: cover;
      }

      .banner-horizontal .banner-text-content {
        padding-left: 0;
      }

      h2 {
        font-size: 1.5rem;
      }
}

.check-container .js-form-item {
    position: relative;
    }
    
.check-container label {
    margin-bottom: 0.33em;
      cursor: pointer;
      font-size: 0.85rem;
}

.view-davalar .siralama {
    border-bottom: inherit;
    padding-bottom: inherit;
    margin-left: inherit;
    margin-right: inherit;
}

.single-page .content-container .content {
    padding: 5rem var(--gutter-size);
}

.align-center {
    max-width: 100%;
    height: auto;
}

.filter button.red {
    border: none;
}
.etiketler {
    line-height: 1.2em;
}
.check-container label {
  padding-left: 1.5rem;
}

.checkmark {
  pointer-events: none;
}

.check-container {
  padding-left: 0;
}

/* YENILER */
.language-selection {
    color: rgba(255, 255, 255, 0.25);
}

.language-link {
    color: rgba(255, 255, 255, 0.25);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bolder;
}

.language-link:hover {
    color: rgba(255, 255, 255, 0.55);
}


.language-link.is-active {
    color: white;
}


/* Galeri */
.view-dava-cizimleri .view-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.view-dava-cizimleri .views-row {
    width: calc(50% - 1rem);
}

.view-dava-cizimleri .views-row img {
    width: 100%;
    height: auto;
}

.view-dava-cizimleri h3 {
    margin-top: 4rem;
    width: 100%;
}

.view-dava-cizimleri h3 a {
    color: var(--dark);
    text-decoration: none;
    display: block;
    width: 100%;
    text-align: center;
}

.view-dava-cizimleri .views-row .field-content a {
    color: rgba(0, 0, 0, 0.33);
    text-decoration: none;
    font-size: 14px;
}

footer .footer-content {
    gap: 2rem;
}

footer input[type="text"],
footer input[type="email"] {
    max-width: 45%;
}

.tab-content.active {
    position: inherit;
    min-height: calc(100vh - 500px);
    padding-bottom: 3rem;
}
.meta-container .view-element-container {
    margin-top: 4rem;
}

.meta-container .views-field-field-cizim .field-content img {
    width: 100%;
    height: auto;
}

.meta-container .views-field-title .field-content {
    display: none;        
}

.meta-container p {
    text-align: center;
    margin-top: 0.5rem;
}

.meta-container p a {
    text-transform: uppercase;
}


.meta-container p a::after {
    content: ' >'
}

.filter-check .form-chechboxes ul {
    list-style: none;
      padding: 0;
}

ul.flpri,
.filter-check ul.flsec {
    list-style: none;
}