/* 2. Көшіруден қорғау: Мәтінді белгілеуге жол бермеу */
* {box-sizing: border-box;-webkit-user-select: none; /* Safari */-ms-user-select: none; /* IE 10+ */user-select: none; /* Standard syntax */} 
/* Суреттерді ұстап тартуға (drag) жол бермеу */

 body { padding:0; margin: 0px; font-family:Balsamiq Sans, Comic Sans MS, Arial, Helvetica, sans-serif; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none;list-style-type: none; font-size: 14px; color: #7b7a7a;  background: #aaaa6f21; }
a { text-decoration:none; color: #cdcbb742; }
.injener { font-family:Balsamiq Sans, Comic Sans MS, Arial, Helvetica, sans-serif; font-size:14px; color:#9f9e93; margin:0px; padding:0; list-style-type:none; text-align:center; }
.injener > a { display:block; }
.email::after { content:url("https://raw.githubusercontent.com/qalpan/Syuret/main/emil.svg"); padding:0 0 0 4px; } 
        .wrapper { width: 100%; margin: 0 auto; }
        .header-top { text-align: center; margin-bottom: 10px; width: 100%; }
        .web-site-bar { background: #878678; color: white; text-align: center; padding: 6px; margin: 10px 0; font-size: 13px; width: 100%; }
        .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #ddd; }
        table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1000px; }
        th, td { border: 1px solid #a3a3a3; padding: 5px; text-align: right; vertical-align: middle; word-wrap: break-word; }
        .acc-info { border: none !important; font-size: 11px; width: 16%; }
        .header-cell { text-align: center; font-size: 11px; background: #fdfdfd; font-weight: normal; }
        .month-header { font-size: 15px; font-weight: bold; color: #878678; }
    /* Login Button */
    .top-right-auth { position: absolute; top: 14px; right: 14px; z-index: 1000; }
    .mini-login-link { display: grid; align-items: center;  background: #8786789e; color: #fff !important; padding: 9px 9px; border-radius: 4px; font-size: 14px; text-decoration: none; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .mini-login-link:hover { background: #474426; }
    .mini-login-link img { width: 18px; filter: brightness(0) invert(1); }
        .status-message { text-align: center; padding: 50px; font-size: 16px; color: #878678; }
        
.action-container { margin:20px 0;text-align:center;font-size:14px;}
        .payment-actions { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
        .pay-btn {  }
        .poll-section { padding: 15px; background-color: #fff9e6; border: 2px dashed #e7c50d; border-radius: 12px; margin-bottom: 20px; }
        .upload-box { margin-top: 20px; padding: 15px; border: 2px solid #878678; border-radius: 12px; background: #f9f9f7; display: inline-block; width: 100%; max-width: 400px; }
        .upload-btn { background: #878678; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-top: 10px; }
        /* Мәтінді белгілеуге жол бермеу */
      
/* --- GENERAL RESET & BODY --- */
    p { margin:0px; padding: 4px; font-family: Balsamiq Sans, Comic Sans MS, Arial, Helvetica, sans-serif; text-align: center; }
    a { text-decoration:none; color:#878678; }
    li { marker: none; }
    h1 { font-family: Arial, Helvetica, sans-serif; margin: 30px auto; color: #09fbd2; width:100%; text-align: center; }

    /* --- MENU STYLES (Merged from yi.css) --- */
    ul.menu { padding: 0 4px; list-style: none; width: auto; margin-top: 7px; font-family: Balsamiq Sans, Comic Sans MS, Arial, Helvetica, sans-serif; clear: both; margin-bottom: 0; }
ul.menu > li:last-child, ul.menu p:last-child { margin-bottom: 0; padding-bottom: 0;} 
    /* List items */
    ul.menu .list { font-size: 14px; margin: 0 0 6px 0; position: relative; width: auto; box-sizing: border-box; height: auto; vertical-align: sub; background: #878678; clear: both; border-radius: 2px; box-shadow: 0 4px 15px rgb(135, 134, 120);}
    ul.menu .list:last-child { border-bottom:none; }
    
    /* Links inside list */
    ul.menu .list a { text-decoration: none; color: #eceade; padding: 6px; display: block; text-align: center; }
    ul.menu .list a:hover { background-color: #b2b1a8; color: #f1f0e5; }
    
    /* Dropdown items (hidden by default) */
    ul.menu .list .items { height: 0px; overflow: hidden; }
    ul.menu .list .items a { padding: 0; color: #878678; }
    ul.menu .list .items a:hover { background-color: #b2b1a8; color: #f1f0e5; }

    /* Active State (Accordion logic) */
    ul.menu .active > .items { display: block; text-align: center; padding: 4px 0; height: auto; color:#9f9e93; clear:both; float:left; width:100%; background-color: white; margin: 0 0 6px 0; border-radius: 2px; }
    ul.menu .active > .items li { padding:0px; border-bottom:1px solid #324252; list-style: none; }
    ul.menu .active > .items li:last-child { border-color:transparent; padding-bottom: 0px; }
    
    /* Nested active states */
    ul.menu .active .active > .items { background-color: #2f4b67; }
    ul.menu .active > a { font-weight: bold; background-color: #b2b1a8;border-radius: 2px; }
    ul.menu .active .list { background: #697d92; }
    ul.menu .active .list a { padding: 17px 0px 17px 45px; }

    /* --- CONTACT LISTS (.injener) --- */
    .injener { font-family: Balsamiq Sans, Comic Sans MS, Arial, Helvetica, sans-serif; font-size:14px; color:#9f9e93; margin:6px; padding:0; list-style-type:none; text-align:center; }
    .injener > a { display:block; }  

    /* --- FOOTER --- */
    footer { background-color: #474426d4; color: #fff; font-size: 14px; bottom: 0; position: fixed; left: 0; right: 0; text-align: center; z-index: 999;padding: 9px; }
    footer p { font-family: Arial, Helvetica, sans-serif;font-size: 10px; }
    footer a { color: #fff; text-decoration: none; margin-right:5px; }
    /* Footer Icons */
    footer .fa-heart{ color: red;}
    footer .fa-dev{ color: #fff;}
    footer .fa-twitter-square{ color:#1da0f1;}
    footer .fa-instagram{ color: #f0007c;}
    footer .fa-linkedin { color:#0073b1;}
    footer .fa-codepen { color:#fff; }

    /* --- ICONS & PSEUDO ELEMENTS --- */
    .email::after { content:url("https://raw.githubusercontent.com/qalpan/Syuret/main/emil.svg"); padding:0 0 0 4px; } 
    .www::after { content:url("https://raw.githubusercontent.com/qalpan/Syuret/main/www.svg"); padding:0 0 0 4px; }
    .web::after { content:url("https://raw.githubusercontent.com/qalpan/Syuret/main/web.svg"); padding:2px 0 0 4px; } 
    .tysinikteme { color:#979689; }  

    /* --- GALLERY & MEDIA QUERIES --- */
    #gallery { margin-bottom:12%; padding:0px 4px 0px 4px; }
    #gallery > p { color:#5e5a36; width:100%; margin:0; }
    
.belgi {display: block; margin-left: auto; margin-right: auto; text-align: center; /* Егер ішінде мәтін немесе сурет болса */}
    .kөrme>a>img, video { width:49%;} /* Default mobile first override */
    .kөrme2 > video { width:99%; }

    /* Media Queries adapted from yi.css */
    @media screen and (max-width:490px) {
        .belgi > img { min-width:48%; }
        .kөrme { min-width:100%; float:right; }
        .kөrme2 { min-width:100%; }
        .kөrme2 > div > img, video { width:98%; }
        .kөrme>a>img, video,.syuret>img { min-width: 98%; margin: auto; display: block; padding-bottom: 4px; }
        .top-right-auth { top: 5px; right: 5px; }
        .mini-login-link { padding: 4px 8px; font-size: 11px; }
    }
    @media screen and (max-width:790px) {
        .kөrme { min-width:100%; float:right; }
        .kөrme2 { min-width:100%; }
        .kөrme2 > a > img, video { width:98%; }
    }
    @media screen and (max-width:990px) {
        .kөrme { min-width:50%; float:right; }
        .kөrme2 { min-width:100%; }
        .kөrme2 > a > img, video { width:98%; }
    }
    @media screen and (max-width:1190px) {
        .kөrme { min-width:100%; float:right; }
        .kөrme2 { width:50%; float:right; margin:auto; }
        .kөrme2 > a > img, video { width:99%; }
    }
    @media screen and (max-width:1780px) {
        .kөrme { min-width:100%; float:right; }
        .kөrme2 { width:50%; float:right; margin:auto; }
        .kөrme2 > a > img, video { width:99%; }     
    }
    @media screen and (max-width:2180px) {
        .kөrme { min-width:100%; float:right; }
        .kөrme2 { width:50%; float:right; margin:auto; }
        .kөrme2 > a > img, video { width:99%; }     
    }

   
    /* Login Button */
    .top-right-auth { position: absolute; top: 14px; right: 14px; z-index: 1000; }
    .mini-login-link { display: grid; align-items: center;  background: #8786789e; color: #fff !important; padding: 4px 5px; margin-bottom: 5px; border-radius: 4px; font-size: 14px; text-decoration: none; transition: 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .mini-login-link:hover { background: #474426; }
    .mini-login-link img { width: 18px; filter: brightness(0) invert(1); }
    


    /* Protection Exceptions */
    .contacts, .contacts a { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
    
    /* Login Card Specifics (if used) */
    @media (max-width: 600px) {
        .login-card { padding: 20px; width: 34%; max-width: 300px; }
        .logo { width: 30px; } 
        h2 { font-size: 18px; } 
        input, button { padding: 10px; font-size: 14px; } 
        p { font-size: 12px; }
        .kөrme>a>img, video,.syuret>img { min-width: 98%; margin: auto; display: block; padding-bottom: 4px; }
    }

    /* Table Styles */
    table { margin: auto; font-size: 10px; background-color: white; }
    
    /* Utilities */
    .items { padding:0; }
    .\32 { padding:4px; color:#9f9e93; }
    
    .syuret>img { width: 49%; margin: auto; display: block; }
    ul.items>img { width: 98%; }
.video-card {flex: 1 1 calc(50% - 20px); /* Компьютерде 2 қатар (50% ені) */box-sizing: border-box;text-align: center;background-color: white; border-radius: 2px; box-shadow: 0 4px 15px rgb(135, 134, 120);}
.video-card img {width: 100%; /* Сурет блок еніне толық сыйуы үшін */height: auto; padding: 4px; border-radius: 6px;}
@media (max-width: 600px) {.video-card {flex: 1 1 100%; /* Телефонда 1 қатар (100% ені) */}} 
.top-right-auth>p { font-size: 11px; text-align: left; border: beige; }

/* Негізгі контейнер */
.kөrme { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 баған */ gap: 6px; /* Суреттер арасындағы қашықтық */ margin-bottom: 100px; padding: 0 4px;}
.kөrme1 { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 баған */ gap: 7px; /* Суреттер арасындағы қашықтық */ margin-bottom: 7px; padding: 0 4px;}
/* Төменгі мәтін стилі */
.description {text-align: center;font-weight: bold; margin-top: 20px;}

/* Смартфондарға арналған баптау (экран 768px-ден кіші болса) */
@media (max-width: 768px) {.kөrme, .kөrme1 {/* Телефонда 1 қатарға айналады */grid-template-columns: 1fr;}}

.footer-links { display: flex; flex-wrap: wrap; /* Орын жетпесе келесі жолға ұқыпты түсіреді */ justify-content: center;  /* Элементтерді ортаға туралайды */ align-items: center; /* Биіктігі бойынша туралайды */ gap: 9px;}

.footer-item { display: inline-flex; align-items: center; gap: 4px; /* Сурет пен мәтін арасы */}
.footer-item img {height: 16px; /* Сурет биіктігін мәтінге сай ету */width: auto;}       

.footer-text { display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 9px;}

/* Мәтіннің алдына сурет қою 
.footer-text::before {content: ""; display: inline-block; width: 16px;  /* Ені */ height: 16px; /* Биіктігі */ background-image: url('sůuretter/aqsai3-10a belgi.svg'); background-size: contain; background-repeat: no-repeat;} */
select#languageSelect { padding: 4px; }