/* Keep the original 960px desktop layout; adapt it below tablet widths. */
@media screen and (max-width: 992px) {
    #wrapper,
    #wrapper * {
        box-sizing: border-box;
    }

    #wrapper {
        width: calc(100% - 24px);
        max-width: 960px;
    }

    #header {
        height: auto;
    }

    #head {
        width: 100%;
    }

    .header_animate {
        right: 125px;
        width: auto;
    }

    #head .ipra {
        right: 16px;
    }

    #main-nav {
        height: auto;
        min-height: 44px;
        background-color: #394351;
        background-repeat: repeat-x;
    }

    #menu {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    #menu li {
        float: none;
        max-width: 100%;
        margin: 0;
    }

    #menu li a {
        float: none;
        height: auto;
        min-height: 44px;
        padding: 11px 12px;
        border-bottom: 3px solid transparent;
        line-height: 1.3;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #content {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(200px, 1fr);
        gap: 20px;
        width: 100%;
    }

    #left-content,
    #right-content {
        float: none;
        width: auto;
        min-width: 0;
    }

    #content > .clear {
        display: none;
    }

    .content-wrapper,
    .right-tab {
        width: 100%;
        min-width: 0;
    }

    .title {
        float: none;
        width: 100%;
    }

    .title + .content-wrapper {
        margin-top: 12px;
    }

    .tab > h1,
    .tab > h2 {
        float: none;
        max-width: 100%;
    }

    .tab > .date {
        float: none;
        max-width: 100%;
        margin-top: 6px;
    }

    .tab-wrapper,
    .in-tab,
    .page .tab-wrapper,
    .page .in-tab {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .in-tab,
    .inright-tab,
    .tab h1,
    .tab h2,
    .tab h3 {
        overflow-wrap: anywhere;
    }

    .in-tab img {
        max-width: calc(100% - 10px);
        height: auto;
    }

    .inright-tab img {
        max-width: 100%;
        height: auto;
    }

    .in-tab video,
    .in-tab iframe,
    .in-tab embed,
    .in-tab object {
        max-width: 100%;
    }

    .in-tab video {
        height: auto;
    }

    .in-tab iframe[src*="youtube"],
    .in-tab iframe[src*="youtu.be"],
    .in-tab iframe[src*="vimeo"] {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }

    /* The table itself scrolls; surrounding article text remains in view. */
    .in-tab table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overflow-wrap: normal;
    }

    .in-tab pre {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .popular li > a {
        display: block;
    }

    .popular li div.rel {
        width: 76px;
        max-width: 28%;
        height: auto;
        overflow: visible;
    }

    .popular li div.rel img {
        display: block;
        float: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0;
    }

    .right-tab h2,
    .right-tab h3 {
        height: auto;
        min-height: 28px;
    }

    form,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    textarea {
        width: 100%;
    }

    .search-wrapper {
        display: flex;
        align-items: stretch;
        width: 100%;
        height: auto;
        min-height: 36px;
        background-size: auto 100%;
    }

    .search-form {
        flex: 1 1 0;
        float: none;
        width: auto;
        min-width: 0;
        height: 36px;
        padding: 6px 8px;
        font-size: 14px;
        line-height: 24px;
    }

    .search-btn {
        flex: 0 0 36px;
        float: none;
        width: 36px;
        height: 36px;
    }

    #bulletin {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .bulletin-form {
        flex: 1 1 120px;
        float: none;
        width: auto;
        min-width: 0;
        height: 36px;
        padding: 6px 8px;
        font-size: 14px;
        line-height: 24px;
    }

    .bulletin-btn {
        flex: 0 0 auto;
        float: none;
        height: auto;
        min-height: 36px;
        padding: 6px 10px;
        background-color: #35b026;
        white-space: normal;
        font-size: 14px;
        line-height: 1.4;
    }

    .search-wrapper > .clear,
    #bulletin > .clear {
        display: none;
    }

    #footer {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
        height: auto;
        min-height: 116px;
        padding: 10px;
    }

    .footer-menu {
        position: static;
        max-width: 100%;
    }

    .footer-menu ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 0;
    }

    .footer-menu ul li,
    .footer-menu ul li a {
        float: none;
        max-width: 100%;
        height: auto;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .footer-tab {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
        width: 100%;
        height: auto;
        min-height: 38px;
    }

    .footer-tab > span {
        flex: 1 1 260px;
        float: none;
        min-width: 0;
        padding-top: 0;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .footer-tab .social {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        float: none;
        max-width: 100%;
    }

    .footer-tab .social li {
        float: none;
        margin-left: 0;
    }

    .footer-tab .takip-text {
        margin-right: 8px;
        padding-top: 0;
    }

    .footer-tab .gonum {
        flex: 0 0 86px;
        float: none;
        margin-right: 0;
    }

    .footer-tab > .clear {
        display: none;
    }
}

@media screen and (max-width: 768px) {
    #wrapper {
        font-size: 16px;
        line-height: 1.5;
    }

    #content {
        grid-template-columns: minmax(0, 1fr);
    }

    .in-tab img {
        display: block;
        float: none;
        max-width: 100%;
        height: auto;
        margin: 8px 0 12px;
    }

    .in-tab > a.group1 {
        display: block;
        max-width: 100%;
    }

    .in-tab > a.group1 > img {
        margin-top: 0;
    }

    .right-tab p {
        font-size: 14px !important;
        line-height: 1.5;
    }

    .f1,
    .f2,
    .f3,
    .f4 {
        font-size: 14px;
    }

    .more,
    .prev-link {
        height: auto;
        min-height: 32px;
        padding: 6px 10px;
        line-height: 1.5;
    }
}