<style>
* { box-sizing:border-box; margin:0; padding:0; font-family:Arial; }
body { display:flex; flex-direction:column; height:100vh; overflow:hidden; 

font-size 18px
}

/* HEADER */
header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 20px;
  background:#e0e0e0;
  gap:10px;
}
.logo {
  border:3px solid black;
  padding:10px 25px;
  border-radius:8px;
  font-weight:bold;
  flex-shrink:0;
  text-align:center;
  color:black;
}
.header-empty {
  flex:1;
  border:2px solid #999;
  height:63px;
  border-radius:5px;
}
 .navbar {
      display: flex;
      justify-content: space-between;
      align-items: center; 
      padding: 1rem;
      color: #2c3e50;
position: sticky;
      top: 0;
      z-index: 1000;  
    }
    .nav-links {
      display: flex;
      gap: 1rem;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      transition: color 0.3s;
    }

    .nav-links a:hover {
      color: #ffd700;
    }

    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }

    .hamburger div {
      width: 25px;
      height: 3px;
      background-color: white;
      margin: 4px 0;
    }

 /* BUTON */

.btn{
padding:6px 12px;
color:white;
text-align:center;
cursor:pointer;
font-size:14px;
border-radius:20px;
width:120px;
transition:0.2s;
}

/* ÇAPRAZ HİZA */

.b1{transform:rotate(-14deg);}
.b2{transform:rotate(14deg);}
.b3{transform:rotate(-14deg);}
.b4{transform:rotate(14deg);}
.b5{transform:rotate(-14deg);}
.b6{transform:rotate(14deg);}
.b7{transform:rotate(-14deg);}

/* RENKLER */

.c1{background:#e74c3c;}
.c2{background:#3498db;}
.c3{background:#27ae60;}
.c4{background:#9b59b6;}
.c5{background:#f39c12;}
.c6{background:#1abc9c;}
.c7{background:#d35400;}

.btn:hover{
transform:scale(1.08);
}


/* Buton alanı */
.tikla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

/* Butonlar */
.tikla button {
  padding: 1rem;
  text-align: center;
  background: #f5f5f5;
  border: 1px solid #bbb;
  border-radius: 10px;
}



/* MAIN */
.main { flex:1; display:flex; overflow:hidden; }
.container { display:flex; width:100%; }

/* SIDEBAR */
.sabit {
  width:41 px;
  flex-shrink:0;
  padding:15px;
  border-right:1px solid #ccc;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sabit button {
  background:none;
  border:none;
  cursor:pointer;
  padding:10px;
  text-align:center;
  font-size:16px;
  border-radius:50%;
  transform:rotate(-15deg);
  transition:all 0.2s ease;
}

.sabit button.active { transform:rotate(0deg); border-radius:8px; }

/* COLORS */
.color0{color:black;}
.color1{color:#e74c3c;}
.color2{color:#3498db;}
.color3{color:#27ae60;}
.color4{color:#9b59b6;}
.color5{color:#f39c12;}
.color6{color:#1abc9c;}
.color7{color:#d35400;}

/* CONTENT */
.icerik {
font-size:22px;
  
  flex:1;
  min-width:0;
  padding:20px;
  overflow-y:auto;
  position:relative;
}

/* AYET */
.ayet {
  direction:rtl;
  white-space:nowrap;
  margin-bottom:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  height:100%;
  font-size:22px;
}

/* GERİ BUTONU (FAB) */
#geriBtn{
  position:absolute;
  bottom:20px;
  right:20px;

  width:55px;
  height:55px;

  border:none;
  border-radius:50%;

  background:#333;
  color:#fff;

  font-size:22px;
  font-weight:bold;

  display:none;
  z-index:50;

  cursor:pointer;

  box-shadow:0 4px 10px rgba(0,0,0,0.3);
  transition:all 0.2s ease;
}

#geriBtn:hover{
  transform:scale(1.1);
}
#geriBtn:active{
  transform:scale(0.95);
}

table{
  width:100%;
  border-collapse:collapse;
}

th,td{
  border:2px solid #ccc;
  padding:10px;
  font-size:20px;
}

th{
  background:#2980b9;
  color:white;
}



/* MOBİL */
@media (max-width:768px){
.metin boyutu {
    font-size: 18px;
  }

 .nav-links {
        display: none;
        flex-direction: column;

        position: absolute;
        top: 60px;
        right: 0;
        width: 200px;
        padding: 1rem;     }

      .nav-links.active {
        display: flex;  }

      .hamburger {
        display: flex;      }     }


  .sabit.hide{
    display:none;  }

  .icerik.full{
    width:100%;  }

  #geriBtn{
    position:fixed;
    right:15px;
    bottom:15px;
    z-index:9999;
  }
}


}

footer { height:50px; background:#ccc; flex-shrink:0; }
</style>
