/* Hafif Bavul — hafifbavul.com · tek stil dosyası, bağımlılık yok, mobil öncelikli */

:root {
  color-scheme: light;
  --zemin:      #f2f5f8;
  --kart:       #ffffff;
  --kart-2:     #eef2f7;
  --murekkep:   #0c1a2b;
  --murekkep-2: #46586d;
  --murekkep-3: #7a8a9c;
  --cizgi:      #dde5ed;
  --cizgi-2:    #c2cedb;
  --lacivert:   #0b2340;
  --lacivert-2: #143a63;
  --vurgu:      #1668c4;
  --vurgu-koyu: #0f4e97;
  --vurgu-yaz:  #ffffff;
  --vurgu-soft: #e7f0fb;
  --fiyat:      #0c1a2b;
  --firsat:     #0a7d3c;
  --firsat-bg:  #e8f6ee;
  --uyari:      #8a4b00;
  --uyari-bg:   #fdf2e2;
  --uyari-cizgi:#e9cca4;
  --golge:      0 1px 2px rgba(12,26,43,.06), 0 8px 24px -16px rgba(12,26,43,.25);
  --golge-kart: 0 2px 4px rgba(12,26,43,.05), 0 20px 40px -28px rgba(12,26,43,.4);
  --r: 12px;
  --f-bas: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-govde: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --zemin:#0b1017; --kart:#141c26; --kart-2:#1c2531;
    --murekkep:#e9eef4; --murekkep-2:#a6b4c4; --murekkep-3:#758496;
    --cizgi:#232e3b; --cizgi-2:#374556;
    --lacivert:#0a121d; --vurgu:#5aa5f0; --vurgu-koyu:#3d8ada;
    --vurgu-yaz:#08111c; --vurgu-soft:#152435; --fiyat:#e9eef4;
    --firsat:#4bcc82; --firsat-bg:#10251a;
    --uyari:#f0b866; --uyari-bg:#2a2013; --uyari-cizgi:#4d3a1c;
    --golge:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
    --golge-kart:0 2px 4px rgba(0,0,0,.5), 0 20px 40px -28px rgba(0,0,0,1);
  }
}
[data-theme="dark"] {
  color-scheme: dark;
  --zemin:#0b1017; --kart:#141c26; --kart-2:#1c2531;
  --murekkep:#e9eef4; --murekkep-2:#a6b4c4; --murekkep-3:#758496;
  --cizgi:#232e3b; --cizgi-2:#374556;
  --lacivert:#0a121d; --vurgu:#5aa5f0; --vurgu-koyu:#3d8ada;
  --vurgu-yaz:#08111c; --vurgu-soft:#152435; --fiyat:#e9eef4;
  --firsat:#4bcc82; --firsat-bg:#10251a;
  --uyari:#f0b866; --uyari-bg:#2a2013; --uyari-cizgi:#4d3a1c;
  --golge:0 1px 2px rgba(0,0,0,.5), 0 8px 24px -16px rgba(0,0,0,.9);
  --golge-kart:0 2px 4px rgba(0,0,0,.5), 0 20px 40px -28px rgba(0,0,0,1);
}

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

/* ⚠️ BU KURAL ZORUNLU — kaldırma.
   Tarayıcının varsayılan [hidden]{display:none} kuralı bir ÖZNİTELİK
   seçicisidir; .firsat{display:grid} gibi bir SINIF seçicisi onu ezer.
   O yüzden JS bir kartı el.hidden=true yapsa bile kart ekranda kalır ve
   hiçbir filtre çalışmaz (kalkış, bütçe, gidiş günü, bölge — hepsi).
   Yaşandı: 2026-09-08, tüm filtreler sessizce bozuktu. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--zemin); color: var(--murekkep);
  font: 16px/1.55 var(--f-govde);
  -webkit-font-smoothing: antialiased;
}
.sar { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
a { color: var(--vurgu); }
h1, h2, h3, .marka, .f-fiyat, .rakam b { font-family: var(--f-bas); }

/* ================= üst çubuk ================= */
.ust { background: var(--lacivert); border-bottom: 1px solid rgba(255,255,255,.08); }
.ust .sar { display: flex; align-items: center; gap: 18px; height: 62px; }
.marka {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 18px; letter-spacing: -.03em;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.marka svg { flex: none; }
.marka i {
  font-style: normal; font-weight: 500; font-size: 12px; letter-spacing: .01em;
  color: rgba(255,255,255,.5); border-left: 1px solid rgba(255,255,255,.2);
  padding-left: 9px; margin-left: 1px;
}
@media (max-width: 620px) { .marka i { display: none; } }
.ustnav { margin-left: auto; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ustnav::-webkit-scrollbar { display: none; }
.ustnav a {
  padding: 7px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.72); text-decoration: none; white-space: nowrap;
}
.ustnav a:hover { background: rgba(255,255,255,.1); color: #fff; }

/* ================= kapak ================= */
.kapak { background: var(--lacivert); color: #fff; padding: 40px 0 84px; position: relative; }
.kapak::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 82% 0%, rgba(22,104,196,.42), transparent 62%);
  pointer-events: none;
}
.kapak .sar { position: relative; z-index: 1; }
.kapak h1 {
  margin: 0 0 10px; font-size: clamp(27px, 4.6vw, 43px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.032em; text-wrap: balance;
}
.kapak p { margin: 0; color: rgba(255,255,255,.78); max-width: 60ch; font-size: 17px; }
.kapak.dar { padding-bottom: 34px; }

/* Fotoğraflı şehir kapağı. Karartma katmanı şart — açık gökyüzünde beyaz
   başlık okunmuyor (bot projesinde ölçülmüş tuzak). */
.kapak.fotolu {
  background-size: cover; background-position: center 42%;
  padding-top: 52px; padding-bottom: 44px;
}
.kapak.fotolu::after {
  background:
    linear-gradient(180deg, rgba(8,20,35,.86) 0%, rgba(8,20,35,.5) 45%,
                    rgba(8,20,35,.88) 100%),
    radial-gradient(120% 90% at 82% 0%, rgba(22,104,196,.28), transparent 62%);
}
.kapak.fotolu h1 { text-shadow: 0 2px 14px rgba(0,0,0,.5); }

.guven { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 20px 0 0; }
.guven span {
  font-size: 13.5px; color: rgba(255,255,255,.72);
  display: flex; align-items: center; gap: 7px;
}
.guven b { color: #fff; font-weight: 600; }

.rakamlar { display: flex; flex-wrap: wrap; gap: 26px; margin: 22px 0 0; }
.rakam b {
  display: block; font-size: 25px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: #fff;
}
.rakam span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}
.kirinti { font-size: 13.5px; color: rgba(255,255,255,.6); margin: 0 0 12px; }
.kirinti a { color: rgba(255,255,255,.78); }

/* ================= arama paneli ================= */
.panel {
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: 16px; box-shadow: var(--golge-kart);
  margin-top: -60px; position: relative; z-index: 5; overflow: hidden;
}
.panel.gomulu { margin-top: 18px; box-shadow: var(--golge); }

.sekmeler { display: flex; border-bottom: 1px solid var(--cizgi); background: var(--kart-2); }
.sekme {
  font: inherit; font-family: var(--f-bas); font-size: 14.5px; font-weight: 700;
  padding: 14px 20px; border: 0; background: transparent; cursor: pointer;
  color: var(--murekkep-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
  display: flex; align-items: center; gap: 8px;
}
.sekme[aria-selected="true"] {
  color: var(--vurgu); border-bottom-color: var(--vurgu); background: var(--kart);
}
.sekme:focus-visible { outline: 2px solid var(--vurgu); outline-offset: -2px; }

.pano { padding: 18px 20px 20px; }
.alanlar {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.alan { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.alan > label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--murekkep-3);
}
.alan select, .alan input {
  font: inherit; font-size: 15px; color: var(--murekkep);
  background: var(--kart); border: 1px solid var(--cizgi-2);
  border-radius: 9px; padding: 10px 12px; width: 100%; min-height: 44px;
  appearance: none;
}
.alan select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237a8a9c' stroke-width='2' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.alan select:focus, .alan input:focus {
  outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-soft);
}
.onay {
  display: flex; align-items: center; gap: 9px; font-size: 14.5px;
  color: var(--murekkep-2); cursor: pointer; user-select: none;
  min-height: 44px; padding-top: 16px;
}
.onay input { width: 18px; height: 18px; min-height: 0; accent-color: var(--vurgu); }

.panel-alt {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--cizgi); background: var(--kart-2);
}
.sonuc-bilgi { font-size: 14.5px; color: var(--murekkep-2); }
.sonuc-bilgi b { color: var(--murekkep); font-weight: 700; }
.panel-alt .sag { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }

.ara-btn {
  font: inherit; font-family: var(--f-bas); font-weight: 700; font-size: 15px;
  background: var(--vurgu); color: var(--vurgu-yaz); border: 0;
  border-radius: 9px; padding: 12px 22px; min-height: 46px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.ara-btn:hover { background: var(--vurgu-koyu); color: var(--vurgu-yaz); }
.ara-btn.ikincil { background: transparent; color: var(--vurgu); border: 1px solid var(--cizgi-2); }
.ara-btn.ikincil:hover { border-color: var(--vurgu); background: var(--vurgu-soft); }

/* ================= sonuç listesi ================= */
.liste { display: grid; gap: 11px; padding: 22px 0 40px; }
.firsat {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 15px 17px; display: grid; grid-template-columns: 1fr auto;
  gap: 6px 18px; align-items: start;
}
.firsat:hover { border-color: var(--cizgi-2); box-shadow: var(--golge); }
.f-bas { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.f-sehir { font-family: var(--f-bas); font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.f-sehir a { color: inherit; text-decoration: none; }
.f-sehir a:hover { color: var(--vurgu); }
.f-fiyat {
  grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font-size: 27px; font-weight: 800; color: var(--fiyat);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.f-fiyat small { display: block; font-size: 11px; font-weight: 600; color: var(--murekkep-3); letter-spacing: .04em; }
.f-detay {
  grid-column: 1; font-size: 14px; color: var(--murekkep-2);
  display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.f-detay b { font-weight: 600; color: var(--murekkep); font-variant-numeric: tabular-nums; }
.f-detay .hava { display: inline-flex; align-items: center; gap: 6px; }
.f-detay .hava img { border-radius: 4px; flex: none; background: #fff; }
.f-link { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Otel: üçüncü buton değil, uçuştan sonraki adım. Kendi satırında,
   tıklanabilir bütün bir şerit olarak duruyor. */
.f-otel {
  grid-column: 1 / -1; margin-top: 9px;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px; border-radius: 9px; text-decoration: none;
  background: var(--vurgu-soft); border: 1px solid transparent;
  color: var(--murekkep); font-size: 14.5px; min-height: 46px;
}
.f-otel:hover { border-color: var(--vurgu); color: var(--murekkep); }
.f-otel .ikon { font-size: 18px; line-height: 1; }
.f-otel b {
  display: block; font-weight: 600; font-size: 12.5px;
  color: var(--murekkep-2); font-variant-numeric: tabular-nums;
}
.f-otel .ok { margin-left: auto; color: var(--vurgu); font-weight: 700; }

.btn {
  font-size: 14px; font-weight: 600; text-decoration: none;
  padding: 9px 15px; border-radius: 8px; border: 1px solid var(--cizgi-2);
  color: var(--murekkep-2); background: var(--kart);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn:hover { border-color: var(--vurgu); color: var(--vurgu); }
.btn.bas { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-yaz); }
.btn.bas:hover { background: var(--vurgu-koyu); color: var(--vurgu-yaz); }

/* ================= rozet / uyarı ================= */
.rozet {
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  border: 1px solid; white-space: nowrap; letter-spacing: .01em;
}
.rozet.iyi { color: var(--firsat); background: var(--firsat-bg); border-color: transparent; }
.rozet.uyari { color: var(--uyari); background: var(--uyari-bg); border-color: var(--uyari-cizgi); }
.rozet.bilgi { color: var(--murekkep-3); background: var(--kart-2); border-color: var(--cizgi); }
.uyari-kutu {
  grid-column: 1 / -1; margin-top: 8px; font-size: 13.5px; line-height: 1.45;
  color: var(--uyari); background: var(--uyari-bg); border: 1px solid var(--uyari-cizgi);
  border-radius: 8px; padding: 8px 12px;
}

/* ================= ızgara / bölüm ================= */
.izgara {
  display: grid; gap: 11px; padding-bottom: 40px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.kutu {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 14px 16px; text-decoration: none; color: inherit; display: block;
}
.kutu:hover { border-color: var(--vurgu); box-shadow: var(--golge); }
.kutu b { display: block; font-family: var(--f-bas); font-size: 16px; font-weight: 700; letter-spacing: -.015em; }
.kutu span { font-size: 13.5px; color: var(--murekkep-3); }
.kutu em { font-style: normal; float: right; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; font-family: var(--f-bas); }

/* ================= bölge paneli (veri olmayan bölgeler) ================= */
.bolge-panel { padding: 22px 0 8px; }
.sehirizgara {
  display: grid; gap: 12px; padding-bottom: 10px;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.sehirkutu {
  display: block; text-decoration: none; color: inherit;
  background: var(--kart); border: 1px solid var(--cizgi);
  border-radius: var(--r); overflow: hidden;
}
.sehirkutu:hover { border-color: var(--vurgu); box-shadow: var(--golge); }
.sehirkutu img, .sehirkutu .bosgorsel {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: linear-gradient(135deg, var(--lacivert), var(--vurgu));
}
.sehirkutu b {
  display: block; font-family: var(--f-bas); font-size: 16px; font-weight: 700;
  letter-spacing: -.015em; padding: 11px 14px 0;
}
.sehirkutu span {
  display: block; font-size: 13px; color: var(--vurgu);
  font-weight: 600; padding: 2px 14px 12px;
}

h2.bolum {
  font-size: 21px; font-weight: 800; letter-spacing: -.025em; margin: 34px 0 12px;
  padding-top: 24px; border-top: 1px solid var(--cizgi);
}
.aciklama { color: var(--murekkep-2); margin: -4px 0 16px; max-width: 68ch; font-size: 15.5px; }
.bos {
  padding: 34px 24px; text-align: center; color: var(--murekkep-2);
  background: var(--kart); border: 1px dashed var(--cizgi-2); border-radius: var(--r);
}
.bos b { display: block; font-family: var(--f-bas); font-size: 17px; color: var(--murekkep); margin-bottom: 6px; }
.bos .ara-btn { margin-top: 14px; }

/* ========== mobil yapışkan alt çubuk (yalnız şehir sayfası) ========== */
.serit { display: none; }
@media (max-width: 760px) {
  .serit {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--kart); border-top: 1px solid var(--cizgi);
    box-shadow: 0 -4px 20px -10px rgba(12,26,43,.35);
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
  }
  .serit-ic { display: flex; align-items: center; gap: 9px; max-width: 640px; margin: 0 auto; }
  .serit-fiyat { line-height: 1.15; flex: none; }
  .serit-fiyat b {
    display: block; font-family: var(--f-bas); font-size: 19px; font-weight: 800;
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  }
  .serit-fiyat span { font-size: 10.5px; color: var(--murekkep-3); }
  .serit .btn { flex: 1; min-height: 42px; margin: 0; }
  .serit .btn.bas { flex: 1.4; }
  /* çubuk içeriği kapatmasın */
  .alt { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ================= metin sayfaları ================= */
.metin { padding-bottom: 40px; }
.metin h2.bolum:first-of-type { border-top: 0; padding-top: 18px; }
.metin .aciklama { font-size: 16px; line-height: 1.7; max-width: 68ch; margin: 0 0 14px; }
.metin .aciklama b { color: var(--murekkep); }

/* ================= alt ================= */
.alt {
  margin-top: 44px; background: var(--lacivert); color: rgba(255,255,255,.62);
  padding: 30px 0 36px; font-size: 13.5px; line-height: 1.65;
}
.alt .sar { display: grid; gap: 14px; }
.alt a { color: rgba(255,255,255,.85); }
.alt .baglar { display: flex; flex-wrap: wrap; gap: 16px; }
.incepunto {
  font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.42);
  max-width: 82ch;
}

/* ================= MOBİL ================= */
@media (max-width: 760px) {
  .sar { padding: 0 14px; }
  .ust .sar { height: 56px; gap: 12px; }
  .marka { font-size: 16.5px; }
  .ustnav a { padding: 6px 10px; font-size: 13.5px; }

  .kapak { padding: 26px 0 70px; }
  .kapak p { font-size: 15.5px; }
  .rakamlar { gap: 18px; margin-top: 18px; }
  .rakam b { font-size: 21px; }
  .guven { gap: 6px 16px; }
  .guven span { font-size: 12.5px; }

  .panel { margin-top: -52px; border-radius: 14px; }
  .sekme { padding: 13px 15px; font-size: 14px; flex: 1; justify-content: center; }
  .pano { padding: 15px 15px 17px; }
  .alanlar { grid-template-columns: 1fr 1fr; gap: 10px; }
  .alan.genis { grid-column: 1 / -1; }
  .onay { padding-top: 4px; }
  .panel-alt { padding: 13px 15px; }
  .panel-alt .sag { margin-left: 0; width: 100%; }
  .ara-btn { flex: 1; justify-content: center; }

  .firsat { padding: 14px; gap: 5px 12px; }
  .f-sehir { font-size: 17.5px; }
  .f-fiyat { font-size: 24px; }
  .f-detay { font-size: 13.5px; gap: 3px 10px; }
  .f-link { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .btn { min-height: 44px; text-align: center; line-height: 1.25; }
  .btn.bas { grid-column: 1 / -1; }
  .f-otel { padding: 10px 12px; font-size: 14px; }
  .f-fiyat small { font-size: 10.5px; }

  .izgara { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 9px; }
  .sehirizgara { grid-template-columns: 1fr 1fr; gap: 9px; }
  .sehirkutu b { font-size: 15px; padding: 9px 11px 0; }
  .sehirkutu span { font-size: 12.5px; padding: 2px 11px 10px; }
  .kapak.fotolu { padding-top: 34px; padding-bottom: 34px; }
  h2.bolum { font-size: 18.5px; margin: 28px 0 10px; }
  .alt { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
}

@media (max-width: 390px) {
  .f-fiyat { font-size: 22px; }
  .f-link { grid-template-columns: 1fr; }
  .izgara { grid-template-columns: 1fr 1fr; }
  .alanlar { grid-template-columns: 1fr; }
}

@media (min-width: 1180px) {
  .liste { grid-template-columns: 1fr 1fr; align-content: start; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }