/* Additions on top of the original style.css. Desktop keeps the old 980px look (same images, colours
   and sizes); below 1000px everything becomes fluid, below 760px it switches to a one-column phone
   layout. style.css is left untouched; fixed widths from it are overridden here. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0 0 0 5px; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Page + header ------------------------------------------------------------------------ */
.sayfa { width: 980px; max-width: 100%; }
.ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding-top: 25px; }
.ust-sol { flex: 1; min-width: 0; }
.logo-satir { display: flex; align-items: center; gap: 12px; }
.logo img { display: block; border: 0; }
.site-baslik { font-size: 2em; font-weight: bold; margin: .67em 0; }
.m2 { line-height: 1.9; }
.m2 a.menu, .m2 .menu { margin: 0 2px; white-space: nowrap; }
.ust-sag { width: 350px; flex: none; }
.uye-adi { background: #8B9BB9 url(/images/z6.gif); height: 29px; line-height: 29px; color: #fff; font: bold 20px Arial, sans-serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.uye-menu { min-height: 30px; line-height: 30px; }
.misafir-butonlar { display: flex; gap: 5px; padding-left: 16px; height: 60px; }
.misafir-butonlar img { border: 0; display: block; }
.satir-ici { display: inline; margin: 0; }
.link-buton { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: #888; font-size: 13px; }
.link-buton:hover { color: #0000ff; text-decoration: underline; }

/* ---- Content frame (old z3/z5/z4 table) --------------------------------------------------- */
.icerik-cerceve { width: 980px; max-width: 100%; }
.cerceve-ust { background: url(/images/z3.gif); height: 4px; }
.cerceve-orta { background: url(/images/z5.gif); padding: 20px; font-family: 'Trebuchet MS', sans-serif; font-size: 13px; color: #333; overflow-wrap: break-word; }
.cerceve-alt { background: url(/images/z4.gif); height: 4px; }
h1.icerik_baslik, .icerik_baslik { font-weight: 700; font-size: 26px; color: #000; margin: 0 0 15px; line-height: 1.2; }
.cerceve-orta h2 { font-size: 17px; margin: 22px 0 8px; }
.yasal-metin { line-height: 1.6; }

/* ---- Game frame (old s1..s5 table) -------------------------------------------------------- */
.oyun-cerceve { width: 980px; max-width: 100%; background: #D5EAF9; }
.oyun-cerceve.dogru { background: #dbefe6; }
.oyun-cerceve.yanlis { background: #fee2ce; }
.oyun-cerceve .c-ust { background: url(/images/s1.gif); height: 3px; }
.oyun-cerceve .c-alt { background: url(/images/s3.gif); height: 3px; }
.oyun-cerceve .c-orta { display: flex; }
.oyun-cerceve .c-sol { background: url(/images/s4.gif); width: 2px; flex: none; }
.oyun-cerceve .c-sag { background: url(/images/s5.gif); width: 2px; flex: none; }
.oyun-cerceve .soru_tablo, .oyun-cerceve .yanit_dogru_tablo, .oyun-cerceve .yanit_yanlis_tablo { flex: 1; min-width: 0; padding: 10px 23px 23px; width: auto; }

.cubuk { width: 100%; max-width: 930px; height: 25px; border-collapse: separate; margin: 0 auto; table-layout: fixed; }
.cubuk td { width: auto; padding: 2px 0; }
.gostergeler { display: flex; justify-content: center; align-items: center; gap: 8px 28px; flex-wrap: wrap; min-height: 40px; margin: 10px 0; }
.gosterge { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.soru_gosterge_deger { min-width: 40px; display: inline-block; }
.soru-kutu { background: #fff; border: 1px dashed #CDCDCB; padding: 15px; }
.soru-ic { width: 610px; max-width: 100%; margin: 0 auto; }
.soru-metin { color: #343434; font-size: 23px; margin: 0 0 12px; font-weight: normal; line-height: 1.3; overflow-wrap: break-word; }
.secenekler { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 10px; }
.secenekler .cevap_btn, .secenekler .cevap_btn_hover { width: 100%; height: auto; min-height: 51px; padding: 6px 10px; white-space: normal; line-height: 1.2; background-size: 100% 100%; color: #000; }
.cevap_btn[disabled] { cursor: default; opacity: .35; }
.cevap_btn_ana, .cevap_btn_ana_hover { max-width: 100%; height: auto; min-height: 51px; padding: 6px 10px; white-space: normal; color: #000; }
.joker-mesaj { color: #FF0000; font-weight: bold; margin-top: 10px; text-align: justify; }
.halkoyu { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.halkoyu td { border: 1px solid #C0C0C0; padding: 2px 4px; }
.halkoyu .bar { background: #FFCCCC; height: 14px; }
.jokerler { text-align: center; margin-top: 18px; color: #717171; font-size: 16px; }
.jokerler .joker { display: inline-block; margin: 6px 14px; vertical-align: top; }
.jokerler form { display: inline; }
.soru_sonuc_baslik { line-height: 1.2; margin: 8px 0 12px; }

/* ---- Start screen ------------------------------------------------------------------------- */
.basla-kutu { border: 1px dashed #C0C0C0; background: #fff; padding: 20px; min-height: 250px; }
.basla-ic { width: 500px; max-width: 100%; margin: 0 auto; }
.kategori-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.kategori-grid button.trncu { background: #fff; padding: 8px; text-align: center; font-family: inherit; color: #333; }
.kategori-grid button.trncu img { display: block; margin: 0 auto 6px; }

/* ---- Home --------------------------------------------------------------------------------- */
/* The hero keeps its 980x482 proportions at any width; the start button sits where it used to. */
.oBaslaTd { width: 100%; max-width: 980px; height: auto; aspect-ratio: 980 / 482; background-size: cover; background-position: center; position: relative; }
.oBaslaDiv { position: absolute; left: 61.2%; top: 0; margin: 0; width: 32.8%; height: auto; }
.oBaslaBtnDiv { width: 100%; height: auto; aspect-ratio: 321 / 75; background-size: 100% 100%; }
.oBaslaBtnDiv a, .oBaslaBtnDiv img { display: block; width: 100%; height: 100%; }
.anasayfa-listeler { display: flex; justify-content: space-between; align-items: flex-start; width: 980px; max-width: 100%; margin-top: 10px; }
.anasayfa-listeler .ayrac { width: 30px; height: 289px; background: url(/images/c2.gif) no-repeat center; flex: none; }
.en_iyiler_tablo { width: 300px; max-width: 100%; }
/* Rows are lined up with the 1-5 badges drawn in z1.gif: badges sit 31px apart, the first one at
   y=70..84 (measured), so rows are exactly 31px tall and the list starts 22px lower. */
.en_iyiler_liste { width: 100%; border-collapse: collapse; margin-top: 22px; }
.en_iyiler_liste td { padding: 0 5px; height: 31px; vertical-align: middle; }
.en_iyiler_liste .en_iyiler_div { height: auto; line-height: 31px; }
.en_iyiler_div { width: auto; max-width: 160px; white-space: nowrap; text-overflow: ellipsis; }
.ana-aciklama { width: 980px; max-width: 100%; margin: 20px 0; color: #555; line-height: 1.6; }

/* ---- Tables ------------------------------------------------------------------------------- */
.tablo-kap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.liste { width: 100%; border-collapse: collapse; font-size: 13px; }
.liste th { background: #E6E6E6; text-align: left; padding: 5px; white-space: nowrap; }
.liste td { border: 1px solid #E6E6E6; padding: 5px; }
.liste tr.ilk3 td { background: #EEEEFF; }
.liste td.sayi, .liste th.sayi { text-align: right; }
.top-menu { border: 1px solid #ccc; background: #FAFAFA; padding: 10px 14px; margin-bottom: 15px; line-height: 2; }
.top-menu a { white-space: nowrap; }
.top-menu a.secili { font-weight: bold; color: #FF3300; }
.sonuc-bar { max-width: calc(100% - 40px); }

/* ---- Forms -------------------------------------------------------------------------------- */
.form { width: 520px; max-width: 100%; }
.form .satir { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #eee; background: #FAFAFA; }
.form label.formalanadi, .form .formalanadi { text-align: right; padding: 0; }
.form input[type=text], .form input[type=email], .form input[type=password], .form select, .form textarea { width: 100%; max-width: 300px; padding: 7px; font: inherit; font-size: 16px; }
.form textarea { max-width: 100%; min-height: 140px; }
.form .gonder { padding: 12px 0 0 180px; }
.form select + select { margin-left: 4px; }
.hata-kutu { background: #fee2ce; border: 1px solid #f3b38c; padding: 10px; margin-bottom: 12px; }
.bilgi-kutu { background: #dbefe6; border: 1px solid #9fd1b7; padding: 10px; margin-bottom: 12px; }
.zorunlu { color: #f00; }
.dugme { display: inline-block; padding: 9px 16px; background: #EBECE1; color: #333; border: 1px solid #ccc; cursor: pointer; text-decoration: none; font: inherit; font-weight: bold; margin: 2px 0; }
.dugme:hover { color: #FF3300; }

/* ---- Footer ------------------------------------------------------------------------------- */
#copyright { width: 980px; max-width: 100%; height: auto; padding: 8px 10px 4px; text-align: center; }
#copyright p { margin: 6px 0; }
.alt-linkler a { font-size: 8pt; color: #777; white-space: nowrap; }

/* ---- Cookie notice (cookie_policy.js) ----------------------------------------------------- */
#cookiePolicyw { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; max-width: 980px; background: #FFFBD0; box-shadow: 0 -5px 30px -15px rgba(152,191,248,.5); color: #000; font: 14px/20px sans-serif; padding: 16px 64px 16px 16px; }
#cookiePolicyw p { margin: 0; }
#cookiePolicyw a { color: #404040; font-weight: bold; }
#cookiePolicyw button { position: absolute; right: 16px; top: 50%; margin-top: -16px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #f00; color: #fff; font: bold 20px/32px sans-serif; cursor: pointer; padding: 0; }

/* ---- Tablet (fluid) ----------------------------------------------------------------------- */
@media (max-width: 1000px) {
    body { margin: 0; }
    .ust, .icerik-cerceve, .oyun-cerceve, .anasayfa-listeler, #copyright { padding-left: 8px; padding-right: 8px; }
    .oyun-cerceve { padding: 0; }
    .anasayfa-listeler { flex-wrap: wrap; justify-content: center; gap: 0 20px; }
    .anasayfa-listeler .ayrac { display: none; }
    .ana-aciklama { padding: 0 8px; }
}

/* ---- Phone (one column) ------------------------------------------------------------------- */
@media (max-width: 760px) {
    .ust { flex-direction: column; padding-top: 10px; gap: 4px; }
    .logo img { width: 100%; max-width: 300px; }
    .site-baslik { display: none; }
    .m2 { font-size: 0; }                               /* hide the " |" separators */
    .m2 a.menu, .m2 .menu, .m2 .link-buton { display: inline-block; font-size: 14px; padding: 6px 10px 6px 0; margin: 0 6px 0 0; }
    .ust-sag { width: 100%; }
    .uye-menu { line-height: normal; }
    .misafir-butonlar { padding-left: 0; height: auto; margin: 4px 0 6px; flex-wrap: wrap; }

    .cerceve-orta { padding: 14px 12px; }
    h1.icerik_baslik, .icerik_baslik { font-size: 21px; }

    .oyun-cerceve .soru_tablo, .oyun-cerceve .yanit_dogru_tablo, .oyun-cerceve .yanit_yanlis_tablo { padding: 8px 10px 14px; }
    .cubuk { height: 22px; }
    .cubuk td { font-size: 10px; }
    .gostergeler { gap: 4px 14px; margin: 8px 0; }
    .soru_gosterge_label { font-size: 13px; }
    .soru_gosterge_deger { font-size: 20px; height: auto; min-width: 26px; }
    .soru-kutu { padding: 12px 10px; }
    .soru-metin { font-size: 19px; }
    .secenekler { grid-template-columns: minmax(0, 1fr); }
    .secenekler .cevap_btn, .secenekler .cevap_btn_hover { font-size: 17px !important; }
    .jokerler .joker { margin: 6px 8px; }
    .soru_sonuc_baslik { font-size: 22px; }

    .basla-kutu { padding: 12px; min-height: 0; }
    .cevap_btn_ana, .cevap_btn_ana_hover { width: 100%; }
    .kategori-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Hero: whole picture at its own proportions, start button under it (easy to tap). */
    .oBaslaTd { aspect-ratio: auto; background-size: 100% auto; background-repeat: no-repeat; background-position: top center; padding-top: calc(100% * 482 / 980); }
    .oBaslaDiv { position: static; width: 100%; max-width: 321px; margin: 10px auto 0; }
    /* Lists keep their 300px width so the 1-5 badges in z1.gif stay aligned with the rows. */
    .anasayfa-listeler { flex-direction: column; align-items: center; }
    .en_iyiler_tablo { width: 300px; }

    .liste { font-size: 12px; }
    .liste .mobil-gizle { display: none; }
    .top-menu { padding: 8px 10px; }

    .form .satir { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px; }
    .form label.formalanadi, .form .formalanadi { text-align: left; }
    .form input[type=text], .form input[type=email], .form input[type=password], .form select { max-width: none; }
    .form .gonder { padding-left: 0; }

    #cookiePolicyw { font-size: 13px; line-height: 18px; padding: 12px 54px 12px 12px; }
    #cookiePolicyw button { right: 10px; }
}