/* ========== RESET ========== */
* { margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif; }
body { background:#f8f9fa; color:#333; }

/* Genel gizle (UYARI: seat-map-row için override aşağıda) */
.hidden { display:none !important; }

/* ========== HEADER ========== */
.header {
  display:flex; justify-content:space-between; align-items:center;
  padding:15px 50px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.1);
  position:sticky; top:0; z-index:100;
}
.logo img { height:60px; }
.nav-links ul { list-style:none; display:flex; gap:25px; }
.nav-links a { text-decoration:none; color:#333; font-weight:bold; transition:color .3s; }
.nav-links a:hover { color:#c62828; }
.hamburger-menu { display:none; font-size:30px; cursor:pointer; color:#333; }

/* ========== HERO ========== */
.hero {
  background:url("images5.JPG") no-repeat center/cover;
  height:85vh; display:flex; align-items:center; justify-content:right;
  text-align:center; position:relative; padding:50px; margin-bottom:30px;
}
.overlay {
  background:rgba(0,0,0,.55); padding:40px; border-radius:12px; color:#fff;
  max-width:700px; width:100%;
}
.overlay h1 { font-size:48px; margin-bottom:10px; }
.overlay p { font-size:20px; margin-bottom:25px; }

/* ========== TICKET FORM ========== */
.ticket-form { display:flex; flex-wrap:wrap; gap:15px; justify-content:center; align-items:flex-end; }
.form-group { display:flex; flex-direction:column; flex:1 1 200px; }
.form-group label { font-size:.9rem; font-weight:bold; color:#fff; margin-bottom:5px; text-align:left; }
.ticket-form input {
  padding:12px; border:none; border-radius:6px; font-size:16px; height:47px;
}
.ticket-form button {
  background:#c62828; color:#fff; padding:12px 25px; font-size:16px;
  border:none; border-radius:6px; cursor:pointer; transition:.3s; height:47px;
}
.ticket-form button:hover { background:#a61414; }

/* ========== SERVICE CARDS ========== */
.service-cards { padding:40px 20px; text-align:center; background:#f0f2f5; }
.service-cards h2 { font-size:2.5em; color:#c62828; margin-bottom:40px; }
.cards-container { display:flex; justify-content:center; flex-wrap:wrap; gap:30px; }
.card {
  background:#fff; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.1);
  padding:30px; width:250px; transition:transform .3s ease-in-out;
}
.card:hover { transform:translateY(-10px); }
.card i { font-size:50px; color:#c62828; margin-bottom:15px; }
.card h3 { font-size:1.2em; color:#333; margin-bottom:10px; }
.card p { font-size:.9em; color:#666; }

/* ========== FOOTER ========== */
.footer { text-align:center; background:#222; color:#fff; padding:20px; margin-top:30px; }

/* ========== WHATSAPP BTN ========== */
.whatsapp-btn {
  position:fixed; bottom:25px; right:25px; width:70px; height:70px; background:#25D366;
  color:#fff; border-radius:50%; display:flex; justify-content:center; align-items:center;
  font-size:35px; box-shadow:0 4px 8px rgba(0,0,0,.2); z-index:1000; transition:transform .3s; text-decoration:none;
}
.whatsapp-btn:hover { transform:scale(1.1); }

/* ========== SOCIAL MEDIA PRO ========== */
.social-media-pro { padding:80px 20px; background:#f0f2f5; text-align:center; }
.pro-heading h2 { font-size:2.5em; color:#333; margin-bottom:10px; }
.pro-heading p { font-size:1.1em; color:#666; margin-bottom:50px; max-width:700px; margin-inline:auto; }
.pro-cards-container { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.pro-card {
  background:#fff; border-radius:12px; padding:30px; box-shadow:0 5px 20px rgba(0,0,0,.1);
  width:300px; text-align:center; text-decoration:none; transition:.3s; position:relative; overflow:hidden;
}
.pro-card:hover { transform:translateY(-15px); box-shadow:0 15px 30px rgba(0,0,0,.2); }
.pro-card::before {
  content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; z-index:0;
}
.pro-card:hover::before { opacity:1; }
.pro-card.youtube::before { background:#F00; }
.pro-card.instagram::before { background:#E4405F; }
.pro-card.facebook::before { background:#1877F2; }
.pro-card i, .pro-card h3, .pro-card p { position:relative; z-index:1; transition:color .3s; }
.pro-card i { font-size:60px; margin-bottom:15px; }
.pro-card h3 { font-size:1.5em; margin-bottom:10px; }
.pro-card p { font-size:.95em; line-height:1.4; }
.pro-card.youtube i { color:#F00; } .pro-card.instagram i { color:#E4405F; } .pro-card.facebook i { color:#1877F2; }
.pro-card h3 { color:#333; } .pro-card p { color:#333; }
.pro-card:hover i, .pro-card:hover h3 { color:#fff; }

/* ========== RESULTS TABLE ========== */
.results-table-container { width:100%; overflow-x:auto; }
.results-table {
  width:100%; border-collapse:collapse; margin-top:40px; font-size:14px; background:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,.1); border-radius:8px; overflow:hidden;
}
.results-table thead tr { background:#f1f1f1; color:#333; text-align:left; }
.results-table th, .results-table td { padding:12px 0; border-bottom:1px solid #ddd; text-align:center; align-items:center; }
.results-table tbody tr:hover { background:#f9f9f9; }
.table-time-info strong { font-size:18px; color:#000; }
.table-bus-info strong { font-size:14px; color:#555; }
.table-price strong { font-size:20px; color:#ff6600; }
.buy-btn {
  display:inline-block; padding:8px 16px; background:#c62828; color:#fff; border-radius:5px;
  text-decoration:none; transition:background .3s; font-size:18px;
}
.buy-btn:hover { background:#a61414; }
.results-table-container h3 { text-align:center; font-size:24px; font-weight:bold; color:#fff; background:#222; padding:15px; margin:20px; }

/* ========== SEAT MAP (CRITICAL PART) ========== */
/* Satır başlangıçta gizli; görünür olduğunda !important ile gizlemeyi ezer */
.seat-map-row { background:#f9f9f9; transition:all .3s ease; display:none; }
.seat-map-row.visible { display:table-row !important; }

/* Konteyner */
.seat-map-container {
  display:flex; flex-direction:column; align-items:center; gap:15px; padding:15px; width:100%;
}

/* Otobüs görseli ve koltuklar için sarmalayıcı */
.seat-map-wrapper {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px;
    align-items: start;
    width: 100%;
  }

.bus-front-img {
    display: block;
    width: auto;       /* masaüstü boyutu */
    height: 300px;
    transform-origin: center center;
    transition: transform .22s ease, width .22s ease;
  }

.seat-map-grid {
    --seat-size: 50px;
    --cols: 16; /* fallback */
    --rows: 5;  /* fallback */
    display: grid;
    grid-template-columns: repeat(var(--cols), var(--seat-size));
    grid-template-rows: repeat(var(--rows), var(--seat-size));
    gap: 3px;
    justify-content: start; /* masaüstünde soldan başlasın */
    position: relative; /* overlap'ı engelle */
  }


/* Koltuk Stilleri */
.seat {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    font-weight: bold;
    color: #fff;
}


/* Koltuk Renkleri */
.seat.empty {
    background-color: #f5f5f5; 
    color:#000;/* white smoke */
}
.seat.empty:hover {background-color: #00bf00; cursor: pointer; }

.seat.female {
    background-color: #FF69B4; /* Pembe */
   position: relative;
    cursor: pointer;
}
.seat.female:after {
    content: "Sadece Kadın Yolculara Uygun";
    position: absolute;
    bottom: 110%; /* Koltuğun biraz yukarısında göster */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: #FF69B4;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 10;
}

.seat.female:hover::after {
    visibility: visible;
    opacity: 1;
}


.seat.male {
    background-color: #2196F3; /* Mavi */
   position: relative;
    cursor: pointer;
}

.seat.male:after {
    content: "Sadece Erkek Yolculara Uygun";
    position: absolute;
    bottom: 110%; /* Koltuğun biraz yukarısında göster */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background-color: #2196F3;
    color: #fff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 10;
}

.seat.male:hover::after {
    visibility: visible;
    opacity: 1;
}
.seat.full {
    background-color: #666666; /* dark gray */
    cursor: not-allowed;
}

/* Lejant */
.seat-legend {
    display: flex;
    gap:15px;
    margin-top: 15px;
}


.legend-item {
    display: flex;
    align-items: center;
    gap: 15px;
}
.legend-item .seat-sample {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border-color:#f5f5f5;
}
.seat-sample.empty{background:#f5f5f5; color:#000;}
.seat-sample.female{background:#FF69B4;}
.seat-sample.male{background:#2196F3;}
.seat-sample.full{background:#666666;}

/* Görsel (JS içinden ekleniyorsa masaüstünde çakışmasın diye gizle) */
.bus-image { display:none; }


/* ========== MOBILE ========== */
@media (max-width:768px) {
  main {
    padding-top: 60px; /* Başlığın yüksekliği kadar boşluk bırakır */
  }
  .social-media-pro { padding:50px 15px; }
  .pro-card { width:100%; }
  .header { flex-direction:column; align-items:flex-start; padding:15px 20px; position:fixed; top:0; left:0; width:100%; z*index:1000;}
  .logo img { height:40px; }
  .hamburger-menu { display:block; position:absolute; top:25px; right:20px; }
  .nav-links { display:none; position:absolute; top:70px; right:0; width:70%; background:#fff;
               box-shadow:0 8px 16px rgba(0,0,0,.1); z-index:99; }
  .nav-links.active { display:block; }
  .nav-links ul { flex-direction:column; text-align:center; gap:0; font-size:18px; }
  .nav-links li { padding:15px 0; border-bottom:1px solid #eee; }
  .hero { height:auto; padding:40px 20px; align-items:center; justify-content:center; }
  .overlay { padding:25px; max-width:100%; }
  .overlay h1 { font-size:32px; } .overlay p { font-size:16px; }
  .ticket-form { display:block; gap:0; }
  .form-group { width:100% !important; margin-bottom:10px; }
  .ticket-form input, .ticket-form button { width:100% !important; height:47px; }
  .cards-container { flex-direction:column; align-items:center; }
  .card { width:90%; }
  .whatsapp-btn { width:50px; height:50px; font-size:25px; bottom:15px; right:15px; }
  .results-table { font-size:14px; }
  .results-table th, .results-table td { padding:8px; }
  .table-time-info strong, .table-price strong { font-size:14px; }
  .buy-btn { padding:6px 12px; font-size:12px; }
  .results-table-container { overflow-x:auto; }
  .results-table-container h3 { font-size:18px; }

.seat-map-wrapper {
      grid-template-columns: 1fr;    /* tek sütun */
      grid-template-rows: auto 1fr; /* önce görsel, sonra grid */
      justify-items: center;
      gap: 12px;
    }
    .bus-front image {
      transform: rotate(90deg); /* 90° sağa döndür */
      width: 100px;
    }
    .seat-map-grid {
      --seat-size: 42px;        /* mobilde koltuk biraz küçülsün */
      justify-content: center;
    }
}

/* ========== DESKTOP ========== */
@media (min-width:769px) {
  .seat-map-container {
    flex-direction:row; justify-content:center; align-items:flex-start;
    max-width:900px; min-height:300px; position:relative; margin-inline:auto;
  }
}