/* =====================================================
   RESPONSIVE.CSS – ULTRA DETAYLI
   Mobile First + Resolution Based
===================================================== */

/* ===============================
   RESET & BASE
================================ */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Container sistemi */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

/* =====================================================
    WATCH
   150px – 200px
===================================================== */

@media (min-width: 150px) and (max-width: 200px) {

  .container { padding-inline: 10px; }
  .navbar  { display:none; }
  #buttonSet { display:none !important; }
  .watch-dnone{ display:none !important; }
  .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
      .card {
        min-height: 85px;
        padding: 0px;
    }
    
    .meslek-baslik {
        padding:4px !important;
        font-size: 10px;
        margin-bottom:15px;
        width: 100%;
    }
    .copyright{
        font-size: 8px;
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        text-align:center !important;
    }
}

/* =====================================================
   📱 TELEFONLAR – EXTRA SMALL
   240px – 319px (çok küçük / eski cihazlar)
===================================================== */

@media (max-width: 319px) {

  .container { padding-inline: 10px; }

  /* BURAYA YAZ */
}

/* =====================================================
   📱 TELEFONLAR – SMALL
   320px – 359px (iPhone SE eski, küçük Android)
===================================================== */

@media (min-width: 320px) and (max-width: 359px) {

 .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   📱 TELEFONLAR – NORMAL
   360px – 389px (çoğu Android)
===================================================== */

@media (min-width: 360px) and (max-width: 389px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }
    
}

/* =====================================================
   📱 TELEFONLAR – BÜYÜK
   390px – 429px (iPhone 12–15)
===================================================== */

@media (min-width: 390px) and (max-width: 429px) {

    .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }
}

/* =====================================================
   📱 TELEFONLAR – MAX / PRO MAX
   430px – 479px
===================================================== */

@media (min-width: 430px) and (max-width: 479px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   🔄 TELEFON YATAY (LANDSCAPE)
   max-height kritik!
===================================================== */

@media (max-height: 480px) and (orientation: landscape) {

  /* Header küçült, taşma önle */
  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }
}

/* =====================================================
   📲 PHABLET / KÜÇÜK TABLET
   480px – 599px
===================================================== */

@media (min-width: 480px) and (max-width: 599px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   📲 TABLET MINI
   600px – 719px
===================================================== */

@media (min-width: 600px) and (max-width: 719px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   📲 TABLET PORTRAIT
   720px – 767px
===================================================== */

@media (min-width: 720px) and (max-width: 767px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   📲 TABLET (iPad Portrait)
   768px – 819px
===================================================== */

@media (min-width: 768px) and (max-width: 819px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   📲 TABLET LARGE
   820px – 899px
===================================================== */

@media (min-width: 820px) and (max-width: 899px) {

  .container { padding-inline: 16px; }
    .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }
}

/* =====================================================
   💻 KÜÇÜK LAPTOP / TABLET LANDSCAPE
   900px – 1023px
===================================================== */

@media (min-width: 900px) and (max-width: 1023px) {

  .container { max-width: 900px; }
  .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   💻 LAPTOP
   1024px – 1151px
===================================================== */

@media (min-width: 1024px) and (max-width: 1151px) {

  .container { max-width: 960px; }
  .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   💻 LAPTOP LARGE
   1152px – 1279px
===================================================== */

@media (min-width: 1152px) and (max-width: 1279px) {

  .container { max-width: 1100px; }
  .main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding:0px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
        margin-top: 20px;
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }
    
    .iskurLogo{
        width:40%;
    }
    
    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }

}

/* =====================================================
   🖥️ DESKTOP – HD
   1280px – 1439px
===================================================== */

@media (min-width: 1280px) and (max-width: 1439px) {

  .container { max-width: 1200px; }
.main {
        height: auto;
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    .card {
        min-height: 85px;
        padding: 9px;
    }
    .card-body{
        
    }
    .svg-turkiye-haritasi svg {
        width: 100% !important;
      
    }
    #meslekBaslik{
        margin-left:10px;
    }
    .meslek-baslik{
        width:100%;
        justify-content: left !important;
    }
    
    footer{
        padding-right:5px !important;
        padding-left:5px !important;
    }

    .buttonSet{
        position: relative;
    right: 1%;
    margin-top: 1%;
    color: white;
    z-index: 99;
    justify-content: end;
    }
    
    .acikis{
        padding-top:0 !important;
    }
}

/* =====================================================
   🖥️ DESKTOP – FULL HD
   1440px – 1599px
===================================================== */

@media (min-width: 1440px) and (max-width: 1599px) {

  .container { max-width: 1320px; }

}

/* =====================================================
   🖥️ DESKTOP – 2K
   1600px – 1919px
===================================================== */

@media (min-width: 1600px) and (max-width: 1919px) {

  .container { max-width: 1440px; }

}

/* =====================================================
   🖥️ 4K
   1920px – 2559px
===================================================== */

@media (min-width: 1920px) and (max-width: 2559px) {

  .container { max-width: 1560px; }

}

/* =====================================================
   🖥️ 5K / ULTRA WIDE
   2560px+
===================================================== */

@media (min-width: 2560px) {

  .container { max-width: 1680px; }

}

/* =====================================================
   📐 HEIGHT BASED (KISA EKRANLAR)
===================================================== */

@media (max-height: 700px) {

  /* Çok kısa ekranlar (küçük laptop) */
}

/* =====================================================
   🚫 GLOBAL TAŞMA KORUMASI
===================================================== */

* {
  max-width: 100vw;
}