/* Responsive katman: m.hastane.com.tr emekliye ayrilirken www'nin dar
   ekranlarda kullanilabilmesini saglar. Tema klasorunde oldugu icin
   ASP.NET tarafindan otomatik enjekte edilir (alfabetik sirada en son,
   yani hastane.css ve hastane_v2.css'i ezer). 1020px ve uzeri ekranlarda
   hicbir kurali uygulanmaz; masaustu gorunumu birebir ayni kalir. */

/* Masaustunde gizli: dar ekran uyelik linkleri (UserLogin.ascx) */
.mobilUyelik {
    display: none;
}

@media (max-width: 1019px) {
    html, body {
        width: auto !important;
        margin: 0 !important;
        padding: 10px 8px 0;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .MainTable {
        width: 100% !important;
    }

    /* Yuzde tavani inline-block hucre olcumunde donguye girer (hucre
       gorsele, gorsel hucreye gore olculur); viewport bazli tavan sart. */
    /* !important: makale govdelerinde satir ici max-width:620px var.
       height:auto YALNIZ img/video: iframe'e verilirse varsayilan 150px'e
       siser (uye girisi iframe'i bu yuzden dev bos alan olmustu). */
    img, iframe, video, embed, object {
        max-width: min(100%, calc(100vw - 24px)) !important;
    }

    img, video {
        height: auto;
    }

    /* Sabit genislikli div'ler (satir ici width:540px, .KonuAltiListe 470px
       gibi) viewport'a sigar; max-width her durumda width'i kisitlar. */
    div {
        max-width: calc(100vw - 16px);
    }

    h1, h2, h3, h4, p, li, a, span {
        overflow-wrap: break-word;
    }

    .KonuAltiListe {
        height: auto !important;
        float: none;
    }

    table {
        max-width: 100%;
    }

    /* Genel dogrusallastirma: sabit genislikli tablo yerlesimleri akiskan
       olur. Hucreler inline-block kaldigi icin yan yana sigan sigar,
       sigmayan alt satira iner. Menu/arama gibi ozel alanlarin id'li
       flex kurallari bunlari ezer. */
    table, tbody, thead, tr {
        display: block;
        width: auto !important;
        height: auto !important;
    }

    td, th {
        display: inline-block;
        width: auto !important;
        height: auto !important;
        vertical-align: top;
        max-width: calc(100vw - 16px);
        overflow-wrap: break-word;
    }

    /* Ana yerlesim: icerik ve sag kolon alt alta akar */
    #Container,
    #Container > tbody,
    #Container > tbody > tr,
    #Container > tbody > tr > td {
        display: block;
        width: auto !important;
    }

    #Container > tbody > tr > td[width="10"] {
        display: none;
    }

    /* Icerik sayfalarinin en ust duzey yerlesim tablolari (sol kutu +
       icerik sutunu gibi) dikey akar. Yalniz ilk seviye hedeflenir;
       ic ice veri/karsilastirma tablolarina dokunulmaz. */
    #Container > tbody > tr > td > table,
    #Container > tbody > tr > td > table > tbody,
    #Container > tbody > tr > td > table > tbody > tr,
    #Container > tbody > tr > td > table > tbody > tr > td {
        display: block;
        width: auto !important;
        height: auto !important;
    }

    /* Form elemanlari kutudan tasmasin */
    input, textarea, select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Turkiye haritasi (amCharts) 670px sabit cizilir, dar ekranda dogusu
       kirpilir ve 81 il tiklanamayacak kadar sikisir; ayni islevi goren
       il listesi hemen altinda durdugu icin dar ekranda gizlenir. */
    .mapPanel {
        display: none;
    }

    /* Ust bant: logo kalir, 728x90 tanitim gorseli sigmadigi icin gizlenir */
    #Header td[height="80"] {
        display: none;
    }

    #Header td[width="242"],
    #Header td[width="242"] table {
        width: auto !important;
    }

    /* Menuler: beyaz "uygulama" gorunumu. 980px'e gore cizilmis mavi
       zemin gorselleri tamamen kalkar; ogeler tek satirda yatay
       kaydirilabilir serit olur. */
    #MenuSmall {
        height: auto !important;
    }

    #MenuSmall,
    #Menu {
        background-image: none !important;
        background-color: #dcE9f4;
        border-radius: 8px;
        padding: 4px 8px;
    }

    /* Eski temada menu linkleri beyazdi; beyaz zeminde koyu maviye doner */
    #Menu #UST a,
    #MenuSmall #UST a,
    #Menu #UST .h1,
    #Menu #UST .h1 a,
    #MenuSmall #UST h2 a {
        color: #1b4e79 !important;
    }

    /* Arama girisi zemin grafiginin ustune gore konumlanmisti;
       zemin kalkinca kendi kutusu ve gorunur butonu olmali */
    #SearchMini .SearchBoxMini {
        background-color: #fff !important;
        border: 1px solid #9db8cc !important;
        border-radius: 6px;
        margin: 6px 4px !important;
        padding: 4px 8px;
        width: calc(100vw - 130px) !important;
        max-width: none;
    }

    #SearchMini .CIB {
        opacity: 1 !important;
    }

    #MenuSmall #UST table,
    #MenuSmall #UST tbody,
    #MenuAlt,
    #MenuAlt tbody {
        display: block;
        width: auto !important;
    }

    /* Ana menu ogelerinin HEPSI gorunur (gerekirse alt satira sarar);
       yalniz ikincil konu chip'leri (#MenuAlt) yatay kaydirmali kalir. */
    #MenuSmall #UST tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #MenuAlt tr {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #MenuSmall #UST tr::-webkit-scrollbar,
    #Menu #UST tr::-webkit-scrollbar,
    #MenuAlt tr::-webkit-scrollbar {
        display: none;
    }

    #MenuSmall #UST tr,
    #Menu #UST tr,
    #MenuAlt tr {
        scrollbar-width: none;
    }

    #MenuSmall #UST tr {
        border-bottom: 2px solid #e4ecf2;
    }

    #MenuSmall #UST td,
    #MenuAlt td {
        display: block;
        width: auto !important;
    }

    /* Menu ogeleri hap gorunumune doner; ikon/ayrac gorselleri ve bos
       hucreler gizlenir. Ana sayfada ogelerin alt yazisi <h2> etiketi,
       ic sayfalarda ise linkin kendisi <h2> icinde — id'ye gore ayrisir. */
    #Menu #UST td img,
    #MenuSmall #UST td img {
        display: none;
    }

    #Menu #UST td:has(a),
    #MenuSmall #UST td:has(a) {
        padding: 8px 9px;
        margin: 0;
        white-space: nowrap;
        flex: 0 0 auto;
        font-weight: 700;
    }

    #Menu #UST td:not(:has(a)),
    #MenuSmall #UST td:not(:has(a)),
    #Menu #UST td:has(a > img),
    #MenuSmall #UST td:has(a > img) {
        display: none;
    }

    #Menu #UST h2 {
        display: none;
    }

    #Menu #UST .h1,
    #Menu #UST .h1 a {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin: 0;
    }

    #MenuSmall #UST h2 {
        margin: 0;
        font-size: 14px;
    }

    #MenuAlt .sp,
    #MenuAlt .left,
    #MenuAlt .right,
    #MenuAlt td[width="5"],
    #MenuAlt td[width="6"] {
        display: none;
    }

    /* Alt konu seridi: yatay kaydirilabilir acik mavi chip'ler */
    #MenuAlt {
        padding: 8px 2px;
    }

    /* Acik mavi panel ustunde beyaz chip'ler */
    #MenuAlt .item {
        background: #fff !important;
        background-image: none !important;
        border: 1px solid #d8e2ea;
        border-radius: 14px;
        margin: 3px;
        padding: 6px 13px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Buyuk arama bandi (ana sayfa ve liste sayfalari) */
    #Search {
        width: auto !important;
    }

    #Search #SL,
    #Search #SR {
        display: none;
    }

    #Search #SC table,
    #Search #SC tbody {
        display: block;
        width: auto !important;
    }

    #Search #SC tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    #Search #SC td {
        display: block;
        width: auto !important;
    }

    #Search #SC td[width="65"] {
        display: none;
    }

    #Search #SC .SearchBox {
        width: 55vw !important;
        max-width: 415px;
        box-sizing: border-box;
    }

    #SearchMini .SearchBoxMini {
        max-width: 60vw;
        margin-left: 8px;
    }

    /* Sag kolon ve manset kutulari sabit genislikten kurtulur */
    #EditorSelected,
    #RecentGalleries,
    #HeadlineArea,
    #PopularSubjects {
        width: auto !important;
    }

    /* Icerik disina tasan sabit konumlu yan reklamlar */
    [id="160x600_sag"],
    [id="160x600_sol"] {
        display: none;
    }

    /* Ana sayfa (Default.aspx master kullanmaz, kendi iskeleti var):
       sol konu kolonu + icerik + sag kolon alt alta akar */
    #HeadlineMenu,
    #HeadlineMenu > tbody,
    #HeadlineMenu > tbody > tr,
    #HeadlineMenu > tbody > tr > td {
        display: block;
        width: auto !important;
    }

    #HeadlineMenu td[width="10"] {
        display: none;
    }

    #Header > tbody > tr > td,
    #Header td[width="250"],
    #Header td[width="250"] table {
        width: auto !important;
    }

    /* Ana sayfa buyuk menusu */
    #Menu {
        height: auto !important;
        background-size: cover;
    }

    #Menu > tbody > tr > td,
    #Menu #UST,
    #Menu #UST tbody {
        display: block;
        width: auto !important;
    }

    #Menu #UST tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 2px solid #e4ecf2;
    }

    #Menu #UST td {
        display: block;
        width: auto !important;
    }

    #Menu td[width="560px"] {
        width: auto !important;
    }

    /* Uye girisi iframe'i cross-origin (www0) yuklenir ve dar ekranda
       hem okunmaz hem linkleri kullaniciyi www0'a tasir; gizlenir,
       yerine ayni islevi goren yerel .mobilUyelik linkleri gosterilir. */
    #MenuSmall iframe,
    #Menu iframe {
        display: none;
    }

    .mobilUyelik {
        display: block;
        margin: 2px 0 4px;
        padding: 4px 12px;
        text-align: center;
        font-size: 13px;
    }

    .mobilUyelik a {
        color: #2b6a99 !important;
        font-weight: 700;
    }

    #Header {
        padding-top: 8px;
    }

    /* Manset (slider): gorsel tam genislik kart; altindaki donen
       basliklar etiketli bir liste olarak gorsele baglanir. Arka plan
       gorsellerini slider JS'i satir ici style ile bastigi icin
       !important sart; secili ogeyi JS'in yazdigi "secili" gorsel
       adindan yakalayip sari vurguyla gosteririz. */
    #HeadlineArea .headlineContent {
        height: auto !important;
        min-height: 120px;
        border: none !important;
        border-radius: 8px 8px 0 0;
        overflow: hidden;
    }

    #HeadlineArea .headlineContent img {
        width: 100%;
    }

    #HeadlineArea #spanHeadline {
        font-size: 17px !important;
        height: auto !important;
        bottom: 8px !important;
    }

    #HeadlineArea .divHeadline {
        height: 44px !important;
    }

    #HeadlineArea td[width="230"] {
        display: block;
        width: auto !important;
        height: auto !important;
    }

    #HeadlineItems {
        display: block;
        background: #fff;
        border: 1px solid #d8e2ea;
        border-top: none;
        border-radius: 0 0 8px 8px;
        overflow: hidden;
    }

    #HeadlineItems::before {
        content: "\00d6NE \00c7IKANLAR";
        display: block;
        padding: 8px 12px 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .8px;
        color: #2b7ab8;
        background: #f2f7fb;
        border-bottom: 1px solid #e4ecf2;
    }

    #HeadlineItems td {
        display: block;
        background-image: none !important;
        background-color: #fff;
        padding: 9px 12px !important;
        border-bottom: 1px solid #eef2f6;
        font-size: 13px !important;
        height: auto !important;
        width: auto !important;
    }

    #HeadlineItems td[style*="secili"] {
        background-color: #fff6d8 !important;
        box-shadow: inset 3px 0 0 #f0b400;
    }

    #HeadlineItems tr:last-child td {
        border-bottom: none;
    }

    /* Masaustunun 162/300px'lik kose-gorselli kutulari (CT baslik,
       CM govde, CB alt kose) dar ekranda duz kart olur */
    .SmallBox, .SmallBox2, .BigBox, .StandartBox {
        width: auto !important;
        border: 1px solid #d8e2ea;
        border-radius: 8px;
        overflow: hidden;
        margin: 10px 0;
        font-size: 13px;
    }

    .SmallBox .CT, .SmallBox2 .CT, .BigBox .CT, .StandartBox .CT, .ArticleBox .CT {
        background-image: none !important;
        background-color: #2b7ab8;
        color: #fff;
        padding: 8px 12px !important;
        height: auto !important;
    }

    .SmallBox .CT a, .SmallBox2 .CT a, .BigBox .CT a, .StandartBox .CT a, .ArticleBox .CT a {
        color: #fff !important;
    }

    .SmallBox .CM, .SmallBox2 .CM, .BigBox .CM, .StandartBox .CM {
        border: none !important;
        padding: 10px 12px !important;
        height: auto !important;
    }

    .SmallBox .CB, .SmallBox2 .CB, .BigBox .CB, .StandartBox .CB {
        display: none;
    }

    /* Kutu basligi: sol bastaki baslik + sag ucta "Tum ..." linki.
       CT/CM hucreleri genel kuralla inline-block kalip buzustugu icin
       tam genislik blok olur. */
    .SmallBox .CT, .SmallBox2 .CT, .BigBox .CT, .StandartBox .CT,
    .SmallBox .CM, .SmallBox2 .CM, .BigBox .CM, .StandartBox .CM {
        display: block;
        width: auto !important;
        box-sizing: border-box;
    }

    .SmallBox .CT table, .SmallBox2 .CT table, .BigBox .CT table, .StandartBox .CT table {
        width: 100% !important;
    }

    /* Baslik solda kalir, "Tum ..." linki ve varsa RSS ikonu sag uca
       birlikte yaslanir (space-between 3 hucrede linki ortada birakiyordu) */
    .SmallBox .CT tr, .SmallBox2 .CT tr, .BigBox .CT tr, .StandartBox .CT tr {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .SmallBox .CT tr > td:first-child,
    .SmallBox2 .CT tr > td:first-child,
    .BigBox .CT tr > td:first-child,
    .StandartBox .CT tr > td:first-child {
        margin-right: auto;
    }

    .SmallBox .CT td, .SmallBox2 .CT td, .BigBox .CT td, .StandartBox .CT td {
        padding: 0;
    }

    /* Kutu icerigi: ortalanmis dagunik hucreler yerine sola yasli liste */
    .SmallBox .CM td, .SmallBox2 .CM td, .BigBox .CM td, .StandartBox .CM td {
        text-align: left !important;
        padding: 6px 0;
    }

    /* Madde imli haber satirlari: im ile baslik ayni satirda kalir
       (dogrusallasan tabloda im ayri satira dusuyordu) */
    .CM tr:has(> td.listeKutu) {
        display: flex;
        align-items: flex-start;
    }

    .CM td.listeKutu {
        flex: 0 0 auto;
        padding: 6px 6px 0 0;
    }

    .CM tr:has(> td.listeKutu) > td + td {
        flex: 1;
    }

    /* Video oynat ikonu: eski saglik-video.png katmaninin simgesi sag alt
       koseye gomulu oldugundan basligin ustune tasiyordu. Dar ekranda o
       katman gizlenir; ikon CSS ile cizilip kucuk resmin ortasina oturur. */
    img[src*="saglik-video"],
    img[data-original*="saglik-video"] {
        display: none !important;
    }

    .CM a:has(img[data-original*="saglik-video"]) {
        position: relative;
        display: block;
    }

    .CM a:has(img[data-original*="saglik-video"])::after {
        content: "\25B6";
        position: absolute;
        top: 36px;
        left: 53px;
        width: 34px;
        height: 34px;
        background: rgba(255, 255, 255, .88);
        border-radius: 50%;
        color: #1b4e79;
        font-size: 14px;
        line-height: 34px;
        text-align: center;
        padding-left: 3px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    }

    /* Saglik ansiklopedisi: harfler dokunulabilir chip, 3 kolonlu terim
       tablosu tek kolon ferah listeye doner */
    .letter-select {
        display: inline-block;
        min-width: 34px;
        text-align: center;
        padding: 7px 2px;
        margin: 2px;
        background: #eaf2f8;
        border-radius: 6px;
        font-weight: 700;
        color: #1b4e79 !important;
    }

    .letter-container ~ table td {
        display: block;
        width: 100% !important;
    }

    .letter-container ~ table li {
        list-style: none;
        margin: 0;
        padding: 8px 6px;
        border-bottom: 1px solid #eef2f6;
    }

    #PopularSubjects #Items li {
        width: auto;
        height: auto;
        background-image: none;
        background-color: #eef4f9;
        border-radius: 4px;
        margin: 2px 4px;
        padding: 5px 8px;
    }

    /* Il Il Hastaneler: 81 il tek dar kolonda icerigi dibe itiyordu;
       yan yana akan chip'lere doner */
    #HospitalsCities #Items li {
        display: inline-block;
        width: auto;
        height: auto;
        background-image: none;
        background-color: #eef4f9;
        border-radius: 4px;
        margin: 2px;
        padding: 5px 9px;
    }

    #HospitalsCities #Items a {
        padding-left: 0;
    }
}