/*=========================================================
 EL-İBRÎZ
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{

    width:100%;
    height:100%;
}

body{

    background:#e8dfcf;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    font-family:Georgia,serif;
}

.sav {
    font-size: 1.3em; /* veya dilediğiniz oran */
}

/*=========================================================
 KAPAK KAPSAYICISI (Kaymayı önleyen yapı)
=========================================================*/
#cover {
    position: relative;
    
    /* Genişliği ekrana göre ayarla, ancak maksimum yüksekliğe göre sınırlandır */
    width: 95vw;
    max-width: calc(96vh * (991 / 1403));
    
    /* En/boy oranını kesin olarak kilitle */
    aspect-ratio: 991 / 1403;
    
    margin: 0 auto; /* Sayfanın tam ortasında durması için */
}

/*=========================================================
 RESİM
=========================================================*/
#kapak {
    width: 100%;
    height: 100%;
    display: block;
    /* Kapsayıcı zaten oranlı olduğu için object-fit kuralına gerek kalmadı */
}

/*=========================================================
 GÖRÜNMEZ LİNKLER
=========================================================*/

.hotspot{

    position:absolute;

    display:block;

    border-radius:12px;

    background:rgba(255,255,255,0);

    transition:

        background .25s,

        transform .25s,

        box-shadow .25s;

}


/*=========================================================
 HOVER
=========================================================*/

.hotspot:hover{

    background:rgba(255,235,170,.12);

    box-shadow:

        inset 0 0 18px rgba(255,240,170,.70),

        0 0 20px rgba(255,220,120,.25);

}


/*=========================================================
 TIKLAMA
=========================================================*/

.hotspot{

    position:absolute;

    left:23%;

    width:54%;

    height:7%;

    display:block;

    z-index:100;

    border-radius:12px;

    background:transparent;

    cursor:pointer;

    transition:
        background .20s,
        box-shadow .20s;

}

/*=========================================================
 KOORDİNATLAR
 (991 × 1403 ölçüsüne göre)
=========================================================*/


/**************

 KONULAR

**************/

.konular{

    top:73%;

 }



/*=========================================
  EL KUTUSU
=========================================*/

#hand-box{

    position:absolute;

    right:5.5%;

    top:67.5%;

    width:72px;

    height:72px;

    pointer-events:none;

    z-index:60;

}

#hand{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:auto;

    z-index:2;

    filter:drop-shadow(2px 3px 5px rgba(0,0,0,.25));

}

/*=========================================================
 HALKA ANİMASYONU (Görseldeki elin üzerine hizalama)
=========================================================*/
#hand-ring {
    position: absolute;
    
    /* Bu yüzdelik değerleri görseldeki işaret parmağının tam ucuna denk 
       gelecek şekilde kendi ekranınızda +/- 0.5% oynayarak hassaslaştırabilirsiniz */
    left: 82.5%; 
    top: 76.7%;  
    
    /* Halkanın boyutları piksel olarak sabit bırakılır */
    width: 25px;
    height: 25px;
    
    /* Genişlik ve yüksekliğin tam yarısı kadar negatif margin vererek 
       verdiğiniz % koordinatının halkanın sol üst köşesi değil, tam MERKEZİ olmasını sağlarız */
    margin-left: -15px; 
    margin-top: -15px;
    
    border: 3px solid #d00000;
    border-radius: 50%;
    animation: ring 1.2s infinite;
    z-index: 10;
    pointer-events: none; /* Animasyonun altındaki butonların tıklanmasını engellememesi için */
}

@keyframes ring{

    0%{

        transform:scale(.70);

        opacity:1;

    }

    100%{

        transform:scale(1.80);

        opacity:0;

    }

}