body {
       margin: 0;
       font-family: sans-serif;
       background: #f8f9fa;
   }

   #panorama {
       position: absolute;
       top: 0;
       left: 0;
       width: 100vw;
       height: 100vh;
       z-index: 1;
   }

   #columns-input {
       width: 150px;
   }

   #rows-input {
       width: 126px;
   }

   .center {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       z-index: 10;
   }

   .button-group {
       display: flex;
       gap: 20px;
       flex-direction: column;
   }

   .mode-button {
       padding: 15px 30px;
       font-size: 18px;
       border: none;
       border-radius: 10px;
       background: #007bff;
       color: white;
       cursor: pointer;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       transition: background 0.3s;
   }

   .mode-button:hover {
       background: #0056b3;
   }

   .upload-card {
       background: white;
       border: 1px solid #ddd;
       padding: 20px;
       border-radius: 12px;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       text-align: center;
       transition: transform 0.3s ease;
       width: 320px;
   }

   .upload-card h3 {
       margin-bottom: 10px;
       font-size: 18px;
       color: #333;
   }

   .upload-button {
       display: inline-block;
       margin-top: 10px;
       padding: 10px 20px;
       background-color: #0078d7;
       color: white;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       font-weight: bold;
       text-align: center;
       transition: background 0.2s ease;
   }

   .upload-button:hover {
       background-color: #005fa3;
   }

   .custom-file {
       background-color: #007bff;
       color: white;
       padding: 10px 18px;
       border-radius: 8px;
       cursor: pointer;
       display: inline-block;
       transition: background-color 0.3s;
       font-size: 16px;
   }

   .custom-file:hover {
       background-color: #0056b3;
   }

   input[type="file"] {
       display: none;
   }

   #file-info {
       margin-top: 12px;
       font-size: 14px;
       color: #555;
   }

   #seatmap {
       position: absolute;
       top: 80px;
       right: 20px;
       width: 280px;
       height: 80vh;
       background-color: rgba(240, 240, 240, 0.95);
       overflow-y: auto;
       padding: 10px;
       display: none;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
       z-index: 10;
   }

   .seat-row {
       margin-bottom: 6px;
       display: flex;
       justify-content: space-between;
   }

   .seat-button {
       width: 35px;
       padding: 5px;
       background: #ccc;
       border: none;
       cursor: pointer;
       text-align: center;
       border-radius: 4px;
   }

   .seat-button:hover {
       background: #bbb;
   }

   #upload-wrapper {
       position: absolute;
       z-index: 1000;
       background: rgba(255, 255, 255, 0.9);
       border-radius: 12px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
       transition: all 0.3s ease;
   }

   #upload-wrapper.center {
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }

   #upload-wrapper.bottom-left {
       bottom: 20px;
       left: 20px;
       top: auto;
       transform: scale(0.6);
       transform-origin: bottom left;
   }

   .upload-button[onclick="goHome()"]:hover {
       background-color: #c82333 !important;
   }


   #mode-selection h2 {
       margin-bottom: 20px;
       color: #333;
       font-size: 24px;
   }

   .button-group2 {
       position: absolute;
       top: 20px;
       right: 20px;
       display: flex;
       gap: 20px;
       /* Butonlar arası boşluk */
       z-index: 15;
   }

   #seatmap-toggle,
   #settings-button {
       padding: 10px 15px;
       border: none;
       border-radius: 8px;
       cursor: pointer;
       color: white;
       display: none;
       /* Açmak için JS’ten değiştirilir */
   }

   #seatmap-toggle {
       background: #007bff;
   }

   #seatmap-toggle:hover {
       background: #0056b3;
   }

   #settings-button {
       background: #28a745;
   }

   #settings-button:hover {
       background: #218838;
   }


   .settings-modal {
       position: fixed;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       background: white;
       padding: 30px;
       border-radius: 10px;
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
       z-index: 1000;
       display: none;
   }

   .settings-modal input {
       margin: 10px;
       padding: 5px;
       border: 1px solid #ddd;
       border-radius: 4px;
   }

   .footer {
       position: fixed;
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%);
       color: #666;
       font-size: 12px;
       z-index: 5;
   }