/* ==========================================================
   DAMLA RENT A CAR — Şanlıurfa kiralık araç ilanları
   İlan listesi düzeni · açık tema
   ========================================================== */


/* ==========================================================
   HAREKET RITMI — sayfadaki butun parilti animasyonlarinin
   ortak tempo ve egrisi.
   ----------------------------------------------------------
   Onceden her parilti kendi suresindeydi (2.9s, 3.2s, 3.4s,
   3.5s, 3.6s, 3.8s, 4s, 4.2s, 4.4s, 4.6s, 4.8s, 5s, 5.4s, 6s)
   ve kimi linear kimi ease-in-out idi; goz her yerde ayri bir
   ritim yakaladigi icin dagink duruyordu. Artik hepsi tek
   tempoda calisir, sadece gecikmeleri farklidir — boylece
   ayni anda parlamazlar ama ayni muzigi calarlar.
   ========================================================== */
:root{
  --ritim-suzulme:4.8s;   /* isik suzulmesi: parla, maviParla, yerIsigi */
  --ritim-yaldiz:4.8s;    /* altin yazi dalgasi: yaldizDalga */
  --ritim-yuzey:9.6s;     /* zemin akisi: maviAkis — iki kat yavas */
  --ritim-giris:.22s;     /* acilis mikro hareketleri */

  /* suzulme, fotograf gecisiyle ayni egriyi kullanir (main.js GIRIS) */
  --egri-suzulme:cubic-bezier(.45,.05,.25,1);
  --egri-salinim:ease-in-out;             /* gidip gelen dongular */
  --egri-giris:cubic-bezier(.22,.61,.36,1);
}
:root{
  --ust:#2C4C7C;          /* üst bar */
  --ust-2:#1668B3;        /* mobil başlık mavisi */
  --sari:#F5C518;         /* marka sarısı */
  --kirmizi:#C8102E;      /* marka kırmızısı */
  --fiyat:#1668B3;        /* fiyat mavisi (sahibinden mobil gibi) */
  --link:#15599C;         /* ilan başlığı linki */
  --link-hover:#0E4076;
  --zemin:#F1F2F4;        /* sayfa zemini */
  --kart:#FFFFFF;
  --cizgi:#DFE2E7;
  --cizgi-2:#EDEFF2;
  --yazi:#1F2329;
  --yazi-2:#5A6270;
  --yazi-3:#8A919E;
  --yesil:#25D366;
  --kap:1440px;
  --gecis:.18s ease;
}

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

body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--zemin);
  color:var(--yazi);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font-family:inherit;font-size:inherit}

.kap{width:100%;max-width:var(--kap);margin:0 auto;padding:0 16px}

/* ==========================================================
   ÜST BAR
   ========================================================== */
.ust{background:var(--ust);position:sticky;top:0;z-index:60}
.ust-ic{display:flex;align-items:center;gap:20px;height:62px}

.logo{flex-shrink:0}
.logo-ad{
  display:inline-block;
  background:var(--sari);
  color:#1A1405;
  font-weight:700;
  font-size:1.12rem;
  letter-spacing:-.02em;
  padding:6px 12px;
  border-radius:4px;
}
.logo-nokta{color:var(--kirmizi)}

/* arama */
.arama{
  flex:1;max-width:520px;
  display:flex;align-items:center;
  background:#fff;border-radius:4px;overflow:hidden;
}
.arama input{
  flex:1;border:0;outline:none;
  padding:9px 13px;font-size:.88rem;color:var(--yazi);
  min-width:0;
}
.arama button{
  border:0;background:transparent;color:var(--yazi-2);
  padding:0 13px;height:36px;cursor:pointer;display:grid;place-items:center;
}
.arama button:hover{color:var(--kirmizi)}

.ust-sag{display:flex;align-items:center;gap:12px;margin-left:auto}
.ust-tel{display:flex;flex-direction:column;line-height:1.25;color:#fff}
.ust-tel-ust{font-size:.68rem;color:var(--yazi-3);letter-spacing:.03em}
.ust-tel strong{font-size:.98rem;font-weight:700}
.ust-tel:hover strong{color:var(--sari)}

.ust-wa{
  background:var(--yesil);color:#06331A;
  font-weight:700;font-size:.85rem;
  padding:9px 17px;border-radius:4px;
  transition:var(--gecis);
}
.ust-wa:hover{filter:brightness(1.08)}

.mobil-menu-btn{
  display:none;background:none;border:0;color:#fff;
  font-size:1.4rem;cursor:pointer;
}

/* ==========================================================
   MOBİL BAŞLIK + SEKME ÇUBUĞU (masaüstünde gizli)
   ========================================================== */
.m-bas,.m-cubuk{display:none}

.m-bas{
  background:var(--ust-2);color:#fff;
  align-items:center;gap:14px;
  padding:11px 14px;
  position:sticky;top:0;z-index:60;
}
.m-menu{
  background:none;border:0;cursor:pointer;padding:0;flex-shrink:0;
  width:28px;display:flex;flex-direction:column;gap:7px;
  position:relative;
}
.m-menu span{display:block;height:2.5px;background:#fff;border-radius:2px}
.m-menu span:nth-child(1){width:17px}   /* üst çizgi kısa */
.m-menu span:nth-child(2){width:28px}   /* alt çizgi uzun */
.m-menu span:nth-child(3){display:none}
/* sağ üstte kırmızı bildirim noktası */
.m-menu::after{
  content:"";position:absolute;left:21px;top:-1px;
  width:7px;height:7px;border-radius:50%;background:#E8393C;
}

.m-bas-yazi{flex:1;display:flex;flex-direction:column;line-height:1.25;min-width:0}
.m-bas-yazi strong{font-size:1.32rem;font-weight:700;letter-spacing:-.01em}
.m-bas-yazi span{font-size:1.02rem;color:#D6E4F2}

.m-ikon{display:flex;align-items:center;gap:16px;flex-shrink:0}
.m-ikon button,.m-ikon a{
  background:none;border:0;color:#fff;padding:0;cursor:pointer;
  display:grid;place-items:center;
}

.m-arama{display:none;background:var(--ust-2);padding:0 14px 12px}
.m-arama input{
  width:100%;padding:11px 14px;
  border:0;border-radius:4px;background:#fff;
  font-size:.95rem;color:var(--yazi);
}
.m-arama input:focus{outline:2px solid rgba(255,255,255,.5)}

.m-cubuk{
  background:#F1F2F4;border-bottom:1px solid var(--cizgi);
  align-items:stretch;
  position:sticky;top:0;z-index:59;
}
.m-cubuk button,.m-cubuk a{
  flex:1;background:none;border:0;
  padding:14px 4px;
  font-size:.92rem;color:var(--yazi);
  cursor:pointer;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:6px;
  position:relative;
}
/* ayraç: tam boy değil, ortada kısa dikey çizgi */
.m-cubuk button::after,.m-cubuk a::after{
  content:"";position:absolute;right:0;top:50%;
  transform:translateY(-50%);
  width:1px;height:19px;background:#C9CCD1;
}
.m-cubuk a:last-child::after{display:none}
.m-rozet{
  background:var(--kirmizi);color:#fff;
  min-width:19px;height:19px;border-radius:50%;
  font-size:.72rem;font-weight:700;
  display:grid;place-items:center;
}
.m-rozet[hidden]{display:none}

/* ==========================================================
   KIRILMA YOLU
   ========================================================== */
.kirilma{background:var(--kart);border-bottom:1px solid var(--cizgi)}
.kirilma-ic{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;height:36px;font-size:.82rem;
}
.kirilma-sol{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kirilma-sag{display:flex;align-items:center;gap:0}
.kirilma-sag a{padding:0 11px;border-right:1px solid var(--cizgi)}
.kirilma-sag a:last-child{border-right:0;padding-right:0}
.kirilma a{color:var(--link)}
.kirilma a:hover{text-decoration:underline}
.kirilma span{color:var(--yazi-3)}
.kirilma strong{color:var(--yazi);font-weight:600}

/* ==========================================================
   GÖVDE
   ========================================================== */
.govde{
  display:grid;grid-template-columns:236px 1fr;
  gap:16px;align-items:start;
  padding-block:16px 40px;
}

/* ---------- SOL PANEL ---------- */
.yan{display:flex;flex-direction:column;gap:10px}
.yan-bas{display:none;align-items:center;justify-content:space-between;padding-bottom:4px}
.yan-bas h2{font-size:1rem;font-weight:700}
.yan-kapat{background:none;border:0;font-size:1.1rem;cursor:pointer;color:var(--yazi-2)}

.kutu{
  background:var(--kart);
  border:1px solid var(--cizgi);
  border-radius:4px;
  padding:12px 13px;
}
.kutu-bas{
  font-size:.9rem;font-weight:700;
  margin-bottom:10px;color:var(--yazi);
  display:flex;align-items:baseline;justify-content:space-between;
}
.kutu-bas-sag{font-size:.8rem;font-weight:400;color:var(--link);cursor:default}

.teslim-not{
  font-size:.74rem;color:var(--yazi-3);line-height:1.45;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--cizgi-2);
}

/* kategori ağacı */
.agac{margin-bottom:11px;padding-bottom:10px;border-bottom:1px solid var(--cizgi-2)}
.agac-ust,.agac-orta,.agac-alt{font-size:.85rem;line-height:1.9}
.agac-ust{color:var(--link)}
.agac-orta{color:var(--link);padding-left:11px}
.agac-alt{color:var(--yazi);font-weight:700;padding-left:22px}

/* seçim listeleri */
.secim-liste{display:flex;flex-direction:column;max-height:280px;overflow-y:auto}
.secim-liste::-webkit-scrollbar{width:6px}
.secim-liste::-webkit-scrollbar-thumb{background:var(--cizgi);border-radius:3px}

/* sahibinden'deki gibi: kutucuk yok, mavi bağlantı listesi */
.ssatir{
  display:flex;align-items:baseline;gap:5px;
  padding:3px 4px;cursor:pointer;border-radius:2px;
  transition:background var(--gecis);
}
.ssatir:hover{background:#F7F8FA}
.sad{font-size:.85rem;color:var(--link);line-height:1.75}
.ssatir:hover .sad{text-decoration:underline}
.sadet{font-size:.78rem;color:var(--yazi-3)}

/* seçili marka: koyu, kalın, solunda kırmızı işaret */
.ssatir.secili{background:#FDF3F4;position:relative;padding-left:11px}
.ssatir.secili::before{
  content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:3px;height:13px;background:var(--kirmizi);border-radius:2px;
}
.ssatir.secili .sad{color:var(--yazi);font-weight:700;text-decoration:none}

/* alan / aralık */
.alan{margin-bottom:8px}
.alan:last-child{margin-bottom:0}
.alan select{
  width:100%;padding:7px 9px;
  border:1px solid var(--cizgi);border-radius:3px;
  background:#fff;color:var(--yazi);font-size:.85rem;cursor:pointer;
}
.alan select:focus{outline:none;border-color:var(--link)}

.aralik{display:flex;align-items:center;gap:7px}
.aralik input{
  flex:1;width:100%;min-width:0;
  padding:7px 9px;border:1px solid var(--cizgi);border-radius:3px;
  font-size:.85rem;color:var(--yazi);
}
.aralik input:focus{outline:none;border-color:var(--link)}
.aralik span{color:var(--yazi-3)}

.temizle-btn{
  width:100%;padding:10px;
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  color:var(--yazi-2);font-size:.85rem;font-weight:600;cursor:pointer;
  transition:var(--gecis);
}
.temizle-btn:hover{border-color:var(--kirmizi);color:var(--kirmizi)}

/* ==========================================================
   SAĞ: SONUÇLAR
   ========================================================== */
.ana{display:flex;flex-direction:column;gap:10px;min-width:0}

.sonuc-bas{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  padding:12px 15px;font-size:.9rem;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.sonuc-bas strong{font-weight:700}
#sonucSayi{color:var(--kirmizi)}
.kaydet{color:var(--link);font-size:.85rem;white-space:nowrap}
.kaydet:hover{text-decoration:underline}

.gizle-btn{
  background:none;border:0;color:var(--link);font-size:.82rem;cursor:pointer;
  display:flex;align-items:center;gap:5px;
}
.gizle-btn:hover{text-decoration:underline}
.gizle-btn span{font-size:.7rem}

.bilgi-ikon{
  width:19px;height:19px;border-radius:50%;
  border:1px solid var(--cizgi);color:var(--yazi-3);
  font-size:.72rem;font-style:italic;font-weight:700;
  display:grid;place-items:center;cursor:help;flex-shrink:0;
}

.secili-cubuk{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  padding:10px 15px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.secili-etiket,.rozet{
  display:inline-flex;align-items:center;gap:6px;
  background:#F4F5F7;border:1px solid var(--cizgi);border-radius:3px;
  padding:4px 10px;font-size:.8rem;color:var(--yazi-2);
}
.secili-etiket strong,.rozet strong{color:var(--yazi);font-weight:600}
.rozet button{
  background:var(--kirmizi);color:#fff;border:0;border-radius:2px;
  width:14px;height:14px;font-size:.62rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
#seciliRozetler{display:contents}
.tumunu-temizle{
  margin-left:auto;background:none;border:0;
  color:var(--link);font-size:.82rem;cursor:pointer;
}
.tumunu-temizle:hover{text-decoration:underline}

/* araç çubuğu */
.arac-cubuk{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 13px;flex-wrap:wrap;
}
.sekme{
  padding:12px 18px;font-size:.88rem;font-weight:600;
  border-bottom:3px solid transparent;
}
.sekme.aktif{border-bottom-color:var(--kirmizi);color:var(--kirmizi)}
.cubuk-sag{display:flex;align-items:center;gap:8px;padding:8px 0}

.filtre-ac-btn{
  display:none;padding:7px 14px;
  background:#fff;border:1px solid var(--cizgi);border-radius:3px;
  font-size:.85rem;font-weight:600;cursor:pointer;
}

.gorunum{display:flex;gap:2px;border:1px solid var(--cizgi);border-radius:3px;padding:2px}
.gbtn{
  width:30px;height:26px;border:0;border-radius:2px;
  background:transparent;color:var(--yazi-3);
  font-size:.9rem;cursor:pointer;transition:var(--gecis);
}
.gbtn:hover{color:var(--yazi)}
.gbtn.aktif{background:var(--ust);color:#fff}

#siralama{
  padding:7px 11px;border:1px solid var(--cizgi);border-radius:3px;
  background:#fff;color:var(--yazi);font-size:.85rem;cursor:pointer;
}
#siralama:focus{outline:none;border-color:var(--link)}

/* ==========================================================
   TABLO GÖRÜNÜMÜ
   ========================================================== */
.tablo-sar{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  overflow-x:auto;
}
.ilan-tablo{width:100%;border-collapse:collapse;min-width:960px}

/* kolon genişlikleri — ilan başlığı kalan tüm alanı alsın */
.ilan-tablo .t-foto,
.ilan-tablo th:nth-child(1){width:162px}
.ilan-tablo .t-marka,
.ilan-tablo th:nth-child(2){width:112px}
.ilan-tablo .t-model,
.ilan-tablo th:nth-child(3){width:88px}
.ilan-tablo .t-baslik,
.ilan-tablo th:nth-child(4){width:auto;min-width:300px}
.ilan-tablo .t-fiyat,
.ilan-tablo th:nth-child(5){width:104px}
.ilan-tablo .t-tarih,
.ilan-tablo th:nth-child(6){width:104px}
.ilan-tablo .t-yer,
.ilan-tablo th:nth-child(7){width:100px}
.ilan-tablo thead th{
  background:#F2F3F5;
  padding:9px 12px;
  font-size:.83rem;font-weight:700;color:#3A3F47;
  text-align:center;
  border-bottom:1px solid var(--cizgi);
  white-space:nowrap;
}
.ilan-tablo th.sag,.ilan-tablo td.sag{text-align:right}
.ilan-tablo th.orta,.ilan-tablo td.orta{text-align:center}

.ilan-tablo tbody tr{border-bottom:1px solid var(--cizgi);transition:background var(--gecis)}
.ilan-tablo tbody tr:nth-child(even){background:#FAFAFB}   /* zebra — sahibinden'deki gibi */
.ilan-tablo tbody tr:hover{background:#FFFBEC}
.ilan-tablo tbody tr:last-child{border-bottom:0}
.ilan-tablo td{padding:8px 12px;font-size:.85rem;vertical-align:middle}

.vitrin{display:inline-block;vertical-align:1px;margin-left:3px}

.t-foto{width:150px;min-width:150px;padding:6px 0 6px 6px!important}
.t-foto img{
  width:156px;height:117px;min-width:156px;max-width:none;
  object-fit:cover;
  border:0;border-radius:0;background:#F4F5F7;
}
.t-marka,.t-model{color:var(--yazi-2);white-space:nowrap;font-size:.88rem}
.t-baslik a{color:var(--link);font-weight:400;font-size:.88rem;line-height:1.45}
.t-baslik a:hover{color:var(--link-hover);text-decoration:underline}
.t-etiketler{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.t-etiketler span{
  font-size:.72rem;color:var(--yazi-3);
  border:1px solid var(--cizgi);border-radius:3px;padding:1px 6px;
}
.t-fiyat{white-space:nowrap;font-weight:700;color:var(--kirmizi);font-size:.92rem}
.t-fiyat small{display:none}
.t-fiyat.bos{color:var(--yazi-2);font-size:.85rem;font-weight:600}
.t-tarih span{display:block;line-height:1.35}
.t-tarih,.t-yer{color:var(--yazi-2);font-size:.8rem;white-space:nowrap;line-height:1.35}
.t-yer span{display:block}
.pin{display:none;flex-shrink:0;color:#9A9A9A}   /* masaüstünde gizli, mobilde açılır */
.l-yer .pin{display:inline-block;vertical-align:-2px;margin-right:4px}
.t-ara a{
  display:inline-block;background:var(--yesil);color:#06331A;
  font-weight:700;font-size:.78rem;padding:7px 13px;border-radius:3px;
  white-space:nowrap;transition:var(--gecis);
}
.t-ara a:hover{filter:brightness(1.08)}

/* ==========================================================
   LİSTE GÖRÜNÜMÜ
   ========================================================== */
.liste-sar{display:flex;flex-direction:column;gap:8px}
.l-ilan{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  display:flex;gap:14px;padding:12px;transition:var(--gecis);
}
.l-ilan:hover{border-color:var(--sari);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.l-foto{width:180px;height:124px;flex-shrink:0}
.l-foto img{width:100%;height:100%;object-fit:cover;border-radius:3px;background:#F4F5F7}
.l-orta{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.l-baslik{font-size:.98rem;font-weight:600;color:var(--link);line-height:1.4}
.l-ilan:hover .l-baslik{text-decoration:underline}
.l-marka{font-size:.82rem;color:var(--yazi-2)}
.l-etiketler{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.l-etiketler span{
  font-size:.75rem;color:var(--yazi-2);
  background:#F4F5F7;border:1px solid var(--cizgi);border-radius:3px;padding:2px 8px;
}
.l-yer{font-size:.8rem;color:var(--yazi-3);margin-top:auto}
.l-sag{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:10px;flex-shrink:0;text-align:right;
}
.l-fiyat{font-size:1.24rem;font-weight:700;color:var(--kirmizi);line-height:1.2}
.l-fiyat small{display:block;font-size:.72rem;font-weight:500;color:var(--yazi-3)}
.l-fiyat.bos{font-size:.95rem;color:var(--yazi-2)}
.l-tarih{font-size:.75rem;color:var(--yazi-3)}
.l-btn{
  background:var(--yesil);color:#06331A;font-weight:700;font-size:.82rem;
  padding:9px 16px;border-radius:3px;white-space:nowrap;
}
.l-btn:hover{filter:brightness(1.08)}

/* ==========================================================
   GALERİ GÖRÜNÜMÜ
   ========================================================== */
.galeri-sar{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px}
.g-ilan{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  overflow:hidden;display:flex;flex-direction:column;transition:var(--gecis);
}
.g-ilan:hover{border-color:var(--sari);box-shadow:0 2px 10px rgba(0,0,0,.07)}
.g-foto{aspect-ratio:4/3;background:#F4F5F7;overflow:hidden}
.g-foto img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.g-ilan:hover .g-foto img{transform:scale(1.04)}
.g-ic{padding:11px 12px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.g-baslik{
  font-size:.87rem;font-weight:600;color:var(--link);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.g-etiketler{display:flex;gap:5px;flex-wrap:wrap}
.g-etiketler span{
  font-size:.71rem;color:var(--yazi-3);
  border:1px solid var(--cizgi);border-radius:3px;padding:1px 6px;
}
.g-alt{
  margin-top:auto;padding-top:9px;border-top:1px solid var(--cizgi-2);
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.g-fiyat{font-size:1.02rem;font-weight:700;color:var(--kirmizi);line-height:1.2}
.g-fiyat small{display:block;font-size:.68rem;font-weight:500;color:var(--yazi-3)}
.g-fiyat.bos{font-size:.85rem;color:var(--yazi-2)}
.g-btn{
  background:var(--yesil);color:#06331A;font-weight:700;font-size:.76rem;
  padding:7px 12px;border-radius:3px;white-space:nowrap;
}

/* ==========================================================
   BOŞ SONUÇ
   ========================================================== */
.bos-sonuc{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;
  padding:50px 20px;text-align:center;
}
.bos-sonuc h3{font-size:1.05rem;margin-bottom:8px}
.bos-sonuc p{color:var(--yazi-2);margin-bottom:18px}
.bos-sonuc a{
  display:inline-block;background:var(--yesil);color:#06331A;
  font-weight:700;padding:11px 22px;border-radius:4px;
}

/* ==========================================================
   ALT
   ========================================================== */
.alt{background:var(--ust);color:#C7CCD4;margin-top:20px}
.alt-ic{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding-block:36px}
.alt-blok{display:flex;flex-direction:column;gap:9px}
.alt-logo{
  display:inline-block;background:var(--sari);color:#1A1405;
  font-size:1.05rem;font-weight:700;padding:5px 11px;border-radius:4px;
  align-self:flex-start;letter-spacing:-.02em;
}
.alt-logo span{color:var(--kirmizi)}
.alt-blok p{font-size:.84rem;line-height:1.6;color:#98A0AC}
.alt-slogan{color:var(--sari)!important;font-size:.74rem!important;font-weight:700;letter-spacing:.14em}
.alt-blok h4{color:#fff;font-size:.92rem;font-weight:700;margin-bottom:2px}
.alt-blok a{font-size:.85rem;color:#98A0AC;transition:var(--gecis)}
.alt-blok a:hover{color:var(--sari)}

.alt-cizgi{border-top:1px solid #343842}
.alt-cizgi-ic{
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-block:15px;font-size:.78rem;color:#767E8B;
}

/* ==========================================================
   MOBİL ALT ÇUBUK + PERDE
   ========================================================== */
.mobil-bar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  gap:9px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--cizgi);
  box-shadow:0 -2px 10px rgba(0,0,0,.08);
}
.mb-btn{flex:1;text-align:center;padding:13px 10px;border-radius:5px;font-weight:700;font-size:.94rem}
.mb-ara{background:var(--sari);color:#1A1405}
.mb-wa{background:var(--yesil);color:#06331A}

.yan-perde{
  display:none;position:fixed;inset:0;z-index:79;
  background:rgba(0,0,0,.45);
}
.yan-perde.acik{display:block}

/* ==========================================================
   DUYARLI
   ========================================================== */
@media (max-width:1100px){
  .alt-ic{grid-template-columns:1fr 1fr;gap:26px}
}

@media (max-width:900px){
  .govde{grid-template-columns:1fr}

  /* filtre paneli yandan açılır */
  .yan{
    position:fixed;top:0;left:0;bottom:0;z-index:80;
    width:min(310px,86vw);
    background:var(--zemin);
    padding:14px;overflow-y:auto;
    transform:translateX(-102%);
    transition:transform .25s ease;
  }
  .yan.acik{transform:translateX(0)}
  .yan-bas{display:flex}
  .filtre-ac-btn{display:block}

  .secim-liste{max-height:none}
  .arama{max-width:none}
}

@media (max-width:760px){
  /* mobilde sahibinden ile aynı yazı ailesi: Android'de Roboto */
  body{
    font-family:Roboto,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
    -webkit-font-smoothing:auto;
  }

  /* masaüstü başlığı ve ara çubukları gizlenir, mobil olanlar gelir */
  .ust,.kirilma,.sonuc-bas,.secili-cubuk,.arac-cubuk{display:none}
  .m-bas{display:flex}
  .m-cubuk{display:flex}
  .m-arama:not([hidden]){display:block}

  /* üst başlık ölçüleri */
  .m-bas-yazi strong{font-size:1.2rem;font-weight:500}
  .m-bas-yazi span{font-size:.92rem}
  .m-cubuk button,.m-cubuk a{font-size:.86rem;padding:9px 4px;color:#3A3F47}

  body{padding-bottom:72px;background:var(--kart)}
  .mobil-bar{display:flex}
  .kap{padding:0}
  .govde{padding-block:0 8px;gap:0}
  .ana{gap:0}

  /* ---------- İLAN SATIRLARI: sahibinden mobil düzeni ---------- */
  .tablo-sar{border:0;background:transparent;overflow-x:visible;border-radius:0}
  .ilan-tablo{min-width:0}
  .ilan-tablo thead{display:none}
  .ilan-tablo td,
  .ilan-tablo th{width:auto!important;min-width:0!important}

  .ilan-tablo tbody tr{
    display:grid;
    grid-template-columns:115px minmax(0,1fr) auto;
    column-gap:9px;
    background:var(--kart);
    border:0;border-bottom:1px solid var(--cizgi);
    border-radius:0;margin:0;
    padding:12px 8px;
    align-items:start;
  }
  .ilan-tablo tbody tr:hover{background:var(--kart)}
  .ilan-tablo td{padding:0;border:0}

  /* fotoğraf: çerçevesiz, sahibinden'deki gibi düz */
  .t-foto{grid-row:1/3;width:auto;min-width:0;padding:0!important}
  .t-foto img{
    width:115px;height:76px;min-width:0;
    border:0;border-radius:0;
  }

  /* sahibinden'de satırda marka/model/tarih/etiket/buton yok */
  .t-marka,.t-model,.t-tarih,.t-ara{display:none}
  .t-etiketler{display:none}

  /* başlık üstte, iki sütunu birden kaplar */
  .t-baslik{grid-column:2/4;grid-row:1;align-self:start}
  .t-baslik a{
    color:#333;font-weight:400;font-size:.94rem;line-height:1.42;
    letter-spacing:0;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }

  /* alt satır: solda konum, sağda mavi fiyat — aynı hizada */
  .t-yer{
    grid-column:2;grid-row:2;
    align-self:end;
    text-align:left!important;
    display:flex;align-items:center;gap:4px;
    font-size:.84rem;font-weight:400;color:#7A7A7A;
    white-space:nowrap;
    margin-top:10px;
  }
  .t-yer .pin{display:inline-block}
  .t-yer span{display:inline}
  .t-yer span:first-of-type::after{content:","}

  .t-fiyat{
    grid-column:3;grid-row:2;
    justify-self:end;align-self:end;
    text-align:right!important;
    margin-top:10px;
    color:var(--fiyat);font-size:1rem;font-weight:700;
    white-space:nowrap;
  }
  .t-fiyat small{display:none}
  .t-fiyat.bos{font-size:.92rem;color:var(--fiyat)}

  /* ---------- LİSTE GÖRÜNÜMÜ ---------- */
  .liste-sar{gap:0}
  .l-ilan{
    flex-direction:row;gap:14px;
    border:0;border-bottom:1px solid var(--cizgi);border-radius:0;
    padding:13px 14px;
  }
  .l-ilan:hover{box-shadow:none;border-color:transparent;border-bottom-color:var(--cizgi)}
  .l-foto{width:96px;height:68px;flex-shrink:0}
  .l-foto img{border:0;border-radius:0}
  /* Başlıklar SEO için uzun ("Şanlıurfa … Kiralama | Konforlu Sedan").
     Dar sütunda 5 satıra iniyordu; iki satırda kesiliyor. */
  .l-baslik{
    color:var(--yazi);font-weight:500;font-size:1rem;line-height:1.34;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* Telefonda liste kartında yalnız fotoğraf, başlık, yer ve
     fiyat kalıyor. Düğmeye sonradan .rez-btn sınıfı eklenince
     dosyanın ilerisindeki .rez-btn{display:inline-block} bu
     kuralı eziyordu; seçici .l-ilan ile güçlendirildi. */
  .l-marka,.l-etiketler,.l-tarih{display:none}
  .l-ilan .l-btn{display:none}
  .l-orta{justify-content:space-between}
  .l-yer{font-size:.97rem;color:var(--yazi-3)}
  .l-sag{flex-direction:row;align-items:flex-end;justify-content:flex-end}
  .l-fiyat{color:var(--fiyat);font-size:1.26rem}
  .l-fiyat small{display:none}

  /* ---------- GALERİ ---------- */
  .galeri-sar{padding:10px}
}

@media (max-width:520px){
  .galeri-sar{grid-template-columns:repeat(2,1fr);gap:8px}
  .g-baslik{font-size:.8rem}
  .g-alt{flex-direction:column;align-items:stretch;gap:7px}
  .g-btn{text-align:center}
  .alt-ic{grid-template-columns:1fr;gap:22px}
  .arac-cubuk{padding:0 10px}
  .sekme{padding:11px 12px}
  .cubuk-sag{width:100%;justify-content:space-between;flex-wrap:wrap}
  #siralama{flex:1;min-width:0}
}

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

/* ==========================================================
   İLAN DETAY SAYFASI
   ========================================================== */
.detay{padding-block:16px 40px}
.yukleniyor{padding:60px 0;text-align:center;color:var(--yazi-3)}
.detay-duzen{display:grid;grid-template-columns:1fr 372px;gap:16px;align-items:start}
.detay-sol{display:flex;flex-direction:column;gap:12px;min-width:0}
.detay-sag{display:flex;flex-direction:column;gap:12px;position:sticky;top:78px}

.detay-kutu,.fiyat-kutu,.bilgi-kutu,.firma-kutu{
  background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;padding:18px 20px;
}
.detay-bas{
  font-size:1rem;font-weight:700;color:var(--yazi);
  padding-bottom:11px;margin-bottom:14px;border-bottom:1px solid var(--cizgi);
}

/* ---------- GALERİ ---------- */
.galeri{background:var(--kart);border:1px solid var(--cizgi);border-radius:4px;padding:10px}
.buyuk{position:relative;background:#EDEFF2;border-radius:3px;overflow:hidden}
.buyuk img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gez{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:56px;border:0;border-radius:3px;
  background:rgba(20,22,26,.55);color:#fff;font-size:1.9rem;line-height:1;
  cursor:pointer;transition:var(--gecis);
}
.gez:hover{background:rgba(20,22,26,.78)}
.gez.sol{left:9px}
.gez.sag{right:9px}
.foto-sayac{
  position:absolute;right:11px;bottom:11px;
  background:rgba(20,22,26,.62);color:#fff;
  font-size:.78rem;padding:4px 10px;border-radius:3px;
}
.kucukler{display:flex;gap:7px;margin-top:9px;overflow-x:auto;padding-bottom:3px}
.kucukler::-webkit-scrollbar{height:6px}
.kucukler::-webkit-scrollbar-thumb{background:var(--cizgi);border-radius:3px}
.kucuk{
  flex:0 0 92px;height:66px;padding:0;cursor:pointer;
  border:2px solid transparent;border-radius:3px;overflow:hidden;background:#EDEFF2;
  transition:var(--gecis);
}
.kucuk img{width:100%;height:100%;object-fit:cover;display:block}
.kucuk.aktif{border-color:var(--kirmizi)}
.kucuk:hover{border-color:var(--sari)}

/* ---------- AÇIKLAMA ---------- */
.aciklama p{color:var(--yazi-2);font-size:.92rem;line-height:1.75;margin-bottom:14px}
.aciklama h3{font-size:.95rem;font-weight:700;margin:18px 0 10px;color:var(--yazi)}
.tikli{display:flex;flex-direction:column;gap:8px}
.tikli li{
  position:relative;padding-left:24px;color:var(--yazi-2);font-size:.92rem;line-height:1.6;
}
.tikli li::before{
  content:"";position:absolute;left:2px;top:7px;
  width:11px;height:6px;border-left:2px solid var(--kirmizi);border-bottom:2px solid var(--kirmizi);
  transform:rotate(-45deg);
}
.tikli strong{color:var(--yazi)}
.aciklama-not{
  margin-top:16px;padding:11px 13px;background:#FBF7EA;
  border-left:3px solid var(--sari);border-radius:0 3px 3px 0;
  font-size:.86rem!important;color:var(--yazi-2)!important;
}

/* ---------- TESLİM ETİKETLERİ ---------- */
.teslim-aciklama{color:var(--yazi-2);font-size:.9rem;margin-bottom:13px}
.teslim-etiketler{display:flex;flex-wrap:wrap;gap:8px}
.teslim-etiket{
  background:#F4F5F7;border:1px solid var(--cizgi);border-radius:3px;
  padding:8px 14px;font-size:.85rem;color:var(--link);transition:var(--gecis);
}
.teslim-etiket:hover{background:var(--yesil);border-color:var(--yesil);color:#06331A;font-weight:600}

/* ---------- FİYAT KUTUSU ---------- */
.detay-baslik{font-size:1.06rem;font-weight:600;line-height:1.45;margin-bottom:14px;color:var(--yazi)}
.detay-fiyat{display:flex;flex-direction:column;gap:2px;padding-bottom:13px;border-bottom:1px solid var(--cizgi)}
.detay-fiyat strong{font-size:2rem;font-weight:800;color:var(--kirmizi);line-height:1.1;letter-spacing:-.02em}
.detay-fiyat span{font-size:.83rem;color:var(--yazi-3)}
.detay-yer{padding-top:11px;font-size:.87rem;color:var(--yazi-2)}
.detay-btnler{display:flex;flex-direction:column;gap:9px;margin-top:15px}
.btn-wa,.btn-ara{
  display:block;text-align:center;padding:13px;border-radius:4px;
  font-weight:700;font-size:.95rem;transition:var(--gecis);
}
.btn-wa{background:var(--yesil);color:#06331A}
.btn-wa:hover{filter:brightness(1.07)}
.btn-ara{background:var(--ust);color:#fff}
.btn-ara:hover{background:#1F3757}
.detay-not{margin-top:11px;text-align:center;font-size:.78rem;color:var(--yazi-3)}

/* ---------- BİLGİ LİSTESİ ---------- */
.bilgi-liste{display:flex;flex-direction:column}
.bilgi-liste li{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--cizgi-2);font-size:.87rem;
}
.bilgi-liste li:last-child{border-bottom:0}
.bilgi-liste strong{font-weight:600;color:var(--yazi-2)}
.bilgi-liste span{color:var(--yazi);text-align:right}

/* ---------- FİRMA KUTUSU ---------- */
.firma-kutu{display:flex;flex-direction:column;gap:4px}
.firma-ust{font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--yazi-3)}
.firma-kutu strong{font-size:1.02rem;font-weight:700}
.firma-alt{font-size:.85rem;color:var(--yazi-2)}
.firma-link{margin-top:8px;font-size:.87rem;color:var(--link)}
.firma-link:hover{text-decoration:underline}

/* ---------- BENZER İLANLAR ---------- */
.benzer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:11px}
.benzer-kart{
  border:1px solid var(--cizgi);border-radius:4px;overflow:hidden;
  background:var(--kart);transition:var(--gecis);
}
.benzer-kart:hover{border-color:var(--sari);box-shadow:0 2px 8px rgba(0,0,0,.07)}
.benzer-kart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.benzer-ic{padding:9px 11px 11px;display:flex;flex-direction:column;gap:3px}
.benzer-ad{font-size:.85rem;color:var(--yazi-2)}
.benzer-fiyat{font-size:.98rem;font-weight:700;color:var(--kirmizi)}

/* ---------- MOBİL GERİ OKU ---------- */
.m-geri{
  color:#fff;font-size:2rem;line-height:1;text-decoration:none;
  width:28px;display:grid;place-items:center;flex-shrink:0;
}

/* ---------- DUYARLI ---------- */
@media (max-width:980px){
  .detay-duzen{grid-template-columns:1fr}
  .detay-sag{position:static;order:-1}
  .benzer-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

@media (max-width:760px){
  .d-bas{display:flex}
  .detay{padding-block:0 8px}
  .detay-duzen{gap:8px}
  .detay-sol{gap:8px}
  .detay-sag{gap:8px}
  .galeri{border-radius:0;border-left:0;border-right:0;padding:0}
  .buyuk img{aspect-ratio:4/3}
  .kucukler{margin:8px 10px 10px}
  .detay-kutu,.fiyat-kutu,.bilgi-kutu,.firma-kutu{
    border-radius:0;border-left:0;border-right:0;padding:15px 14px;
  }
  .detay-fiyat strong{font-size:1.7rem}
  .detay-baslik{font-size:1rem}
  .gez{width:34px;height:48px;font-size:1.6rem}
}

/* ==========================================================
   REZERVASYON BUTONLARI + PANEL
   ========================================================== */
.rez-btn{
  display:inline-block;border:0;cursor:pointer;
  background:var(--kirmizi);color:#fff;
  font-family:inherit;font-weight:700;font-size:.78rem;
  padding:8px 14px;border-radius:3px;white-space:nowrap;
  transition:var(--gecis);
}
.rez-btn:hover{background:#A50D26}
.wa-btn{
  display:inline-block;background:var(--yesil);color:#06331A;
  font-weight:700;font-size:.78rem;padding:8px 14px;border-radius:3px;
  white-space:nowrap;transition:var(--gecis);
}
.wa-btn:hover{filter:brightness(1.07)}
.ilan-tablo .t-rez,.ilan-tablo th:nth-child(6){width:118px}
.ilan-tablo .t-wa,.ilan-tablo th:nth-child(7){width:112px}

/* ---------- PERDE ---------- */
.rez-perde{
  display:none;position:fixed;inset:0;z-index:90;
  background:rgba(15,18,22,.55);
  padding:20px;overflow-y:auto;
}
.rez-perde.acik{display:flex;align-items:flex-start;justify-content:center}

/* ---------- PANEL ---------- */
.rez-panel{
  background:var(--kart);border-radius:6px;
  width:100%;max-width:520px;margin:auto;
  box-shadow:0 14px 44px rgba(0,0,0,.28);
  animation:rezGir var(--ritim-giris) var(--egri-giris);
}
@keyframes rezGir{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}

.rez-ust{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--cizgi);
}
.rez-ust h2{font-size:1.08rem;font-weight:700;color:var(--yazi)}
.rez-arac{font-size:.86rem;color:var(--yazi-2);margin-top:3px}
.rez-kapat{
  background:none;border:0;font-size:1.15rem;color:var(--yazi-3);
  cursor:pointer;line-height:1;padding:2px 4px;flex-shrink:0;
}
.rez-kapat:hover{color:var(--kirmizi)}

/* ---------- FORM ---------- */
.rez-form{padding:18px 20px 20px;display:flex;flex-direction:column;gap:13px}
.rez-satir{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.rez-alan{display:flex;flex-direction:column;gap:5px}
.rez-alan > span{font-size:.82rem;font-weight:600;color:var(--yazi-2)}
.rez-alan b{color:var(--kirmizi);font-weight:700}
.rez-alan input,.rez-alan select,.rez-alan textarea{
  width:100%;padding:9px 11px;
  border:1px solid var(--cizgi);border-radius:4px;
  background:#fff;color:var(--yazi);font-size:.9rem;
  font-family:inherit;
}
.rez-alan input:focus,.rez-alan select:focus,.rez-alan textarea:focus{
  outline:none;border-color:var(--link);box-shadow:0 0 0 3px rgba(21,89,156,.1);
}
.rez-alan textarea{resize:vertical;min-height:56px}

/* ---------- ÖZET ---------- */
.rez-ozet:empty{display:none}
.rez-ozet{
  background:#F7F8FA;border:1px solid var(--cizgi);border-radius:4px;
  padding:12px 14px;display:flex;flex-direction:column;gap:7px;
}
.ozet-satir{display:flex;justify-content:space-between;gap:12px;font-size:.87rem;color:var(--yazi-2)}
.ozet-satir strong{color:var(--yazi);font-weight:600}
.ozet-satir.toplam{
  padding-top:8px;margin-top:2px;border-top:1px solid var(--cizgi);
  font-size:.95rem;
}
.ozet-satir.toplam strong{color:var(--kirmizi);font-weight:800;font-size:1.08rem}
.ozet-not{font-size:.75rem;color:var(--yazi-3);margin-top:2px}

.rez-hata{
  background:#FDECEE;border:1px solid #F3B9C1;border-radius:4px;
  padding:9px 12px;font-size:.85rem;color:#A50D26;
}
.rez-hata[hidden]{display:none}

/* ---------- ALT ---------- */
.rez-alt{display:grid;grid-template-columns:1fr auto;gap:10px;margin-top:2px}
.rez-gonder{
  background:var(--yesil);color:#06331A;border:0;
  font-family:inherit;font-weight:700;font-size:.95rem;
  padding:13px;border-radius:4px;cursor:pointer;transition:var(--gecis);
}
.rez-gonder:hover{filter:brightness(1.07)}
.rez-ara{
  display:grid;place-items:center;
  background:var(--ust);color:#fff;font-weight:700;font-size:.9rem;
  padding:13px 20px;border-radius:4px;white-space:nowrap;
}
.rez-ara:hover{background:#1F3757}
.rez-not{font-size:.76rem;color:var(--yazi-3);line-height:1.5;text-align:center}

/* ---------- DUYARLI ---------- */
@media (max-width:760px){
  .rez-perde{padding:0}
  .rez-panel{max-width:none;border-radius:0;min-height:100%}
  .rez-satir{grid-template-columns:1fr}
  .rez-alt{grid-template-columns:1fr}
  .rez-ara{padding:13px}
}

/* ==========================================================
   MOBİLDE ESKİ SADE DÜZEN
   Rezervasyon / WhatsApp butonları yalnızca masaüstünde.
   Mobilde satır eski haline döner: foto · başlık · konum · fiyat
   ========================================================== */
.t-yer-mob{display:none}

@media (max-width:760px){
  .ilan-tablo .t-rez{display:none}          /* rezervasyon butonu mobilde yok */
  .ilan-tablo .t-wa .wa-btn{display:none}   /* whatsapp butonu mobilde yok */

  /* konum yazısı geri gelir — eski .t-yer ile birebir aynı */
  .ilan-tablo .t-wa{
    grid-column:2;grid-row:2;
    align-self:end;
    text-align:left!important;
    margin-top:10px;
    width:auto!important;
  }
  .t-yer-mob{
    display:flex;align-items:center;gap:4px;
    font-size:.84rem;font-weight:400;color:#7A7A7A;
    white-space:nowrap;
  }
  .t-yer-mob .pin{display:inline-block}
  .t-yer-mob span:first-of-type::after{content:","}
}

/* vitrin yıldızı yalnızca masaüstü tablosunda */
@media (max-width:760px){
  .ilan-tablo .vitrin{display:none}
}

/* ==========================================================
   MOBİL: konum yazısı yerine Rezervasyon + WhatsApp butonları
   Kutucuk yüksekliği korunur — butonlar küçük tutulur.
   ========================================================== */
@media (max-width:760px){
  /* satır 4 sütuna bölünür: foto | rezervasyon | whatsapp | fiyat */
  .ilan-tablo tbody tr{grid-template-columns:115px auto auto 1fr}

  .ilan-tablo .t-baslik{grid-column:2/5;grid-row:1}

  /* konum yazısı kalkar */
  .t-yer-mob{display:none!important}

  /* rezervasyon butonu geri gelir */
  .ilan-tablo .t-rez{
    display:block;grid-column:2;grid-row:2;
    align-self:end;margin-top:9px;
    width:auto!important;text-align:left!important;
  }
  /* whatsapp butonu yanına */
  .ilan-tablo .t-wa{
    grid-column:3;grid-row:2;
    align-self:end;margin-top:9px;margin-left:6px;
    width:auto!important;text-align:left!important;
  }
  .ilan-tablo .t-wa .wa-btn{display:inline-block}

  /* fiyat en sağda kalır */
  .ilan-tablo .t-fiyat{grid-column:4;grid-row:2;margin-top:9px}

  /* butonlar küçük — satır yüksekliği büyümesin */
  .ilan-tablo .rez-btn,
  .ilan-tablo .wa-btn{
    padding:5px 11px;font-size:.76rem;font-weight:700;
    border-radius:3px;line-height:1.45;
  }
}

@media (max-width:400px){
  .ilan-tablo .rez-btn,
  .ilan-tablo .wa-btn{padding:5px 8px;font-size:.72rem}
  .ilan-tablo .t-wa{margin-left:4px}
}

/* ==========================================================
   MOBİL SATIR — kısa başlık + araç adı + butonlar + fiyat
   ========================================================== */
.t-arac-mob{display:none}

@media (max-width:760px){
  /* foto | butonlar | fiyat */
  .ilan-tablo tbody tr{
    grid-template-columns:115px 1fr auto;
    column-gap:10px;
    padding:11px 10px;
  }

  .ilan-tablo .t-baslik{grid-column:2/4;grid-row:1}
  .ilan-tablo .t-baslik a{
    -webkit-line-clamp:1;
    font-weight:600;font-size:.92rem;color:var(--yazi);
  }
  /* araç adı başlığın altında, gri */
  .t-arac-mob{
    display:block;margin-top:2px;
    font-size:.82rem;color:#7A7A7A;
  }

  /* butonlar solda yan yana */
  .ilan-tablo .t-rez{
    display:block;grid-column:2;grid-row:2;
    align-self:end;margin-top:8px;
    width:auto!important;text-align:left!important;
  }
  .ilan-tablo .t-wa{
    display:inline-block;
    grid-column:2;grid-row:2;
    align-self:end;margin-top:8px;
    width:auto!important;text-align:left!important;
    padding-left:96px!important;   /* rezervasyon butonunun yanına */
  }
  .ilan-tablo .t-wa .wa-btn{display:inline-block}

  /* fiyat sağ uçta, butonlardan bağımsız */
  .ilan-tablo .t-fiyat{
    grid-column:3;grid-row:2;
    justify-self:end;align-self:end;
    margin-top:8px;
  }

  .ilan-tablo .rez-btn,
  .ilan-tablo .wa-btn{
    padding:5px 10px;font-size:.75rem;font-weight:700;
    border-radius:3px;line-height:1.5;
  }
}

/* ==========================================================
   MOBİL SATIR — SON DÜZEN
   Üst satır: başlık + fiyat (sağ üstte)
   Alt satır: Rezervasyon + WhatsApp
   Fiyat butonlarla asla çakışmaz.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr{
    grid-template-columns:115px auto auto 1fr;
    column-gap:8px;
  }

  /* ÜST SATIR — başlık solda, fiyat sağda */
  .ilan-tablo .t-baslik{grid-column:2/4;grid-row:1}
  .ilan-tablo .t-fiyat{
    grid-column:4;grid-row:1;
    justify-self:end;align-self:start;
    margin-top:0;
    font-size:1.02rem;
  }

  /* ALT SATIR — butonlar */
  .ilan-tablo .t-rez{
    grid-column:2;grid-row:2;
    align-self:end;margin-top:10px;
    padding-left:0!important;
  }
  .ilan-tablo .t-wa{
    grid-column:3;grid-row:2;
    align-self:end;margin-top:10px;
    padding-left:0!important;margin-left:0;
    justify-self:start;
  }
}

/* ==========================================================
   MOBİL — çakışma çözümü
   Başlık taşmaz (…), WhatsApp yazı yerine ikon olur.
   ========================================================== */
@media (max-width:760px){
  /* başlık asla taşmaz */
  .ilan-tablo .t-baslik{min-width:0;overflow:hidden}
  .ilan-tablo .t-baslik a{
    display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    font-size:.88rem;
  }
  .t-arac-mob{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* fiyat sağ üstte, kendine yer ayırır */
  .ilan-tablo .t-fiyat{
    grid-column:4;grid-row:1;
    justify-self:end;align-self:start;
    white-space:nowrap;font-size:1rem;
  }

  /* WhatsApp: yazı yerine yeşil ikon düğmesi */
  .ilan-tablo .t-wa .wa-btn{
    font-size:0;
    width:34px;height:29px;padding:0;
    display:grid;place-items:center;
  }
  .ilan-tablo .t-wa .wa-btn::before{
    content:"";
    width:18px;height:18px;
    background:#06331A;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 00-8.5 15.3L2 22l4.8-1.5A10 10 0 1012 2zm0 18.2a8.2 8.2 0 01-4.2-1.2l-.3-.2-3 .9.9-2.9-.2-.3A8.2 8.2 0 1112 20.2zm4.5-5.8c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.4.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z'/></svg>") no-repeat center/contain;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2a10 10 0 00-8.5 15.3L2 22l4.8-1.5A10 10 0 1012 2zm0 18.2a8.2 8.2 0 01-4.2-1.2l-.3-.2-3 .9.9-2.9-.2-.3A8.2 8.2 0 1112 20.2zm4.5-5.8c-.3-.2-1.7-.9-2-1-.3-.1-.5-.2-.7.1-.2.3-.7 1-.9 1.2-.2.2-.3.2-.6.1-.3-.2-1.2-.5-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5 0-.2 0-.4-.1-.5 0-.2-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.4.7.3 1.2.5 1.7.6.7.2 1.3.2 1.8.1.6-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z'/></svg>") no-repeat center/contain;
  }
}

/* ==========================================================
   MOBİL SATIR — kesin düzen (3 sütun)
   foto | içerik (esner, taşmaz) | fiyat & whatsapp
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr{
    grid-template-columns:115px minmax(0,1fr) auto!important;
    column-gap:9px;
  }

  /* üst satır: başlık solda (taşmaz), fiyat sağda */
  .ilan-tablo .t-baslik{grid-column:2!important;grid-row:1!important;min-width:0}
  .ilan-tablo .t-fiyat{
    grid-column:3!important;grid-row:1!important;
    justify-self:end;align-self:start;
    margin-top:0!important;
  }

  /* alt satır: rezervasyon solda, whatsapp ikonu sağda */
  .ilan-tablo .t-rez{
    grid-column:2!important;grid-row:2!important;
    justify-self:start;align-self:end;margin-top:10px;
  }
  .ilan-tablo .t-wa{
    grid-column:3!important;grid-row:2!important;
    justify-self:end;align-self:end;margin-top:10px;
  }
}

/* başlık tam sığsın — kesilmesin */
@media (max-width:760px){
  .ilan-tablo .t-baslik a{font-size:.79rem;letter-spacing:-.2px}
  .ilan-tablo .t-fiyat{font-size:.94rem}
  .t-arac-mob{font-size:.79rem;margin-top:3px}
}
@media (max-width:390px){
  .ilan-tablo .t-baslik a{font-size:.74rem}
  .ilan-tablo .t-fiyat{font-size:.9rem}
}

@media (max-width:760px){
  .ilan-tablo .t-baslik a{letter-spacing:-.45px}
}

/* ==========================================================
   MOBİL — iki buton yan yana, ikisi de yazılı
   ========================================================== */
.wa-mob{display:none}   /* masaüstünde gizli */

@media (max-width:760px){
  /* masaüstü WhatsApp hücresi mobilde kapalı */
  .ilan-tablo .t-wa{display:none!important}

  /* iki buton tek hücrede, yan yana */
  .ilan-tablo .t-rez{
    display:flex!important;gap:8px;
    grid-column:2/4!important;grid-row:2!important;
    justify-self:start;align-self:end;
    margin-top:10px;
  }
  .ilan-tablo .wa-mob{display:inline-block}

  /* ikon biçimi iptal — yazılı buton */
  .ilan-tablo .wa-btn{
    font-size:.75rem!important;
    width:auto!important;height:auto!important;
    padding:5px 12px!important;
    display:inline-block!important;
  }
  .ilan-tablo .wa-btn::before{display:none!important}
}

/* butonlar iki uca yaslansın — aralarında boşluk */
@media (max-width:760px){
  .ilan-tablo .t-rez{
    justify-self:stretch!important;
    justify-content:space-between;
    width:100%;
  }
}

/* ==========================================================
   YÜZEN ARAMA BUTONU (sağ altta sabit)
   Alt çubuğun yerini alır — hem masaüstünde hem mobilde.
   ========================================================== */
.mobil-bar{display:none!important}
body{padding-bottom:0!important}

.ara-fab{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:flex;align-items:center;gap:9px;
  background:var(--sari);color:#1A1405;
  font-weight:700;font-size:.95rem;
  padding:13px 20px 13px 17px;
  border-radius:999px;
  box-shadow:0 5px 18px rgba(0,0,0,.24);
  transition:var(--gecis);
}
.ara-fab:hover{background:#E0B315;transform:translateY(-2px);box-shadow:0 7px 22px rgba(0,0,0,.28)}
.ara-fab:active{transform:translateY(0)}
.ara-fab svg{flex-shrink:0}

@media (max-width:760px){
  .ara-fab{
    right:14px;bottom:14px;
    padding:0;width:56px;height:56px;
    justify-content:center;
  }
  .ara-fab span{display:none}   /* mobilde sadece ikon */
}

/* ==========================================================
   RENK DÜZENLEMESİ
   Rezervasyon butonu: kırmızı → lacivert
   Fiyat: mavi → kırmızı
   ========================================================== */
.rez-btn{background:var(--ust)!important;color:#fff!important}
.rez-btn:hover{background:#1F3757!important}

/* fiyat her yerde kırmızı */
.t-fiyat,
.l-fiyat,
.g-fiyat{color:var(--kirmizi)!important}

@media (max-width:760px){
  .ilan-tablo .t-fiyat{color:var(--kirmizi)!important}
}

/* ==========================================================
   KURUMSAL RENK DÜZENİ
   Rezervasyon : lacivert  #2C4C7C
   WhatsApp    : koyu yeşil #128C7E (WhatsApp kurumsal tonu)
   Fiyat       : kırmızı   #C8102E
   Hemen Ara   : altın     #F5C518
   ========================================================== */
:root{--yesil-koyu:#128C7E}

.wa-btn,
.ust-wa,
.btn-wa,
.mb-wa,
.rez-gonder,
.teslim-etiket:hover,
.bos-sonuc a{
  background:var(--yesil-koyu)!important;
  color:#fff!important;
  border-color:var(--yesil-koyu)!important;
}
.wa-btn:hover,
.ust-wa:hover,
.btn-wa:hover,
.rez-gonder:hover{background:#0E6F63!important;filter:none!important}

/* mobil ikon biçimindeki whatsapp (kullanılmıyor ama tutarlı kalsın) */
.ilan-tablo .t-wa .wa-btn::before{background:#fff}

/* ==========================================================
   KURUMSAL PALET — bütün site
   ----------------------------------------------------------
   Lacivert  #2C4C7C  → ana kurumsal renk (başlık, butonlar)
   Altın     #C9971A  → vurgu (logo, arama butonu)
   Kırmızı   #C8102E  → yalnızca fiyat
   Yeşil     #128C7E  → yalnızca WhatsApp
   ========================================================== */
:root{
  --sari:#C9971A;
  --ust-2:#2C4C7C;
}

/* mobil başlık: kurumsal derin lacivert
   Ana kurumsal ton #2C4C7C'nin koyu, ağırbaşlı hâli. Masaüstü
   üst barıyla aynı anda görünmediği için çakışma olmaz. */
.m-bas{background:#1B3358}
.m-arama{background:#1B3358}
.m-bas-yazi strong{color:#fff}
.m-ikon button,
.m-ikon a{color:#FFFFFF}
/* ...ama açılır dil menüsü BEYAZ zeminde duruyor; yukarıdaki kural
   (.m-ikon button = 0,1,1) .dil-ogesi'yi (0,1,0) ezip yazıları da
   beyaz yapıyordu, menü boş görünüyordu. Menüyü kuralın dışına al. */
.m-ikon .dil-menu button{color:var(--yazi)}
.m-ikon .dil-menu button.secili .dil-ad{color:var(--ust)}
.m-menu span{background:#fff}

/* logo — altın zemin, koyu lacivert yazı */
.logo-ad,.alt-logo{background:#C9971A;color:#1B2A42}
.logo-nokta,.alt-logo span{color:#7C1220}

/* sekme ve sonuç vurguları kırmızı yerine lacivert */
.sekme.aktif{border-bottom-color:#2C4C7C;color:#2C4C7C}
#sonucSayi{color:#2C4C7C}
.ssatir.secili::before{background:#2C4C7C}
.ssatir.secili{background:#F2F5F9}
.rozet button{background:#2C4C7C}
.gbtn.aktif{background:#2C4C7C}
.temizle-btn:hover,.ftemizle:hover{border-color:#2C4C7C;color:#2C4C7C}
.arama button:hover{color:#2C4C7C}
.kucuk.aktif{border-color:#2C4C7C}
.kucuk:hover{border-color:#C9971A}
.tikli li::before{border-color:#2C4C7C}
.l-ilan:hover,.g-ilan:hover,.benzer-kart:hover,.teslim-kart:hover{border-color:#C9971A}
.aciklama-not{background:#FBF6EA;border-left-color:#C9971A}

/* yüzen arama butonu — altın, koyu lacivert yazı */
.ara-fab{background:#C9971A;color:#1B2A42}
.ara-fab:hover{background:#B3861613;background:#B08414}

/* vitrin yıldızı altın tonuna */
.vitrin path{fill:#C9971A}

/* mobil bildirim noktası daha sakin */
.m-menu::after{background:#C8102E}

/* ==========================================================
   KURUMSAL TON DÜZELTMESİ
   WhatsApp : mat koyu yeşil  #1E6A5C
   Arama    : koyu lacivert   #24406B (altın çok parlaktı)
   ========================================================== */
.wa-btn,
.ust-wa,
.btn-wa,
.mb-wa,
.rez-gonder,
.bos-sonuc a,
.teslim-etiket:hover{
  background:#1E6A5C!important;
  border-color:#1E6A5C!important;
  color:#fff!important;
}
.wa-btn:hover,
.ust-wa:hover,
.btn-wa:hover,
.rez-gonder:hover{background:#175449!important}

/* yüzen arama butonu — koyu lacivert, beyaz ikon */
.ara-fab{background:#24406B!important;color:#fff!important}
.ara-fab:hover{background:#1B3155!important}

/* logo altını da bir tık kıs */
.logo-ad,.alt-logo{background:#BE8F1C}

/* ==========================================================
   SATIR İÇİ "HEMEN ARA" BUTONU (WhatsApp'ın yerine)
   ========================================================== */
.ara-btn{
  display:inline-block;
  background:#1E6A5C;color:#fff;
  font-weight:700;font-size:.78rem;
  padding:8px 14px;border-radius:3px;
  white-space:nowrap;transition:var(--gecis);
}
.ara-btn:hover{background:#175449}
.ara-mob{display:none}

@media (max-width:760px){
  .ilan-tablo .t-wa{display:none!important}
  .ilan-tablo .ara-mob{display:inline-block}
  .ilan-tablo .ara-btn{padding:5px 12px;font-size:.75rem}
}

/* ==========================================================
   YÜZEN BUTON GRUBU — Instagram + Hemen Ara
   ========================================================== */
.fab-grup{
  position:fixed;right:20px;bottom:20px;z-index:75;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.fab{
  display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:.95rem;
  padding:13px 20px 13px 17px;
  border-radius:999px;
  box-shadow:0 5px 18px rgba(0,0,0,.24);
  transition:var(--gecis);
}
.fab:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(0,0,0,.28)}
.fab svg{flex-shrink:0}

.fab-ig{background:#8B3A62;color:#fff}
.fab-ig:hover{background:#742F52}

.ara-fab{position:static!important;right:auto!important;bottom:auto!important}

@media (max-width:760px){
  .fab-grup{right:14px;bottom:14px;gap:9px}
  .fab{padding:0;width:52px;height:52px;justify-content:center}
  .fab span{display:none}
  .ara-fab{width:56px!important;height:56px!important}
}

/* ==========================================================
   YÜZEN İKON GRUBU — WhatsApp · Instagram · Telefon
   Marka renkleriyle yuvarlak düğmeler
   ========================================================== */
.fab-grup{
  position:fixed;right:18px;bottom:18px;z-index:75;
  display:flex;flex-direction:column;align-items:center;gap:11px;
}
.fab{
  width:54px;height:54px;border-radius:50%;
  display:grid!important;place-items:center;
  padding:0!important;
  box-shadow:0 4px 14px rgba(0,0,0,.26);
  transition:transform .16s ease,box-shadow .16s ease;
  color:#fff;
}
.fab:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(0,0,0,.32)}
.fab:active{transform:scale(.97)}
.fab span{display:none}
.fab svg{display:block}

.fab-wa{background:#4CAF50!important}
.fab-tel{background:#6BA5D0!important}
.fab-ig{
  background:radial-gradient(circle at 30% 107%,
    #FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%)!important;
}

@media (max-width:760px){
  .fab-grup{right:14px;bottom:14px;gap:10px}
  .fab{width:50px;height:50px}
}

/* ==========================================================
   İLAN KUTUSU — kurumsal sadeleştirme
   Satırda tek eylem: Rezervasyon
   ========================================================== */
.ara-btn,.ara-mob,.ilan-tablo .t-wa{display:none!important}

/* masaüstü: rezervasyon kolonu son kolon */
.ilan-tablo .t-rez,
.ilan-tablo th:nth-child(6){width:130px}

@media (max-width:760px){
  .ilan-tablo tbody tr{
    grid-template-columns:115px minmax(0,1fr) auto!important;
    padding:13px 12px;
    column-gap:11px;
  }

  /* başlık — kurumsal, koyu lacivert */
  .ilan-tablo .t-baslik a{
    font-size:.82rem;font-weight:700;color:#2C4C7C;
    letter-spacing:0;
  }
  /* araç adı */
  .t-arac-mob{font-size:.86rem;color:#5A6270;margin-top:4px}

  /* fiyat sağ üstte */
  .ilan-tablo .t-fiyat{
    font-size:1.05rem;font-weight:800;
    grid-column:3!important;grid-row:1!important;
  }

  /* tek buton — sola yaslı, ferah */
  .ilan-tablo .t-rez{
    display:block!important;
    grid-column:2/4!important;grid-row:2!important;
    justify-self:start!important;
    align-self:end;margin-top:11px;width:auto!important;
  }
  .ilan-tablo .rez-btn{
    padding:7px 18px;font-size:.8rem;border-radius:4px;
  }
}

/* ==========================================================
   REZERVASYON — kart altında tam genişlik bağlantı
   "İNCELE & REZERVE ET  →"
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr{padding-bottom:0}

  .ilan-tablo .t-rez{
    grid-column:1/-1!important;grid-row:3!important;
    justify-self:stretch!important;width:auto!important;
    margin-top:12px!important;
    border-top:1px solid var(--cizgi);
  }

  .ilan-tablo .rez-btn{
    width:100%;
    display:flex!important;align-items:center;justify-content:space-between;
    background:transparent!important;
    color:#C9971A!important;
    border:0!important;border-radius:0!important;
    padding:13px 2px!important;
    font-size:.76rem!important;font-weight:600!important;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .ilan-tablo .rez-btn::after{
    content:"→";
    font-size:1rem;letter-spacing:0;font-weight:400;
    transition:transform .18s ease;
  }
  .ilan-tablo .rez-btn:hover,
  .ilan-tablo .rez-btn:active{
    background:transparent!important;color:#A87D12!important;
  }
  .ilan-tablo .rez-btn:active::after{transform:translateX(4px)}
}

/* ==========================================================
   YAZI STİLİ — onaylanmış hâline geri dönüş
   (başlık, araç adı ve fiyat boyutları değiştirilmez)
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .t-baslik a{
    font-size:.79rem!important;
    font-weight:400!important;
    color:#333!important;
    letter-spacing:-.45px!important;
  }
  .t-arac-mob{
    font-size:.79rem!important;
    color:#7A7A7A!important;
    margin-top:3px!important;
  }
  .ilan-tablo .t-fiyat{
    font-size:.94rem!important;
    font-weight:700!important;
  }
}
@media (max-width:390px){
  .ilan-tablo .t-baslik a{font-size:.74rem!important}
  .ilan-tablo .t-fiyat{font-size:.9rem!important}
}

/* ==========================================================
   KART — ONAYLANMIŞ KOMPAKT HÂL (geri dönüş)
   foto | başlık + araç adı + fiyat | Rezervasyon butonu
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr{
    grid-template-columns:115px minmax(0,1fr) auto!important;
    padding:12px 10px!important;
    column-gap:9px!important;
  }

  /* rezervasyon yine satır içinde, dolu lacivert buton */
  .ilan-tablo .t-rez{
    grid-column:2!important;grid-row:2!important;
    justify-self:start!important;align-self:end!important;
    width:auto!important;margin-top:10px!important;
    border-top:0!important;
  }
  .ilan-tablo .rez-btn{
    width:auto!important;
    display:inline-block!important;
    background:#2C4C7C!important;color:#fff!important;
    border-radius:3px!important;
    padding:5px 14px!important;
    font-size:.75rem!important;font-weight:700!important;
    letter-spacing:0!important;
    text-transform:none!important;
  }
  .ilan-tablo .rez-btn::after{display:none!important}
  .ilan-tablo .rez-btn:hover,
  .ilan-tablo .rez-btn:active{background:#1F3757!important;color:#fff!important}

  /* fiyat sağ üstte */
  .ilan-tablo .t-fiyat{
    grid-column:3!important;grid-row:1!important;
    justify-self:end;align-self:start;margin-top:0!important;
  }
}

/* ==========================================================
   KART İÇİ EYLEM — "İNCELE & REZERVE ET →"
   Butonun yerinde durur, kutu boyutu değişmez.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .t-rez{
    grid-column:2/4!important;grid-row:2!important;
    justify-self:stretch!important;align-self:end!important;
    width:auto!important;margin-top:9px!important;
    border-top:0!important;
  }
  .ilan-tablo .rez-btn{
    width:100%!important;
    display:flex!important;align-items:center;justify-content:space-between;
    background:transparent!important;
    color:#C9971A!important;
    border:0!important;border-radius:0!important;
    padding:0!important;
    font-size:.7rem!important;font-weight:600!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
    line-height:1.7!important;
  }
  .ilan-tablo .rez-btn::after{
    content:"→";
    display:inline!important;
    font-size:.95rem;letter-spacing:0;font-weight:400;
  }
  .ilan-tablo .rez-btn:hover,
  .ilan-tablo .rez-btn:active{background:transparent!important;color:#A87D12!important}
}

/* eylem yazısı — daha güçlü, okunur */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    color:#2C4C7C!important;
    font-weight:800!important;
    font-size:.73rem!important;
    letter-spacing:.1em!important;
  }
  .ilan-tablo .rez-btn::after{
    font-size:1.05rem;font-weight:700;
  }
  .ilan-tablo .rez-btn:hover,
  .ilan-tablo .rez-btn:active{color:#1B3155!important}
}

/* eylem yazısı — dengeli ton (ne silik ne baskın) */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    color:#41618F!important;
    font-weight:600!important;
    font-size:.71rem!important;
    letter-spacing:.07em!important;
  }
  .ilan-tablo .rez-btn::after{
    font-size:.92rem;font-weight:400;opacity:.75;
  }
}

/* ==========================================================
   ONLINE REZERVASYON FORMU
   Alt çizgili alanlar · altın etiketler · ferah düzen
   ========================================================== */
:root{--rez-vurgu:#D9932B}

.rez-panel{max-width:560px}

.rez-ust{padding:22px 26px 18px;border-bottom:1px solid var(--cizgi)}
.rez-ust h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:#1F2329}
.rez-ustyazi{
  font-size:.68rem;letter-spacing:.18em;color:#A08A66;
  margin-top:5px;text-transform:uppercase;
}

.rez-form{padding:20px 26px 26px;display:flex;flex-direction:column;gap:17px}

/* seçili araç kutusu */
.rez-arac-kutu{
  display:flex;align-items:center;gap:12px;
  padding:11px;background:#FAF8F4;border:1px solid #EDE5D8;border-radius:5px;
}
.rez-arac-kutu img{width:74px;height:52px;object-fit:cover;border-radius:3px;flex-shrink:0}
.rez-arac-kutu div{display:flex;flex-direction:column;min-width:0;flex:1}
.rez-arac-kutu strong{font-size:.92rem;font-weight:700}
.rez-arac-kutu span{font-size:.78rem;color:var(--yazi-3)}
.rez-arac-fiyat{font-size:1rem;font-weight:800;color:var(--rez-vurgu);white-space:nowrap}
.rez-arac-fiyat small{font-size:.68rem;font-weight:500;color:var(--yazi-3)}

/* etiket */
.retiket{
  display:block;
  font-size:.65rem;letter-spacing:.17em;
  color:#A08A66;text-transform:uppercase;font-weight:600;
  margin-bottom:2px;
}

/* alan — alt çizgili */
.ralan{display:flex;flex-direction:column;gap:3px}
.ralan input,
.ralan select,
.ralan textarea{
  width:100%;
  border:0;border-bottom:1px solid #DCD6CB;
  background:transparent;
  padding:7px 2px;
  font-family:inherit;font-size:.95rem;color:#1F2329;
  border-radius:0;
}
.ralan textarea{
  border:1px solid #DCD6CB;border-radius:4px;padding:9px 10px;
  resize:vertical;min-height:64px;font-size:.9rem;
}
.ralan input:focus,
.ralan select:focus,
.ralan textarea:focus{
  outline:none;border-color:var(--rez-vurgu);
}
.ralan select{appearance:none;cursor:pointer;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 2px center/16px}

.rikili{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.rbolum{
  display:flex;flex-direction:column;gap:14px;
  padding-top:16px;border-top:1px solid var(--cizgi-2);
}

/* ekstra hizmetler */
.rekstra{display:flex;flex-direction:column}
.rekstra-satir{
  display:flex;align-items:center;gap:11px;
  padding:11px 2px;border-bottom:1px solid var(--cizgi-2);cursor:pointer;
}
.rekstra-satir:last-child{border-bottom:0}
.rekstra-ad{flex:1;font-size:.9rem;color:#3D5F91}
.rekstra-ucret{font-size:.78rem;color:#B9A184;white-space:nowrap}

/* onay kutucuğu */
.rekstra-satir input,
.ronay input{position:absolute;opacity:0;width:0;height:0}
.rkutu{
  width:17px;height:17px;flex-shrink:0;
  border:1px solid #C9C2B6;border-radius:3px;background:#fff;
  position:relative;transition:var(--gecis);
}
input:checked + .rkutu{background:var(--rez-vurgu);border-color:var(--rez-vurgu)}
input:checked + .rkutu::after{
  content:"";position:absolute;left:5px;top:1px;
  width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ödeme tipi */
.rodeme{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rodeme-kart{cursor:pointer}
.rodeme-kart input{position:absolute;opacity:0;width:0;height:0}
.rodeme-ic{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:15px 6px;
  border:1px solid #DCD6CB;border-radius:5px;
  color:#8A7F6E;font-size:.68rem;letter-spacing:.1em;font-weight:600;
  transition:var(--gecis);
}
.rodeme-kart input:checked + .rodeme-ic{
  border-color:var(--rez-vurgu);color:var(--rez-vurgu);background:#FDF8F0;
}

/* toplam */
.rtoplam{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 0 6px;border-top:1px solid var(--cizgi);
}
.rtoplam-yazi{font-size:.68rem;letter-spacing:.15em;color:#A08A66;text-transform:uppercase;font-weight:600}
.rtoplam-para{font-size:2rem;font-weight:300;color:var(--rez-vurgu);letter-spacing:-.02em}

.rdokum:empty{display:none}
.rdokum{display:flex;flex-direction:column;gap:5px;padding-bottom:6px}
.rdokum-satir{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--yazi-3)}

/* onay satırı */
.ronay{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  padding-top:12px;border-top:1px solid var(--cizgi);
}
.ronay > span:last-child{font-size:.84rem;color:#8A7F6E;line-height:1.5}

/* gönder */
.rez-gonder{
  width:100%;
  background:var(--rez-vurgu)!important;color:#fff!important;
  border:0;border-radius:4px;
  padding:16px;
  font-family:inherit;font-size:.86rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  cursor:pointer;transition:var(--gecis);
}
.rez-gonder:hover{background:#C07F1C!important}
.rez-gonder:disabled{opacity:.6;cursor:wait}

.rez-not{font-size:.75rem;color:var(--yazi-3);line-height:1.55;text-align:center}

@media (max-width:760px){
  .rez-form{padding:18px 18px 24px;gap:15px}
  .rez-ust{padding:18px 18px 15px}
  .rez-ust h2{font-size:1.3rem}
  .rikili{gap:12px}
  .rtoplam-para{font-size:1.7rem}
  .rodeme{gap:7px}
  .rodeme-ic{padding:12px 4px;font-size:.62rem}
}

/* ==========================================================
   GİRİŞ (HERO) — tam ekran karşılama
   ========================================================== */
.hero{
  position:relative;
  min-height:min(88vh,760px);
  display:flex;align-items:center;
  overflow:hidden;
  background:#14171C;
}
.hero-fon{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(12,15,20,.94) 0%,rgba(12,15,20,.78) 42%,rgba(12,15,20,.25) 78%),
    linear-gradient(180deg,rgba(12,15,20,.55) 0%,transparent 35%,rgba(12,15,20,.7) 100%),
    url('../img/ilan/1228693456_1.jpg') no-repeat center right/cover;
}
.hero-ic{
  position:relative;z-index:2;
  width:100%;max-width:var(--kap);margin:0 auto;padding:0 32px;
}
.hero-etiket{
  display:block;
  font-size:.72rem;letter-spacing:.24em;
  color:#C9971A;font-weight:600;margin-bottom:16px;
}
.hero-baslik{
  font-size:clamp(2.1rem,5.2vw,3.9rem);
  font-weight:800;color:#fff;line-height:1.1;
  letter-spacing:-.025em;margin-bottom:26px;
}
.hero-baslik em{
  font-style:italic;font-weight:400;color:#C9971A;
}
.hero-alt{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:34px}
.hero-btn{
  background:#C9971A;color:#1B2A42;
  font-size:.8rem;font-weight:700;letter-spacing:.14em;
  padding:15px 30px;border-radius:3px;
  transition:var(--gecis);white-space:nowrap;
}
.hero-btn:hover{background:#B08313;transform:translateY(-1px)}
.hero-yazi{color:#B9C0CB;font-size:.94rem;max-width:330px;line-height:1.6}

.hero-rozet{display:flex;gap:9px;flex-wrap:wrap}
.hero-rozet li{
  font-size:.74rem;font-weight:600;color:#C7CDD7;
  padding:7px 15px;border:1px solid rgba(255,255,255,.18);border-radius:999px;
  background:rgba(255,255,255,.04);
}

.hero-ok{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:2;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.28);color:#fff;font-size:1.1rem;
  transition:var(--gecis);
}
.hero-ok:hover{background:rgba(255,255,255,.12)}

@media (max-width:980px){
  .hero-fon{
    background:
      linear-gradient(180deg,rgba(12,15,20,.72) 0%,rgba(12,15,20,.5) 45%,rgba(12,15,20,.92) 100%),
      url('../img/ilan/1228693456_1.jpg') no-repeat center center/cover;
  }
  .hero-yazi{max-width:none}
}

@media (max-width:760px){
  .hero{min-height:62vh;align-items:flex-end;padding-bottom:52px}
  .hero-ic{padding:0 18px}
  .hero-etiket{font-size:.64rem;letter-spacing:.2em;margin-bottom:11px}
  .hero-baslik{font-size:1.85rem;margin-bottom:18px}
  .hero-alt{gap:14px;margin-bottom:20px}
  .hero-btn{padding:13px 24px;font-size:.74rem}
  .hero-yazi{font-size:.85rem}
  .hero-rozet li{font-size:.68rem;padding:6px 12px}
  .hero-ok{display:none}
}

/* hero rozetleri — madde işareti olmasın */
.hero-rozet{list-style:none;margin:0;padding:0}
.hero-rozet li{list-style:none}

/* ==========================================================
   HERO — kaydırıcı, araç adı, gezinme okları
   ========================================================== */
.hero-fon{transition:background-image .5s ease}
.hero-fon.gecis{animation:heroGir .7s ease}
@keyframes heroGir{from{opacity:.55;transform:scale(1.03)}to{opacity:1;transform:none}}

/* sağ altta araç adı */
.hero-arac{
  position:absolute;right:32px;bottom:78px;z-index:3;
  display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;
}
.hero-arac strong{
  color:#fff;font-size:1.02rem;font-weight:700;letter-spacing:.06em;
}
.hero-arac span{color:#C9971A;font-size:.78rem;letter-spacing:.05em}

/* gezinme okları */
.hero-gez{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  z-index:3;display:flex;gap:11px;
}
.hero-gez button{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.26);
  color:#fff;font-size:1rem;cursor:pointer;
  display:grid;place-items:center;transition:var(--gecis);
}
.hero-gez button:hover{background:rgba(255,255,255,.2)}

/* sol kenarda dikey yazı */
.hero-kaydir{
  position:absolute;left:14px;bottom:96px;z-index:3;
  writing-mode:vertical-rl;
  font-size:.6rem;letter-spacing:.32em;color:rgba(255,255,255,.45);
}
.hero-kaydir::after{
  content:"";display:block;width:1px;height:44px;
  background:rgba(255,255,255,.3);margin:12px auto 0;
}

@media (max-width:760px){
  .hero-arac{right:18px;bottom:66px}
  .hero-arac strong{font-size:.86rem}
  .hero-arac span{font-size:.7rem}
  .hero-gez{bottom:18px;gap:9px}
  .hero-gez button{width:36px;height:36px;font-size:.9rem}
  .hero-kaydir{display:none}
}

/* mobilde hero sadeleşir — rozetler kalkar, araç adı çakışmaz */
@media (max-width:760px){
  .hero-rozet{display:none}
  .hero{min-height:56vh;padding-bottom:74px}
  .hero-arac{bottom:64px;right:16px}
  .hero-gez{bottom:16px}
}

/* rezervasyon formu — bilgilendirme notu */
.ruyari{
  margin-top:4px;
  padding:11px 13px;
  background:#FDF8F0;
  border-left:3px solid var(--rez-vurgu);
  border-radius:0 4px 4px 0;
  font-size:.82rem;line-height:1.6;color:#8A7F6E;
}

/* "başlayan" etiketi — fiyatın altında küçük not */
.t-fiyat small{
  display:block!important;
  font-size:.66rem;font-weight:500;
  color:var(--yazi-3);letter-spacing:0;
  margin-top:1px;
}
@media (max-width:760px){
  .ilan-tablo .t-fiyat small{display:block!important;font-size:.6rem;line-height:1.2}
}

/* "başlayan" etiketi okunur boyutta */
.t-fiyat small{font-size:.72rem!important;color:#7A7A7A!important;margin-top:2px!important}
@media (max-width:760px){
  .ilan-tablo .t-fiyat small{font-size:.68rem!important;line-height:1.3!important}
}

/* ==========================================================
   FİYAT ROZETİ — koyu kutu, altın üst yazı
   ========================================================== */
.frozet{
  display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  background:#1E2430;
  border-radius:7px;
  padding:6px 11px 7px;
  line-height:1.15;
  white-space:nowrap;
}
.fr-ust{
  font-size:.56rem;font-weight:700;letter-spacing:.09em;
  color:#E8A33D;text-transform:uppercase;
}
.fr-tutar{
  font-size:1.02rem;font-weight:800;color:#fff;letter-spacing:-.01em;
}
.fr-tutar small{
  display:inline!important;
  font-size:.62rem;font-weight:500;color:#9AA3B2;margin-left:1px;
}

/* fiyat hücresi rozeti sarar — eski yazı biçimleri geçersiz */
.t-fiyat{font-weight:400!important}
.t-fiyat small{display:none!important}

@media (max-width:760px){
  .frozet{padding:5px 9px 6px;border-radius:6px}
  .fr-ust{font-size:.52rem;letter-spacing:.07em}
  .fr-tutar{font-size:.92rem}
  .fr-tutar small{font-size:.58rem}
}
@media (max-width:390px){
  .frozet{padding:4px 7px 5px}
  .fr-ust{font-size:.48rem}
  .fr-tutar{font-size:.86rem}
}

/* rozet kompakt — kutucuk yüksekliği korunur */
.frozet{padding:3px 9px 4px!important;gap:0!important;border-radius:5px!important}
.fr-ust{font-size:.5rem!important;letter-spacing:.06em!important;line-height:1.25!important}
.fr-tutar{font-size:.88rem!important;line-height:1.25!important}
.fr-tutar small{font-size:.56rem!important}

@media (max-width:760px){
  .frozet{padding:3px 8px 4px!important}
  .fr-ust{font-size:.47rem!important}
  .fr-tutar{font-size:.82rem!important}
  .fr-tutar small{font-size:.54rem!important}
}

/* rozet — sade yapı, tek satır tutar */
.frozet{padding:4px 9px 5px!important}
.fr-tutar{
  display:flex!important;align-items:baseline;justify-content:center;gap:1px;
  font-size:.9rem!important;line-height:1.2!important;
}
.fr-gun{
  font-style:normal;font-size:.56rem;font-weight:500;color:#9AA3B2;
}
@media (max-width:760px){
  .fr-tutar{font-size:.84rem!important}
  .fr-gun{font-size:.53rem}
}

/* rozet — tutar üstte, açıklama altta */
.frozet{padding:5px 10px 6px!important}
.fr-ust{
  font-size:.51rem!important;letter-spacing:.05em!important;
  color:#E8A33D!important;line-height:1.2!important;
}
.fr-tutar{font-size:.92rem!important;line-height:1.2!important}
.fr-gun{font-size:.6rem;color:#C6CCD6}

@media (max-width:760px){
  .fr-ust{font-size:.48rem!important}
  .fr-tutar{font-size:.86rem!important}
  .fr-gun{font-size:.56rem}
}

/* rozet daraltıldı — başlığa yer kalsın */
@media (max-width:760px){
  .frozet{padding:5px 7px 6px!important}
  .fr-ust{font-size:.42rem!important;letter-spacing:.02em!important}
  .fr-tutar{font-size:.8rem!important}
  .fr-gun{font-size:.5rem}
  .ilan-tablo .t-baslik a{font-size:.72rem!important;letter-spacing:-.5px!important}
  .t-arac-mob{font-size:.74rem!important}
}

@media (max-width:760px){
  .ilan-tablo .t-baslik a{font-size:.7rem!important;letter-spacing:-.6px!important}
  .frozet{padding:5px 8px 6px!important}
}

/* ==========================================================
   FİYAT ROZETİ — alt şerit sahibinden sarısı, yazı siyah
   ========================================================== */
.frozet{
  padding:0!important;
  overflow:hidden;
  gap:0!important;
  align-items:stretch!important;
}
.fr-tutar{
  padding:5px 10px 4px;
  justify-content:center;
}
.fr-ust{
  display:block;
  background:#FFE800;
  color:#1A1A1A!important;
  font-weight:800!important;
  padding:3px 8px 4px;
  text-align:center;
}

/* sarı şerit tam tabanı kaplasın */
.frozet{border-radius:6px!important}
.fr-ust{
  width:100%;
  margin:0!important;
  padding:4px 8px 5px!important;
  border-radius:0 0 6px 6px;
  box-sizing:border-box;
}
.fr-tutar{padding:6px 10px 5px!important}

/* uzun metin sığsın diye şerit yazısı biraz küçülür */
@media (max-width:760px){
  .fr-ust{font-size:.4rem!important;letter-spacing:0!important;padding:4px 6px 5px!important}
  .fr-tutar{padding:6px 8px 5px!important}
}

/* ==========================================================
   FİYAT ROZETİ — komple sarı zemin, siyah yazı
   ========================================================== */
.frozet{background:#FFE800!important}
.fr-tutar{color:#141414!important}
.fr-gun{color:#3D3D3D!important}
.fr-ust{
  background:transparent!important;
  color:#141414!important;
  border-radius:0!important;
}

/* rozet ve başlık birlikte sığsın */
@media (max-width:760px){
  .frozet{border-radius:5px!important}
  .fr-tutar{padding:5px 7px 4px!important;font-size:.78rem!important}
  .fr-gun{font-size:.48rem!important}
  .fr-ust{font-size:.37rem!important;padding:3px 5px 4px!important}
  .ilan-tablo .t-baslik a{font-size:.66rem!important;letter-spacing:-.55px!important}
  .t-arac-mob{font-size:.72rem!important}
}

/* ==========================================================
   FİYAT ROZETİ — kurumsal (lacivert zemin · altın vurgu)
   ========================================================== */
.frozet{
  background:#2C4C7C!important;
  border-radius:5px!important;
  box-shadow:0 1px 3px rgba(20,30,50,.18);
}
.fr-tutar{color:#FFFFFF!important}
.fr-gun{color:#B9C6DA!important}
.fr-ust{
  background:rgba(255,255,255,.09)!important;
  color:#E8B93D!important;
  border-top:1px solid rgba(255,255,255,.12);
  font-weight:700!important;
}

/* ==========================================================
   KİRALAMA FİYATLARI TABLOSU (ilan detayı)
   ========================================================== */
.fiyat-liste{display:flex;flex-direction:column}
.fiyat-liste li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 2px;border-bottom:1px solid var(--cizgi-2);
}
.fiyat-liste li:last-child{border-bottom:0}
.fiyat-liste span{font-size:.9rem;color:var(--yazi-2)}
.fiyat-liste strong{
  font-size:1.06rem;font-weight:800;color:#2C4C7C;white-space:nowrap;
}
.fiyat-liste strong i{
  font-style:normal;font-size:.7rem;font-weight:500;color:var(--yazi-3);margin-left:2px;
}
.fiyat-not{
  margin-top:12px;padding:11px 13px;
  background:#F4F7FB;border-left:3px solid #2C4C7C;border-radius:0 4px 4px 0;
  font-size:.82rem;line-height:1.6;color:var(--yazi-2);
}

/* ==========================================================
   FİYAT ROZETİ — CTR Group kimliği
   Üst: açık lacivert + beyaz tutar
   Alt: CTR koyu laciverti + altın yazı
   ========================================================== */
.frozet{
  background:#2C4C7C!important;
  border-radius:5px!important;
  box-shadow:0 1px 4px rgba(15,25,45,.22);
}
.fr-tutar{color:#FFFFFF!important}
.fr-gun{color:#AEBED6!important}
.fr-ust{
  background:#16233A!important;
  color:#D9A441!important;
  border-top:0!important;
  font-weight:800!important;
}

/* rozet tek renk — üst ve alt aynı lacivert */
.frozet{background:#223B62!important}
.fr-ust{background:transparent!important}

/* ==========================================================
   FİYAT ROZETİ — profesyonel yansımalı yüzey
   Degrade zemin · üstte ışık çizgisi · yumuşak gölge
   ========================================================== */
.frozet{
  background:linear-gradient(180deg,#3D6199 0%,#2C4C7C 48%,#1C3159 100%)!important;
  border:1px solid rgba(255,255,255,.10);
  border-radius:6px!important;
  box-shadow:
    0 2px 7px rgba(12,22,42,.30),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
}
/* üst yarıya ince cam yansıması */
.frozet::before{
  content:"";position:absolute;left:0;right:0;top:0;height:46%;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
  pointer-events:none;
}
.fr-tutar{
  color:#FFFFFF!important;
  text-shadow:0 1px 1px rgba(0,0,0,.35);
  position:relative;z-index:1;
}
.fr-gun{color:#C2D0E6!important}
.fr-ust{
  background:transparent!important;
  color:#F0C05A!important;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  position:relative;z-index:1;
}

/* ==========================================================
   FİYAT ROZETİ — alt taban: metalik altın, gezinen yansıma
   ========================================================== */
.fr-ust{
  background:linear-gradient(180deg,#D9A63C 0%,#B9871F 55%,#9E7014 100%)!important;
  color:#221A05!important;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  border-top:1px solid rgba(255,255,255,.25);
  position:relative;z-index:1;
  overflow:hidden;
}
/* şeridin üzerinde yavaşça gidip gelen ışık süpürmesi */
.fr-ust::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;
  width:45%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  animation:parla var(--ritim-suzulme) var(--egri-suzulme) infinite;
  pointer-events:none;
}
@keyframes parla{
  0%   {left:-60%}
  55%  {left:115%}
  100% {left:115%}
}

@media (prefers-reduced-motion:reduce){
  .fr-ust::after{animation:none;display:none}
}

/* ==========================================================
   FİYAT ROZETİ — üst mavi bölüm: geçişli canlı yüzey
   Derin lacivert ↔ çelik mavisi arasında yavaş renk geçişi
   + üzerinden süzülen ışık
   ========================================================== */
.frozet{
  background:linear-gradient(120deg,
    #1B2F52 0%, #2C4C7C 28%, #3E6AA8 50%, #2C4C7C 72%, #1B2F52 100%)!important;
  background-size:220% 220%!important;
  animation:maviAkis var(--ritim-yuzey) var(--egri-salinim) infinite;
}
@keyframes maviAkis{
  0%   {background-position:0% 50%}
  50%  {background-position:100% 50%}
  100% {background-position:0% 50%}
}

/* mavi bölümün üzerinden süzülen ince ışık (altın şeritten bağımsız) */
.fr-tutar{position:relative;overflow:hidden}
.fr-tutar::after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;
  width:38%;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,0) 100%);
  transform:skewX(-12deg);
  animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite;
  animation-delay:3s;      /* ritim: 5/8 */
  pointer-events:none;
}
@keyframes maviParla{
  0%   {left:-70%}
  60%  {left:130%}
  100% {left:130%}
}

@media (prefers-reduced-motion:reduce){
  .frozet{animation:none!important}
  .fr-tutar::after{animation:none;display:none}
}

/* ==========================================================
   MARKA ŞERİDİ — antrasit zemin, akan yaldız altın yazı
   ========================================================== */
.marka-serit{
  background:linear-gradient(180deg,#2E3136 0%,#232529 55%,#1C1E21 100%);
  border-bottom:1px solid #17181B;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  text-align:center;
  padding:11px 14px;
}
.marka-serit span{
  display:inline-block;
  font-size:.92rem;font-weight:800;
  letter-spacing:.22em;
  white-space:nowrap;
  background:linear-gradient(100deg,
    #8C6A1D 0%, #C89B2E 20%, #F7E7A0 38%, #FFF6CE 50%,
    #F7E7A0 62%, #C89B2E 80%, #8C6A1D 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.5));
}
@keyframes yaldizDalga{
  0%   {background-position:0% 50%}
  50%  {background-position:100% 50%}
  100% {background-position:0% 50%}
}

@media (max-width:760px){
  .marka-serit{padding:9px 10px}
  .marka-serit span{font-size:.8rem;letter-spacing:.18em}
}
@media (prefers-reduced-motion:reduce){
  .marka-serit span{animation:none}
}

/* marka şeridi — büyük yazı, grimsi antrasit zemin */
.marka-serit{
  background:linear-gradient(180deg,#4A4E55 0%,#3D4148 55%,#33363C 100%)!important;
  border-bottom:1px solid #2B2E33!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09)!important;
  padding:14px 14px!important;
}
.marka-serit span{
  font-size:1.35rem!important;
  letter-spacing:.24em!important;
}
@media (max-width:760px){
  .marka-serit{padding:12px 10px!important}
  .marka-serit span{font-size:1.02rem!important;letter-spacing:.16em!important}
}

/* marka şeridi — zemin eski koyu antrasite geri döndü, boyut kaldı */
.marka-serit{
  background:linear-gradient(180deg,#2E3136 0%,#232529 55%,#1C1E21 100%)!important;
  border-bottom:1px solid #17181B!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}

/* ==========================================================
   MARKA ŞERİDİ — altında bağlantılı rozet kutucukları
   ========================================================== */
.marka-rozetler{
  display:flex;justify-content:center;align-items:center;
  gap:10px;flex-wrap:wrap;
  margin-top:9px;
}
.marka-rozetler em{
  font-style:normal;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;
  color:#E8C96A;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(216,166,60,.4);
  border-radius:4px;
  padding:6px 13px;
  white-space:nowrap;
}
@media (max-width:760px){
  .marka-rozetler{gap:7px;margin-top:8px}
  .marka-rozetler em{font-size:.62rem;letter-spacing:.06em;padding:5px 9px}
}

/* ==========================================================
   ASKILIK — şeritten aşağı sarkan tabelalar
   Her kutu ince bir askıyla çubuğa bağlı
   ========================================================== */
.marka-rozetler{display:none!important}

.marka-askilik{
  display:flex;justify-content:center;align-items:flex-start;
  gap:30px;flex-wrap:wrap;
  padding:0 14px 14px;
  background:transparent;
}
.marka-askilik em{
  font-style:normal;
  position:relative;
  margin-top:12px;              /* askı ipine yer */
  font-size:.74rem;font-weight:800;letter-spacing:.1em;
  color:#E8C96A;
  background:linear-gradient(180deg,#2E3136 0%,#232529 60%,#1C1E21 100%);
  border:1px solid rgba(216,166,60,.35);
  border-radius:0 0 8px 8px;    /* alt köşeler yuvarlak — tabela gibi */
  padding:9px 16px 10px;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(0,0,0,.22);
}
/* askı ipi — kutudan yukarı, şeride bağlanır */
.marka-askilik em::before{
  content:"";position:absolute;left:50%;top:-12px;
  transform:translateX(-50%);
  width:2px;height:12px;
  background:linear-gradient(180deg,#8C6A1D,#D9A63C);
}
/* askı halkası */
.marka-askilik em::after{
  content:"";position:absolute;left:50%;top:-14px;
  transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:#D9A63C;
}

@media (max-width:760px){
  .marka-askilik{gap:12px;padding:0 8px 12px}
  .marka-askilik em{
    font-size:.6rem;letter-spacing:.05em;
    padding:7px 10px 8px;margin-top:10px;
  }
  .marka-askilik em::before{height:10px;top:-10px}
  .marka-askilik em::after{top:-12px;width:5px;height:5px}
}

/* askılık — mobilde üçü tek sırada kalsın */
@media (max-width:760px){
  .marka-askilik{
    flex-wrap:nowrap!important;
    gap:8px!important;
    padding:0 6px 12px!important;
  }
  .marka-askilik em{
    font-size:.52rem!important;
    letter-spacing:.02em!important;
    padding:6px 7px 7px!important;
  }
}
@media (max-width:380px){
  .marka-askilik em{font-size:.47rem!important;padding:6px 5px 7px!important}
  .marka-askilik{gap:6px!important}
}

/* ==========================================================
   ASKILIK — her ekran genişliğinde tek sıra (otomatik ölçek)
   ========================================================== */
@media (max-width:760px){
  .marka-askilik{
    flex-wrap:nowrap!important;
    gap:clamp(4px,1.6vw,10px)!important;
    padding:0 clamp(4px,1.5vw,10px) 12px!important;
  }
  .marka-askilik em{
    font-size:clamp(.4rem,2.05vw,.66rem)!important;
    letter-spacing:clamp(0px,.15vw,.05em)!important;
    padding:clamp(5px,1.4vw,8px) clamp(4px,1.8vw,11px) clamp(6px,1.5vw,9px)!important;
    flex:0 1 auto;min-width:0;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — kurumsal ışıklı buton
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .t-rez{
    grid-column:2/4!important;grid-row:2!important;
    justify-self:stretch!important;margin-top:9px!important;
  }
  .ilan-tablo .rez-btn{
    width:100%!important;
    display:flex!important;align-items:center;justify-content:center;gap:7px;
    position:relative;overflow:hidden;
    background:linear-gradient(120deg,#1B2F52 0%,#2C4C7C 30%,#3E6AA8 50%,#2C4C7C 70%,#1B2F52 100%)!important;
    background-size:220% 220%!important;
    animation:maviAkis var(--ritim-yuzey) var(--egri-salinim) infinite;
    color:#F0C05A!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:5px!important;
    padding:7px 12px!important;
    font-size:.68rem!important;font-weight:800!important;
    letter-spacing:.12em!important;
    text-transform:uppercase!important;
    text-shadow:0 1px 1px rgba(0,0,0,.35);
    box-shadow:0 2px 6px rgba(12,22,42,.28),inset 0 1px 0 rgba(255,255,255,.18);
  }
  /* üzerinden süzülen ışık */
  .ilan-tablo .rez-btn::before{
    content:"";position:absolute;top:-20%;bottom:-20%;left:-70%;
    width:36%;
    background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));
    transform:skewX(-12deg);
    animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite;
    animation-delay:3.6s;    /* ritim: 3/4 */
    pointer-events:none;
  }
  .ilan-tablo .rez-btn::after{
    content:"→";
    display:inline!important;
    font-size:.85rem;letter-spacing:0;font-weight:400;
    position:relative;z-index:1;opacity:.9;
  }
  .ilan-tablo .rez-btn:active{filter:brightness(1.12)}
}

@media (prefers-reduced-motion:reduce){
  .ilan-tablo .rez-btn{animation:none!important}
  .ilan-tablo .rez-btn::before{display:none}
}

/* askılık — ekran genişledikçe büyür, dar ekranda tek sıra kalır */
@media (max-width:760px){
  .marka-askilik{
    gap:clamp(5px,1.8vw,12px)!important;
    padding:0 clamp(5px,1.6vw,12px) 13px!important;
  }
  .marka-askilik em{
    font-size:clamp(.47rem,2.95vw,.8rem)!important;
    letter-spacing:clamp(0px,.2vw,.07em)!important;
    padding:clamp(6px,1.7vw,10px) clamp(5px,2.1vw,14px) clamp(7px,1.9vw,11px)!important;
  }
  .marka-askilik em::before{height:clamp(9px,2.4vw,13px)!important;top:calc(-1 * clamp(9px,2.4vw,13px))!important}
  .marka-askilik em::after{
    width:clamp(5px,1.3vw,7px)!important;height:clamp(5px,1.3vw,7px)!important;
    top:calc(-2px - clamp(9px,2.4vw,13px))!important;
  }
}

/* "HEMEN REZERVE ET" — rozet ölçüsünde kompakt ışıklı buton */
@media (max-width:760px){
  .ilan-tablo .t-rez{
    justify-self:start!important;
    margin-top:9px!important;
  }
  .ilan-tablo .rez-btn{
    width:auto!important;
    display:inline-flex!important;
    gap:5px!important;
    padding:5px 11px 6px!important;
    font-size:.58rem!important;
    letter-spacing:.09em!important;
    border-radius:5px!important;
  }
  .ilan-tablo .rez-btn::after{font-size:.72rem!important}
}

/* ==========================================================
   "HEMEN REZERVE ET" — "BAŞLAYAN FİYATLARLA" şeridiyle
   birebir aynı: metalik altın zemin, koyu yazı, ışık süpürmesi
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    background:linear-gradient(180deg,#D9A63C 0%,#B9871F 55%,#9E7014 100%)!important;
    background-size:auto!important;
    animation:none!important;
    color:#221A05!important;
    text-shadow:0 1px 0 rgba(255,255,255,.28)!important;
    border:1px solid rgba(255,255,255,.25)!important;
    box-shadow:0 2px 6px rgba(60,42,8,.28),inset 0 1px 0 rgba(255,255,255,.3)!important;
  }
  /* altın şerittekiyle aynı ışık süpürmesi */
  .ilan-tablo .rez-btn::before{
    content:"";position:absolute;top:0;bottom:0;left:-60%;
    width:45%;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 100%)!important;
    transform:none!important;
    animation:parla var(--ritim-suzulme) var(--egri-suzulme) infinite!important;
    animation-delay:3.6s!important;   /* ritim: 3/4 */
    pointer-events:none;
  }
  .ilan-tablo .rez-btn::after{color:#221A05;opacity:.85}
}

/* ==========================================================
   "HEMEN REZERVE ET" — kurumsal koyu lacivert, beyaz yazı
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .t-rez{justify-self:start!important}
  .ilan-tablo .rez-btn{
    width:auto!important;
    background:linear-gradient(180deg,#31558C 0%,#24406B 55%,#1A2F51 100%)!important;
    color:#FFFFFF!important;
    border:1px solid rgba(255,255,255,.14)!important;
    text-shadow:0 1px 1px rgba(0,0,0,.4)!important;
    box-shadow:0 2px 7px rgba(14,25,45,.32),inset 0 1px 0 rgba(255,255,255,.2)!important;
    padding:7px 14px 8px!important;
    font-size:.62rem!important;
    letter-spacing:.11em!important;
  }
  .ilan-tablo .rez-btn::before{
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.4) 50%,
      rgba(255,255,255,0) 100%)!important;
  }
  .ilan-tablo .rez-btn::after{color:#F0C05A!important;opacity:1}
}

/* ==========================================================
   "HEMEN REZERVE ET" — yaldız altın yazı, akan ışık
   Lacivert zemin korunur, yazı yaldıza döner
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    color:transparent!important;
    text-shadow:none!important;
    background-image:
      linear-gradient(180deg,#31558C 0%,#24406B 55%,#1A2F51 100%)!important;
  }
  /* yazıyı yaldız degradeyle boya */
  .ilan-tablo .rez-btn{
    -webkit-background-clip:border-box;
  }
  .ilan-tablo .rez-btn > span,
  .ilan-tablo .rez-btn{
    position:relative;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — yaldız yazı + akan ışık (son hâl)
   ========================================================== */
.rez-yazi{display:inline-block}

@media (max-width:760px){
  .ilan-tablo .rez-btn{
    color:#F0C05A!important;
    background:linear-gradient(180deg,#31558C 0%,#24406B 55%,#1A2F51 100%)!important;
    text-shadow:none!important;
  }
  /* yaldız akışı yalnızca yazının üzerinde */
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #8C6A1D 0%, #C89B2E 18%, #F7E7A0 38%, #FFF8D8 50%,
      #F7E7A0 62%, #C89B2E 82%, #8C6A1D 100%);
    background-size:220% auto;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));
    position:relative;z-index:1;
  }
  .ilan-tablo .rez-btn::after{color:#F0C05A!important;opacity:1;z-index:1}
}

@media (prefers-reduced-motion:reduce){
  .ilan-tablo .rez-yazi{animation:none}
}

/* ==========================================================
   "HEMEN REZERVE ET" — 3D kabartma
   Gölge katmanlarıyla yükselti; kutucuk boyutu değişmez
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:6px!important;
    box-shadow:
      0 4px 0 #142744,                    /* 3D taban kalınlığı */
      0 6px 11px rgba(10,20,38,.38),      /* zemine düşen gölge */
      inset 0 1px 0 rgba(255,255,255,.28),/* üst kenar ışığı */
      inset 0 -2px 4px rgba(0,0,0,.28)!important; /* iç alt gölge */
    transform:translateY(0);
    transition:transform .09s ease, box-shadow .09s ease, filter .12s ease;
  }
  /* basınca içeri gömülür */
  .ilan-tablo .rez-btn:active{
    transform:translateY(3px);
    box-shadow:
      0 1px 0 #142744,
      0 2px 5px rgba(10,20,38,.34),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 3px rgba(0,0,0,.3)!important;
    filter:brightness(1.06);
  }
}

/* ==========================================================
   ÖDEME NOTU — askılığın altında ince kurumsal satır
   ========================================================== */
.odeme-notu{
  text-align:center;
  font-size:.7rem;font-weight:600;letter-spacing:.09em;
  color:#7A8494;
  padding:0 14px 14px;
  margin:0;
}
.odeme-notu span{
  color:#B9871F;font-weight:800;
}
@media (max-width:760px){
  .odeme-notu{
    font-size:clamp(.52rem,2.1vw,.68rem);
    letter-spacing:clamp(0px,.15vw,.06em);
    padding:0 10px 12px;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — daha küçük + belirgin 3D
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    padding:6px 12px 7px!important;
    font-size:.56rem!important;
    letter-spacing:.09em!important;
    gap:5px!important;
    border-radius:6px!important;
    border:1px solid rgba(255,255,255,.2)!important;
    box-shadow:
      0 5px 0 #0F2039,
      0 7px 14px rgba(8,16,32,.45),
      inset 0 2px 0 rgba(255,255,255,.32),
      inset 0 -3px 6px rgba(0,0,0,.38)!important;
  }
  .ilan-tablo .rez-btn:active{
    transform:translateY(4px);
    box-shadow:
      0 1px 0 #0F2039,
      0 2px 5px rgba(8,16,32,.4),
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 -2px 4px rgba(0,0,0,.4)!important;
  }
  .ilan-tablo .rez-btn::after{font-size:.68rem!important}
}

/* ==========================================================
   MARKA BÖLÜMÜ — açık krem/altın zemin (siyah bant kaldırıldı)
   Üstte açık mavi-beyaz, altta krem; zeminde perspektif çizgiler
   ========================================================== */
.marka-serit{
  background:
    linear-gradient(180deg,
      #FAFBFF 0%, #F6F7FC 26%, #F4F1E6 52%,
      #F2EAD6 74%, #EDE2C9 100%)!important;
  border-bottom:0!important;
  box-shadow:none!important;
  padding:22px 14px 10px!important;
  position:relative;
  overflow:hidden;
}
/* zeminde ince perspektif çizgileri */
.marka-serit::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:52%;
  background:
    repeating-linear-gradient(90deg,
      rgba(180,158,110,.16) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(180deg,
      rgba(180,158,110,.13) 0 1px, transparent 1px 22px);
  pointer-events:none;
  mask-image:linear-gradient(180deg,transparent,#000 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);
}
/* başlık — koyu altın, açık zeminde okunur */
.marka-serit span{
  position:relative;z-index:1;
  background:linear-gradient(100deg,
    #8A6614 0%, #B9871F 20%, #D9B24E 38%, #E8C978 50%,
    #D9B24E 62%, #B9871F 80%, #8A6614 100%)!important;
  background-size:220% auto!important;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))!important;
}

/* askılık — açık zemine oturan koyu tabelalar (kontrast korunur) */
.marka-askilik{
  background:linear-gradient(180deg,#EDE2C9 0%,#EAE0C6 100%);
  padding-top:0!important;
  position:relative;z-index:1;
}
.marka-askilik em::before{
  background:linear-gradient(180deg,#B08414,#8A6614)!important;
}
.marka-askilik em::after{background:#B08414!important}

/* ödeme notu — açık zeminde koyu yazı */
.odeme-notu{
  background:linear-gradient(180deg,#EAE0C6 0%,#E4D8B8 100%);
  color:#6B6250!important;
  margin:0!important;
  padding-top:2px!important;
}
.odeme-notu span{color:#8A6614!important}

@media (max-width:760px){
  .marka-serit{padding:18px 10px 8px!important}
}

/* marka başlığı — yaldız yazı düzeltmesi (blok dolgu sorunu) */
.marka-serit span{
  filter:none!important;
  display:inline-block!important;
  padding:0 2px;
  -webkit-text-fill-color:transparent!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  background-image:linear-gradient(100deg,
    #8A6614 0%, #B9871F 18%, #D9B24E 36%,
    #F0DFA8 50%,
    #D9B24E 64%, #B9871F 82%, #8A6614 100%)!important;
  background-size:220% auto!important;
  background-color:transparent!important;
}

/* ==========================================================
   SAYFA ZEMİNİ — krem/altın atmosfer (kartlar beyaz kalır)
   ========================================================== */
body{
  background:
    linear-gradient(180deg,
      #F7F8FC 0%, #F5F3EC 18%, #F3EEE0 42%,
      #F1EADA 68%, #EFE7D4 100%) fixed!important;
}
/* zeminde çok hafif perspektif dokusu */
body::before{
  content:"";position:fixed;left:0;right:0;bottom:0;height:38vh;
  background:
    repeating-linear-gradient(90deg,
      rgba(176,150,96,.10) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(180deg,
      rgba(176,150,96,.08) 0 1px, transparent 1px 26px);
  mask-image:linear-gradient(180deg,transparent,#000 78%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 78%);
  pointer-events:none;z-index:0;
}

/* kartlar ve paneller beyaz kalsın — okunabilirlik korunur */
.ilan-tablo tbody tr,
.tablo-sar,
.kutu,.sonuc-bas,.secili-cubuk,.arac-cubuk,
.l-ilan,.g-ilan,.benzer-kart,
.detay-kutu,.fiyat-kutu,.bilgi-kutu,.firma-kutu,.galeri{
  background:#FFFFFF!important;
}
.ilan-tablo tbody tr:nth-child(even){background:#FCFBF7!important}
.ilan-tablo thead th{background:#F6F3EA!important}

/* içerik zeminin üstünde kalsın */
.govde,.detay,.kirilma,.ust,.m-bas,.m-cubuk,.alt{position:relative;z-index:1}

/* ==========================================================
   MOBİL — kartların iki yanında krem zemin görünsün
   Kartlar yüzen kutular hâline gelir
   ========================================================== */
@media (max-width:760px){
  .kap{padding:0 10px!important}
  .govde{padding-block:10px 8px!important;gap:10px!important}

  .tablo-sar{background:transparent!important}

  .ilan-tablo tbody tr{
    background:#FFFFFF!important;
    border:1px solid rgba(176,150,96,.18)!important;
    border-radius:9px!important;
    margin-bottom:9px!important;
    box-shadow:0 1px 3px rgba(120,100,60,.10);
  }
  .ilan-tablo tbody tr:nth-child(even){background:#FFFFFF!important}
  .ilan-tablo tbody tr:last-child{margin-bottom:0!important}

  /* marka bölümü de kenarlardan nefes alsın */
  .marka-serit,.marka-askilik,.odeme-notu{
    border-radius:0;
  }
}

/* kart daraldı — başlık yeniden sığsın */
@media (max-width:760px){
  .kap{padding:0 8px!important}
  .ilan-tablo tbody tr{padding:11px 9px!important;column-gap:8px!important}
  .ilan-tablo .t-baslik a{font-size:.63rem!important;letter-spacing:-.65px!important}
  .t-arac-mob{font-size:.7rem!important}
  .frozet{padding:4px 7px 5px!important}
  .fr-tutar{font-size:.76rem!important}
  .fr-ust{font-size:.36rem!important}
  .fr-gun{font-size:.46rem!important}
}

/* başlık son 2px — tam otursun */
@media (max-width:760px){
  .ilan-tablo .t-baslik a{letter-spacing:-.72px!important}
}

/* ==========================================================
   MOBİL — KARTLAR ESKİ HÂLİNE DÖNDÜ
   Tam genişlik, çerçevesiz, aralarında ince çizgi
   ========================================================== */
@media (max-width:760px){
  .kap{padding:0!important}
  .govde{padding-block:0 8px!important;gap:0!important}

  .tablo-sar{background:transparent!important}

  .ilan-tablo tbody tr{
    background:#FFFFFF!important;
    border:0!important;
    border-bottom:1px solid var(--cizgi)!important;
    border-radius:0!important;
    margin:0!important;
    box-shadow:none!important;
    padding:12px 10px!important;
    column-gap:9px!important;
  }
  .ilan-tablo tbody tr:nth-child(even){background:#FFFFFF!important}

  /* yazı ölçüleri eski onaylı hâline */
  .ilan-tablo .t-baslik a{font-size:.7rem!important;letter-spacing:-.6px!important}
  .t-arac-mob{font-size:.74rem!important}
  .frozet{padding:5px 8px 6px!important}
  .fr-tutar{font-size:.8rem!important}
  .fr-ust{font-size:.37rem!important}
  .fr-gun{font-size:.48rem!important}
}

/* ==========================================================
   ÖDEME NOTU — antrasit zemin, ekrana göre otomatik ölçek
   ========================================================== */
.odeme-notu{
  background:linear-gradient(180deg,#2E3136 0%,#232529 55%,#1C1E21 100%)!important;
  color:#D8DDE4!important;
  padding:11px 14px!important;
  margin:0!important;
  letter-spacing:.1em;
  font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.odeme-notu span{color:#E8C96A!important;font-weight:800}

@media (max-width:760px){
  .odeme-notu{
    font-size:clamp(.5rem,2.5vw,.72rem)!important;
    letter-spacing:clamp(0px,.18vw,.08em)!important;
    padding:clamp(8px,2.2vw,13px) clamp(6px,2vw,14px)!important;
    white-space:nowrap;
  }
}

/* başlık tam otursun — rozet bir tık daralır */
@media (max-width:760px){
  .frozet{padding:5px 7px 6px!important}
  .fr-tutar{font-size:.77rem!important}
  .fr-ust{font-size:.35rem!important}
  .ilan-tablo .t-baslik a{font-size:.67rem!important;letter-spacing:-.68px!important}
}

/* ==========================================================
   MOBİL — kartlar yeniden krem zeminde yüzen kutular
   (ödeme notu antrasit kalır)
   ========================================================== */
@media (max-width:760px){
  .kap{padding:0 8px!important}
  .govde{padding-block:10px 8px!important;gap:10px!important}

  .tablo-sar{background:transparent!important}

  .ilan-tablo tbody tr{
    background:#FFFFFF!important;
    border:1px solid rgba(176,150,96,.20)!important;
    border-bottom:1px solid rgba(176,150,96,.20)!important;
    border-radius:9px!important;
    margin-bottom:9px!important;
    box-shadow:0 1px 4px rgba(120,100,60,.12)!important;
    padding:11px 9px!important;
    column-gap:8px!important;
  }
  .ilan-tablo tbody tr:last-child{margin-bottom:0!important}

  /* dar karta göre yazı ölçüleri */
  .ilan-tablo .t-baslik a{font-size:.63rem!important;letter-spacing:-.72px!important}
  .t-arac-mob{font-size:.7rem!important}
  .frozet{padding:4px 7px 5px!important}
  .fr-tutar{font-size:.76rem!important}
  .fr-ust{font-size:.36rem!important}
  .fr-gun{font-size:.46rem!important}

  /* ödeme notu kenarlara yayılsın */
  .odeme-notu{margin:0 -8px!important}
}

/* ==========================================================
   KART İÇİ — tüm ölçüler ekran genişliğine bağlı (otomatik)
   Referans: 375px'te onaylanan boyutlar
   ========================================================== */
@media (max-width:760px){
  /* fotoğraf */
  .ilan-tablo tbody tr{
    grid-template-columns:clamp(96px,30.5vw,138px) minmax(0,1fr) auto!important;
    padding:clamp(9px,2.9vw,14px) clamp(7px,2.4vw,12px)!important;
    column-gap:clamp(6px,2.2vw,11px)!important;
  }
  .t-foto img{
    width:clamp(96px,30.5vw,138px)!important;
    height:clamp(64px,20.2vw,92px)!important;
  }

  /* başlık ve araç adı */
  .ilan-tablo .t-baslik a{
    font-size:clamp(.58rem,2.72vw,.84rem)!important;
    letter-spacing:clamp(-.8px,-.19vw,-.4px)!important;
  }
  .t-arac-mob{
    font-size:clamp(.62rem,3vw,.9rem)!important;
    margin-top:clamp(2px,.7vw,4px)!important;
  }

  /* fiyat rozeti */
  .frozet{
    padding:clamp(3px,1.1vw,6px) clamp(5px,1.9vw,10px) clamp(4px,1.3vw,7px)!important;
    border-radius:clamp(4px,1.4vw,7px)!important;
  }
  .fr-tutar{font-size:clamp(.68rem,3.25vw,.98rem)!important}
  .fr-gun{font-size:clamp(.4rem,1.95vw,.58rem)!important}
  .fr-ust{
    font-size:clamp(.32rem,1.55vw,.46rem)!important;
    letter-spacing:clamp(0px,.1vw,.04em)!important;
    padding:clamp(2px,.85vw,5px) clamp(4px,1.4vw,8px) clamp(3px,1vw,5px)!important;
  }

  /* rezerve butonu */
  .ilan-tablo .rez-btn{
    font-size:clamp(.48rem,2.4vw,.7rem)!important;
    letter-spacing:clamp(.04em,.28vw,.12em)!important;
    padding:clamp(5px,1.7vw,9px) clamp(9px,3.2vw,16px) clamp(6px,1.9vw,10px)!important;
    gap:clamp(3px,1.3vw,7px)!important;
  }
  .ilan-tablo .rez-btn::after{font-size:clamp(.58rem,2.8vw,.82rem)!important}

  /* konum / boşluklar */
  .ilan-tablo .t-rez{margin-top:clamp(7px,2.4vw,12px)!important}
  .ilan-tablo .t-fiyat{margin-top:0!important}
}

/* ödeme notu zaten tam genişlik — negatif kenar boşluğu iptal */
@media (max-width:760px){
  .odeme-notu{margin:0!important;width:auto!important}
}
/* fotoğraf bir tık daralsın, başlığa yer kalsın */
@media (max-width:760px){
  .ilan-tablo tbody tr{grid-template-columns:clamp(92px,28.2vw,130px) minmax(0,1fr) auto!important}
  .t-foto img{width:clamp(92px,28.2vw,130px)!important;height:clamp(61px,18.7vw,86px)!important}
}

/* ==========================================================
   "HEMEN REZERVE ET" — okunur yazı + altında altın şerit
   Buton inceltildi, yazı öne çıkarıldı
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    padding:clamp(4px,1.3vw,7px) clamp(9px,3vw,15px) clamp(5px,1.5vw,8px)!important;
    font-size:clamp(.5rem,2.55vw,.74rem)!important;
    letter-spacing:clamp(.05em,.3vw,.13em)!important;
    box-shadow:
      0 4px 0 #0F2039,
      0 6px 12px rgba(8,16,32,.42),
      inset 0 2px 0 rgba(255,255,255,.3),
      inset 0 -3px 6px rgba(0,0,0,.34)!important;
  }

  /* yazı — sabit parlak altın, animasyon yok (net okunur) */
  .ilan-tablo .rez-yazi{
    background:none!important;
    -webkit-text-fill-color:#F7D584!important;
    color:#F7D584!important;
    animation:none!important;
    filter:none!important;
    text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
    font-weight:800!important;
    padding-bottom:clamp(2px,.6vw,4px);
    border-bottom:2px solid #D9A63C;
    display:inline-block;
  }
  .ilan-tablo .rez-btn::after{
    color:#F7D584!important;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — çizgisiz, akan yaldız, sürekli belirgin
   Degrade yalnızca parlak altın aralığında (sönük ton yok)
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-yazi{
    border-bottom:0!important;
    padding-bottom:0!important;
    background:linear-gradient(100deg,
      #D9A63C 0%,
      #F2CE72 22%,
      #FFF4CE 40%,
      #FFFBEA 50%,
      #FFF4CE 60%,
      #F2CE72 78%,
      #D9A63C 100%)!important;
    background-size:230% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    text-shadow:none!important;
    font-weight:800!important;
  }
  .ilan-tablo .rez-btn::after{
    color:#F7D584!important;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
  }
}
@media (prefers-reduced-motion:reduce){
  .ilan-tablo .rez-yazi{animation:none!important}
}

/* ==========================================================
   MOBİL — Filtrele/Sırala/Görünüm çubuğu kaldırıldı
   ========================================================== */
@media (max-width:760px){
  .m-cubuk{display:none!important}
}

/* ==========================================================
   "HEMEN REZERVE ET" — zemin de yansımalı
   Renk akışı + üzerinden süzülen parlak ışık
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    background:linear-gradient(120deg,
      #16294A 0%, #24406B 26%, #3E6AA8 48%,
      #4C7CBF 54%, #3E6AA8 62%, #24406B 78%, #16294A 100%)!important;
    background-size:240% 240%!important;
    animation:maviAkis var(--ritim-yuzey) var(--egri-salinim) infinite!important;
    position:relative;overflow:hidden;
  }
  /* geniş ve parlak ışık süpürmesi */
  .ilan-tablo .rez-btn::before{
    content:"";position:absolute;top:-30%;bottom:-30%;left:-75%;
    width:52%!important;
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.22) 34%,
      rgba(255,255,255,.62) 50%,
      rgba(255,255,255,.22) 66%,
      rgba(255,255,255,0) 100%)!important;
    transform:skewX(-14deg)!important;
    animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite!important;
    animation-delay:3.6s!important;   /* ritim: 3/4 */
    pointer-events:none;z-index:0;
  }
  .ilan-tablo .rez-yazi,
  .ilan-tablo .rez-btn::after{position:relative;z-index:2}
}
@media (prefers-reduced-motion:reduce){
  .ilan-tablo .rez-btn{animation:none!important}
  .ilan-tablo .rez-btn::before{display:none!important}
}

/* ==========================================================
   "HEMEN REZERVE ET" — sabit koyu zemin + akan yaldız yazı
   Zemin hareket etmez → yazı her an belirgin kalır
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    background:linear-gradient(180deg,#2B4A79 0%,#1F3860 55%,#152A4B 100%)!important;
    background-size:auto!important;
    animation:none!important;
  }
  /* zeminde yalnızca ince ışık süzülmesi kalsın */
  .ilan-tablo .rez-btn::before{
    width:40%!important;
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.30) 50%,
      rgba(255,255,255,0) 100%)!important;
    animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite!important;
  }
  /* yazı — parlak yaldız, gidip gelen dalga */
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #E0B458 0%,
      #F6D98C 20%,
      #FFF6DC 38%,
      #FFFFFF 50%,
      #FFF6DC 62%,
      #F6D98C 80%,
      #E0B458 100%)!important;
    background-size:240% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    font-weight:800!important;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — başlıkla BİREBİR aynı yaldız
   Aynı degrade, aynı dalga hızı (ŞANLIURFA ARAÇ KİRALAMA)
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #8A6614 0%, #B9871F 18%, #D9B24E 36%,
      #F0DFA8 50%,
      #D9B24E 64%, #B9871F 82%, #8A6614 100%)!important;
    background-size:220% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    font-weight:800!important;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.55))!important;
  }
  .ilan-tablo .rez-btn::after{color:#D9B24E!important}
}

/* ==========================================================
   "HEMEN REZERVE ET" — önceki hâline dönüş
   Parlak yaldız dalga (koyu ton yok, hep belirgin)
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #E0B458 0%,
      #F6D98C 20%,
      #FFF6DC 38%,
      #FFFFFF 50%,
      #FFF6DC 62%,
      #F6D98C 80%,
      #E0B458 100%)!important;
    background-size:240% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    font-weight:800!important;
    filter:none!important;
  }
  .ilan-tablo .rez-btn::after{color:#F7D584!important}
}

/* ==========================================================
   "HEMEN REZERVE ET" — CTR şeridindeki gibi dalgalı yaldız
   Koyu → parlak → koyu geçişi, dalga gözle takip edilebilir
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #B8860B 0%,
      #D9A63C 16%,
      #F2CE72 32%,
      #FFF6DC 45%,
      #FFFFFF 50%,
      #FFF6DC 55%,
      #F2CE72 68%,
      #D9A63C 84%,
      #B8860B 100%)!important;
    background-size:300% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    font-weight:800!important;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — ALTIN SARISI BUTON
   Metalik yansımalı zemin + koyu dalgalı harfler
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    background:linear-gradient(180deg,
      #FFE9A8 0%,
      #F5CC5E 22%,
      #E0A92E 48%,
      #C98F1C 72%,
      #A87413 100%)!important;
    background-size:auto!important;
    animation:none!important;
    border:1px solid rgba(255,255,255,.5)!important;
    box-shadow:
      0 4px 0 #7C560D,
      0 6px 12px rgba(90,64,10,.4),
      inset 0 2px 0 rgba(255,255,255,.65),
      inset 0 -3px 6px rgba(120,84,12,.4)!important;
  }
  .ilan-tablo .rez-btn:active{
    transform:translateY(4px);
    box-shadow:
      0 1px 0 #7C560D,
      0 2px 5px rgba(90,64,10,.38),
      inset 0 1px 0 rgba(255,255,255,.5),
      inset 0 -2px 4px rgba(120,84,12,.42)!important;
  }

  /* zeminde süzülen beyaz yansıma */
  .ilan-tablo .rez-btn::before{
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.45) 34%,
      rgba(255,255,255,.85) 50%,
      rgba(255,255,255,.45) 66%,
      rgba(255,255,255,0) 100%)!important;
    width:46%!important;
    animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite!important;
  }

  /* harfler — koyu, dalgalı akış */
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #4A3410 0%,
      #2E2008 18%,
      #140E03 36%,
      #000000 50%,
      #140E03 64%,
      #2E2008 82%,
      #4A3410 100%)!important;
    background-size:300% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    font-weight:800!important;
    text-shadow:none!important;
  }
  .ilan-tablo .rez-btn::after{
    color:#2E2008!important;
    text-shadow:0 1px 0 rgba(255,255,255,.4)!important;
    opacity:1!important;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — antrasit zemin + altın dalgalı yazı
   Marka şeridiyle aynı dil
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    background:linear-gradient(180deg,
      #3A3E45 0%,
      #2E3136 35%,
      #232529 70%,
      #1A1C1F 100%)!important;
    background-size:auto!important;
    animation:none!important;
    border:1px solid rgba(216,166,60,.35)!important;
    box-shadow:
      0 4px 0 #101113,
      0 6px 12px rgba(0,0,0,.42),
      inset 0 2px 0 rgba(255,255,255,.14),
      inset 0 -3px 6px rgba(0,0,0,.5)!important;
  }
  .ilan-tablo .rez-btn:active{
    transform:translateY(4px);
    box-shadow:
      0 1px 0 #101113,
      0 2px 5px rgba(0,0,0,.4),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -2px 4px rgba(0,0,0,.5)!important;
  }

  /* zeminde hafif ışık süzülmesi */
  .ilan-tablo .rez-btn::before{
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 0%,
      rgba(255,235,180,.16) 40%,
      rgba(255,240,200,.30) 50%,
      rgba(255,235,180,.16) 60%,
      rgba(255,255,255,0) 100%)!important;
    width:44%!important;
    animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite!important;
  }

  /* YAZI — altın yaldız, dalgalı akış */
  .ilan-tablo .rez-yazi{
    background:linear-gradient(100deg,
      #8A6614 0%,
      #B9871F 16%,
      #D9B24E 32%,
      #F5E5B0 45%,
      #FFF8E2 50%,
      #F5E5B0 55%,
      #D9B24E 68%,
      #B9871F 84%,
      #8A6614 100%)!important;
    background-size:300% auto!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
    font-weight:800!important;
    text-shadow:none!important;
  }
  .ilan-tablo .rez-btn::after{
    color:#D9B24E!important;
    text-shadow:0 1px 2px rgba(0,0,0,.5)!important;
    opacity:1!important;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — lacivert zemine geri dönüş
   Altın dalgalı yazı korunur
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    background:linear-gradient(180deg,
      #3D6199 0%,
      #2C4C7C 45%,
      #1F3860 75%,
      #16294A 100%)!important;
    background-size:auto!important;
    animation:none!important;
    border:1px solid rgba(255,255,255,.18)!important;
    box-shadow:
      0 4px 0 #0F2039,
      0 6px 12px rgba(8,16,32,.42),
      inset 0 2px 0 rgba(255,255,255,.3),
      inset 0 -3px 6px rgba(0,0,0,.34)!important;
  }
  .ilan-tablo .rez-btn:active{
    transform:translateY(4px);
    box-shadow:
      0 1px 0 #0F2039,
      0 2px 5px rgba(8,16,32,.4),
      inset 0 1px 0 rgba(255,255,255,.2),
      inset 0 -2px 4px rgba(0,0,0,.4)!important;
  }
  /* zeminde beyaz ışık süzülmesi */
  .ilan-tablo .rez-btn::before{
    background:linear-gradient(105deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.30) 40%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,.30) 60%,
      rgba(255,255,255,0) 100%)!important;
    width:44%!important;
    animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite!important;
  }
  .ilan-tablo .rez-btn::after{
    color:#F0C05A!important;
    text-shadow:0 1px 2px rgba(0,0,0,.5)!important;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — yazının altında altın şerit
   Rengi "BAŞLAYAN FİYATLARLA" şeridiyle aynı
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-yazi{
    position:relative;
    padding-bottom:clamp(3px,1vw,5px)!important;
  }
  .ilan-tablo .rez-yazi::after{
    content:"";
    position:absolute;left:0;right:0;bottom:0;
    height:clamp(2px,.7vw,3px);
    background:linear-gradient(90deg,#B9871F 0%,#D9A63C 50%,#9E7014 100%);
    border-radius:2px;
    box-shadow:0 1px 2px rgba(0,0,0,.35);
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — yazının ARKA PLANI altın şerit
   "BAŞLAYAN FİYATLARLA" ile birebir aynı görünüm
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-yazi{
    /* metin boyama iptal — artık zemin boyanıyor */
    -webkit-background-clip:border-box!important;
    background-clip:border-box!important;
    -webkit-text-fill-color:#221A05!important;
    color:#221A05!important;

    background:linear-gradient(180deg,#D9A63C 0%,#B9871F 55%,#9E7014 100%)!important;
    background-size:auto!important;
    animation:none!important;

    display:inline-block;
    padding:clamp(3px,1vw,5px) clamp(7px,2.4vw,12px)!important;
    border-radius:clamp(3px,1vw,5px);
    border-top:1px solid rgba(255,255,255,.3);
    text-shadow:0 1px 0 rgba(255,255,255,.28)!important;
    box-shadow:0 1px 3px rgba(0,0,0,.3);
    position:relative;overflow:hidden;
  }
  /* altın şeridin üzerinde gidip gelen ışık */
  .ilan-tablo .rez-yazi::after{
    content:"";
    position:absolute;top:0;bottom:0;left:-60%;
    width:45%;height:auto;
    background:linear-gradient(100deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.55) 50%,
      rgba(255,255,255,0) 100%);
    border-radius:0;
    box-shadow:none;
    animation:parla var(--ritim-suzulme) var(--egri-suzulme) infinite;
    pointer-events:none;
  }
}

/* ==========================================================
   "HEMEN REZERVE ET" — buton küçültüldü
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    padding:clamp(3px,.9vw,5px) clamp(6px,2vw,10px) clamp(4px,1vw,6px)!important;
    gap:clamp(3px,1vw,5px)!important;
    border-radius:clamp(4px,1.2vw,6px)!important;
    box-shadow:
      0 3px 0 #0F2039,
      0 5px 9px rgba(8,16,32,.38),
      inset 0 1px 0 rgba(255,255,255,.26),
      inset 0 -2px 4px rgba(0,0,0,.3)!important;
  }
  .ilan-tablo .rez-btn:active{
    transform:translateY(3px);
    box-shadow:
      0 1px 0 #0F2039,
      0 2px 4px rgba(8,16,32,.36),
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 -1px 3px rgba(0,0,0,.34)!important;
  }
  .ilan-tablo .rez-yazi{
    font-size:clamp(.44rem,2.2vw,.64rem)!important;
    letter-spacing:clamp(.03em,.22vw,.1em)!important;
    padding:clamp(2px,.75vw,4px) clamp(5px,1.9vw,9px)!important;
  }
  .ilan-tablo .rez-btn::after{font-size:clamp(.52rem,2.5vw,.74rem)!important}
}

/* ==========================================================
   SLOGAN BLOĞU — koyu zemin, iki satır
   Altın üst satır + beyaz alt satır, altında ödeme notu
   ========================================================== */
.slogan-blok{
  background:linear-gradient(180deg,#2E3136 0%,#232529 55%,#1C1E21 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;z-index:1;
}
.slogan{
  margin:0;
  text-align:center;
  padding:clamp(11px,3.2vw,18px) clamp(10px,3vw,18px) clamp(7px,2vw,11px);
  line-height:1.18;
}
.slogan b{
  display:block;
  font-size:clamp(.86rem,4.4vw,1.6rem);
  font-weight:800;
  letter-spacing:clamp(.01em,.12vw,.03em);
  background:linear-gradient(100deg,
    #B9871F 0%, #D9B24E 22%, #F5E5B0 42%,
    #FFF8E2 50%,
    #F5E5B0 58%, #D9B24E 78%, #B9871F 100%);
  background-size:260% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite;
}
.slogan i{
  display:block;
  margin-top:clamp(2px,.8vw,5px);
  font-style:normal;
  font-size:clamp(.7rem,3.5vw,1.24rem);
  font-weight:700;
  color:#FFFFFF;
  letter-spacing:clamp(0px,.08vw,.02em);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* ödeme notu artık blok içinde — üstünde ince ayraç */
.odeme-notu{
  border-top:1px solid rgba(255,255,255,.09);
  background:transparent!important;
  box-shadow:none!important;
}

@media (prefers-reduced-motion:reduce){
  .slogan b{animation:none}
}

/* ==========================================================
   SLOGAN BLOĞU — arka planda araç görseli + koyu perde
   ========================================================== */
.slogan-blok{
  background:
    linear-gradient(180deg,
      rgba(18,20,24,.92) 0%,
      rgba(18,20,24,.80) 40%,
      rgba(18,20,24,.88) 100%),
    linear-gradient(90deg,
      rgba(18,20,24,.55) 0%,
      rgba(18,20,24,.15) 50%,
      rgba(18,20,24,.55) 100%),
    url('../img/hero/hero-1.jpg') no-repeat center 38%/cover!important;
  position:relative;
  overflow:hidden;
}
/* üstte ince altın ışık çizgisi */
.slogan-blok::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(217,166,60,.7) 30%,
    rgba(245,229,176,.9) 50%,
    rgba(217,166,60,.7) 70%, transparent 100%);
}
/* altta yumuşak kararma — ilanlara geçiş */
.slogan-blok::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(14,16,19,.55));
  pointer-events:none;
}
.slogan,.odeme-notu{position:relative;z-index:1}

/* yazılar görsel üzerinde daha güçlü dursun */
.slogan i{text-shadow:0 2px 6px rgba(0,0,0,.85)!important}
.odeme-notu{
  text-shadow:0 1px 3px rgba(0,0,0,.8);
  border-top:1px solid rgba(255,255,255,.14)!important;
}

/* slogan bloğu — perde hafifletildi, görsel görünür olsun */
.slogan-blok{
  background:
    linear-gradient(180deg,
      rgba(16,18,22,.78) 0%,
      rgba(16,18,22,.52) 45%,
      rgba(16,18,22,.74) 100%),
    url('../img/hero/hero-1.jpg') no-repeat center 42%/cover!important;
}
/* yazıların arkasına yerel koyuluk — okunurluk garanti */
.slogan{
  background:radial-gradient(ellipse 78% 130% at 50% 45%,
    rgba(10,12,15,.62) 0%, rgba(10,12,15,.28) 60%, transparent 100%);
}
.slogan b{filter:drop-shadow(0 2px 4px rgba(0,0,0,.75))}
.odeme-notu{background:rgba(12,14,17,.55)!important}

/* ==========================================================
   MARKA BÖLÜMÜ — komple Balıklıgöl manzarası arka plan
   Başlık + askılık + slogan + ödeme notu tek görsel üzerinde
   ========================================================== */
.marka-bolum{
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(14,16,20,.72) 0%,
      rgba(14,16,20,.55) 35%,
      rgba(14,16,20,.68) 70%,
      rgba(14,16,20,.86) 100%),
    url('../img/hero/marka-fon.jpg?f=2') no-repeat center 45%/cover;
  overflow:hidden;
}
/* üstte altın ışık çizgisi */
.marka-bolum::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%, rgba(217,166,60,.65) 28%,
    rgba(245,229,176,.9) 50%,
    rgba(217,166,60,.65) 72%, transparent 100%);
}

/* iç bölümlerin kendi zeminleri kalksın — görsel görünsün */
.marka-serit,
.marka-askilik,
.slogan-blok,
.odeme-notu{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
.marka-serit::after{opacity:.18}
.slogan-blok::before,.slogan-blok::after{display:none}

/* yazılar görsel üzerinde net dursun */
.marka-serit span{filter:drop-shadow(0 2px 5px rgba(0,0,0,.8))!important}
.slogan b{filter:drop-shadow(0 2px 5px rgba(0,0,0,.85))}
.slogan i{text-shadow:0 2px 7px rgba(0,0,0,.9)!important}
.slogan{background:none!important}
.odeme-notu{
  color:#E4E8EE!important;
  text-shadow:0 1px 4px rgba(0,0,0,.9)!important;
  border-top:1px solid rgba(255,255,255,.16)!important;
}
/* askılık tabelaları koyu kalsın — okunurluk */
.marka-askilik em{
  background:linear-gradient(180deg,rgba(30,32,36,.94),rgba(20,22,25,.96))!important;
  box-shadow:0 3px 10px rgba(0,0,0,.45)!important;
}

/* ==========================================================
   MARKA BÖLÜMÜ — gün batımı tonlaması + şeffaf tabelalar
   Tüm yazılar yaldız yansımalı
   ========================================================== */
.marka-bolum{
  background:
    linear-gradient(180deg,
      rgba(24,14,6,.62) 0%,
      rgba(30,18,8,.42) 38%,
      rgba(22,14,7,.60) 72%,
      rgba(16,12,8,.85) 100%),
    linear-gradient(120deg,
      rgba(217,140,40,.28) 0%,
      rgba(255,180,70,.16) 45%,
      rgba(180,110,30,.26) 100%),
    url('../img/hero/marka-fon.jpg?f=2') no-repeat center 45%/cover!important;
}
/* görsele sıcak gün batımı tonu */
.marka-bolum{
  position:relative;
}
.marka-bolum::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 60% 45% at 78% 28%,
    rgba(255,196,92,.35) 0%, rgba(255,170,60,.14) 45%, transparent 75%);
  pointer-events:none;
}
.marka-serit,.marka-askilik,.slogan-blok{position:relative;z-index:1}

/* ---------- ASKILIK — siyah zemin kalktı ---------- */
.marka-askilik em{
  background:rgba(20,16,10,.28)!important;
  border:1px solid rgba(232,201,106,.55)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.35)!important;
  backdrop-filter:blur(2px);
  /* yazı yaldız */
  background-clip:padding-box;
}
.marka-askilik em{
  color:transparent!important;
}
/* askılık yazısı yaldız akışlı */
.marka-askilik em{
  background-image:none!important;
}

/* ==========================================================
   TÜM MARKA YAZILARI — yaldız yansımalı, akan animasyon
   ========================================================== */
.marka-askilik em i,
.slogan i,
.odeme-notu i{
  font-style:normal;
  display:inline-block;
  background:linear-gradient(100deg,
    #B9871F 0%, #D9B24E 20%, #F5E5B0 40%,
    #FFF8E2 50%,
    #F5E5B0 60%, #D9B24E 80%, #B9871F 100%);
  background-size:280% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite;
  text-shadow:none!important;
}

/* askılık yazısı */
.marka-askilik em{
  color:inherit!important;
  background-image:none!important;
}
.marka-askilik em i{
  font-size:inherit;font-weight:800;letter-spacing:inherit;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.75));
}

/* slogan alt satırı — beyaz yerine yaldız */
.slogan i{
  font-size:clamp(.7rem,3.5vw,1.24rem);
  font-weight:700;
  animation-delay:1.2s;    /* ritim: 1/4 */
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.8));
}

/* ödeme notu */
.odeme-notu{color:#D8C9A8!important}
.odeme-notu i{
  font-size:inherit;font-weight:700;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.8));
}
.odeme-notu .on-yaldiz{animation-delay:2.4s}   /* ritim: 1/2 */
.odeme-notu .alt-yaldiz{animation-delay:4.2s}   /* ritim: 7/8 */
.odeme-notu span{display:none}

@media (prefers-reduced-motion:reduce){
  .marka-askilik em i,.slogan i,.odeme-notu i{animation:none}
}

/* ==========================================================
   MARKA BÖLÜMÜ — görsel tam sığsın (kırpılmadan)
   Yükseklik görselin oranına göre otomatik ayarlanır
   ========================================================== */
.marka-bolum{
  background-size:cover!important;
  background-position:center 42%!important;
  /* görselin çoğu görünsün diye taban yükseklik */
  min-height:clamp(230px,63vw,430px);
  display:flex;flex-direction:column;justify-content:center;
}
.marka-serit{padding:clamp(12px,3.4vw,22px) 12px clamp(6px,1.6vw,10px)!important}
.marka-askilik{padding-bottom:clamp(8px,2.2vw,14px)!important}
.slogan{padding:clamp(8px,2.4vw,14px) clamp(10px,3vw,18px) clamp(5px,1.6vw,9px)!important}
.odeme-notu{padding:clamp(7px,1.9vw,11px) clamp(6px,2vw,14px)!important}

@media (min-width:761px){
  .marka-bolum{min-height:clamp(300px,34vw,480px)}
}

/* ==========================================================
   MARKA BÖLÜMÜ — Balıklıgöl gün batımı görseli
   Görsel zaten sıcak tonlu; ağır perde kaldırıldı
   ========================================================== */
.marka-bolum{
  background:
    linear-gradient(180deg,
      rgba(10,14,22,.55) 0%,
      rgba(10,14,22,.22) 30%,
      rgba(12,14,18,.38) 62%,
      rgba(10,12,16,.82) 100%),
    url('../img/hero/marka-fon.jpg?f=2') no-repeat center center/cover!important;
}
/* sıcak tonlama katmanı gereksiz — görselde zaten var */
.marka-bolum::after{display:none!important}

/* yazıların arkasına yerel koyuluk — okunurluk garanti */
.marka-serit span{filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))!important}
.slogan{
  background:radial-gradient(ellipse 88% 150% at 50% 50%,
    rgba(8,10,14,.58) 0%, rgba(8,10,14,.28) 55%, transparent 100%)!important;
}
.slogan b{filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))}
.slogan i{filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))}
.odeme-notu{background:rgba(8,10,14,.52)!important}

/* askılık tabelaları — cam etkisi, manzara arkadan görünsün */
.marka-askilik em{
  background:rgba(14,18,26,.42)!important;
  border:1px solid rgba(240,205,120,.6)!important;
  backdrop-filter:blur(3px);
  box-shadow:0 3px 12px rgba(0,0,0,.45)!important;
}

/* ==========================================================
   MARKA BÖLÜMÜ — kurumsal yazı hiyerarşisi + kısaltılmış boy
   Altın yalnızca vurgularda; gerisi beyaz → okunur ve sakin
   ========================================================== */
.marka-bolum{
  min-height:clamp(178px,46vw,330px)!important;
}
@media (min-width:761px){
  .marka-bolum{min-height:clamp(230px,25vw,360px)!important}
}
.marka-serit{padding:clamp(10px,2.6vw,18px) 12px clamp(5px,1.3vw,9px)!important}
.marka-askilik{padding-bottom:clamp(7px,1.8vw,12px)!important}
.slogan{padding:clamp(7px,1.9vw,12px) clamp(10px,3vw,18px) clamp(4px,1.2vw,8px)!important}
.odeme-notu{padding:clamp(6px,1.6vw,10px) clamp(6px,2vw,14px)!important}

/* ---------- 1) MARKA BAŞLIĞI — altın yaldız (vurgu) ---------- */
.marka-serit span{
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
}

/* ---------- 2) ASKILIK — beyaz, sakin ---------- */
.marka-askilik em i{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#FFFFFF!important;
  color:#FFFFFF!important;
  animation:none!important;
  text-shadow:0 1px 3px rgba(0,0,0,.8)!important;
  filter:none!important;
  letter-spacing:.06em;
}
.marka-askilik em{
  background:rgba(12,16,24,.5)!important;
  border:1px solid rgba(255,255,255,.28)!important;
}

/* ---------- 3) SLOGAN ÜST — altın yaldız (ana vurgu) ---------- */
.slogan b{animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important}

/* ---------- 4) SLOGAN ALT — beyaz ---------- */
.slogan i{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#FFFFFF!important;
  color:#FFFFFF!important;
  animation:none!important;
  text-shadow:0 2px 6px rgba(0,0,0,.9)!important;
  filter:none!important;
}

/* ---------- 5) ÖDEME NOTU — vurgu altın, gerisi açık gri ---------- */
.odeme-notu .on-yaldiz{
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
}
.odeme-notu .alt-yaldiz{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:#D5DAE2!important;
  color:#D5DAE2!important;
  animation:none!important;
  text-shadow:0 1px 3px rgba(0,0,0,.85)!important;
  filter:none!important;
  font-weight:600;
}

/* ==========================================================
   MARKA BÖLÜMÜ — kadraj ve okunurluk düzeltmesi
   Görselin su + mimari kısmı görünsün, başlık okunsun
   ========================================================== */
.marka-bolum{
  background:
    linear-gradient(180deg,
      rgba(8,12,20,.80) 0%,
      rgba(8,12,20,.55) 22%,
      rgba(10,12,18,.30) 45%,
      rgba(8,10,16,.55) 75%,
      rgba(6,8,14,.88) 100%),
    url('../img/hero/marka-fon.jpg?f=2') no-repeat center 58%/cover!important;
}
/* başlığın arkasına ayrı koyuluk — gökyüzünde kaybolmasın */
.marka-serit{
  background:linear-gradient(180deg,
    rgba(6,10,18,.55) 0%,
    rgba(6,10,18,.25) 70%,
    transparent 100%)!important;
}
.marka-serit span{
  filter:drop-shadow(0 2px 8px rgba(0,0,0,1)) drop-shadow(0 0 2px rgba(0,0,0,.9))!important;
}

/* ==========================================================
   1) MARKA BAŞLIĞI — kendi tabelası üstünde
   Zemin plakası eklendi; yazı dalgalı altın yaldız kaldı
   ========================================================== */
.marka-serit{
  align-self:center!important;
  display:inline-block!important;
  width:auto!important;
  max-width:calc(100% - 24px)!important;
  margin:clamp(10px,2.8vw,20px) auto clamp(5px,1.3vw,9px)!important;
  padding:clamp(9px,2.4vw,14px) clamp(18px,5.5vw,40px)!important;
  background:linear-gradient(180deg,
    rgba(30,37,50,.92) 0%,
    rgba(18,23,33,.94) 55%,
    rgba(10,14,21,.96) 100%)!important;
  border:1px solid rgba(238,203,120,.55)!important;
  border-bottom:1px solid rgba(238,203,120,.55)!important;
  border-radius:7px!important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10)!important;
  backdrop-filter:blur(3px);
  overflow:visible!important;
  position:relative;
}
/* eski perspektif çizgileri kalksın */
.marka-serit::after{display:none!important}

/* ince altın iç çerçeve */
.marka-serit::before{
  content:"";position:absolute;inset:3px;
  border:1px solid rgba(238,203,120,.20);
  border-radius:4px;
  pointer-events:none;
}

.marka-serit span{
  position:relative;z-index:1;
  background-image:linear-gradient(100deg,
    #8C6A1D 0%, #C89B2E 18%, #F7E7A0 36%, #FFF8D8 50%,
    #F7E7A0 64%, #C89B2E 82%, #8C6A1D 100%)!important;
  background-color:transparent!important;
  background-size:220% auto!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.8))!important;
}

/* ==========================================================
   2) ÖDEME NOTU — belirgin kurumsal şerit
   ========================================================== */
.slogan-blok{text-align:center}
.odeme-notu{
  display:inline-block!important;
  width:auto!important;
  max-width:calc(100% - 16px)!important;
  margin:clamp(4px,1.2vw,8px) auto 0!important;
  padding:clamp(7px,2vw,11px) clamp(13px,4vw,26px)!important;
  background:linear-gradient(180deg,
    rgba(30,37,50,.94) 0%,
    rgba(16,21,31,.96) 60%,
    rgba(9,13,20,.97) 100%)!important;
  border:1px solid rgba(238,203,120,.50)!important;
  border-radius:999px!important;
  box-shadow:
    0 8px 22px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.09)!important;
  font-size:clamp(.56rem,2.4vw,.78rem)!important;
  font-weight:700!important;
  letter-spacing:.07em!important;
  color:#D5DAE2!important;
  backdrop-filter:blur(3px);
}
.odeme-notu .on-yaldiz{
  font-weight:800!important;
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
}
.odeme-notu .alt-yaldiz{
  -webkit-text-fill-color:#E7EBF2!important;
  color:#E7EBF2!important;
  font-weight:700!important;
}

@media (prefers-reduced-motion:reduce){
  .marka-serit span,.odeme-notu .on-yaldiz{animation:none!important}
}

/* ==========================================================
   3) YÜZEN BUTONLAR — haritalar eklendi + taşınabilir
   ========================================================== */
.fab-grup{
  touch-action:none;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  transition:box-shadow .15s ease;
}
.fab-grup.tasiniyor{cursor:grabbing}
.fab-grup.tasiniyor .fab{transition:none;transform:none!important}
.fab-grup.tasiniyor .fab-tut{background:rgba(44,76,124,.9)}

/* tutamaç — buradan (ya da herhangi bir butondan) sürüklenir */
.fab-tut{
  display:flex;align-items:center;justify-content:center;gap:3px;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(18,24,36,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(0,0,0,.22);
}
.fab-tut i{
  width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.8);
}

/* haritalar butonu */
.fab-map{background:#C8102E!important;color:#fff}

@media (prefers-reduced-motion:reduce){
  .fab-grup{transition:none}
}

/* ==========================================================
   4) KART BAŞLIĞI — sadece araç markası, kalın
   ========================================================== */
.ilan-tablo .t-baslik a{
  font-size:clamp(.82rem,3.7vw,.98rem)!important;
  font-weight:700!important;
  letter-spacing:-.1px!important;
  line-height:1.28!important;
  color:#151A22!important;
  white-space:normal!important;
  text-decoration:none!important;
}
.ilan-tablo .t-baslik a:hover{color:var(--link-hover,#0B4F8A)!important;text-decoration:underline!important}
.t-arac-mob{display:none!important}

/* satırın tamamı karta açılır */
.ilan-tablo tbody tr[data-kart]{cursor:pointer}
.ilan-tablo tbody tr[data-kart]:hover{background:#FAFBFD}
.l-ilan[data-kart],.g-ilan[data-kart]{cursor:pointer}

/* ==========================================================
   5) ARAÇ KARTI — ayrı sayfa yerine açılan panel
   ========================================================== */
.kart-perde{
  position:fixed;inset:0;z-index:120;
  background:rgba(8,11,18,.74);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;
  padding:20px;
}
.kart-perde.acik{display:flex}

.kart-panel{
  width:100%;max-width:760px;
  max-height:calc(100vh - 40px);
  background:#fff;
  border-radius:14px;
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:kartGir var(--ritim-giris) var(--egri-giris);
}
@keyframes kartGir{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to  {opacity:1;transform:none}
}

.kart-kapat{
  position:absolute;top:10px;right:10px;z-index:6;
  width:34px;height:34px;border:0;border-radius:50%;
  background:rgba(10,14,22,.6);color:#fff;
  font-size:.95rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.kart-kapat:hover{background:rgba(10,14,22,.85)}

.kart-govde{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- galeri ---------- */
.kart-buyuk{position:relative;background:#0E1219;aspect-ratio:16/9;overflow:hidden}
.kart-buyuk img{width:100%;height:100%;object-fit:cover;display:block}
.kart-gez{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:54px;border:0;border-radius:6px;
  background:rgba(10,14,22,.48);color:#fff;
  font-size:1.7rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
.kart-gez:hover{background:rgba(10,14,22,.75)}
.kart-gez.sol{left:8px}
.kart-gez.sag{right:8px}
.kart-sayac{
  position:absolute;right:10px;bottom:10px;
  background:rgba(10,14,22,.68);color:#fff;
  font-size:.72rem;font-weight:600;
  padding:4px 10px;border-radius:999px;
}
.kart-sayac i{font-style:normal;opacity:.75}
/* küçük resim şeridi kaldırıldı — kart telefon ekranına sığsın */

/* ---------- başlık + fiyat ---------- */
.kart-bas{
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px;
  padding:14px 16px 11px;border-bottom:1px solid #E7E9EE;
}
.kart-bas h2{
  margin:0;font-size:clamp(1.05rem,4.6vw,1.38rem);
  font-weight:800;color:#151A22;letter-spacing:-.3px;line-height:1.2;
}
.kart-fiyat{text-align:right;line-height:1.15;white-space:nowrap}
.kart-fiyat strong{
  display:block;
  font-size:clamp(1rem,4.4vw,1.3rem);font-weight:800;color:#1668B3;
}
.kart-fiyat strong i{font-style:normal;font-size:.6em;font-weight:700}
.kart-fiyat span{
  display:block;font-size:clamp(.55rem,2.2vw,.66rem);
  font-weight:600;color:#7A8494;letter-spacing:.03em;
}

/* ---------- özellikler ---------- */
.kart-ozellik{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:#E7E9EE;border-bottom:1px solid #E7E9EE;
}
.kozel{background:#fff;padding:9px 11px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kozel span{
  font-size:clamp(.53rem,2vw,.6rem);color:#8A93A2;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.kozel b{
  font-size:clamp(.72rem,2.9vw,.82rem);color:#1B212B;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:430px){
  .kart-ozellik{grid-template-columns:repeat(2,1fr)}
}

/* ---------- açıklama ---------- */
.kart-blok{padding:14px 16px 18px}
.kart-blok h3{margin:0 0 8px;font-size:clamp(.9rem,3.6vw,1rem);font-weight:800;color:#151A22}
.kart-blok p{margin:0 0 11px;font-size:clamp(.8rem,3.2vw,.87rem);line-height:1.62;color:#41485A}
.kart-tikli{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:6px}
.kart-tikli li{
  position:relative;padding-left:21px;
  font-size:clamp(.78rem,3.1vw,.84rem);color:#41485A;line-height:1.45;
}
.kart-tikli li::before{
  content:"✓";position:absolute;left:0;top:0;
  color:#1E6A5C;font-weight:800;font-size:.85em;
}
.kart-not{
  font-size:clamp(.72rem,2.9vw,.78rem)!important;
  color:#6B7383;background:#F5F6F9;
  border-left:3px solid #C9971A;
  padding:9px 12px;border-radius:0 6px 6px 0;
  margin:0!important;line-height:1.55;
}

/* ---------- alt: rezervasyon ---------- */
.kart-alt{
  display:flex;gap:9px;align-items:center;
  padding:10px 12px;background:#fff;
  border-top:1px solid #E2E5EB;
  box-shadow:0 -6px 18px rgba(15,20,30,.09);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
}
.kart-ara{
  flex:0 0 auto;width:48px;height:48px;border-radius:10px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#38598F 0%,#2C4C7C 60%,#24406A 100%);
  color:#fff;text-decoration:none;
  box-shadow:0 3px 0 #1B2F51,0 6px 14px rgba(20,35,60,.3);
}
.kart-ara:active{transform:translateY(2px);box-shadow:0 1px 0 #1B2F51}
.kart-rez{
  flex:1;border:0;border-radius:10px;cursor:pointer;
  padding:14px 14px;
  background:linear-gradient(180deg,#3A5F97 0%,#2C4C7C 55%,#233D65 100%);
  box-shadow:
    0 3px 0 #1B2F51,
    0 9px 20px rgba(20,35,60,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  position:relative;overflow:hidden;
}
.kart-rez:active{transform:translateY(2px);box-shadow:0 1px 0 #1B2F51,0 4px 10px rgba(20,35,60,.3)}
.kart-rez span{
  display:inline-block;
  font-size:clamp(.78rem,3.2vw,.9rem);
  font-weight:800;letter-spacing:.09em;
  background-image:linear-gradient(100deg,
    #A87F20 0%, #D9AE3C 18%, #F7E7A0 36%, #FFF8D8 50%,
    #F7E7A0 64%, #D9AE3C 82%, #A87F20 100%);
  background-color:transparent;
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite;
}
@media (prefers-reduced-motion:reduce){
  .kart-rez span{animation:none}
  .kart-panel{animation:none}
}

/* ---------- mobil: alttan açılan sayfa ---------- */
@media (max-width:760px){
  .kart-perde{padding:0;align-items:flex-end}
  .kart-panel{
    max-width:none;
    max-height:94vh;
    border-radius:16px 16px 0 0;
    animation:kartAlttan var(--ritim-giris) var(--egri-giris);
  }
  .kart-buyuk{aspect-ratio:16/9}
  .kart-gez{width:32px;height:48px;font-size:1.5rem}
}
@keyframes kartAlttan{
  from{opacity:0;transform:translateY(40px)}
  to  {opacity:1;transform:none}
}

/* ==========================================================
   YÜZEN BUTONLAR — düzeltme
   · üç nokta tutamaç kaldırıldı
   · haritalar butonu Google Haritalar ikonu oldu
   · butonlar TEK TEK taşınır, grup sağ köşede kalır
   ========================================================== */
.fab-tut{display:none!important}

.fab-grup{
  touch-action:auto!important;
  cursor:auto!important;
}
.fab{
  touch-action:none;
  cursor:grab;
  user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.fab.tasiniyor{
  cursor:grabbing;
  transition:none!important;
  transform:none!important;
  z-index:80;
  box-shadow:0 12px 28px rgba(0,0,0,.45)!important;
}
/* yerinden çıkarılmış buton — sıradan bağımsız durur */
.fab.fab-tekil{
  position:fixed!important;
  margin:0!important;
  z-index:76;
}

/* haritalar — ikonun kendisi buton */
.fab-map{
  background:#FFFFFF!important;
  padding:0!important;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.07)!important;
}
.fab-map:hover{box-shadow:0 6px 20px rgba(0,0,0,.32), 0 0 0 1px rgba(0,0,0,.07)!important}
.fab-map svg{width:100%;height:100%;display:block}

/* ==========================================================
   KART ALT ÇUBUĞU — solda ara · ortada rezervasyon · sağda WhatsApp
   ========================================================== */
.kart-alt{
  display:flex;gap:9px;align-items:stretch;
  padding:10px 12px;background:#fff;
  border-top:1px solid #E2E5EB;
  box-shadow:0 -6px 18px rgba(15,20,30,.09);
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
}
.kart-ara,.kart-wa{
  flex:0 0 auto;
  width:clamp(44px,12vw,52px);
  border-radius:10px;
  display:grid;place-items:center;
  color:#fff;text-decoration:none;
}
.kart-ara{
  background:linear-gradient(180deg,#38598F 0%,#2C4C7C 60%,#24406A 100%);
  box-shadow:0 3px 0 #1B2F51,0 6px 14px rgba(20,35,60,.3);
}
.kart-ara:active{transform:translateY(3px);box-shadow:0 0 0 #1B2F51,0 2px 6px rgba(20,35,60,.28)}
.kart-wa{
  background:linear-gradient(180deg,#57C766 0%,#3EA84E 60%,#2E8B3D 100%);
  box-shadow:0 3px 0 #226B2D,0 6px 14px rgba(20,60,30,.28);
}
.kart-wa:active{transform:translateY(3px);box-shadow:0 0 0 #226B2D,0 2px 6px rgba(20,60,30,.26)}

/* ---------- "REZERVASYON OLUŞTUR" — listedeki tuşun aynısı ---------- */
.kart-rez{
  flex:1;min-width:0;
  display:inline-flex;align-items:center;justify-content:center;
  gap:clamp(5px,1.8vw,9px);
  padding:clamp(7px,2.2vw,11px) clamp(8px,2.6vw,14px) clamp(8px,2.4vw,12px);
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:clamp(6px,1.8vw,9px)!important;
  cursor:pointer;
  background:linear-gradient(180deg,
    #3D6199 0%,
    #2C4C7C 45%,
    #1F3860 75%,
    #16294A 100%)!important;
  box-shadow:
    0 4px 0 #0F2039,
    0 7px 14px rgba(8,16,32,.4),
    inset 0 2px 0 rgba(255,255,255,.28),
    inset 0 -3px 6px rgba(0,0,0,.32)!important;
  position:relative;overflow:hidden;
}
.kart-rez:active{
  transform:translateY(4px);
  box-shadow:
    0 1px 0 #0F2039,
    0 2px 5px rgba(8,16,32,.4),
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -2px 4px rgba(0,0,0,.4)!important;
}
/* zeminde beyaz ışık süzülmesi */
.kart-rez::before{
  content:"";position:absolute;top:0;bottom:0;left:-70%;
  width:44%;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.30) 40%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.30) 60%,
    rgba(255,255,255,0) 100%);
  animation:maviParla var(--ritim-suzulme) var(--egri-suzulme) infinite;
  pointer-events:none;
}
/* ok işareti */
.kart-rez::after{
  content:"→";
  position:relative;z-index:2;
  color:#F0C05A;
  font-size:clamp(.8rem,3.2vw,1rem);font-weight:800;line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
/* altın şerit üzerinde koyu yazı */
.kart-rez .rez-yazi{
  position:relative;z-index:2;overflow:hidden;
  display:inline-block;
  font-size:clamp(.6rem,2.7vw,.78rem);
  font-weight:800;
  letter-spacing:clamp(.05em,.3vw,.1em);
  color:#221A05;-webkit-text-fill-color:#221A05;
  background:linear-gradient(180deg,#D9A63C 0%,#B9871F 55%,#9E7014 100%);
  padding:clamp(4px,1.4vw,6px) clamp(8px,2.8vw,14px);
  border-radius:clamp(4px,1.2vw,6px);
  border-top:1px solid rgba(255,255,255,.3);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:0 1px 3px rgba(0,0,0,.3);
  white-space:nowrap;
}
/* altın şeridin üzerinde gidip gelen ışık */
.kart-rez .rez-yazi::after{
  content:"";
  position:absolute;top:0;bottom:0;left:-60%;
  width:45%;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 100%);
  animation:parla var(--ritim-suzulme) var(--egri-suzulme) infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){
  .kart-rez::before,.kart-rez .rez-yazi::after{animation:none;display:none}
}

/* başlık bloğu artık özellik tablosuna değil açıklamaya bağlanıyor */
.kart-bas{border-bottom:1px solid #E7E9EE}

/* ==========================================================
   KART — KİRALAMA GÜVENCEMİZ kutusu (kurumsal liste)
   Her satır: ikon + büyük harf başlık + etken cümle
   ========================================================== */
.kart-blok{padding:clamp(11px,3.4vw,16px) clamp(12px,3.6vw,16px) clamp(14px,4vw,18px)}

.kguv{
  border:1px solid #DCE1E9;
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2px 10px rgba(20,30,50,.07);
}

/* başlık şeridi */
.kguv h3{
  margin:0;
  padding:clamp(9px,2.5vw,12px) clamp(12px,3.4vw,16px);
  background:linear-gradient(180deg,#3D6199 0%,#2C4C7C 55%,#1F3860 100%);
  border-bottom:2px solid #C9971A;
  position:relative;
}
.kguv h3 span{
  display:inline-block;
  color:#fff;
  font-size:clamp(.6rem,2.5vw,.72rem);
  font-weight:700;
  letter-spacing:.16em;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* satırlar — ince ayraçlı kurumsal tablo */
.kguv ul{
  margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr;
  gap:1px;background:#E9ECF2;
}
@media (min-width:700px){
  .kguv ul{grid-template-columns:1fr 1fr}
  .kguv li.kguv-vurgu{grid-column:1 / -1}
}

.kguv li{
  background:#fff;
  display:flex;align-items:flex-start;
  gap:clamp(9px,2.8vw,12px);
  padding:clamp(11px,3.1vw,14px) clamp(13px,3.6vw,16px);
  min-width:0;
}

/* ikon karesi */
.kguv li i{
  flex:0 0 auto;
  width:clamp(28px,7.4vw,32px);
  height:clamp(28px,7.4vw,32px);
  border-radius:7px;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#3D6199 0%,#2C4C7C 60%,#20395F 100%);
  color:#F0D79A;
  box-shadow:
    0 2px 5px rgba(20,35,60,.32),
    inset 0 1px 0 rgba(255,255,255,.22);
}
.kguv li i svg{
  width:clamp(15px,4vw,17px);
  height:clamp(15px,4vw,17px);
  display:block;
}

/* yazı — başlık üstte, etken cümle altta */
.kguv li span{display:block;min-width:0}
.kguv li b{
  display:block;
  font-size:clamp(.84rem,3.6vw,.92rem);
  font-weight:700;
  letter-spacing:-.005em;
  color:#16233C;
  line-height:1.3;
  margin-bottom:3px;
}
.kguv li em{
  display:block;
  font-style:normal;
  font-size:clamp(.74rem,2.95vw,.8rem);
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  color:#5A6474;
}
/* madde altı küçük not */
.kguv li small{
  display:block;
  margin-top:4px;
  padding-left:9px;
  position:relative;
  font-size:clamp(.67rem,2.65vw,.72rem);
  line-height:1.42;
  color:#808997;
}
.kguv li small::before{
  content:"";
  position:absolute;left:0;top:.55em;
  width:4px;height:4px;border-radius:50%;
  background:#C0C7D2;
}
.kguv li.kguv-vurgu small{color:#87795A}
.kguv li.kguv-vurgu small::before{background:#C9AE72}

/* son madde — ön ödeme yok, altın vurgu */
.kguv li.kguv-vurgu{
  background:linear-gradient(180deg,#FDF8EA 0%,#FAF2DC 100%);
}
.kguv li.kguv-vurgu i{
  background:linear-gradient(180deg,#D9A63C 0%,#B9871F 60%,#9E7014 100%);
  color:#2A2005;
  box-shadow:
    0 2px 5px rgba(90,65,10,.36),
    inset 0 1px 0 rgba(255,255,255,.38);
}
.kguv li.kguv-vurgu b{color:#6B4E0C}
.kguv li.kguv-vurgu em{color:#6A5C3B}
/* fiyat notu */
.kart-not{
  margin:clamp(10px,3vw,14px) 0 0!important;
  font-size:clamp(.72rem,2.9vw,.79rem)!important;
  color:#5F6878;
  background:#F5F6F9;
  border-left:3px solid #C9971A;
  padding:clamp(9px,2.6vw,11px) clamp(10px,3vw,13px);
  border-radius:0 6px 6px 0;
  line-height:1.55;
}
.kart-not b{color:#39404E;font-weight:700}

/* ==========================================================
   KART ALT ÇUBUĞU — yuvarlak ara ve WhatsApp butonları
   Yüzen butonlarla aynı görünüm
   ========================================================== */
.kart-alt{align-items:center}
.kart-ara,.kart-wa{
  width:clamp(44px,12.5vw,50px)!important;
  height:clamp(44px,12.5vw,50px)!important;
  border-radius:50%!important;
  display:grid;place-items:center;
  color:#fff;text-decoration:none;
  transition:transform .16s ease,box-shadow .16s ease;
}
.kart-ara{
  background:#6BA5D0!important;
  box-shadow:0 4px 14px rgba(0,0,0,.26)!important;
}
.kart-ara:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(0,0,0,.32)!important}
.kart-ara:active{transform:scale(.97)}
.kart-wa{
  background:#4CAF50!important;
  box-shadow:0 4px 14px rgba(0,0,0,.26)!important;
}
.kart-wa:hover{transform:scale(1.07);box-shadow:0 6px 20px rgba(0,0,0,.32)!important}
.kart-wa:active{transform:scale(.97)}

/* ==========================================================
   KART — telefon ekranına sığdırma
   Küçük resim şeridi kaldırıldı; kalan bölümler sıkılaştırıldı
   ========================================================== */
@media (max-width:760px){
  .kart-panel{max-height:96vh}

  /* fotoğraf biraz alçaldı — araç yine tam görünüyor */
  .kart-buyuk{aspect-ratio:16/9}

  /* başlık + fiyat */
  .kart-bas{padding:11px 14px 9px}

  /* güvence bloğu */
  .kart-blok{padding:10px 12px 12px}
  .kguv h3{padding:8px 13px}
  .kguv li{padding:9px 13px}
  .kguv li i{width:26px;height:26px;border-radius:6px}
  .kguv li i svg{width:14px;height:14px}
  .kguv li b{margin-bottom:2px}
  .kguv li small{margin-top:3px}

  /* fiyat notu */
  .kart-not{
    margin-top:10px!important;
    padding:8px 11px;
    line-height:1.48;
  }

  /* alt çubuk */
  .kart-alt{padding:8px 11px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .kart-ara,.kart-wa{width:44px!important;height:44px!important}
  .kart-rez{padding:9px 10px 10px}
}

/* çok kısa ekranlarda fotoğrafı daha da alçalt */
@media (max-width:760px) and (max-height:740px){
  .kart-buyuk{aspect-ratio:16/9}
  .kguv li{padding:8px 12px}
}

/* ==========================================================
   "HEMEN REZERVE ET" — bir tık daha küçültüldü
   Kutucuk boyu değişmiyor; sadece buton daralıyor
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .rez-btn{
    padding:clamp(2px,.72vw,4px) clamp(5px,1.7vw,9px) clamp(3px,.82vw,5px)!important;
    gap:clamp(2px,.8vw,4px)!important;
    border-radius:clamp(3px,1vw,5px)!important;
    box-shadow:
      0 2px 0 #0F2039,
      0 4px 7px rgba(8,16,32,.34),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -2px 3px rgba(0,0,0,.28)!important;
  }
  .ilan-tablo .rez-btn:active{
    transform:translateY(2px);
    box-shadow:
      0 1px 0 #0F2039,
      0 1px 3px rgba(8,16,32,.32),
      inset 0 1px 0 rgba(255,255,255,.16),
      inset 0 -1px 2px rgba(0,0,0,.3)!important;
  }
  .ilan-tablo .rez-yazi{
    font-size:clamp(.45rem,1.95vw,.57rem)!important;
    letter-spacing:clamp(.02em,.18vw,.085em)!important;
    padding:clamp(2px,.62vw,3px) clamp(4px,1.6vw,8px)!important;
    border-radius:clamp(3px,.9vw,4px)!important;
  }
  .ilan-tablo .rez-btn::after{font-size:clamp(.46rem,2.2vw,.66rem)!important}
}

/* ==========================================================
   KART — "REZERVASYON OLUŞTUR" yanındaki ok kaldırıldı
   Listedeki "HEMEN REZERVE ET" okunu koruyor
   ========================================================== */
.kart-rez::after{content:none!important;display:none!important}
.kart-rez{gap:0!important}

/* ==========================================================
   REZERVASYON PANELİ — fiyat kısımları kaldırıldı
   Yerine yalnızca kiralama süresi gösterilir
   ========================================================== */
.rtoplam,.rdokum,.rez-arac-fiyat{display:none!important}

.rsure{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;
  margin:14px 0 0;
  padding:12px 14px;
  background:#F5F6F9;
  border:1px solid #E4E7EE;
  border-radius:9px;
}
.rsure-yazi{
  font-size:clamp(.6rem,2.5vw,.7rem);
  font-weight:700;
  letter-spacing:.12em;
  color:#7A8494;
}
.rsure-gun{
  font-size:clamp(.86rem,3.5vw,1rem);
  font-weight:700;
  color:#2C4C7C;
  letter-spacing:.02em;
}

/* ==========================================================
   REZERVASYON — süre bloğu notu + ülke kodlu telefon alanı
   ========================================================== */
.rsure{
  display:block;
  padding:12px 14px 13px;
}
.rsure-ust{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.rsure-not{
  margin:9px 0 0;
  padding-top:9px;
  border-top:1px solid #E4E7EE;
  font-size:clamp(.72rem,2.85vw,.78rem);
  line-height:1.5;
  color:#6B7383;
}

/* zorunlu / isteğe bağlı işaretleri */
.rzorunlu{font-style:normal;color:#C8102E;font-weight:800}
.ristege{
  font-style:normal;font-weight:600;
  letter-spacing:.02em;
  color:#98A1B0;
  text-transform:none;
}

/* ülke kodu + numara */
.rtel{display:flex;gap:8px;align-items:stretch}
.rtel select{
  flex:0 0 clamp(104px,30%,132px);
  min-width:0;
  border:0;border-bottom:1px solid #D6DAE2;
  background:transparent;
  font-family:inherit;
  font-size:clamp(.82rem,3.2vw,.92rem);
  color:#1F2329;
  padding:7px 0 8px;
  border-radius:0;
}
.rtel select:focus{outline:none;border-bottom-color:#2C4C7C}
.rtel input{flex:1;min-width:0}


/* ==========================================================
   MOBİL — ilan fotoğrafı satırın tamamını kaplasın
   Hücre iki satırı kaplıyor ama uzamıyordu, altta boşluk
   kalıyordu. Burada hücreyi esnetip fotoğrafı tam oturtuyoruz.
   Masaüstü kuralları olduğu gibi kalır.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr{align-items:stretch!important}
  .t-foto{
    align-self:stretch!important;
    height:100%!important;min-height:100%!important;
    display:block!important;overflow:hidden!important;
    padding:0!important;line-height:0!important;
  }
  .t-foto img{
    width:100%!important;height:100%!important;
    min-height:100%!important;max-height:none!important;
    object-fit:cover!important;object-position:50% 52%!important;
    display:block!important;
  }
}

/* ==========================================================
   MOBİL — sıralama menüsü araçların hemen üstünde
   Masaüstündeki aynı <select id="siralama"> kullanılır.
   İkinci bir kopya açılmaz; JS tek elemana bağlı kalır ve
   id çakışması olmaz. Çubuğun diğer parçaları (sekme,
   filtre butonu, görünüm düğmeleri, bilgi ikonu) mobilde
   gizli kalır — sadece sıralama görünür.
   ========================================================== */
@media (max-width:760px){
  .arac-cubuk{
    display:block!important;
    padding:2px 10px 4px!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    min-height:0!important;
  }
  .arac-cubuk .sekme,
  .arac-cubuk .filtre-ac-btn,
  .arac-cubuk .gorunum,
  .arac-cubuk .bilgi-ikon{display:none!important}

  .arac-cubuk .cubuk-sag{
    display:block!important;
    width:100%!important;
    gap:0!important;
    margin:0!important;
    padding:0!important;
  }

  .arac-cubuk #siralama{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    padding:7px 28px 7px 10px!important;
    font-size:.82rem!important;
    font-family:inherit;
    color:var(--yazi)!important;
    background-color:#fff!important;
    border:1px solid var(--cizgi)!important;
    border-radius:7px!important;
    box-shadow:0 1px 2px rgba(16,24,40,.04)!important;
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6270' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 9px center;
    background-size:13px 13px;
  }
  .arac-cubuk #siralama:focus{
    outline:none;
    border-color:#1B3358!important;
    box-shadow:0 0 0 3px rgba(27,51,88,.12)!important;
  }
}

/* ==========================================================
   MOBİL — sayfa kayarken sadece SIRALAMA kutusu kalır
   Üst "Arama Sonucu" çubuğu ve marka şeridi yukarı kayıp
   kaybolur. Tepeye yalnızca "Gelişmiş sıralama" kutusu
   yapışır; ilanlar onun altından geçer.
   Zemin sayfa boyu degrade olduğu için çubuk yarı saydam
   krem + arka bulanıklık alır; böylece arkasıyla uyumlu kalır.
   ========================================================== */
@media (max-width:760px){
  .m-bas{
    position:relative!important;   /* sabit değil — kayıp gitsin */
    z-index:60!important;
  }
  .marka-bolum{
    position:relative!important;   /* artık yapışmıyor */
    top:auto!important;
  }
  .arac-cubuk{
    position:sticky!important;
    top:0!important;
    z-index:45!important;
    background:rgba(245,243,236,.94)!important;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 1px 0 rgba(176,150,96,.28), 0 4px 12px rgba(0,0,0,.06)!important;
  }
  .govde{position:relative;z-index:1}
}

/* ==========================================================
   MOBİL — alt eylem çubuğu, marka şeridinin aynısı
   Zemin, altın çerçeve, iç ince çizgi ve gölge birebir
   "ŞANLIURFA ARAÇ KİRALAMA" bandından alındı.
   İçinde dört buton eşit aralıkla: Harita · WhatsApp ·
   Instagram · Ara
   ========================================================== */
@media (max-width:760px){
  .fab-grup{
    /* kenarlardan içeride, havada duran panel */
    left:12px!important;
    right:12px!important;
    bottom:calc(10px + env(safe-area-inset-bottom, 0px))!important;
    width:auto!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-around!important;
    gap:0!important;
    padding:9px 10px!important;

    /* --- Göbeklitepe --- üç katman:
       1) okunurluk için ince karartı
       2) "GÖBEKLİTEPE" kayası — instagram ile telefon tuşlarının
          ortasında; kenarları yumuşatılmış PNG olduğu için
          yapıştırılmış gibi durmaz, içine karışır
       3) gün batımı şeridi — bayrak whatsapp ile harita
          tuşlarının ortasında (279px) */
    background:
      linear-gradient(180deg,
        rgba(8,12,20,.42) 0%,
        rgba(8,12,20,.30) 50%,
        rgba(6,8,14,.48) 100%),
      url("../img/manzara/gobeklitepe-kaya.png"),
      url("../img/manzara/gobeklitepe-serit.jpg")!important;
    background-size:auto, auto 144%, cover!important;
    background-position:0% 0%, 20% 66%, 50% 50%!important;
    background-repeat:repeat, no-repeat, no-repeat!important;
    border:1px solid rgba(238,203,120,.55)!important;
    border-radius:7px!important;
    box-shadow:
      0 10px 30px rgba(0,0,0,.55),
      0 2px 0 rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.10)!important;
    backdrop-filter:blur(3px);

    touch-action:auto!important;
    z-index:75!important;
    overflow:visible!important;
  }

  /* ince altın iç çerçeve — marka şeridindeki gibi */
  .fab-grup::before{
    content:"";position:absolute;inset:3px;
    border:1px solid rgba(238,203,120,.20);
    border-radius:4px;
    pointer-events:none;
  }

  .fab-grup .fab{
    width:44px!important;
    height:44px!important;
    flex:0 0 auto!important;
    position:relative;z-index:1;
    box-shadow:0 2px 8px rgba(0,0,0,.40)!important;
  }
  .fab-grup .ara-fab{width:44px!important;height:44px!important}

  /* çubuğun arkasında son ilan saklı kalmasın */
  body{
    padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))!important;
  }

  /* sürükleyip çubuktan çıkarılan buton serbest kalsın */
  .fab.fab-tekil{
    box-shadow:0 6px 18px rgba(0,0,0,.38)!important;
  }
}

/* ==========================================================
   MOBİL — "Hemen Rezerve Et" butonu
   Yazı 7,3 px olduğu için okunmuyordu. Butonun boyu ve yeri
   eski hâlinde bırakıldı; sadece YAZI öne çıkarıldı:
   punto büyüdü ve yazı koyulaştı. Altın ton sayfanın
   kendi kurumsal tonunda kaldı — parlatılmadı.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo .t-rez .rez-btn .rez-yazi{
    font-size:10.6px!important;
    font-weight:900!important;
    letter-spacing:.7px!important;

    /* kurumsal altın — sayfanın aslındaki ton, çiğ değil */
    background-image:linear-gradient(180deg,
      #D9A63C 0%,
      #B9871F 55%,
      #9E7014 100%)!important;

    /* koyu yazı — altın üstünde en yüksek kontrast */
    color:#120C02!important;
    -webkit-text-fill-color:#120C02!important;
    text-shadow:0 1px 0 rgba(255,255,255,.5)!important;
  }
}

/* ==========================================================
   ALT ÇUBUK — sabit sıra, oynatma yok
   İstenen sıra:  1) Instagram  2) Telefon  3) WhatsApp  4) Harita
   HTML sırası değişmedi; flex "order" ile diziliyor, böylece
   dört sayfada birden aynı sırayla görünüyor.
   Sürükleme kapatıldı — butonlar yerinden oynamaz.
   ========================================================== */
.fab-grup .fab-ig { order:1 }
.fab-grup .fab-tel{ order:2 }
.fab-grup .fab-wa { order:3 }
.fab-grup .fab-map{ order:4 }

/* butonlar sabit: sürükleme imleci ve dokunma kilidi kalksın */
.fab-grup,
.fab-grup .fab{
  touch-action:auto!important;
  cursor:pointer!important;
  user-select:auto!important;-webkit-user-select:auto!important;
}



/* ==========================================================
   ILAN KARTI — SANLIURFA / GUNEYDOGU IMZASI
   ----------------------------------------------------------
   Tasarim karari:
   Manzara fotografi kartin TAMAMINI kaplamiyor. Kart temiz
   krem zeminde kaliyor; manzara yalnizca SAG tarafta duruyor
   ve sola dogru krem icinde eriyip kayboluyor. Boylece:
     - soldaki arac fotografi ile yarismiyor
     - ortadaki baslik ve buton temiz zeminde okunuyor
     - sagdaki bos kose degerlendirilmis oluyor
   Sag alt kosede kucuk altin harflerle yerin adi yaziyor;
   boylece rastgele duvar kagidi degil, bilincli bir imza
   gibi duruyor.
   On sekiz yer JS tarafindan her sayfa yuklemesinde karistirilip
   satirlara dagitilir; isim data-yer, fotograf da satir ici
   background-image olarak verilir.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr,
  .ilan-tablo tbody tr:nth-child(even){
    position:relative!important;
    background-color:#FDFBF6!important;
    background-repeat:no-repeat!important;
    background-position:0 0, right center!important;
    background-size:auto, cover!important;
    /* altta yer adi seridi — etiket hicbir seyin ustune binmesin */
    padding-bottom:23px!important;
  }

  /* fotograf beyaz bir paspartu icinde dursun —
     manzara aracin arkasindan gecmesin */
  .ilan-tablo .t-foto{
    background-color:#D9BC72!important;
    background-image:linear-gradient(160deg,
      #F0DFAE 0%,
      #DFC27E 38%,
      #C9A34C 72%,
      #B08A31 100%)!important;
    padding:3px!important;
    border:1px solid rgba(126,94,20,.55)!important;
    border-radius:8px!important;
    box-shadow:
      0 1px 2px rgba(90,72,36,.14),
      0 3px 9px rgba(70,55,20,.20)!important;
  }
  .ilan-tablo .t-foto img{
    border-radius:3px!important;
    display:block!important;
    box-shadow:inset 0 0 0 1px rgba(150,124,70,.30)!important;
  }

  /* yerin adi — sag alt kose, lacivert plaka uzerinde altin harf.
     Plakanin uzerinde altin bir isik saga-sola gidip gelir;
     her kart farkli gecikmeyle basladigi icin liste boyunca
     dalga gibi akar, hepsi ayni anda parlamaz. */
  .ilan-tablo tbody tr::after{
    position:absolute;
    right:8px;
    bottom:4px;
    z-index:4;
    padding:2px 7px 2px 8px;
    border-radius:4px;
    background-image:
      linear-gradient(115deg,
        rgba(255,255,255,0)   36%,
        rgba(255,238,186,.14) 44%,
        rgba(255,243,205,.60) 50%,
        rgba(255,238,186,.14) 56%,
        rgba(255,255,255,0)   64%),
      linear-gradient(180deg,
        rgba(27,51,88,.93) 0%,
        rgba(16,32,57,.95) 100%);
    background-size:260% 100%, 100% 100%;
    background-position:140% 0, 0 0;
    background-repeat:no-repeat;
    border:1px solid rgba(214,175,86,.58);
    font-size:8.8px;
    font-weight:800;
    letter-spacing:1.1px;
    line-height:1.25;
    color:#EFD08A;
    text-shadow:0 1px 1px rgba(0,0,0,.55);
    box-shadow:0 1px 3px rgba(18,28,48,.35);
    pointer-events:none;
    white-space:nowrap;
    animation:yerIsigi var(--ritim-suzulme) var(--egri-suzulme) infinite;
  }

  @keyframes yerIsigi{
    0%   { background-position:140% 0, 0 0; }
    46%  { background-position:-45% 0, 0 0; }
    54%  { background-position:-45% 0, 0 0; }
    100% { background-position:140% 0, 0 0; }
  }

  /* isik liste boyunca dalga gibi insin */
  .ilan-tablo tbody tr:nth-child(5n+1)::after{ animation-delay:0s;   }   /* ritim: 0   */
  .ilan-tablo tbody tr:nth-child(5n+2)::after{ animation-delay:.6s;  }   /* ritim: 1/8 */
  .ilan-tablo tbody tr:nth-child(5n+3)::after{ animation-delay:1.2s; }   /* ritim: 1/4 */
  .ilan-tablo tbody tr:nth-child(5n+4)::after{ animation-delay:1.8s; }   /* ritim: 3/8 */
  .ilan-tablo tbody tr:nth-child(5n+5)::after{ animation-delay:2.4s; }   /* ritim: 1/2 */

  @media (prefers-reduced-motion:reduce){
    .ilan-tablo tbody tr::after{ animation:none; }
  }


  /* yer adı JS’ten geliyor: manzara her yenilemede değiştiği için
     isim de kartın data-yer özniteliğinden okunur */
  .ilan-tablo tbody tr::after{ content:attr(data-yer); }
}

/* ==========================================================
   MARKA ASKILIGI — asma ipi ve kancasi kaldirildi
   Her tabelanin ustunde 2x9 px altin cubuk (::before) ve
   5x5 px altin dugme (::after) vardi; ikisi de kalkti.
   Ustte bosalan pay da kisaltildi.
   ========================================================== */
.marka-askilik em::before,
.marka-askilik em::after{
  content:none!important;
  display:none!important;
}
.marka-askilik em{
  margin-top:2px!important;
}

/* ==========================================================
   ILAN BASLIGI — manzara uzerinde okunur plaka
   Kart arka planlari belirginlestikce marka/model yazisi
   manzaraya karisiyordu. Yazinin arkasina acik, hafif
   saydam bir plaka konuldu. box-decoration-break:clone
   sayesinde iki satira dusen isimlerde her satir kendi
   plakasini aliyor.
   ========================================================== */
@media (max-width:760px){
  /* arac adi — lacivert plaka, beyaz kalin yazi, altin sac teli kenar.
     Eskiden yari saydam krem plakaydi; manzaranin uzerinde solup
     okunmuyordu. Fiyat kutusu ve yer etiketiyle ayni aileden. */
  .ilan-tablo tbody tr .t-baslik a{
    display:inline!important;
    padding:3px 9px!important;
    border-radius:6px!important;
    background:linear-gradient(180deg,
      #24406B 0%,
      #1B3358 55%,
      #142845 100%)!important;
    border:1px solid rgba(214,175,86,.50)!important;
    box-shadow:
      0 1px 2px rgba(12,22,40,.28),
      0 2px 7px rgba(12,22,40,.22)!important;
    color:#FFFFFF!important;
    -webkit-text-fill-color:#FFFFFF!important;
    font-weight:800!important;
    letter-spacing:.1px!important;
    text-shadow:0 1px 1px rgba(0,0,0,.45)!important;
    line-height:1.75!important;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
}






/* ==========================================================
   HAREKET SIRASI — hepsi ayni tempoda, farkli anda
   ----------------------------------------------------------
   Sureleri birlestirmek tek basina yetmez: ayni anda baslayan
   iki parilti "yanip sonme" gibi gorunur. Tempo 4.8s oldugu
   icin gecikmeler bunun kesirleridir (0 · 1/8 · 1/4 · 3/8 · 1/2
   · 5/8 · 3/4), boylece parilti sayfada yukaridan asagi tek
   sirayla akar.
   ========================================================== */
.marka-serit span      { animation-delay:0s!important;    }  /* 0     */
.frozet                { animation-delay:0s!important;    }
.marka-askilik em      { animation-delay:.6s!important;   }  /* 1/8   */
.slogan b,
.slogan i              { animation-delay:1.2s!important;  }  /* 1/4   */
.fr-ust::after         { animation-delay:1.8s!important;  }  /* 3/8   */
.odeme-notu i,
.odeme-notu .on-yaldiz { animation-delay:2.4s!important;  }  /* 1/2   */
.fr-tutar::after       { animation-delay:3s!important;    }  /* 5/8   */
.rez-btn::before,
.kart-rez::before      { animation-delay:3.6s!important;  }  /* 3/4   */
.rez-yazi,
.rez-yazi::after,
.kart-rez span         { animation-delay:3.6s!important;  }

/* kart etiketleri kendi 5'li dalgasini surdurur (yukarida) */

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


/* ==========================================================
   FIYAT — kalp atisi
   ----------------------------------------------------------
   Fiyat kartin en onemli bilgisi; sabit durunca goz kayiyordu.
   Insan kalbi gibi cift vurus (lub-dub) yapar ve hic durmaz.
   Tempo sayfanin ritminin beste biri (.96s) — dakikada ~62
   atis, dinlenen bir insan kalbinin hizi.
   Punto da bir kademe buyutuldu; genislemeyi dengelemek icin
   yanlardaki dolgu 1px daraltildi, rozet ayni yere sigiyor.
   ========================================================== */
:root{
  /* 4.8s'in beste biri = .96s ≈ dakikada 62 atis, dinlenen bir
     insan kalbinin hizi. Atis artik durmuyor; her turda lub-dub
     yapip kisa bir diyastol birakiyor ve hemen tekrarliyor. */
  --ritim-kalp:.96s;
  --egri-kalp:cubic-bezier(.25,.7,.35,1);
}

@keyframes kalpAtisi{
  0%   { transform:scale(1);     }
  12%  { transform:scale(1.070); }   /* lub  — ~115ms */
  26%  { transform:scale(1.004); }
  38%  { transform:scale(1.042); }   /* dub  — ~365ms */
  55%  { transform:scale(1);     }
  100% { transform:scale(1);     }   /* diyastol — ~430ms */
}

@media (max-width:760px){
  .ilan-tablo .frozet .fr-tutar{
    font-size:14.6px!important;
    line-height:1.18!important;
    padding:5px 6px 4px!important;
    transform-origin:50% 50%!important;
    animation:kalpAtisi var(--ritim-kalp) var(--egri-kalp) infinite!important;
    animation-delay:0s!important;          /* durmadan atar */
    will-change:transform;
  }
  .ilan-tablo .frozet .fr-gun{ font-size:8.6px!important; }
  .ilan-tablo .frozet .fr-ust{ font-size:6.4px!important; }
}

@media (prefers-reduced-motion:reduce){
  .ilan-tablo .frozet .fr-tutar{ animation:none!important; transform:none!important; }
}


/* ==========================================================
   FIYAT ROZETI — atisla birlikte icten aydinlanma
   ----------------------------------------------------------
   Kalp atisi tek basina "buyuyup kuculme" idi; hareket vardi
   ama isik yoktu. Artik rakam atarken rozet ICINDEN altin bir
   isikla doluyor — iki vurusun her birinde bir kez. Isik
   opacity ile calisir (transform/box-shadow degil), bu yuzden
   42 kartta bile ekran karti uzerinde kalir, islemciyi yormaz.
   Rozetin kenari da artik altin: fotograf cercevesi, baslik
   plakasi ve yer etiketiyle ayni aile.
   ========================================================== */
@keyframes kalpIsigi{
  0%   { opacity:0;   }
  12%  { opacity:.55; }   /* lub — rakamin tepe noktasiyla ayni an */
  26%  { opacity:.10; }
  38%  { opacity:.32; }   /* dub */
  55%  { opacity:0;   }
  100% { opacity:0;   }
}

@media (max-width:760px){
  .ilan-tablo .frozet{
    position:relative!important;
    border:1px solid rgba(214,175,86,.50)!important;
    border-radius:7px!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.16),
      0 2px 9px rgba(10,20,38,.34)!important;
  }

  /* icten yanan altin isik */
  .ilan-tablo .frozet::before{
    content:"";
    position:absolute;
    inset:-30%;
    z-index:0;
    pointer-events:none;
    background:radial-gradient(ellipse at 50% 40%,
      rgba(255,241,195,.60) 0%,
      rgba(238,203,120,.30) 36%,
      rgba(238,203,120,0)   70%);
    opacity:0;
    animation:kalpIsigi var(--ritim-kalp) var(--egri-kalp) infinite;
    animation-delay:0s;                 /* rakamin atisiyla birebir ayni */
    will-change:opacity;
  }

  /* yazilar isigin ustunde kalsin */
  .ilan-tablo .frozet .fr-tutar,
  .ilan-tablo .frozet .fr-ust{
    position:relative!important;
    z-index:1!important;
  }

  /* rakam beyaz kalir — altin bant ve altin isikla karsitlik
     kurdugu icin en okunakli hali budur */
  .ilan-tablo .frozet .fr-tutar{
    text-shadow:0 1px 2px rgba(6,14,28,.55)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .ilan-tablo .frozet::before{ animation:none!important; opacity:0!important; }
}


/* ==========================================================
   ALT CUBUK — kayaya yer acmak icin ilk iki tus ayrilir
   ----------------------------------------------------------
   Dort tus "space-around" ile esit dagiliyordu; instagram ile
   telefon arasinda yalnizca 42px bosluk kaliyor, Gobeklitepe
   kayasi tuslarin altinda yarim gorunuyordu. Instagram 20px
   sola, telefon 22px saga kaydirildi: aradaki temiz alan 84px
   oldu, kaya oraya tam oturuyor. Kaydirma "transform" ile
   yapildi — yerlesim bozulmaz, tuslarin tiklama alani ve
   siralamasi aynen kalir. Harita da instagramin aynasi olsun
   diye 20px saga alindi: iki uc tus da kenardan 12px iceride.
   ========================================================== */
@media (max-width:760px){
  .fab-grup .fab-ig { transform:translateX(-20px)!important; }  /* 34px  */
  .fab-grup .fab-tel{ transform:translateX(22px)!important;  }  /* 162px */
  .fab-grup .fab-map{ transform:translateX(20px)!important;  }  /* 332px */
}


/* ==========================================================
   GEZİLECEK YERLER
   ----------------------------------------------------------
   Sıralama kutusunun yanında, onunla aynı boyda ikinci bir
   kutu. Tıklanınca çubuğun altından tam genişlikte bir menü
   iniyor; menü mutlak konumlu olduğu için araç listesini
   aşağı itmez, üzerine açılır. <details>/<summary> kullanıldı,
   açma-kapama için JS gerekmiyor.
   ========================================================== */
.gezi{
  min-width:0;
  margin:0;
  border:1px solid #DFE2E7;
  border-radius:7px;
  background:#FFFFFF;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.gezi-bas{
  display:flex;
  align-items:center;
  gap:6px;
  box-sizing:border-box;
  min-height:31px;
  padding:0 9px;
  cursor:pointer;
  list-style:none;
  font-size:.82rem;
  font-weight:500;
  line-height:1.2;
  color:#1F2329;
  user-select:none;
}
.gezi-bas::-webkit-details-marker{ display:none; }
.gezi-pin{ width:13px; height:13px; flex:0 0 auto; fill:#1B3358; }
.gezi-yazi{
  flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.gezi-ok{
  width:14px; height:14px; flex:0 0 auto; color:#6B7480;
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.gezi[open] .gezi-ok{ transform:rotate(180deg); }

/* ---- açılan menü: çubuğun altına, tam genişlikte ---- */
.gezi-govde{
  position:absolute;
  left:4px; right:4px; top:100%;
  z-index:60;
  margin-top:6px;
  padding:3px 8px 10px;
  border:1px solid rgba(150,132,92,.46);
  border-radius:12px;
  background:#F6F4ED;
  /* İkinci gölge bir perde: 100vmax yayılma ile bütün ekranı
     karartıp arkadaki araç listesini kapatıyor. Ayrı bir örtü
     elemanı gerekmiyor, panel kapanınca perde de kalkıyor. */
  box-shadow:
    0 14px 34px rgba(14,22,38,.34),
    0 2px 8px rgba(14,22,38,.18),
    0 0 0 100vmax rgba(8,14,26,.88);
  /* panel ekranı doldursun — üstteki çubuk ve alttaki tuş şeridi
     için pay bırakılır. dvh, telefon tarayıcısının adres çubuğu
     kaybolunca da doğru yüksekliği verir. */
  max-height:calc(100vh - 155px);
  max-height:calc(100dvh - 155px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.gezi-baslik{
  padding:8px 3px 7px;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.16em;
  color:#8A7333;
  text-transform:uppercase;
}
.gezi-baslik-2{ margin-top:9px; border-top:1px solid rgba(150,132,92,.30); }

/* ---- rota kartı: üstte fotoğraf bandı, altında durak zinciri ---- */

/* ---- kart ---- */
.gezi-kart{
  display:grid;
  grid-template-columns:96px 1fr 72px;
  align-items:stretch;
  margin-bottom:7px;
  border:1px solid rgba(150,132,92,.34);
  border-radius:9px;
  background:#FFFFFF;
  box-shadow:0 1px 4px rgba(70,58,30,.12);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
}
.gezi-kart:last-child{ margin-bottom:0; }
.gezi-foto{
  display:block;
  min-height:92px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* fotoğrafı henüz olmayan yerler: boş kutu yerine lacivert
   zemin üzerinde altın ikon. Görsel gelince bu sınıf
   kaldırılıp background-image verilir. */
.gezi-foto-yok{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,#24406B 0%,#1B3358 55%,#142845 100%);
  border-right:1px solid rgba(214,175,86,.30);
}
.gezi-foto-yok svg{
  width:32px; height:32px;
  color:rgba(239,208,138,.80);
}
.gezi-orta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  padding:9px 10px;
  min-width:0;
}
.gezi-ad{
  font-size:1rem; font-weight:800; line-height:1.15;
  color:#1B3358; letter-spacing:-.2px;
}
.gezi-alt{
  font-style:normal; font-size:.64rem; line-height:1.25; color:#5A6472;
}
.gezi-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-top:4px;
  padding:6px 9px;
  border-radius:6px;
  background:linear-gradient(180deg,#24406B 0%,#1B3358 55%,#142845 100%);
  border:1px solid rgba(214,175,86,.45);
  box-shadow:0 1px 3px rgba(12,22,40,.28);
  font-size:.62rem; font-weight:800; letter-spacing:.09em;
  color:#FFFFFF;
}
.gezi-btn em{ font-style:normal; font-size:.9rem; line-height:1; color:#EFD08A; }

.gezi-rozet{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:5px; padding:6px 4px; text-align:center;
  background:linear-gradient(180deg,#24406B 0%,#1B3358 55%,#142845 100%);
  border-left:1px solid rgba(214,175,86,.40);
}
.gezi-rozet svg{
  width:22px; height:22px; color:#EFD08A;
  padding:4px; box-sizing:content-box;
  border:1px solid rgba(214,175,86,.55);
  border-radius:50%;
}
.gezi-rozet u{
  text-decoration:none;
  font-size:.53rem; font-weight:800; letter-spacing:.1em;
  line-height:1.25; color:#EFD08A;
}

/* ---- iki kutu yan yana ----
   "Gezilecek Yerler" yazısı kesilmesin diye o kutu içeriği
   kadar yer alır (flex:0 0 auto); artan yeri sıralama kutusu
   doldurur ve dar ekranda küçülen o olur. Çubuk sarmaz
   (flex-wrap:nowrap), yoksa gezi kutusu alt satıra düşüyor. */
@media (max-width:760px){
  .arac-cubuk .cubuk-sag{
    display:flex!important;
    align-items:stretch!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    padding:0!important;
  }
  .arac-cubuk #siralama{
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    padding-left:clamp(6px, 2vw, 10px)!important;
    padding-right:clamp(17px, 5.6vw, 22px)!important;
    background-position:right clamp(4px,1.6vw,7px) center!important;
  }
  .arac-cubuk .gezi{ flex:0 0 auto!important; }
  .gezi-bas{ padding:0 8px!important; gap:5px!important; }
  .gezi-yazi{ overflow:visible!important; text-overflow:clip!important; }

  /* punto ekran genişliğiyle birlikte küçülür: 280px’lik bir
     telefonda da iki yazı da kutusuna tam sığar, kesilmez */
  .arac-cubuk #siralama,
  .arac-cubuk .gezi-bas{
    font-size:clamp(.62rem, 3.05vw, .82rem)!important;
  }
}
@media (min-width:761px){
  .arac-cubuk .gezi{ flex:0 0 auto; }
}


/* ==========================================================
   ROTA KARTI — açılır kutu
   ----------------------------------------------------------
   Rotanın adı ve fotoğrafı kapalı hâlde görünür; kutuya
   basınca altında o rotanın durak zinciri, haritada açma
   düğmesi ve rotadaki yerlerin kartları iner. İç içe
   <details> kullanıldı, JS yok.
   ========================================================== */


/* rotanın içindeki yer kartları */

/* ==========================================================
   İL KARTI — üst seviyedeki dört kart
   ----------------------------------------------------------
   Şanlıurfa · Mardin · Adıyaman · Diyarbakır. Kutuya basınca
   o ilin rotaları iner; rotaya basınca da durak zinciri,
   haritada açma düğmesi ve o rotadaki yerlerin kartları.
   Üç kademe de <details> ile, JS yok.
   ========================================================== */
.gezi-il{
  margin-bottom:8px;
  border:1px solid rgba(150,132,92,.34);
  border-radius:10px;
  background:#FFFFFF;
  box-shadow:0 1px 4px rgba(70,58,30,.12);
  overflow:hidden;
}
.gezi-il:last-child{ margin-bottom:0; }

.il-bas{
  position:relative;
  display:flex;
  align-items:flex-end;
  height:82px;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  cursor:pointer;
  list-style:none;
}
.il-bas::-webkit-details-marker{ display:none; }
.il-bas::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(10,18,32,.10) 0%,
    rgba(10,18,32,.48) 55%,
    rgba(10,18,32,.82) 100%);
}
.il-ad{
  position:relative; z-index:1;
  padding:8px 34px 8px 11px;
  font-size:1.02rem; font-weight:800; letter-spacing:-.25px;
  line-height:1.15;
  color:#FFFFFF;
  text-shadow:0 1px 3px rgba(0,0,0,.7);
}
.il-sayi{
  position:absolute; top:7px; right:7px; z-index:1;
  padding:2px 7px;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(27,51,88,.93),rgba(16,32,57,.95));
  border:1px solid rgba(214,175,86,.58);
  font-size:.52rem; font-weight:800; letter-spacing:.09em;
  color:#EFD08A;
  text-shadow:0 1px 1px rgba(0,0,0,.5);
  white-space:nowrap;
}
.il-ok{
  position:absolute; right:10px; bottom:10px; z-index:1;
  width:20px; height:20px;
  color:#EFD08A;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75));
  transition:transform .24s cubic-bezier(.22,.61,.36,1);
}
.gezi-il[open] .il-ok{ transform:rotate(180deg); }

.il-govde{ padding:8px; background:#FBFAF5; }

/* ---- ikinci kademe: ilin rotaları ---- */

/* ---- rota içindeki yer kartları iki kademe içeride kalıyor;
        o dar alanda yazılar sarmasın diye ölçüler küçültüldü ---- */
.il-govde{ padding:6px!important; }


/* ---- ikinci kademe artık açılır kutu değil: rota bölümü
        il kartının içinde tek parça hâlinde görünür ---- */

/* ---- il kartının içindeki yer kartları ---- */
.il-govde{ padding:7px!important; background:#FBFAF5; }
.il-govde .gezi-kart{ margin-bottom:7px!important; border-radius:8px!important; }
.il-govde .kart-ozet{ grid-template-columns:90px 1fr 68px!important; }
.il-govde .gezi-kart:last-child{ margin-bottom:0!important; }
.il-govde .gezi-foto{ min-height:86px!important; }
.il-govde .gezi-orta{ padding:8px 9px!important; gap:2px!important; }
.il-govde .gezi-ad{ font-size:.88rem!important; line-height:1.12!important; }
.il-govde .gezi-alt{ font-size:.62rem!important; line-height:1.22!important; }
.il-govde .gezi-btn{
  margin-top:4px!important;
  padding:5px 8px!important;
  font-size:.57rem!important;
  letter-spacing:.07em!important;
}
.il-govde .gezi-btn em{ font-size:.85rem!important; }
.il-govde .gezi-rozet{ padding:5px 3px!important; gap:4px!important; }
.il-govde .gezi-rozet svg{ width:19px!important; height:19px!important; padding:3px!important; }
.il-govde .gezi-rozet u{ font-size:.48rem!important; letter-spacing:.08em!important; }
.il-govde .gezi-foto-yok svg{
  width:28px!important; height:28px!important;
  padding:0!important; border:0!important;
}

/* ---- il kartı — perdenin üzerinde daha net dursun ---- */
.gezi-il{
  border:1px solid rgba(150,132,92,.40)!important;
  border-radius:11px!important;
  box-shadow:0 2px 8px rgba(60,50,26,.16)!important;
  margin-bottom:9px!important;
}
.il-bas{ height:88px!important; }
.il-bas::before{
  background:linear-gradient(180deg,
    rgba(10,18,32,.08) 0%,
    rgba(10,18,32,.42) 48%,
    rgba(10,18,32,.86) 100%)!important;
}
.il-ad{ font-size:1.06rem!important; padding:9px 36px 9px 12px!important; }
.gezi-baslik{ padding:9px 4px 8px!important; }

/* ==========================================================
   PANEL EKRANA TAM OTURUR
   ----------------------------------------------------------
   Panel içeriği kadar değil, ekranın tamamı kadar yüksek.
   Hepsi kapalıyken dört il kartı boşluğu eşit paylaşır ve
   fotoğraflar büyür. Bir il açılınca içerik panelden taşar,
   panel kendi içinde kayar; kartlar doğal boyunda kalır.

   Not: kaydırmayı il kartının içine koymayı denedim, <details>
   içindeki flex öğesi tarayıcıda kısılmadığı için liste
   taşıyordu. Kaydırma panelin kendisinde.
   ========================================================== */
@media (max-width:760px){
  .gezi-govde{
    display:flex!important;
    flex-direction:column!important;
    height:calc(100vh - 155px)!important;
    height:calc(100dvh - 155px)!important;
    max-height:none!important;
    overflow-y:auto!important;
  }
  .gezi-baslik{ flex:0 0 auto!important; }

  .gezi-il{
    display:flex!important;
    flex-direction:column!important;
    /* shrink 0: panel dolunca kartlar sikismasin, tassin ve
       panel kendi icinde kaysin. grow 1: hepsi kapaliyken
       bosluğu esit paylassinlar. */
    flex:1 0 auto!important;
    min-height:90px!important;
  }
  /* kapalıyken fotoğraf bandı boşluğu doldurur */
  .il-bas{ flex:1 1 auto!important; height:auto!important; min-height:90px!important; }

  /* açılan ilin başlığı sabit yükseklikte, listesi altına iner */
  .gezi-il[open] .il-bas{ flex:0 0 88px!important; min-height:88px!important; }
  .il-govde{ flex:0 0 auto!important; }
}

/* ==========================================================
   YER KARTI — açılır detay
   ----------------------------------------------------------
   Kart artık bir <details>. Kapalıyken eskisi gibi görünür;
   "DETAYLARI GÖR"e basınca altında kısa tarihçe, konum satırı
   ve haritada açma düğmesi iner. Üç sütunlu ızgara, kartın
   kendisinden <summary>’ye taşındı.
   ========================================================== */
.gezi-kart{
  display:block!important;
  cursor:pointer;
}
.kart-ozet{
  display:grid;
  grid-template-columns:90px 1fr 68px;
  align-items:stretch;
  list-style:none;
  cursor:pointer;
}
.kart-ozet::-webkit-details-marker{ display:none; }

/* "DETAYLARI GÖR" oku açılınca dönsün */
.gezi-kart .gezi-btn em{
  transition:transform .22s cubic-bezier(.22,.61,.36,1);
}
.gezi-kart[open] .gezi-btn em{ transform:rotate(90deg); }
.gezi-kart[open] .gezi-btn{
  background:linear-gradient(180deg,#2C4C7C 0%,#22406E 55%,#18314F 100%)!important;
}

.kart-detay{
  padding:10px 11px 11px;
  border-top:1px solid rgba(150,132,92,.30);
  background:linear-gradient(180deg,#FDFCF8 0%,#F7F5EE 100%);
}
.detay-yazi{
  margin:0 0 9px;
  font-size:.7rem;
  line-height:1.55;
  color:#3E4753;
  text-align:left;
}
.detay-konum{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:9px;
  font-size:.63rem;
  font-weight:600;
  color:#7A6A3E;
}
.detay-konum svg{
  width:12px; height:12px; flex:0 0 auto;
  fill:#B08A31;
}
.detay-harita{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:7px 10px;
  border-radius:6px;
  background:linear-gradient(180deg,#D9A63C 0%,#B9871F 55%,#9E7014 100%);
  border:1px solid rgba(126,94,20,.55);
  box-shadow:0 1px 3px rgba(90,72,36,.28);
  font-size:.6rem; font-weight:900; letter-spacing:.09em;
  color:#140F02;
  text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.detay-harita em{ font-style:normal; font-size:.85rem; line-height:1; }

/* ==========================================================
   GEZİLECEK YERLER — MASAÜSTÜ
   ----------------------------------------------------------
   Mobilde panel ekranı dolduran bir sayfa; masaüstünde ise
   "Gezilecek Yerler" kutusunun altından inen dar bir menü.
   Çubuk masaüstünde position:static olduğu için panel sayfanın
   dibine düşüyordu — çubuğa relative verilerek kutunun altına
   çekildi ve sağa hizalandı.
   ========================================================== */
@media (min-width:761px){
  .arac-cubuk{ position:relative; }

  .gezi-govde{
    left:auto!important;
    right:0!important;
    width:min(560px, calc(100vw - 40px))!important;
    height:auto!important;
    max-height:min(70vh, 620px)!important;
    display:block!important;
    padding:4px 10px 12px!important;
    box-shadow:
      0 16px 38px rgba(14,22,38,.30),
      0 3px 10px rgba(14,22,38,.16),
      0 0 0 100vmax rgba(8,14,26,.55)!important;
  }

  /* il kartı biraz daha ferah */
  .il-bas{ height:96px!important; }
  .il-ad{ font-size:1.14rem!important; padding:10px 38px 10px 14px!important; }
  .il-sayi{ font-size:.56rem!important; }
  .il-govde{ padding:9px!important; }

  /* yer kartı: fotoğraf ve rozet büyür, metne yer açılır */
  .il-govde .kart-ozet{ grid-template-columns:124px 1fr 92px!important; }
  .il-govde .gezi-foto{ min-height:98px!important; }
  .il-govde .gezi-orta{ padding:10px 12px!important; gap:3px!important; }
  .il-govde .gezi-ad{ font-size:1.02rem!important; }
  .il-govde .gezi-alt{ font-size:.72rem!important; }
  .il-govde .gezi-btn{ font-size:.62rem!important; padding:6px 10px!important; }
  .il-govde .gezi-rozet{ padding:7px 5px!important; gap:6px!important; }
  .il-govde .gezi-rozet svg{ width:24px!important; height:24px!important; padding:4px!important; }
  .il-govde .gezi-rozet u{ font-size:.54rem!important; }

  /* detay metni masaüstünde daha okunur */
  .detay-yazi{ font-size:.78rem!important; line-height:1.6!important; }
  .detay-konum{ font-size:.7rem!important; }
  .detay-konum svg{ width:14px!important; height:14px!important; }
  .detay-harita{ font-size:.64rem!important; padding:8px 12px!important; }
}

/* ==========================================================
   GEZİLECEK YERLER KUTUSU — kurumsal lacivert + altın
   ----------------------------------------------------------
   Yanındaki sıralama kutusu beyaz ve nötr; bu kutu müşterinin
   gözüne çarpsın diye markanın lacivert–altın ikilisini
   taşıyor. Aynı renk kartlardaki fiyat rozeti, başlık plakası
   ve rezerve butonuyla birebir aynı aileden.
   Mobil ve masaüstünde tek kural.
   ========================================================== */
.gezi{
  background:linear-gradient(180deg,#24406B 0%,#1B3358 55%,#142845 100%)!important;
  border:1px solid rgba(214,175,86,.62)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 1px 3px rgba(12,22,40,.30)!important;
}
.gezi-bas{
  color:#FFFFFF!important;
  font-weight:700!important;
  text-shadow:0 1px 1px rgba(0,0,0,.35)!important;
}
.gezi-pin{ fill:#EFD08A!important; }
.gezi-ok{ color:#EFD08A!important; }

/* açıkken altın kenar biraz daha belirginleşsin */
.gezi[open]{
  border-color:rgba(226,190,110,.92)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 2px 8px rgba(12,22,40,.38)!important;
}

/* ==========================================================
   MASAÜSTÜ — panel tam ekran açılır
   ----------------------------------------------------------
   Kutuya basınca menü, çubuğun altından inen dar bir kutu
   yerine ekranın tamamını kaplayan bir sayfa olarak açılır.
   Sağ üstte kapatma tuşu var; ESC ile ve perdeye tıklayınca
   da kapanır (script index.html’in sonunda).

   position:fixed burada çalışıyor çünkü .arac-cubuk’un
   backdrop-filter’ı yalnızca mobil medya sorgusunda tanımlı;
   masaüstünde panelin konum atası doğrudan ekran oluyor.
   ========================================================== */
.gezi-baslik{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.gezi-kapat{
  display:none;               /* mobilde gizli, masaüstünde açılır */
  flex:0 0 auto;
  width:32px; height:32px;
  padding:0;
  border:1px solid rgba(214,175,86,.55);
  border-radius:8px;
  background:linear-gradient(180deg,#24406B 0%,#1B3358 55%,#142845 100%);
  color:#EFD08A;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(12,22,40,.30);
}
.gezi-kapat svg{ width:18px; height:18px; display:block; margin:auto; }
.gezi-kapat:hover{ border-color:rgba(240,212,140,.95); }

@media (min-width:761px){
  .gezi[open] .gezi-govde{
    position:fixed!important;
    left:22px!important; right:22px!important;
    top:22px!important; bottom:22px!important;
    width:auto!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    border-radius:14px!important;
    padding:0 16px 16px!important;
    overflow-y:auto!important;
    z-index:2000!important;
    box-shadow:
      0 24px 60px rgba(10,17,30,.45),
      0 0 0 100vmax rgba(8,14,26,.72)!important;
  }

  /* başlık şeridi yukarıda sabit kalsın */
  .gezi[open] .gezi-baslik{
    position:sticky;
    top:0;
    z-index:3;
    margin:0 -16px;
    padding:12px 16px 11px!important;
    background:#F6F4ED;
    border-bottom:1px solid rgba(150,132,92,.30);
    font-size:.72rem!important;
  }
  .gezi[open] .gezi-kapat{ display:block; }

  /* geniş ekranda kartlar iki sütun */
  .gezi[open] .il-govde{
    display:grid!important;
    grid-template-columns:1fr;
    gap:9px;
    align-items:start;
  }
  .gezi[open] .il-govde .gezi-kart{ margin-bottom:0!important; }
}

@media (min-width:1100px){
  .gezi[open] .il-govde{ grid-template-columns:1fr 1fr!important; }
}
@media (min-width:1600px){
  .gezi[open] .il-govde{ grid-template-columns:1fr 1fr 1fr!important; }
}

/* tam ekran panelde kartlar boşluğu paylaşsın (mobildeki mantık) */
@media (min-width:761px){
  .gezi[open] .gezi-govde{
    display:flex!important;
    flex-direction:column!important;
  }
  .gezi[open] .gezi-baslik{ flex:0 0 auto!important; }
  .gezi[open] .gezi-il{
    display:flex!important;
    flex-direction:column!important;
    flex:1 0 auto!important;      /* grow 1, shrink 0 */
    min-height:96px!important;
  }
  .gezi[open] .il-bas{ flex:1 1 auto!important; height:auto!important; min-height:96px!important; }
  .gezi[open] .gezi-il[open] .il-bas{ flex:0 0 104px!important; min-height:104px!important; }
  .gezi[open] .il-govde{ flex:0 0 auto!important; }
}

/* ==========================================================
   ARAÇ ADI — plaka kaldırıldı
   ----------------------------------------------------------
   Kartın sol yarısı artık %94-97 opak olduğu için başlığın
   arkasına kutu koymaya gerek kalmadı. Yerine sade lacivert
   yazı ve altına sağa doğru sönen ince bir altın çizgi:
   kutudan hafif, imzadan güçlü.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr .t-baslik a{
    display:inline-block!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    border-radius:0!important;
    color:#16294A!important;
    -webkit-text-fill-color:#16294A!important;
    font-weight:800!important;
    letter-spacing:-.2px!important;
    line-height:1.22!important;
    text-shadow:0 1px 0 rgba(255,255,255,.9)!important;
  }
  /* altın imza çizgisi — sağa doğru söner */
  .ilan-tablo tbody tr .t-baslik a::after{
    content:"";
    display:block;
    height:2px;
    margin-top:4px;
    border-radius:2px;
    background:linear-gradient(90deg,
      rgba(190,146,44,.95) 0%,
      rgba(190,146,44,.60) 52%,
      rgba(190,146,44,0)   100%);
  }
}

/* ==========================================================
   YER ADI — plaka kaldırıldı
   ----------------------------------------------------------
   Sağ tarafta manzara artık tam renginde göründüğü için
   lacivert plakaya gerek kalmadı. Yazı doğrudan fotoğrafın
   üzerinde duruyor: harfler altın degradeyle boyanıyor
   (background-clip:text) ve okunurluğu drop-shadow sağlıyor.
   Parıltı da plakadan yazının kendisine taşındı — böylece
   sayfanın 4.8s’lik ortak ritmi korunuyor.
   ========================================================== */
@media (max-width:760px){
  .ilan-tablo tbody tr::after{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background-color:transparent!important;
    background-image:linear-gradient(100deg,
      #8C6A1D 0%, #C89B2E 20%, #F7E7A0 38%, #FFF6CE 50%,
      #F7E7A0 62%, #C89B2E 80%, #8C6A1D 100%)!important;
    background-size:220% auto!important;
    background-repeat:no-repeat!important;
    -webkit-background-clip:text!important;
    background-clip:text!important;
    -webkit-text-fill-color:transparent!important;
    color:transparent!important;
    text-shadow:none!important;
    filter:
      drop-shadow(0 1px 2px rgba(0,0,0,.92))
      drop-shadow(0 0 7px rgba(0,0,0,.55));
    font-size:9.4px!important;
    letter-spacing:1.25px!important;
    right:10px!important;
    bottom:7px!important;
    animation:yaldizDalga var(--ritim-yaldiz) var(--egri-salinim) infinite!important;
  }
}

/* ==========================================================
   REZERVASYON — GÖNDERİM SONRASI ONAY EKRANI
   ----------------------------------------------------------
   Eskiden panel gönderimden sonra sessizce kapanıyor, müşteri
   talebin gidip gitmediğini anlamıyordu. Artık formun yerine
   bu blok geçiyor. Panelin kendi paletini kullanıyor:
   --rez-vurgu altın, WhatsApp yeşili yalnız WA düğmesinde.
   ========================================================== */
.rez-tamam{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:34px 22px 28px;text-align:center;
}
.rez-tamam[hidden]{display:none}
/* form gizlenince gerçekten kaybolsun — .rez-form display:flex taşıyor,
   hidden özniteliği tek başına onu ezemiyor */
.rez-form[hidden]{display:none!important}

.rt-tik{
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(18,140,80,.10);
  border:2px solid #128C50;
  color:#128C50;font-size:1.9rem;line-height:1;font-weight:700;
  animation:rtTik var(--ritim-giris) var(--egri-giris);
}
@keyframes rtTik{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

.rez-tamam h3{
  margin:0;font-size:1.28rem;font-weight:800;color:var(--yazi);
  letter-spacing:.01em;
}
.rt-alt{margin:0;font-size:.88rem;color:var(--yazi-3);line-height:1.55;max-width:34ch}
.rt-gun{margin:0;font-size:.82rem;color:var(--yazi-3);opacity:.85}

/* karttaki tek eylem — gönder düğmesiyle aynı altın */
.rt-kapat{
  width:100%;margin-top:4px;
  background:var(--rez-vurgu);color:#fff;border:0;border-radius:4px;
  font-family:inherit;font-size:.84rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:14px;cursor:pointer;transition:var(--gecis);
}
.rt-kapat:hover{background:#C07F1C}

@media (max-width:760px){
  .rez-tamam{padding:28px 18px 24px;gap:12px}
  .rez-tamam h3{font-size:1.14rem}
}

/* ==========================================================
   ALT BİLGİ (FOOTER) — KURUMSAL
   ----------------------------------------------------------
   Eski hâli düz bir bağlantı yığınıydı; telefonda tek sütun
   uzayıp gidiyordu ve "Kiralama" sütunundaki bağlantıların
   hepsi "#"e, yani hiçbir yere gidiyordu.
   Şimdi:
   · üstte ince altın şerit — sayfayı kurumsal bir çizgiyle kapatır
   · hizmetler bağlantı değil, bilgi (boşa tıklatmıyor)
   · teslim noktaları GERÇEKTEN çalışıyor: listeyi o noktaya süzer
   · iletişim satırları ikonlu
   · telefonda iki sütun — liste uzayıp gitmiyor
   ========================================================== */
.alt{
  background:var(--ust);color:#C7CCD4;margin-top:26px;
  border-top:3px solid var(--sari);
}
.alt-ic{
  display:grid;grid-template-columns:2.3fr 1fr 1.15fr 1.15fr;
  gap:34px 30px;padding-block:42px 34px;
}
.alt-blok{display:flex;flex-direction:column;gap:10px}

.alt-logo{
  display:inline-block;background:var(--sari);color:#1A1405;
  font-size:1.05rem;font-weight:700;padding:5px 11px;border-radius:4px;
  align-self:flex-start;letter-spacing:-.02em;
}
.alt-logo span{color:var(--kirmizi)}
.alt-marka p{font-size:.85rem;line-height:1.65;color:#9FA8B5;max-width:42ch}

/* güven rozetleri */
.alt-rozet{
  display:flex;flex-wrap:wrap;gap:6px;
  list-style:none;margin:2px 0 0;padding:0;
}
.alt-rozet li{
  font-size:.7rem;font-weight:600;letter-spacing:.04em;
  color:#DCE2EA;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  padding:5px 9px;border-radius:3px;white-space:nowrap;
}
.alt-slogan{
  color:var(--sari)!important;font-size:.73rem!important;
  font-weight:700;letter-spacing:.16em;margin-top:4px;
}

/* sütun başlıkları — altında kısa altın çizgi */
.alt-blok h4{
  color:#fff;font-size:.82rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 8px;padding-bottom:9px;position:relative;
}
.alt-blok h4::after{
  content:'';position:absolute;left:0;bottom:0;
  width:26px;height:2px;background:var(--sari);
}

/* hizmet listesi — tıklanabilir değil, bilgi */
.alt-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.alt-liste li{
  font-size:.85rem;color:#9FA8B5;line-height:1.4;
  padding-left:13px;position:relative;
}
.alt-liste li::before{
  content:'';position:absolute;left:0;top:.52em;
  width:5px;height:5px;border-radius:50%;background:rgba(245,197,24,.55);
}

/* bağlantılar */
.alt-blok a{
  font-size:.85rem;color:#9FA8B5;line-height:1.4;
  transition:var(--gecis);
}
.alt-blok a:hover{color:var(--sari)}

/* teslim noktaları — hoverda içeri kayan ok */
.alt-blok a[data-alt-teslim]{padding-left:13px;position:relative}
.alt-blok a[data-alt-teslim]::before{
  content:'›';position:absolute;left:0;top:-.06em;
  color:rgba(245,197,24,.6);font-size:1rem;line-height:1.4;
  transition:var(--gecis);
}
.alt-blok a[data-alt-teslim]:hover::before{left:3px;color:var(--sari)}

/* iletişim — ikonlu satırlar */
.alt-iletisim a{display:flex;align-items:center;gap:9px}
.alt-iletisim svg{
  width:15px;height:15px;flex:0 0 15px;
  fill:rgba(245,197,24,.75);transition:var(--gecis);
}
.alt-iletisim a:hover svg{fill:var(--sari)}
.alt-iletisim .ai-vurgu span{
  font-size:1rem;font-weight:700;color:#fff;letter-spacing:.01em;
}
.alt-iletisim .ai-vurgu:hover span{color:var(--sari)}

/* alt şerit */
.alt-cizgi{border-top:1px solid rgba(255,255,255,.10)}
.alt-cizgi-ic{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;
  padding-block:16px;font-size:.76rem;color:#7C8695;
}
.alt-seo{color:#68717E}

@media (max-width:1100px){
  .alt-ic{grid-template-columns:1fr 1fr;gap:30px 26px}
  .alt-marka{grid-column:1 / -1}
}

@media (max-width:760px){
  /* tek sütun yerine iki sütun: liste uzayıp gitmesin */
  .alt-ic{grid-template-columns:1fr 1fr;gap:26px 18px;padding-block:32px 26px}
  .alt-marka{grid-column:1 / -1}
  .alt-blok h4{font-size:.76rem;margin-bottom:6px;padding-bottom:7px}
  .alt-liste li,
  .alt-blok a{font-size:.81rem}
  .alt-iletisim{grid-column:1 / -1}
  .alt-iletisim > a{display:inline-flex;margin-right:16px}
  .alt-cizgi-ic{flex-direction:column;align-items:flex-start;gap:5px;font-size:.72rem}
}

/* --- footer dolguları -------------------------------------
   .kap sınıfı dar ekranlarda `padding:0!important` alıyor
   (2974. satır). Kısayol + !important olduğu için buradaki
   `padding-block` onu geçemiyor; footer kendi dolgusunu
   aynı ağırlıkla vermek zorunda. */
.alt-ic{padding:42px 16px 34px!important}
.alt-cizgi-ic{padding:16px!important}

@media (max-width:760px){
  .alt-ic{padding:30px 16px 24px!important}

  /* iletişim satırları alt alta uzamasın, sarmalı akısın */
  .alt-iletisim{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 20px}
  .alt-iletisim h4{flex:1 0 100%;margin-bottom:2px}
  .alt-iletisim > a{margin:0}

  /* sabit alt çubuk (fab) 64px; telif satırı altında kalmasın */
  .alt-cizgi-ic{
    padding:14px 16px calc(78px + env(safe-area-inset-bottom))!important;
  }
}

/* ==========================================================
   DİL SEÇİCİ — sağ üst
   ----------------------------------------------------------
   İki yerde duruyor: masaüstünde üst bardaki .ust-sag,
   telefonda mobil başlıktaki .m-ikon (arama ikonunun yanı).
   Telefonda yer dar; orada yalnız bayrak + TR/EN görünür.
   ========================================================== */
.dil-sec{position:relative;flex:0 0 auto}

.dil-btn{
  display:flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;border-radius:4px;
  padding:7px 9px;cursor:pointer;
  font-family:inherit;font-size:.8rem;font-weight:700;
  letter-spacing:.06em;line-height:1;
  transition:var(--gecis);
}
.dil-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34)}

.dil-bayrak{
  display:block;width:20px;height:14px;flex:0 0 20px;
  border-radius:2px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);
}
.dil-bayrak svg{display:block;width:100%;height:100%}
.dil-ok{font-size:.6rem;opacity:.75}

/* açılır liste */
.dil-menu{
  display:none;position:absolute;top:calc(100% + 7px);right:0;z-index:120;
  min-width:172px;padding:5px;
  background:#fff;border:1px solid var(--cizgi);border-radius:5px;
  box-shadow:0 10px 30px rgba(0,0,0,.20);
}
.dil-sec.acik .dil-menu{display:block}

.dil-ogesi{
  display:flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;border-radius:4px;
  padding:9px 10px;cursor:pointer;text-align:left;
  font-family:inherit;font-size:.87rem;color:var(--yazi);
  transition:var(--gecis);
}
.dil-ogesi:hover{background:#F2F5F9}
.dil-ogesi.secili{background:#EAF0F8;font-weight:700}
.dil-ogesi.secili .dil-ad{color:var(--ust)}
.dil-ad{line-height:1.2}

/* telefon: mobil başlıkta arama ikonunun yanında */
.dil-sec-dar .dil-btn{
  padding:6px 7px;gap:5px;font-size:.72rem;
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);
}
.dil-sec-dar .dil-bayrak{width:18px;height:12px;flex-basis:18px}
.dil-sec-dar .dil-ok{display:none}
.dil-sec-dar .dil-menu{min-width:158px}

/* masaüstü üst barda dikey hizala */
.ust-sag .dil-sec{margin-left:4px}

/* --- Arapça: sayfa sağdan sola --- */
[dir="rtl"] .dil-menu{right:auto;left:0}
[dir="rtl"] .dil-ogesi{text-align:right}

/* ==========================================================
   ARAPÇA (SAĞDAN SOLA) — SAYI VE MARKA YÖNÜ
   ----------------------------------------------------------
   Sağdan sola sayfada "0537 218 96 76" gibi yalnız rakamdan
   oluşan diziler, tarayıcının iki yönlü metin kuralı yüzünden
   sağdan sola sıralanıp "76 96 218 0537" görünüyordu.
   Telefon, fiyat, marka adı ve dil kısaltması soldan sağa
   kilitleniyor; isolate ile çevresindeki Arapça metni de
   bozmuyorlar.
   ========================================================== */
[dir="rtl"] .ust-tel,
[dir="rtl"] .ust-tel strong,
[dir="rtl"] .alt-iletisim a,
[dir="rtl"] .logo,
[dir="rtl"] .alt-logo,
[dir="rtl"] .dil-kisa,
[dir="rtl"] .g-fiyat,
[dir="rtl"] .t-fiyat,
[dir="rtl"] .l-fiyat,
[dir="rtl"] .kart-fiyat,
[dir="rtl"] .rez-gun,
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="time"],
[dir="rtl"] select[name="ulkeKodu"],
[dir="rtl"] .alt-cizgi-ic{
  direction:ltr;
  unicode-bidi:isolate;
}

/* footer iletişim satırları soldan sağa olunca ikon sola dönsün */
[dir="rtl"] .alt-iletisim a{justify-content:flex-start}

/* alt şerit soldan sağa kilitlendi; içerik yine sağa yaslansın */
[dir="rtl"] .alt-cizgi-ic{text-align:right}

/* ==========================================================
   ÇOK DİLLİ TAŞMA GÜVENLİĞİ
   ----------------------------------------------------------
   Türkçe metinlere göre ayarlanmış kutular, çeviri uzayınca
   taşıyor: "ŞANLIURFA ARAÇ KİRALAMA" 31 karakter,
   Rusçası "АРЕНДА АВТОМОБИЛЕЙ В ШАНЛЫУРФЕ" 449 piksel
   ama şeridin içi 349 piksel.
   Çözüm: harf aralığını ve puntoyu kutuya göre daralt.
   Türkçede hiçbir şey değişmez — clamp üst sınırı eski değer.
   ========================================================== */

/* marka şeridi — uzun dillerde punto küçülür, gerekirse
   ikinci satıra iner. nowrap kalsaydı Rusça 447px olup
   349px'lik şeritten taşardı; kesmek yerine sarıyoruz. */
.marka-serit span{
  font-size:clamp(.62rem, 2.6vw, .92rem);
  letter-spacing:clamp(.06em, .9vw, .22em);
  max-width:100%;
  white-space:normal;
  line-height:1.35;
  text-wrap:balance;
}

/* hero rozetleri — sığmazsa alt satıra insin, kesilmesin */
.marka-askilik{flex-wrap:wrap}
.marka-askilik em{white-space:normal;text-align:center}

/* gezilecek yerler kutusunun başlığı */
.gezi-baslik{overflow:hidden}
.gezi-baslik b,
.gezi-baslik span{overflow-wrap:anywhere}

@media (max-width:760px){
  .marka-serit span{
    font-size:clamp(.56rem, 2.9vw, .8rem);
    letter-spacing:clamp(.04em, .8vw, .18em);
  }
  .marka-askilik em{font-size:.68rem}
}

/* --- rezervasyon düğmesi: uzun çevirilerde kesilmesin ---
   "Hemen Rezerve Et" 13 karakter, Fransızcası
   "Réserver maintenant" 19 karakter ve 250px sürüyor;
   düğmenin içi 156px, overflow:hidden olduğu için yazı
   kırpılıyordu. Punto kutuya göre daralsın, gerekirse
   iki satıra insin. Türkçede üst sınır eski değerde. */
.ilan-tablo .rez-btn{
  height:auto!important;
  min-height:34px;
  padding-block:6px!important;
  display:flex!important;
  align-items:center;
  justify-content:center;
}
.ilan-tablo .rez-yazi{
  display:block!important;      /* inline-block içerik boyunda kalıp
                                   sarmıyordu; blok olunca kutuya uyuyor */
  width:100%;
  font-size:clamp(.54rem, 2.4vw, .78rem)!important;
  letter-spacing:.02em!important;
  white-space:normal!important;
  overflow-wrap:anywhere;
  line-height:1.18!important;
  text-align:center;
}

/* ödeme notu — uzun dilde satır sonu serbest olsun */
.odeme-notu{overflow-wrap:anywhere}

/* ==========================================================
   ALT BİLGİ — WISH DÜZENİ
   ----------------------------------------------------------
   Üstte logo + sosyal ikonlar, altında sütunlar, sonra
   güvence şeridi, en altta telif.
   Telefonda sütunlar <details> ile açılır-kapanır olur;
   masaüstünde JS hepsini açık tutar (dil.js'in yanındaki
   küçük betik). Böylece tek işaretlemeyle iki düzen.

   Wish'te burada uygulama rozetleri ve kart logoları var;
   bizde uygulama yok ve ödeme ofiste alınıyor, o yüzden
   o alana gerçekten geçerli olan güvenceler yazıldı.
   ========================================================== */

/* --- üst şerit: logo + sosyal --- */
.alt-tepe{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
  padding:26px 16px 4px!important;
}
.alt-sosyal{display:flex;align-items:center;gap:9px}
.alt-sosyal a{
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  transition:var(--gecis);
}
.alt-sosyal a:hover{background:var(--sari);border-color:var(--sari)}
.alt-sosyal svg{width:17px;height:17px;fill:#DCE2EA;transition:var(--gecis)}
.alt-sosyal a:hover svg{fill:#1A1405}

/* --- sütunlar --- */
.alt-ic{
  display:grid;
  grid-template-columns:1fr 1fr 1.1fr 1.6fr;
  gap:28px 30px;
  padding:22px 16px 30px!important;
  align-items:start;
}
.alt-blok{display:flex;flex-direction:column;gap:10px}

/* details'ı masaüstünde sıradan bir sütun gibi göster */
.alt-blok > summary{
  list-style:none;cursor:default;
  display:flex;align-items:center;justify-content:space-between;
}
.alt-blok > summary::-webkit-details-marker{display:none}
.alt-blok > summary::after{
  content:'';                       /* ok yalnız telefonda çıkar */
}
.alt-blok h4{
  color:#fff;font-size:.82rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  margin:0 0 8px;padding-bottom:9px;position:relative;
}
.alt-blok h4::after{
  content:'';position:absolute;left:0;bottom:0;
  width:26px;height:2px;background:var(--sari);
}
.alt-govde{display:flex;flex-direction:column;gap:10px}

/* marka bloğu artık en sağda */
.alt-marka p{font-size:.85rem;line-height:1.65;color:#9FA8B5;margin:0}
.alt-slogan{
  color:var(--sari)!important;font-size:.73rem!important;
  font-weight:700;letter-spacing:.16em;margin-top:8px!important;
}

/* --- güvence şeridi --- */
.alt-guvence{
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.14);
}
.alt-guvence-ic{
  display:flex;align-items:center;justify-content:flex-end;
  gap:14px;flex-wrap:wrap;
  padding:14px 16px!important;
}
.ag-yazi{
  font-size:.78rem;font-weight:700;color:#C9D2DD;letter-spacing:.02em;
}
.alt-rozet{
  display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0;
}
.alt-rozet li{
  font-size:.7rem;font-weight:600;letter-spacing:.03em;
  color:#EDE3CB;
  background:rgba(201,151,26,.16);
  border:1px solid rgba(201,151,26,.42);
  padding:6px 10px;border-radius:3px;white-space:nowrap;
}

/* ==========================================================
   TELEFON — Wish'teki gibi açılır-kapanır başlıklar
   ========================================================== */
@media (max-width:760px){
  .alt-tepe{
    justify-content:space-between;
    padding:22px 16px 10px!important;
  }
  .alt-sosyal a{width:34px;height:34px}

  .alt-ic{
    grid-template-columns:1fr;
    gap:0;
    padding:4px 16px 8px!important;
  }

  /* her sütun bir satır: başlık + ok */
  .alt-blok{
    border-top:1px solid rgba(255,255,255,.10);
    gap:0;
  }
  .alt-blok:first-of-type{border-top:0}

  .alt-blok > summary{
    cursor:pointer;
    padding:15px 2px;
    -webkit-tap-highlight-color:transparent;
  }
  .alt-blok h4{
    margin:0;padding:0;font-size:.9rem;letter-spacing:.06em;
  }
  .alt-blok h4::after{display:none}      /* kapalıyken altın çizgi olmasın */

  /* açılır ok */
  .alt-blok > summary::after{
    content:'';
    width:9px;height:9px;flex:0 0 9px;
    border-right:2px solid rgba(255,255,255,.55);
    border-bottom:2px solid rgba(255,255,255,.55);
    transform:rotate(45deg) translateY(-2px);
    transition:transform .2s ease;
  }
  .alt-blok[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
  .alt-blok[open] > summary h4{color:var(--sari)}

  .alt-govde{padding:2px 2px 16px;gap:12px}

  /* marka bloğu açılır olmayan tek blok — ayraçla ayrılsın */
  .alt-marka{
    border-top:1px solid rgba(255,255,255,.10);
    padding:16px 2px 4px;
  }

  /* güvence şeridi ortalansın, Wish'teki gibi başlık üstte */
  .alt-guvence-ic{
    flex-direction:column;align-items:center;justify-content:center;
    gap:10px;padding:16px!important;text-align:center;
  }
  .alt-rozet{justify-content:center}
  .alt-rozet li{font-size:.66rem;padding:5px 9px}
}

/* --- Arapça: ikon ve okların yönü --- */
[dir="rtl"] .alt-blok h4::after{left:auto;right:0}
[dir="rtl"] .alt-guvence-ic{justify-content:flex-start}
[dir="rtl"] .alt-blok > summary::after{transform:rotate(135deg) translateY(-2px)}
[dir="rtl"] .alt-blok[open] > summary::after{transform:rotate(-45deg) translateY(-2px)}

/* --- eski alt bilgi sürümünden kalan çakışma ---
   .alt-iletisim artık bir <details>; çocukları <summary> ve
   .alt-govde. Eski kural onu satır yönüne çevirdiği için
   "DESTEK" başlığı ortaya kayıyordu. Yeni yapıya göre
   düzeltiliyor: blok sütun kalsın, satır düzeni yalnız
   içindeki bağlantılara uygulansın. */
@media (max-width:760px){
  .alt-blok.alt-iletisim{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:0!important;
  }
  .alt-blok.alt-iletisim > summary{justify-content:space-between!important}
  .alt-blok.alt-iletisim h4{flex:0 1 auto!important;margin:0!important}

  /* iletişim bağlantıları iki sütuna yayılsın, boşluk kalmasın */
  .alt-iletisim .alt-govde{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:12px 20px;
  }
  .alt-iletisim .alt-govde > a{margin:0}
}

/* ==========================================================
   ALT BİLGİ — ALTIN ZEMİN (Wish düzenindeki gibi)
   ----------------------------------------------------------
   Wish'in sarısı yerine Damla'nın kendi kurumsal altını
   (--sari #C9971A) kullanılıyor; logo zaten bu renkte, footer
   de aynı tona oturunca marka tek parça duruyor.
   Zemin altın olduğu için bütün yazılar koyu lacivert-siyaha
   çevriliyor — altın üstünde beyaz yazı okunmuyor.
   Bu blok en sonda: önceki lacivert kuralları eziyor.
   ========================================================== */
:root{
  --alt-altin:      #FFC61E;   /* Wish sarısı */
  --alt-altin-ust:  #FFC61E;   /* düz renk — Wish'te de düz */
  --alt-altin-alt:  #B4851212;  /* kullanılmıyor, yer tutucu */
  --alt-koyu:       #111111;   /* ana yazı: siyah */
  --alt-koyu-2:     #2A2A2A;   /* ikincil yazı */
  --alt-cizgi-alt:  rgba(17,17,17,.18);
}

.alt{
  background:var(--alt-altin)!important;
  color:var(--alt-koyu)!important;
  border-top:3px solid #E0A800!important;
}

/* logo: altın kutu kalkıyor, Wish'teki gibi düz yazı */
.alt-logo{
  background:none!important;
  color:var(--alt-koyu)!important;
  padding:0!important;
  font-size:1.32rem!important;
  letter-spacing:-.025em;
}
.alt-logo span{color:#C8102E!important}

/* sosyal ikonlar: koyu daire, altın üstünde belirgin */
.alt-sosyal a{
  background:rgba(17,17,17,.10)!important;
  border-color:rgba(17,17,17,.28)!important;
}
.alt-sosyal a:hover{background:var(--alt-koyu)!important;border-color:var(--alt-koyu)!important}
.alt-sosyal svg{fill:var(--alt-koyu)!important}
.alt-sosyal a:hover svg{fill:#FFC61E!important}

/* sütun başlıkları */
.alt-blok h4{color:var(--alt-koyu)!important}
.alt-blok h4::after{background:rgba(17,17,17,.45)!important}

/* hizmet listesi ve bağlantılar */
.alt-liste li{color:var(--alt-koyu-2)!important}
.alt-liste li::before{background:rgba(17,17,17,.5)!important}
.alt-blok a{color:var(--alt-koyu-2)!important}
.alt-blok a:hover{color:#111!important}
.alt-blok a[data-alt-teslim]::before{color:rgba(17,17,17,.55)!important}
.alt-blok a[data-alt-teslim]:hover::before{color:#111!important}

/* iletişim satırları */
.alt-iletisim svg{fill:rgba(17,17,17,.75)!important}
.alt-iletisim a:hover svg{fill:#111!important}
.alt-iletisim .ai-vurgu span{color:var(--alt-koyu)!important}
.alt-iletisim .ai-vurgu:hover span{color:#111!important}

/* marka tanıtım yazısı ve slogan */
.alt-marka p{color:var(--alt-koyu-2)!important}
.alt-slogan{color:#111!important}

/* güvence şeridi: bir tık koyu altın bant */
.alt-guvence{
  background:rgba(17,17,17,.10)!important;
  border-top:1px solid var(--alt-cizgi-alt)!important;
}
.ag-yazi{color:var(--alt-koyu)!important}
.alt-rozet li{
  color:var(--alt-koyu)!important;
  background:rgba(255,255,255,.34)!important;
  border-color:rgba(17,17,17,.30)!important;
}

/* alt telif şeridi */
.alt-cizgi{
  border-top:1px solid var(--alt-cizgi-alt)!important;
  background:rgba(17,17,17,.06);
}
.alt-cizgi-ic{color:rgba(17,17,17,.72)!important}
.alt-seo{color:rgba(17,17,17,.55)!important}

/* telefonda açılır başlık ayraçları ve oklar */
@media (max-width:760px){
  .alt-blok{border-top-color:var(--alt-cizgi-alt)!important}
  .alt-marka{border-top-color:var(--alt-cizgi-alt)!important}
  .alt-blok > summary::after{
    border-right-color:rgba(17,17,17,.6)!important;
    border-bottom-color:rgba(17,17,17,.6)!important;
  }
  .alt-blok[open] > summary h4{color:#111!important}
}

/* ==========================================================
   ALT ÇUBUK — DÜĞMELER GÖRÜNSÜN
   ----------------------------------------------------------
   Göbeklitepe şeridi gün batımı olduğu için parlak; üstündeki
   yuvarlak düğmeler fona karışıyordu. Özellikle beyaz harita
   düğmesi ile bayrağın kırmızısı birbirine giriyordu.

   İki müdahale:
   1) fonun üstündeki karartı %42'den %72'ye çıktı — manzara
      hâlâ okunuyor ama artık zemin, konu değil
   2) her düğmeye açık renkli ince halka + daha derin gölge;
      düğme hangi fonun üstüne gelirse gelsin kendi sınırını
      koruyor
   ========================================================== */
@media (max-width:760px){
  .fab-grup{
    background:
      linear-gradient(180deg,
        rgba(6,10,18,.56) 0%,
        rgba(6,10,18,.46) 50%,
        rgba(4,6,12,.62) 100%),
      url("../img/manzara/gobeklitepe-kaya.png"),
      url("../img/manzara/gobeklitepe-serit.jpg")!important;
    padding:10px 11px!important;
  }

  /* düğmeler fondan ayrılsın */
  .fab-grup .fab{
    border:2px solid rgba(255,255,255,.92)!important;
    box-shadow:
      0 3px 10px rgba(0,0,0,.55),
      0 0 0 1px rgba(0,0,0,.30)!important;
  }
  .fab-grup .fab:active{transform:scale(.94)}

  /* ikonlar bir tık büyüsün, daire içinde kaybolmasın */
  .fab-grup .fab svg{width:22px;height:22px}

  /* harita düğmesi beyaz zeminli; halka koyu olsun ki
     bayrağın kırmızısıyla karışmasın */
  .fab-grup .fab-map{
    border-color:rgba(20,26,38,.85)!important;
    box-shadow:
      0 3px 10px rgba(0,0,0,.60),
      0 0 0 2px rgba(255,255,255,.55)!important;
  }
}


/* ==========================================================
   MOBİL — YÜZEN BUTONLAR ARTIK YAN TARAFTA
   ----------------------------------------------------------
   Alt taraftaki Göbeklitepe şeridi kaldırıldı. Dört düğme
   fondan ayrılamıyordu; manzara fotoğrafı okunurluğu bozuyor,
   şerit de sayfanın altını tamamen kapatıyordu.

   Yeni hâl: düğmeler sağ kenarda, alt alta duran sade
   yuvarlaklar — masaüstündeki düzenin aynısı. Sıra korundu:
   yukarıdan aşağı Instagram · Telefon · WhatsApp · Harita.

   Fon kalktığı için şeride ait ne varsa burada sıfırlanıyor:
   arka plan, çerçeve, iç çizgi (::before), gölge, blur, dolgu
   ve düğmelerin şeride sığsın diye verilen yan kaydırmaları.
   Sayfanın altındaki 84px'lik boşluğa da gerek kalmadı.
   ========================================================== */
@media (max-width:760px){
  .fab-grup{
    left:auto!important;
    right:11px!important;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px))!important;
    width:auto!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
    padding:0!important;

    background:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  /* şeridin ince altın iç çerçevesi */
  .fab-grup::before{content:none!important;display:none!important}

  /* şeritte kayaya yer açmak için verilen yan kaydırmalar */
  .fab-grup .fab-ig,
  .fab-grup .fab-tel,
  .fab-grup .fab-map{transform:none!important}

  /* düğmeler: sayfanın kendi zemininde de, araç fotoğrafının
     üstünde de sınırı belli olsun diye ince beyaz halka */
  .fab-grup .fab{
    width:46px!important;
    height:46px!important;
    flex:0 0 auto!important;
    border:2px solid rgba(255,255,255,.95)!important;
    box-shadow:
      0 4px 14px rgba(0,0,0,.30),
      0 0 0 1px rgba(0,0,0,.10)!important;
  }
  .fab-grup .ara-fab{width:46px!important;height:46px!important}
  .fab-grup .fab svg{width:21px;height:21px}
  .fab-grup .fab:active{transform:scale(.94)!important}

  /* harita düğmesinin zemini beyaz — halkası koyu olmalı */
  .fab-grup .fab-map{
    border-color:rgba(18,24,36,.16)!important;
    box-shadow:
      0 4px 14px rgba(0,0,0,.30),
      0 0 0 1px rgba(0,0,0,.08)!important;
  }

  /* alt şerit kalktı, sayfa sonundaki pay da kalksın */
  body{
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px))!important;
  }
}



/* ==========================================================
   MOBİL ANA YÜZ — arama kartı
   ----------------------------------------------------------
   Telefonda sayfanın ilk yüzü, gönderilen maketin birebir
   karşılığı:

     · üstte beyaz bant — solda altın DAMLA / RENT A CAR
       logosu, sağda bayrak ve menü, altında ince ayraç
     · altında Damla ofisinin fotoğrafı
     · fotoğrafın üstünde beyaz arama kartı
     · kartın altında kampanya kodu
     · en altta "Sen Sadece Rahatına Bak"

   Bölüm ekranın tamamını kaplıyor (100lvh); böylece ana
   ekranda altındaki marka şeridi ve araç listesi görünmüyor,
   ancak aşağı kaydırınca geliyor.

   Yalnız telefonda ve yalnız body.ay-var taşıyan sayfada
   (ana sayfa) çalışır. Masaüstü ve ilan sayfası eski
   hâlinde kalır.
   ========================================================== */

/* masaüstünde ve varsayılan olarak kapalı */
.anayuz,
.ay-perde,
.ay-sayfa,
.m-logo{display:none}

@media (max-width:760px){

  /* beyaz başlık bandının yüksekliği — hem bandın kendisi
     hem üst çubuğun konumu hem kartın başlangıcı buna bağlı */
  /* bant boyu maketin oranından: 228/853 = %26,73 */
  :root{--ay-bant:26.73vw}

  /* ---------- ÜST BANT ----------
     Bant, maketin üst şeridinin kendisi: damla, yazı tipi,
     altın tonu ve zeminin ışığı görselden geliyor, çizilmiyor.
     Görselde bayrak ile menü silinmiş durumda; onların yerine
     sitenin gerçek düğmeleri oturuyor.

     Ölçüler maketin oranlarından (maket 853 px geniş):
       bant boyu    228/853 = %26,73 → yükseklik 26.73vw
       bayrak      x 592..683 → genişlik 10.7vw
       menü        x 745..812 → genişlik  7.9vw
       sağ boşluk  853-812    →           4.8vw
       aradaki pay 683..745   →           7.2vw
     Böylece hangi telefonda açılırsa açılsın düğmeler
     görseldeki yerlerine denk geliyor.
     ---------------------------------------------------------- */
  body.ay-var .m-bas{
    position:absolute!important;
    top:0; left:0; right:0;
    box-sizing:border-box;
    min-height:calc(var(--ay-bant) + env(safe-area-inset-top, 0px));
    background-color:#EDEBE6!important;      /* çentikli ekranda üstte kalan şerit */
    background-image:url("../img/hero/ust-bant.jpg?f=5")!important;
    background-repeat:no-repeat!important;
    background-position:left bottom!important;
    background-size:100% var(--ay-bant)!important;
    padding:calc(1.9vw + env(safe-area-inset-top, 0px)) 4.8vw 0 0!important;
    z-index:30!important;
    gap:7.2vw!important;
    align-items:center!important;
    box-shadow:none!important;
    /* Logo bandın görselinde solda duruyor; Arapçada sayfa
       sağdan sola dönünce bayrak ve menü logonun üstüne
       biniyordu. Bant her dilde soldan sağa kalıyor —
       marka görseli zaten yönsüz. */
    direction:ltr!important;
  }
  body.ay-var .m-bas-yazi{display:none}
  body.ay-var #mArama{display:none}     /* makette büyüteç yok */

  /* ---------- LOGO ----------
     29.08.2026: marka adı bant görselinin İÇİNE çizilmişti; resimdeki
     yazı hiçbir dile çevrilemiyordu. İngilizce sayfada gövde tamamen
     İngilizceyken başlıkta hâlâ Türkçe yazıyordu.

     DAMLA DEĞİŞMEDİ — bant görselinde olduğu gibi duruyor. Yalnız
     yazı metne çevrildi; ölçüler eski görselin oranlarıyla birebir
     eşleşecek şekilde ayarlandı:
       ŞANLIURFA     büyük harf yüksekliği ~24.6px @375px
       ARAÇ KİRALAMA büyük harf yüksekliği ~12.5px @375px
       yazı rengi    #CE9830  (eski görselden örneklendi) */
  body.ay-var .m-logo{
    display:flex;
    align-items:center;
    gap:2.6vw;
    flex:1 1 auto; min-width:0;
    align-self:center;
    padding-left:4.4vw;
    text-decoration:none;
  }
  body.ay-var .m-damla{
    display:block;
    width:7.4vw; height:12.6vw;
    flex:0 0 auto;
  }
  body.ay-var .m-logo-yazi{
    display:flex;
    flex-direction:column;
    align-items:center;        /* alt satır üstün ortasına gelsin */
    line-height:1;
    min-width:0;
  }
  body.ay-var .m-logo-ust{
    font-size:9vw;
    font-weight:800;
    letter-spacing:-.005em;
    color:#CE9830;
    white-space:nowrap;
  }
  body.ay-var .m-logo-alt{
    font-size:4.5vw;
    font-weight:700;
    letter-spacing:.02em;
    color:#CE9830;
    white-space:nowrap;
    margin-top:.6vw;
  }
  /* Rusça "ШАНЛЫУРФА" Türkçesinden uzun; 9vw'de bayrağa değiyordu.
     Yalnız o dilde küçültüyoruz — Türkçe görünüm hiç değişmesin. */
  html[data-dil="ru"] body.ay-var .m-logo-ust{font-size:7.4vw}
  /* Fransızca alt satır uzun: "LOCATION DE VOITURES" */
  html[data-dil="fr"] body.ay-var .m-logo-alt{font-size:3.9vw}

  /* ---------- BAYRAK ---------- */
  body.ay-var .m-ikon{order:2; gap:0; flex:0 0 auto}
  body.ay-var .m-ikon .dil-btn{
    padding:0!important;
    border:0!important;
    background:none!important;
    box-shadow:none!important;
    gap:0!important;
  }
  body.ay-var .m-ikon .dil-kisa,
  body.ay-var .m-ikon .dil-ok{display:none!important}   /* makette "TR" yazısı yok */
  body.ay-var .m-ikon .dil-bayrak{
    width:10.7vw!important;
    height:10.7vw!important;
    flex-basis:10.7vw!important;
    max-width:46px; max-height:46px;
    border-radius:1.9vw!important;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(20,26,38,.20);
  }
  /* bayrak SVGsi 3:2; kare kutuyu doldursun diye yanlardan
     kırpılıyor (object-fit satır içi SVGye işlemiyor).
     Türk bayrağında ay ile yıldız kırpılan alanın içinde kalır. */
  body.ay-var .m-ikon .dil-bayrak svg{
    width:150%;
    height:100%;
    margin-left:-25%;
    display:block;
  }

  /* ---------- MENÜ ---------- */
  body.ay-var .m-menu{
    order:3;
    width:7.9vw; max-width:34px;
    flex:0 0 auto;
    gap:1.55vw;
  }
  body.ay-var .m-menu span{
    background:#1A1A1A;
    height:1.05vw; max-height:4.5px; min-height:3px;
    border-radius:2px;
  }
  body.ay-var .m-menu span:nth-child(1),
  body.ay-var .m-menu span:nth-child(2),
  body.ay-var .m-menu span:nth-child(3){display:block; width:100%}
  body.ay-var .m-menu::after{display:none}

  /* arama kutusu açılırsa bandın altından başlasın */
  body.ay-var .m-arama{
    background:#F3F1EA!important;
    padding-top:calc(var(--ay-bant) + env(safe-area-inset-top, 0px))!important;
  }

  /* ---------- ANA YÜZ ---------- */
  .anayuz{
    display:flex;
    flex-direction:column;
    position:relative;
    /* svh = adres çubuğu AÇIKKEN kalan yükseklik. lvh (çubuk
       gizliyken ölçülen boy) kullanılınca bölüm kadrajdan uzun
       oluyor ve alttaki yazı görünmüyordu. */
    min-height:100vh;
    min-height:100svh;
    box-sizing:border-box;
    /* Karta kadar bırakılan boşluk.
       Tabela kutuları görselde 300. satırda bitiyor (kenar taraması
       ile ölçüldü). Fotoğraf ekran genişliğine göre ölçeklendiği
       için tabelanın yeri de genişliğe bağlı: 300/853 = %35,2.
       Kartın onların altından başlaması için ölçü 36vw.
       Ekranı kısa telefonlarda alttaki yazı taşmasın diye ayrıca
       21svh ile sınırlanıyor — hangisi küçükse o geçerli. */
    padding:calc(var(--ay-bant) + env(safe-area-inset-top, 0px)
                 + clamp(40px, min(36vw, 21svh), 158px))
            0 clamp(12px, 2.4svh, 26px);
    background:#FAF9F5;
    overflow:hidden;
  }

  /* fotoğraf katmanı — beyaz bandın ALTINDAN başlar, böylece
     tabelalar bandın arkasında kalıp kesilmez */
  .anayuz::before{
    content:"";
    position:absolute; z-index:0;
    left:0; right:0; bottom:0;
    top:calc(var(--ay-bant) + env(safe-area-inset-top, 0px));
    /* "100% auto" — fotoğraf her zaman GENİŞLİĞE göre ölçekleniyor.
       "cover" kullanılınca uzun-dar ekranlarda yüksekliğe göre
       ölçekleyip yanlardan kırpıyordu; o zaman tabelaların yeri
       kayıyor, hem kartın başlangıcı hem tabela ışığı tutmuyordu. */
    background:url("../img/hero/damla-ofis.jpg?f=2") no-repeat center top/100% auto;
  }

  /* ---------- TABELA IŞIĞI ----------
     Fotoğraftaki iki "Damla Rent A Car" kutusunun üzerinden
     soldan sağa bir parıltı geçiyor — arkadan aydınlatmalı
     tabelaya ışık vurmuş gibi.

     Yazılar fotoğrafın içinde olduğu için harflere dokunmuyoruz;
     kutunun tam üstüne saydam bir şerit bindirilip kaydırılıyor.
     Beyaz zeminde neredeyse görünmüyor, altın harflerin üstünden
     geçerken onları aydınlatıyor — istenen etki bu.

     Kutuların yeri görselden kenar taramasıyla ölçüldü
     (853 px genişlikteki dosyada):
       sol kutu   x 112..400   y 120..280
       sağ kutu   x 425..712   y 120..280
     Yüzdeye çevrilip vw olarak yazıldı; fotoğraf da genişliğe
     göre ölçeklendiği için her telefonda kutulara oturuyor. */
  .ay-isik{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
  }
  .ay-isik i{
    position:absolute;
    left:var(--mx); width:var(--mw); height:var(--mh);
    top:calc(var(--ay-bant) + env(safe-area-inset-top, 0px) + var(--my));
    overflow:hidden;
    border-radius:.6vw;
  }
  /* Ölçüler 5 kat büyütülmüş cetvelli kırpmayla okundu (foto 853 px):
       sol pano  x 116..396  y 123..276   =  280x153
       sağ pano  x 437..710  y 121..275   =  273x154
     İKİ PANO EŞİT DEĞİL — sağdaki perspektiften 7 px dar. Önce
     ikisine de 33.7vw verilmişti; çerçeve konunca sağdaki panodan
     taşıdığı görüldü. Artık her pano kendi ölçüsünde. */
  .ay-isik i:nth-child(1){--mx:13.60vw; --my:14.42vw; --mw:32.83vw; --mh:17.94vw}
  .ay-isik i:nth-child(2){--mx:51.23vw; --my:14.19vw; --mw:32.00vw; --mh:18.05vw}

  .ay-isik i::before{
    content:"";
    position:absolute;
    top:-20%;
    bottom:-20%;
    left:0;
    width:58%;
    background:linear-gradient(102deg,
      rgba(255,255,255,0)     0%,
      rgba(255,239,190,.42)  30%,
      rgba(255,251,228,.88)  50%,
      rgba(255,239,190,.42)  70%,
      rgba(255,255,255,0)   100%);
    transform:translateX(-160%);
    animation:ayTabelaIsik 5.8s cubic-bezier(.42,0,.28,1) infinite;
  }
  /* sağdaki kutu bir tık geç yansın — ışık soldan sağa geçiyor gibi */
  .ay-isik i:nth-child(2)::before{animation-delay:.38s}

  /* alt kenarda kreme geçiş — sayfa gövdesiyle birleşsin */
  .anayuz::after{
    content:"";
    position:absolute; z-index:1;
    left:0; right:0; bottom:0;
    height:34%;
    background:linear-gradient(180deg,
      rgba(245,243,236,0)   0%,
      rgba(246,244,238,.55) 52%,
      #F5F3EC             100%);
    pointer-events:none;
  }
  .ay-ic{position:relative; z-index:2; padding:0 26px}

  /* ---------- BEYAZ KART ---------- */
  .ay-kart{
    background:#FFFFFF;
    border-radius:16px;
    padding:8px 18px 18px;
    box-shadow:
      0 18px 42px rgba(20,26,38,.15),
      0 2px 6px rgba(20,26,38,.06);
  }

  .ay-satir{
    position:relative;
    display:flex; align-items:center; gap:14px;
    width:100%;
    margin:0; padding:14px 0;
    background:none; border:0;
    font:inherit; color:inherit; text-align:start;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .ay-satir[hidden]{display:none!important}
  .ay-satir:active{opacity:.72}

  .ay-ikon{
    flex:0 0 34px; width:34px; height:34px;
    color:#C4CDD7;
    display:grid; place-items:center;
  }
  .ay-ikon svg{width:100%; height:100%; display:block}

  .ay-metin{
    display:flex; flex-direction:column; gap:3px;
    flex:1; min-width:0;
  }
  .ay-sehir,
  .ay-tarih{
    font-size:1.02rem;
    font-weight:700;
    letter-spacing:-.005em;
    color:#1B2430;
    line-height:1.2;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .ay-nokta,
  .ay-saat{
    font-size:.97rem;
    color:#5E6A78;
    line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  /* cihazın kendi takvimini açan saydam kutu — satırın tamamı */
  .ay-gizli{
    position:absolute; inset:0;
    width:100%; height:100%;
    margin:0; padding:0; border:0;
    opacity:0;
    background:transparent;
    -webkit-appearance:none; appearance:none;
    cursor:pointer;
    z-index:2;
  }

  /* yer satırı ile tarihler arasında biraz daha nefes */
  .ay-satir.ay-yer{padding-bottom:22px}

  /* ---------- ARAÇ BUL ---------- */
  .ay-bul{
    display:block; width:100%;
    margin-top:12px;
    padding:16px 12px;
    border:0; border-radius:9px;
    background:linear-gradient(180deg,#FFC61E 0%,#F2AC0E 100%);
    color:#1A1405;
    font:inherit; font-size:1.04rem; font-weight:700;
    letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(221,161,17,.34);
    transition:transform .12s ease;
  }
  .ay-bul:active{transform:scale(.985)}

  /* ---------- SLOGAN ----------
     Altın renk yazının içinden geçen bir ışık şeridi soldan
     sağa süzülüyor. Renk, harflerin üstüne "background-clip:text"
     ile bindirildiği için yazı tipi bozulmuyor; sadece boya
     hareket ediyor. Hareketi kapalı isteyen cihazda duruyor. */
  /* ==========================================================
     KARTIN ALTI — rozetler · slogan · ön ödeme
     ----------------------------------------------------------
     Üç parça tek bir öbek gibi duruyor ve kart ile ekranın
     dibi arasındaki boşlukta DİKEYDE ORTALANIYOR: ilk parçanın
     üst payı ve son parçanın alt payı "auto". Ekran boyu ne
     olursa olsun öbek ortada kalır.

     Metinler aşağıdaki altın şeritten alındı; orada iki kez
     görünmesin diye kopyaları gizlendi (bu bölümün sonu).
     Renkler koyu şeritten değil aydınlık fotoğraftan geliyor:
     cam beyazı zemin, ince altın kenar, koyu altın yazı.
     ========================================================== */

  /* ---------- slogan ----------
     Altın harflerin içinden soldan sağa bir ışık şeridi
     süzülüyor. Boya "background-clip:text" ile harflerin
     üstüne bindirildiği için yazı tipi bozulmuyor. */
  /* Sıra: önce ön ödeme rozeti, sonra slogan.
     Öbek kartın hemen altına oturuyor; artan boşluk aşağıda,
     WhatsApp düğmesinin çevresinde kalıyor. */
  .ay-slogan{
    margin:clamp(8px, 1.5svh, 13px) auto auto;
    text-align:center;
    line-height:1.26;
    /* uzun dillerde satır sağdaki WhatsApp düğmesinin altına
       girmesin diye genişlik sınırlı */
    max-width:312px;
  }
  .ay-slogan b{
    display:block;
    font-size:1.16rem;
    font-weight:800;
    letter-spacing:.015em;
    background-image:linear-gradient(100deg,
      #8E6A10   0%,
      #B98F22  28%,
      #F6E4AC  45%,
      #B98F22  62%,
      #8E6A10 100%);
    background-size:280% 100%;
    background-position:180% 0;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    animation:ayIsikSeridi 5.4s linear infinite;
  }
  .ay-slogan i{
    display:block;
    margin-top:5px;
    font-style:normal;
    font-size:.84rem;
    font-weight:700;
    letter-spacing:.04em;
    color:#5A5140;
  }

  /* ---------- ön ödeme ----------
     "ÖN ÖDEME YOK" satır içinde kaybolmasın diye dolu altın
     bir rozete alındı; etrafından yayılıp sönen bir halka
     gözü oraya çekiyor. Halka gölgeyle çiziliyor, yer
     kaplamıyor, altındaki yazıyı itmiyor. */
  /* Sıra: "DOLANDIRICILIĞA KARŞI GÜVENCE" başlığı → altın rozet
     → ödeme yeri. Başlık eklendiği için üstteki ve alttaki
     paylar kısaldı; öbeğin toplam boyu aynı kaldı, yazı
     aşağıdaki düğmelere yaklaşmıyor. */
  .ay-odeme{
    margin:clamp(10px, 1.9svh, 18px) auto 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    text-align:center;
    /* uzun dillerde yazı sağdaki WhatsApp düğmesinin altına
       girmesin diye genişlik sınırlı */
    max-width:250px;
    margin-inline:auto;
  }
  /* başlık — kalkan simgesiyle */
  .ay-odeme-bas{
    display:flex;
    align-items:center;
    gap:5px;
    font-style:normal;
    font-size:.55rem;
    font-weight:800;
    letter-spacing:.11em;
    line-height:1;
    color:#8A6510;
    white-space:nowrap;
  }
  .ay-odeme-bas svg{
    width:12px; height:12px;
    flex:0 0 12px;
  }

  .ay-odeme b{
    padding:7px 14px;
    border-radius:999px;
    background:linear-gradient(180deg,#FFCE33 0%,#F0A80B 100%);
    color:#1A1405;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.06em;
    white-space:nowrap;
    animation:ayNabiz 2.6s ease-out infinite;
  }
  .ay-odeme span{
    font-size:.63rem;
    font-weight:700;
    letter-spacing:.035em;
    line-height:1.4;
    color:#5A5140;
  }

  /* Marka şeridi eski hâlinde: rozetler, slogan ve ödeme notu
     aşağıda da duruyor. (Ana yüzdeki kopyaları gizleyen kural
     kullanıcı isteğiyle kaldırıldı.) */

  /* içerik dikeyde yayılsın: kart üstte, başlık en altta.
     .anayuz sütun bir kutu; .ay-ic kalan boşluğu doldurur,
     başlığın margin-top:auto değeri onu dibe iter — ekran
     boyu ne olursa olsun başlık en altta kalır. */
  .ay-ic{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
  }

  /* ==========================================================
     TESLİM NOKTASI SEÇME SAYFASI — alttan açılır
     ========================================================== */
  .ay-perde{
    display:block;
    position:fixed; inset:0; z-index:96;
    background:rgba(12,18,28,.45);
    opacity:0;
    transition:opacity .2s ease;
  }
  .ay-perde.acik{opacity:1}

  .ay-sayfa{
    display:flex; flex-direction:column;
    position:fixed; left:0; right:0; bottom:0; z-index:97;
    max-height:78vh;
    background:#FFFFFF;
    border-radius:16px 16px 0 0;
    box-shadow:0 -12px 40px rgba(12,18,28,.28);
    transform:translateY(100%);
    transition:transform .22s ease;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .ay-sayfa.acik{transform:translateY(0)}

  .ay-perde[hidden],
  .ay-sayfa[hidden]{display:none!important}

  .ay-sayfa-bas{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
    padding:16px 18px 12px;
    border-bottom:1px solid #EDEFF2;
    flex:0 0 auto;
  }
  .ay-sayfa-bas strong{font-size:1.04rem; font-weight:700; color:#1B2430}
  .ay-sayfa-kapat{
    width:32px; height:32px;
    display:grid; place-items:center;
    background:#F2F4F7; border:0; border-radius:50%;
    color:#5E6A78; cursor:pointer;
  }

  .ay-sayfa-liste{overflow-y:auto; padding:6px 0 12px}

  .ays-sehir{
    padding:14px 18px 6px;
    font-size:.78rem; font-weight:700;
    letter-spacing:.09em;
    color:#9BA6B3;
  }
  .ays-satir{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; width:100%;
    padding:14px 18px;
    background:none; border:0;
    font:inherit; font-size:1rem; color:#1B2430;
    text-align:start; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .ays-satir:active{background:#F6F7F9}
  .ays-tik{
    width:20px; height:20px; flex:0 0 20px;
    color:#B4861A;
    opacity:0;
  }
  .ays-satir.secili{font-weight:700}
  .ays-satir.secili .ays-tik{opacity:1}

  body.ay-kilit{overflow:hidden}

  /* ---------- ANA EKRANDAKİ DÜĞMELER ----------
     İlk ekranda WhatsApp ile telefon duruyor, Instagram
     çekiliyor. İkisi alt alta. Sütun yukarı uzadığı için
     alttaki yazı öbeği de yukarı çekildi (aşağıdaki
     margin değerleri) — üst üste binmiyorlar.
     Aşağı inince üçü de geri geliyor. */
  .fab-grup .fab{transition:opacity .22s ease, visibility .22s ease}
  body.ay-tepe .fab-grup .fab-ig{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    position:absolute;          /* satırda yer kaplamasın */
  }
}

/* ışık şeridi — slogan */
@keyframes ayIsikSeridi{
  0%   {background-position:180% 0}
  100% {background-position:-80% 0}
}

/* ön ödeme rozetinden yayılan halka */
/* tabela kutularının üzerinden geçen parıltı */
@keyframes ayTabelaIsik{
  0%,  58% {transform:translateX(-160%)}
  100%     {transform:translateX(400%)}
}

@keyframes ayNabiz{
  0%   {box-shadow:0 3px 10px rgba(214,153,12,.38), 0 0 0 0    rgba(255,198,30,.62)}
  70%  {box-shadow:0 3px 12px rgba(214,153,12,.44), 0 0 0 11px rgba(255,198,30,0)}
  100% {box-shadow:0 3px 10px rgba(214,153,12,.38), 0 0 0 0    rgba(255,198,30,0)}
}

@media (prefers-reduced-motion:reduce){
  .ay-sayfa,.ay-perde,.ay-bul{transition:none!important}
  .ay-slogan b{animation:none!important; background-position:46% 0!important}
  .ay-odeme b{animation:none!important; box-shadow:0 3px 10px rgba(214,153,12,.38)!important}
  .ay-isik{display:none!important}
}


/* ==========================================================
   ANA YÜZ — KISA EKRANLI TELEFONLAR
   ----------------------------------------------------------
   Kartın kendi boyu (yaklaşık 313 px) ekran yüksekliğinden
   bağımsız; bant ve boşluklar kısalsa bile kart aynı kalıyor.
   Görünen ekran 700 pxin altına inince toplam sığmıyor ve
   slogan kadrajın dışında kalıyordu.

   Aşağıdaki iki kademe satır boşluklarını ve puntoları
   kademeli kısıyor. Dokunma alanları 40 pxin altına
   düşmüyor, yazılar okunur kalıyor.

   Uzun ekranlarda (Redmi, S23 Ultra, iPhone) bu kurallar
   hiç devreye girmez — oradaki görünüm değişmez.
   ========================================================== */

/* --- 1. kademe: görünen ekran 700 pxin altı --- */
@media (max-width:760px) and (max-height:700px){
  .ay-kart{padding:4px 16px 13px}
  .ay-satir{padding:11px 0}
  .ay-satir.ay-yer{padding-bottom:16px}
  .ay-ikon{flex:0 0 31px; width:31px; height:31px}
  .ay-sehir,
  .ay-tarih{font-size:.97rem}
  .ay-nokta,
  .ay-saat{font-size:.92rem}
  .ay-bul{padding:13px 12px; font-size:.99rem; margin-top:9px}

  .ay-odeme b{padding:6px 12px; font-size:.66rem}
  .ay-odeme span{font-size:.6rem}
  .ay-slogan b{font-size:1.04rem}
  .ay-slogan i{font-size:.78rem}
}

/* --- 2. kademe: görünen ekran 620 pxin altı --- */
@media (max-width:760px) and (max-height:620px){
  .ay-kart{padding:0 14px 10px; border-radius:13px}
  .ay-satir{padding:8px 0}
  .ay-satir.ay-yer{padding-bottom:11px}
  .ay-ikon{flex:0 0 26px; width:26px; height:26px}
  .ay-metin{gap:1px}
  .ay-sehir,
  .ay-tarih{font-size:.9rem}
  .ay-nokta,
  .ay-saat{font-size:.85rem}
  .ay-bul{padding:11px 12px; font-size:.93rem; margin-top:6px; border-radius:8px}

  .ay-odeme{gap:5px}
  .ay-odeme b{padding:5px 10px; font-size:.61rem}
  .ay-odeme span{font-size:.55rem}
  .ay-slogan b{font-size:.9rem}
  .ay-slogan i{font-size:.7rem; margin-top:3px}
}

/* ==========================================================
   MOBİL MENÜ — üç çizgiye basınca soldan açılır
   ----------------------------------------------------------
   Üstte sarı bant, üzerinde DAMLA RENT A CAR. Altında ince
   çizgilerle ayrılmış bağlantılar, sonra siyah arama düğmesi
   ve sosyal ikonlar. Arka plan koyulaşıyor.

   Üç çizgi eskiden filtre panelini açıyordu; filtre menünün
   içinde "Filtrele" satırı olarak duruyor, kaybolmadı.
   ========================================================== */

.aym,
.aym-perde{display:none}

@media (max-width:760px){
  .aym-perde{
    display:block;
    position:fixed; inset:0; z-index:98;
    background:rgba(12,16,24,.52);
    opacity:0;
    transition:opacity .22s ease;
  }
  .aym-perde.acik{opacity:1}

  .aym{
    display:flex;
    flex-direction:column;
    position:fixed; top:0; bottom:0; left:0; z-index:99;
    width:min(304px, 82vw);
    background:#FFFFFF;
    box-shadow:6px 0 32px rgba(10,16,26,.30);
    transform:translateX(-102%);
    transition:transform .26s cubic-bezier(.32,.72,.35,1);
    overflow-y:auto;
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .aym.acik{transform:translateX(0)}

  .aym-perde[hidden],
  .aym[hidden]{display:none!important}

  /* ---------- sarı bant ---------- */
  /* ---------- sarı bant: kurumsal marka kilidi ----------
     Damla logosunun düzeni: damla simgesi, yanında DAMLA,
     altında harf aralıklı RENT A CAR, ince bir çizgiden sonra
     "GÜVEN · KONFOR · KALİTE". Sarı zeminde altın okunmadığı
     için simge siyah, içindeki ışık zeminin sarısı. */
  .aym-bas{
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:12px;
    flex:0 0 auto;
    padding:calc(19px + env(safe-area-inset-top, 0px)) 16px 18px;
    background:#FFC61E;
  }
  .aym-marka{
    display:flex; align-items:center; gap:11px;
    min-width:0;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .aym-damla{width:30px; height:51px; flex:0 0 30px; display:block}
  .aym-yazi{display:flex; flex-direction:column; min-width:0}
  .aym-yazi b{
    font-size:1.46rem;
    font-weight:800;
    letter-spacing:.035em;
    line-height:1;
    color:#111111;
  }
  .aym-yazi i{
    margin-top:5px;
    font-style:normal;
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.30em;
    line-height:1;
    color:#1A1405;
  }
  .aym-yazi em{
    margin-top:8px;
    padding-top:7px;
    border-top:1px solid rgba(26,20,5,.30);
    font-style:normal;
    font-size:.53rem;
    font-weight:700;
    letter-spacing:.13em;
    line-height:1;
    color:rgba(26,20,5,.70);
    white-space:nowrap;
  }
  .aym-kapat{
    flex:0 0 auto;
    margin-top:2px;
    width:32px; height:32px;
    display:grid; place-items:center;
    background:none; border:0;
    color:#1A1405;
    opacity:.72;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .aym-kapat:active{opacity:1}

  /* ---------- bağlantılar ---------- */
  .aym-liste{
    list-style:none;
    margin:0; padding:0 18px;
    flex:0 0 auto;
  }
  .aym-liste li + li{border-top:1px solid #ECEDEF}
  .aym-liste a{
    display:block;
    padding:17px 0;
    font-size:1.04rem;
    color:#1B2430;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .aym-liste a:active{color:#B4861A}

  /* ---------- arama düğmesi ---------- */
  .aym-ara{
    display:block;
    margin:22px 18px 0;
    padding:16px 12px;
    border-radius:4px;
    background:#111111;
    color:#FFFFFF;
    font-size:1.02rem;
    font-weight:600;
    text-align:center;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .aym-ara:active{background:#2A2A2A}

  /* ---------- sosyal ikonlar ---------- */
  .aym-sosyal{
    display:flex; justify-content:center; gap:22px;
    margin:26px 18px 0;
  }
  .aym-sosyal a{
    width:26px; height:26px;
    display:grid; place-items:center;
    color:#1B2430;
  }
  .aym-sosyal svg{width:100%; height:100%; fill:currentColor; display:block}

  body.aym-kilit{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .aym,.aym-perde{transition:none!important}
}


/* ==========================================================
   ANA SAYFA — TELEFONDA YALNIZ ANA YÜZ
   ----------------------------------------------------------
   Telefonda ana sayfa tek ekrandan ibaret: arama kartı, marka
   şeridi ve alt bilgi. Araç listesi burada değil, kendi
   sayfasında (araclar.html). "Araç Bul" ve menüdeki
   "Araçlarımız" oraya götürüyor.

   Liste bölümü sayfada duruyor ama telefonda gizli; masaüstü
   düzeni olduğu gibi çalışsın diye kaldırılmadı.
   ========================================================== */
@media (max-width:760px){
  body.ay-var .govde,
  body.ay-var .marka-bolum,
  body.ay-var .kirilma,
  body.ay-var .m-cubuk,
  body.ay-var .yan-perde{display:none!important}
}


/* ==========================================================
   GEZİLECEK YERLER ŞERİDİ
   ----------------------------------------------------------
   Ana yüzün altında yatay kayan fotoğraf kartları. Kaydırma
   tarayıcının kendi dokunma kaydırması; scroll-snap ile kartlar
   kenara oturuyor. Oklar bir kart ileri/geri kaydırıyor.
   "Tüm Öneriler" şeridi ızgaraya çevirip hepsini gösteriyor.

   Yalnız telefonda görünür; masaüstünde gezilecek yerler zaten
   araç listesinin üstündeki kendi kutusunda duruyor.
   ========================================================== */
.gezser{display:none}

@media (max-width:760px){
  .gezser{
    display:block;
    background:#FFFFFF;
    padding:26px 0 30px;
  }

  .gezser-ust{padding:0 20px}
  .gezser-baslik{
    margin:0;
    font-size:1.34rem;
    font-weight:300;
    line-height:1.24;
    letter-spacing:-.015em;
    color:#20262E;
  }
  .gezser-baslik b{font-weight:800}
  .gezser-alt{
    margin:7px 0 0;
    font-size:.92rem;
    color:#8B94A0;
  }

  /* ---------- düğmeler ---------- */
  .gezser-arac{
    display:flex; align-items:center; justify-content:flex-end;
    gap:9px;
    padding:16px 20px 13px;
    border-bottom:2px solid #E9C55A;
  }
  .gezser-tum{
    padding:11px 18px;
    border:1px solid #E9C55A;
    border-radius:5px;
    background:#FFFFFF;
    font:inherit; font-size:.94rem;
    color:#2C333C;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .gezser-tum.acik{
    background:#FFF6DC;
    border-color:#D9A93A;
    font-weight:600;
  }
  .gezser-oklar{display:flex; gap:9px}
  .gezser-ok{
    width:44px; height:44px;
    display:grid; place-items:center;
    border:1px solid #DDE1E6;
    border-radius:5px;
    background:#FFFFFF;
    color:#8B94A0;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .gezser-ok svg{width:20px; height:20px}
  .gezser-ok:active{background:#F5F6F8}
  .gezser-ok[disabled]{opacity:.38; cursor:default}

  /* ---------- kart şeridi ---------- */
  .gezser-yol{
    display:flex;
    gap:12px;
    padding:16px 20px 4px;
    overflow-x:auto;
    /* proximity: "mandatory" yapışması kendi kaydırmamızla
       çakışıyor, geçiş yarı yolda takılı kalıyordu. */
    scroll-snap-type:x proximity;
    scroll-padding-inline:20px;   /* kart kenara yapışmasın: dolgu kadar içeride dursun */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .gezser-yol::-webkit-scrollbar{display:none}

  .gezser-kart{
    position:relative;
    padding:0; border:0;
    cursor:pointer;
    flex:0 0 auto;
    width:min(282px, 78vw);
    aspect-ratio:4 / 3;
    border-radius:9px;
    overflow:hidden;
    scroll-snap-align:start;
    text-decoration:none;
    background:#EDEBE6;
    box-shadow:0 4px 14px rgba(20,26,38,.13);
    -webkit-tap-highlight-color:transparent;
  }
  .gezser-kart img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  /* alt köşedeki yazının okunması için koyu geçiş */
  .gezser-kart::after{
    content:"";
    position:absolute; left:0; right:0; bottom:0;
    height:58%;
    background:linear-gradient(180deg,
      rgba(10,14,22,0) 0%,
      rgba(10,14,22,.42) 52%,
      rgba(8,12,18,.78) 100%);
  }
  .gezser-kart span{
    position:absolute; left:16px; right:16px; bottom:14px;
    z-index:1;
    text-transform:uppercase;   /* şeritte büyük harf, detayda kendi yazımı */
    font-size:1rem;
    font-weight:800;
    letter-spacing:.02em;
    line-height:1.2;
    color:#FFFFFF;
    text-shadow:0 1px 6px rgba(0,0,0,.5);
  }

  /* ---------- "Tüm Öneriler" açıkken ızgara ---------- */
  .gezser-yol.tumu{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    overflow-x:visible;
    scroll-snap-type:none;
  }
  .gezser-yol.tumu .gezser-kart{
    width:auto;
    aspect-ratio:1 / 1;
  }
  .gezser-yol.tumu .gezser-kart span{
    left:11px; right:11px; bottom:10px;
    font-size:.84rem;
  }
}


/* ==========================================================
   GEZİLECEK YER DETAYI — alttan açılan sayfa
   ----------------------------------------------------------
   Şerittteki karta basınca o yerin bilgileri çıkıyor: fotoğraf,
   ad, kısa tanım, açıklama, konum ve haritada aç.

   Bilgiler sayfada zaten duran "Gezilecek Yerler" kutusundan
   okunuyor (telefonda gizli). Böylece metinler tek yerde
   duruyor ve altı dildeki çevirileri de hazır geliyor.
   ========================================================== */
.gezd,
.gezd-perde{display:none}

@media (max-width:760px){
  .gezd-perde{
    display:block;
    position:fixed; inset:0; z-index:96;
    background:rgba(12,18,28,.52);
    opacity:0;
    transition:opacity .2s ease;
  }
  .gezd-perde.acik{opacity:1}

  /* Alttan açılan sayfa değil, ekranın ortasında duran bir KART:
     dört köşesi yuvarlak, kenarlardan içeride, hafif büyüyerek
     beliriyor. */
  .gezd{
    display:flex; flex-direction:column;
    position:fixed; z-index:97;
    left:16px; right:16px;
    top:50%;
    max-height:82vh;
    background:#FFFFFF;
    border-radius:16px;
    box-shadow:0 22px 60px rgba(12,18,28,.38);
    overflow:hidden;
    opacity:0;
    transform:translateY(-50%) scale(.94);
    transition:transform .22s cubic-bezier(.2,.8,.3,1), opacity .18s ease;
  }
  .gezd.acik{
    opacity:1;
    transform:translateY(-50%) scale(1);
  }

  .gezd-perde[hidden],
  .gezd[hidden]{display:none!important}

  /* ---------- fotoğraf başlığı ---------- */
  .gezd-foto{
    position:relative;
    flex:0 0 auto;
    height:172px;
    background:#EDEBE6 center/cover no-repeat;
  }
  .gezd-foto::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg,
      rgba(8,12,20,.10)  0%,
      rgba(8,12,20,.30) 52%,
      rgba(6,10,16,.80) 100%);
  }
  .gezd-kapat{
    position:absolute; top:12px; right:12px; z-index:2;
    width:34px; height:34px;
    display:grid; place-items:center;
    border:0; border-radius:50%;
    background:rgba(12,18,28,.55);
    color:#FFFFFF;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .gezd-ust{
    position:absolute; left:18px; right:18px; bottom:14px; z-index:1;
    display:flex; flex-direction:column; gap:4px;
  }
  .gezd-ust strong{
    font-size:1.32rem;
    font-weight:800;
    letter-spacing:-.01em;
    color:#FFFFFF;
    text-shadow:0 1px 8px rgba(0,0,0,.5);
  }
  .gezd-ust span{
    font-size:.86rem;
    font-weight:600;
    color:rgba(255,255,255,.86);
    text-shadow:0 1px 6px rgba(0,0,0,.45);
  }

  /* ---------- gövde ---------- */
  .gezd-govde{
    overflow-y:auto;
    padding:18px;
  }
  .gezd-yazi{
    margin:0;
    font-size:.95rem;
    line-height:1.62;
    color:#3C4552;
  }
  .gezd-konum{
    display:flex; align-items:flex-start; gap:8px;
    margin-top:15px;
    font-size:.86rem;
    line-height:1.45;
    color:#6B7482;
  }
  .gezd-konum svg{
    width:17px; height:17px; flex:0 0 17px;
    margin-top:1px;
    fill:#B4861A;
  }
  .gezd-harita{
    display:block;
    margin-top:17px;
    padding:14px 12px;
    border-radius:7px;
    background:linear-gradient(180deg,#FFC61E 0%,#F2AC0E 100%);
    color:#1A1405;
    font-size:.9rem;
    font-weight:800;
    letter-spacing:.05em;
    text-align:center;
    text-decoration:none;
    box-shadow:0 5px 14px rgba(221,161,17,.30);
  }
  .gezd-harita em{font-style:normal; margin-left:6px}
}

@media (prefers-reduced-motion:reduce){
  .gezd,.gezd-perde{transition:none!important}
}


/* ==========================================================
   REKLAM ALANI
   ----------------------------------------------------------
   Sol üstte "Reklam" etiketi — ziyaretçi bunun reklam
   olduğunu görsün. Sağ üstte kapatma tuşu; kapatan kişi
   oturum boyunca bir daha görmüyor.

   Görseller yandan kayarak geçiyor: parmakla da kaydırılıyor,
   kendi kendine de 6 saniyede bir ilerliyor. Altında nokta
   göstergesi var.

   Boy oranı 4:5. Afişlerin biri kare biri 4:5 olduğu için
   görseller "contain" ile oturuyor — yazıları kesilmiyor,
   boş kalan yer krem zeminle doluyor.
   ========================================================== */
.rek{display:none}

@media (max-width:760px){
  .rek{
    display:block;
    margin:0;
    padding:0 0 18px;
    background:#FFFFFF;
  }
  .rek[hidden]{display:none!important}

  .rek-bas{
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 20px 8px;
  }
  .rek-etiket{
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:#A7AEB8;
  }
  .rek-kapat{
    width:30px; height:30px;
    display:grid; place-items:center;
    border:1px solid #E2E5E9;
    border-radius:50%;
    background:#FFFFFF;
    color:#7C848F;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .rek-kapat:active{background:#F3F4F6}

  /* ---------- kayan şerit ---------- */
  .rek-yol{
    display:flex;
    overflow-x:auto;
    /* Geçiş CSS ile yumuşatılıyor. scrollTo(behavior:"smooth")
       kullanınca "mandatory" yapışma motoru animasyonu iptal
       edip başa döndürüyordu; scrollLeft ataması + bu satır
       aynı işi yapıyor ve iptal edilmiyor. */
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;   /* mandatory, kendiliğinden geçişi geri çekiyordu */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .rek-yol::-webkit-scrollbar{display:none}

  .rek-kare{
    flex:0 0 100%;
    scroll-snap-align:start;
    display:block;
    padding:0 20px;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
  }
  /* Şeritler geniş (3:1). Önceki dikey afişler ekranın yarısını
     kaplıyordu; bu boyda reklam sayfayı boğmuyor. */
  .rek-kare img{
    width:100%;
    aspect-ratio:3 / 1;
    object-fit:cover;
    display:block;
    border-radius:10px;
    background:#EFEDE6;
    box-shadow:0 4px 14px rgba(20,26,38,.14);
  }

  /* ---------- nokta göstergesi ---------- */
  .rek-nokta{
    display:flex; justify-content:center; gap:7px;
    margin-top:12px;
  }
  .rek-nokta i{
    width:7px; height:7px;
    border-radius:50%;
    background:#D6DAE0;
    transition:background .2s ease, width .2s ease;
  }
  .rek-nokta i.acik{
    width:19px;
    border-radius:4px;
    background:#C79A28;
  }
}


/* ==========================================================
   ARAÇ LİSTESİNDEKİ REKLAM ŞERİDİ
   ----------------------------------------------------------
   4., 12. ve 25. aracın altına giriyor (main.js/reklamSerp).
   Sol üstte "Reklam" etiketi var; ziyaretçi bunun araç ilanı
   olmadığını görsün diye. Tabloda satır, liste ve galeride
   tam satır kaplayan kutu olarak çıkıyor.
   ========================================================== */
.lrek{grid-column:1 / -1}

/* Telefonda satırlar tabloya değil ızgaraya çevriliyor
   (.ilan-tablo tbody tr{display:grid}); orada colspan işe
   yaramıyor, reklam ilk sütuna sıkışıyordu. Reklam satırı
   ızgaradan çıkarılıp tam genişliğe alındı. */
.ilan-tablo tbody tr.lrek{
  display:block!important;
  width:100%!important;
  grid-template-columns:none!important;
  background:none!important;
  box-shadow:none!important;
  border:0!important;
  padding:0!important;
  margin:0!important;
}
.lrek > td{
  display:block!important;
  width:100%!important;
  grid-column:1 / -1!important;
}
.lrek td{
  padding:0!important;
  border:0!important;
  background:none!important;
}
.lrek-ic{
  position:relative;
  display:block;
  margin:12px 8px;
  border-radius:11px;
  overflow:hidden;
  background:#EFEDE6;
  box-shadow:0 4px 16px rgba(20,26,38,.16);
  -webkit-tap-highlight-color:transparent;
}
.lrek-ic a{display:block; -webkit-tap-highlight-color:transparent}
.lrek-ic img{
  width:100%;
  aspect-ratio:3 / 1;
  object-fit:cover;
  display:block;
}

/* kapatma tuşu — etiketin karşı köşesinde */
.lrek-kapat{
  position:absolute;
  top:8px; right:8px;
  z-index:2;
  width:26px; height:26px;
  display:grid; place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(10,14,22,.60);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:#FFFFFF;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.lrek-kapat:active{background:rgba(10,14,22,.85)}
.lrek-etiket{
  position:absolute;
  top:9px; left:9px;
  z-index:1;
  padding:4px 9px;
  border-radius:4px;
  background:rgba(10,14,22,.60);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  color:#FFFFFF;
  font-size:.55rem;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}


/* ==========================================================
   KURUMSAL TANITIM METNİ
   ----------------------------------------------------------
   Gezilecek yerlerin altında. Hem arama motorları için hem de
   siteye ilk kez giren biri "burası ne yapıyor" sorusunun
   cevabını görsün diye. Paragraflar bütün cümle hâlinde
   duruyor; sözlükte tek anahtar, altı dilde tam çeviri.
   ========================================================== */
/* Yalnız telefonda. Masaüstünde bu bölüm sayfanın en üstüne,
   araç listesinin önüne düşüyordu; oradaki düzen zaten yayında
   olduğu için metin masaüstünde kapatıldı. */
.tan{display:none}

@media (max-width:760px){
.tan{
  display:block;
  background:#FFFFFF;
  padding:30px 0 34px;
}
.tan-ic{
  max-width:760px;
  margin:0 auto;
  padding:0 20px;
}
.tan h2{
  margin:0 0 14px;
  font-size:1.24rem;
  font-weight:800;
  line-height:1.3;
  letter-spacing:-.01em;
  color:#1B2430;
}
.tan p{
  margin:0 0 13px;
  font-size:.95rem;
  line-height:1.72;
  color:#4A5462;
}
.tan p:last-child{margin-bottom:0}
.tan .tan-kapanis{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #ECEEF1;
  font-weight:700;
  color:#1B2430;
}
}


/* ==========================================================
   ÖNE ÇIKAN ARAÇLAR ŞERİDİ
   ----------------------------------------------------------
   Ana yüzün altındaki boşlukta, reklamın üstünde. Kartlar
   yandan kayarak geçiyor: 4,5 saniyede bir kendi kendine
   ilerliyor, parmakla da kaydırılıyor. Elle kaydırınca
   otomatik geçiş duruyor.

   Yalnız telefonda; masaüstünde araç listesi zaten sayfada.
   ========================================================== */
.ars{display:none}

@media (max-width:760px){
  .ars{
    display:block;
    background:#FFFFFF;
    padding:24px 0 20px;
  }

  .ars-ust{padding:0 20px 14px}
  .ars-baslik{
    margin:0;
    font-size:1.12rem;
    font-weight:800;
    letter-spacing:-.01em;
    color:#1B2430;
  }
  .ars-tum{
    flex:0 0 auto;
    font-size:.85rem;
    font-weight:700;
    color:#B4861A;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .ars-tum em{font-style:normal; margin-left:4px}

  /* ---------- kayan şerit ---------- */
  .ars-yol{
    display:flex;
    gap:12px;
    padding:0 20px 4px;
    overflow-x:auto;
    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    scroll-padding-inline:20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ars-yol::-webkit-scrollbar{display:none}

  .ars-kart{
    flex:0 0 auto;
    width:min(232px, 66vw);
    scroll-snap-align:start;
    display:flex;
    flex-direction:column;
    border-radius:11px;
    overflow:hidden;
    background:#FFFFFF;
    border:1px solid #ECEDEF;
    box-shadow:0 3px 12px rgba(20,26,38,.10);
  }
  .ars-bag{
    display:block;
    flex:1 1 auto;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .ars-bag:active{opacity:.82}

  /* şeridin altındaki kurumsal bağlantı — kart başına düğme
     yerine tek ve net bir yönlendirme */
  .ars-hepsi{
    display:block;
    margin:18px 20px 0;
    padding:15px 12px;
    border:0;
    border-radius:8px;
    background:linear-gradient(180deg,#FFC61E 0%,#F2AC0E 100%);
    box-shadow:0 5px 14px rgba(221,161,17,.30);
    color:#1A1405;
    font-size:.92rem;
    font-weight:800;
    letter-spacing:.03em;
    text-align:center;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
  }
  .ars-hepsi:active{filter:brightness(.95)}

  .ars-foto{
    position:relative;
    background:linear-gradient(160deg,#F4F2EC 0%,#EAE7DE 100%);
  }
  .ars-foto img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    display:block;
  }
  /* segment rozeti */
  /* segment rozeti */
  .ars-sinif{
    position:absolute;
    top:8px; left:8px;
    padding:3px 8px;
    border-radius:4px;
    background:rgba(12,18,28,.62);
    color:#FFFFFF;
    font-size:.56rem;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
  }

  .ars-alt{display:block; padding:10px 12px 11px}
  .ars-ad{
    /* 29.08.2026: araç adının yanına dile göre değişen kelime eklendi
       ("... kiralama" / "... mieten"). Tek satıra zorlanınca Almancada
       "mieten", Arapçada "تأجير" kesiliyordu. İki satıra izin veriyoruz;
       yükseklik sabit kalsın diye min-height ile yer ayrılıyor. */
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    font-size:.92rem;
    font-weight:700;
    line-height:1.25;
    min-height:2.5em;          /* iki satırlık yer: kartlar eşit boyda kalsın */
    color:#1B2430;
    white-space:normal;
    overflow:hidden;
  }
  /* fiyat kutusu — ilan listesindeki rozetin küçük hâli */
  /* fiyat kutusu — ilan listesindeki rozetin küçük hâli */
  .ars-fiyat{
    display:block;
    margin-top:8px;
    padding:7px 9px;
    border:1px solid #EFE2BD;
    border-radius:7px;
    background:#FFFCF2;
    text-align:center;
  }
  .ars-fiyat b{
    display:block;
    font-size:1.02rem;
    font-weight:800;
    line-height:1.1;
    color:#8A6510;
  }
  .ars-fiyat i{
    font-style:normal;
    font-size:.68rem;
    font-weight:700;
    margin-left:2px;
  }
  .ars-fiyat em{
    display:block;
    margin-top:3px;
    font-style:normal;
    font-size:.6rem;
    font-weight:700;
    letter-spacing:.02em;
    color:#9A8A63;
  }

  /* ---------- nokta göstergesi ---------- */
  .ars-nokta{
    display:flex; justify-content:center; gap:6px;
    margin-top:14px;
  }
  .ars-nokta i{
    width:6px; height:6px;
    border-radius:50%;
    background:#DCE0E5;
    transition:background .2s ease, width .2s ease;
  }
  .ars-nokta i.acik{
    width:17px;
    border-radius:3px;
    background:#C79A28;
  }
}


/* ==========================================================
   KART İÇİNDEKİ "BENZER İLANLAR"
   ----------------------------------------------------------
   Araç kartının en altında, aynı sınıftan dört araç. Kartlarda
   data-kart olduğu için basınca yeni sayfa açılmıyor; aynı
   panelin içeriği seçilen araçla yenileniyor.
   ========================================================== */
.kbenzer{border-top:1px solid #ECEEF1}
.kbenzer-bas{
  margin:0 0 11px;
  font-size:.98rem;
  font-weight:800;
  letter-spacing:-.01em;
  color:#1B2430;
}
.kbenzer .benzer-grid{
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.kbenzer .benzer-kart{
  border-radius:9px;
  overflow:hidden;
}

/* ==========================================================
   SIKÇA SORULAN SORULAR (.sss)
   Google'ın "Diğer sorular" kutusunu hedefleyen görünür içerik.
   FAQPage şeması <head><meta charset="utf-8">'de; buradaki metinle birebir aynı
   olmak zorunda, yoksa Google şemayı yok sayıyor.
   ========================================================== */
.sss{
  background:#F7F8FA;
  border-top:1px solid #E9EBEF;
  padding:44px 0 50px;
}
.sss-ic{
  max-width:820px;
  margin:0 auto;
  padding:0 20px;
}
.sss h2{
  margin:0 0 22px;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.28;
  letter-spacing:-.015em;
  color:#1B2430;
}
.sss-madde{
  background:#FFFFFF;
  border:1px solid #E5E8EC;
  border-radius:12px;
  margin-bottom:10px;
  overflow:hidden;
}
.sss-madde summary{
  list-style:none;
  cursor:pointer;
  padding:16px 46px 16px 18px;
  position:relative;
  font-size:1rem;
  font-weight:700;
  line-height:1.45;
  color:#1B2430;
}
.sss-madde summary::-webkit-details-marker{display:none}
/* sağdaki ok — açılınca dönüyor */
.sss-madde summary::after{
  content:"";
  position:absolute;
  right:18px; top:50%;
  width:9px; height:9px;
  margin-top:-6px;
  border-right:2.2px solid #9AA3AF;
  border-bottom:2.2px solid #9AA3AF;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.sss-madde[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.sss-madde[open] summary{color:#C9971A}
.sss-madde p{
  margin:0;
  padding:0 18px 18px;
  font-size:.95rem;
  line-height:1.72;
  color:#4A5462;
}
.sss-madde p a{color:#2C4C7C; font-weight:600}
.sss-madde p a:hover{text-decoration:underline}
.sss-alt{
  margin:22px 0 0;
  padding-top:16px;
  border-top:1px solid #E5E8EC;
  font-size:.85rem;
  line-height:1.7;
  color:#7A8494;
}
@media (max-width:760px){
  .sss{padding:32px 0 36px}
  .sss h2{font-size:1.24rem; margin-bottom:16px}
  .sss-madde summary{font-size:.95rem; padding:14px 42px 14px 15px}
  .sss-madde p{font-size:.92rem; padding:0 15px 15px}
}

/* Marka şeridindeki yazı artık sayfanın H1'i. display:contents
   ile başlığın kendi kutusu yok sayılıyor — görünüm birebir aynı
   kalıyor, yalnızca belge yapısı düzeliyor. */
.marka-serit h1{display:contents}

/* Alt bilgideki açık adres — yerel aramada Google'ın sitedeki
   adresle İşletme Profilindekini eşleştirebilmesi için görünür
   olmak zorunda. Marka blokunun içinde, slogandan hemen önce. */
.alt-adres{
  margin:12px 0 0;
  font-size:.82rem;
  line-height:1.65;
  color:#3B3115;
  opacity:.9;
}
.alt-adres strong{
  display:block;
  font-weight:800;
  letter-spacing:.01em;
}
.alt-adres a{color:inherit; font-weight:700; text-decoration:underline}

/* Öne çıkan kartlarda fotoğraf değişirken sınıf rozeti üstte kalsın.
   Geçiş katmanları z-index 2 ve 3 ile geliyor; rozet altında kalıyordu. */
.ars-sinif{z-index:4}


/* ==========================================================
   BENZER İLANLAR ALTINDAKİ YÖNLENDİRME
   ----------------------------------------------------------
   Öne çıkan araçlar şeridindeki düğmenin aynısı. Orada
   .ars-hepsi yalnız telefonda var; bu kutu masaüstünde de
   göründüğü için stil medya sorgusunun dışında duruyor.
   ========================================================== */
.benzer-hepsi{
  display:block;
  margin:14px 0 2px;
  padding:14px 12px;
  border:0;
  border-radius:8px;
  background:linear-gradient(180deg,#FFC61E 0%,#F2AC0E 100%);
  box-shadow:0 5px 14px rgba(221,161,17,.30);
  color:#1A1405;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.03em;
  text-align:center;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.benzer-hepsi:hover{filter:brightness(1.04)}
.benzer-hepsi:active{filter:brightness(.95)}
/* kart penceresinde kutu kenarlarına yaslanmasın */
.kbenzer .benzer-hepsi{margin-left:0; margin-right:0}


/* ==========================================================
   ANA YÜZ — DİL DÜĞMESİNE "TR" YAZISI
   ----------------------------------------------------------
   Ana yüzde önce yalnız bayrak duruyordu (maket öyleydi);
   kullanıcı diğer sayfalardaki gibi yazının da görünmesini
   istedi. Başlık bandı açık krem olduğu için yazı koyu —
   diğer sayfalarda bant lacivert olduğundan orada beyaz.
   Bayrak biraz küçüldü ki bayrak + yazı banda sığsın.
   ========================================================== */
@media (max-width:760px){
  /* Yazı akışın dışında duruyor: düğmenin yüksekliği yalnız
     bayrak kadar kalıyor, böylece bayrak menü çizgileriyle
     aynı hizaya oturuyor. Akışta kalsaydı düğme uzayıp
     bayrağı yukarı itiyordu. */
  body.ay-var .m-ikon .dil-btn{
    position:relative;
    flex-direction:column!important;
    gap:0!important;
    align-items:center;
  }
  body.ay-var .m-ikon .dil-kisa{
    display:block!important;
    position:absolute;
    top:100%; left:0; right:0;
    margin-top:3px;
    text-align:center;
    color:#1F2430;
    font-size:.62rem;
    font-weight:800;
    letter-spacing:.09em;
    line-height:1;
    pointer-events:none;
  }
  body.ay-var .m-ikon .dil-bayrak{
    width:9.1vw!important;
    height:9.1vw!important;
    flex-basis:9.1vw!important;
    max-width:39px; max-height:39px;
  }
}

/* SSS cevabının altındaki bağlantı satırı — metinden ayrı bir
   düğüm olduğu için çeviri motoru onu da çevirebiliyor. */
.sss-madde .sss-bag{padding:0 18px 16px; margin:-4px 0 0}
.sss-madde .sss-bag a{
  font-size:.9rem; font-weight:700; color:#2C4C7C; text-decoration:none;
  border-bottom:1px solid rgba(44,76,124,.35);
}
.sss-madde .sss-bag a:hover{border-bottom-color:#2C4C7C}

/* ==========================================================
   HIZ — EKRAN DIŞINDAKİNİ ÇİZDİRME
   ----------------------------------------------------------
   29.08.2026 ölçümü: sayfanın tam yerleşimi bu masaüstünde
   13,5 ms sürüyor. Orta seviye telefonda bunun 5-10 katı ve
   her kaydırmada bir kısmı yeniden ödeniyor — "kasma" böyle
   çıkıyor. Sayı olarak: araç listesi telefonda 45 satır ve
   7300 piksel, ama ekranda aynı anda 6 satır var. Gezi şeridi
   44 kart; yatay kaydığı için tarayıcı hepsini "ekranda"
   sayıyordu.

   content-visibility:auto ekran dışındaki kutunun yerleşimini,
   boyamasını ve içindeki görselin çözülmesini atlatıyor.
   contain-intrinsic-size ölçüyü baştan bildirir, böylece
   kaydırma çubuğu zıplamaz; baştaki "auto" da ilk çizimden
   sonra gerçek ölçüyü hatırlar.

   Not: fotoğraf döndürme motoru (main.js/dalga) zaten
   ekranda() denetimi yapıyor ve content-visibility'li kutunun
   ölçüsü okunabildiği için o denetim çalışmaya devam ediyor.
   Desteklemeyen tarayıcıda kural görmezden gelinir.
   ========================================================== */
@supports (content-visibility: auto) {

  /* Gezi şeridine (.gezser-kart) UYGULANMADI. Denendi ve geri alındı:
     kart görselleri yükleniyor ama boyanmıyordu, kart gri kalıyordu.
     content-visibility paint sınırlaması getiriyor ve kartın görsel
     yerleşimi bununla çakışıyor. Zaten lazy yükleme orada çalışıyor
     (44 karttan 10u iniyor), kazanç da sınırlıydı. */

  /* araç listesi telefonda: 45 satır, satır yüksekliği 131px */
  /* [data-kart] = araç satırı. Listedeki reklam satırları (3 adet, 223px)
     bu kuralın dışında kalsın; ölçüleri farklı, yer tutucu şaşırıyordu. */
  @media (max-width:760px){
    .ilan-tablo tbody tr[data-kart]{
      content-visibility:auto;
      /* DİKKAT: contain-intrinsic-size İÇ kutuyu tarif eder, dış ölçüyü
         değil. Satırın dolgusu (~34px) ve kenarlığı üstüne eklenir.
         İlk denemede satırın dış ölçüsünü (131px) yazmıştım, satır
         167px sanıldı ve sayfa 1524px uzadı. Ölçülen iç kutu:
         700px genişlikte 105px, 375pxte 95px. */
      contain-intrinsic-size:auto 105px;
    }
  }

  @media (max-width:520px){
    .ilan-tablo tbody tr[data-kart]{
      contain-intrinsic-size:auto 95px;
    }
  }
}

/* Öne çıkan kartta araç adının yanındaki çevrilebilir kelime.
   29.08.2026: marka/model adı hiçbir dilde değişmediği için kart
   yabancı ziyaretçiye "çevrilmemiş" görünüyordu. Adın kendisi
   duruyor, yanına dile göre değişen kelime geliyor. */
.ars-kirala{
  font-style:normal;
  font-weight:600;
  opacity:.72;
  /* TÜRKÇEDE GİZLİ. Türk ziyaretçi zaten ne olduğunu biliyor;
     "Mercedes-Benz CLA kiralama" fazladan duruyordu. Yabancı
     dillerde kalıyor ki satır ziyaretçinin dilinde okunsun.
     Varsayılan gizli, çünkü sayfa Türkçe açıldığında data-dil
     işareti hiç konmuyor olabiliyor. */
  display:none;
}
html[data-dil="en"] .ars-kirala,
html[data-dil="de"] .ars-kirala,
html[data-dil="ru"] .ars-kirala,
html[data-dil="ar"] .ars-kirala,
html[data-dil="fr"] .ars-kirala{display:inline}

/* ==========================================================
   İÇ SAYFA BAŞLIĞINDA DA LOGO
   ----------------------------------------------------------
   29.08.2026: ana sayfanın başlığında ŞANLIURFA / ARAÇ KİRALAMA
   yazıyor ama araçlar ve ilan sayfalarında yalnız sayfa adı
   ("Araçlarımız") vardı. Aynı logo buraya da geliyor.

   body:not(.ay-var) ile sınırlı — ana sayfanın kendi kuralları
   (açık zeminli büyük bant) bozulmasın. İç başlık koyu lacivert
   olduğu için yazı altın sarısı.
   ========================================================== */
@media (max-width:760px){
  body:not(.ay-var) .m-bas .m-logo{
    display:flex; align-items:center; gap:8px;
    flex:1 1 auto; min-width:0; text-decoration:none;
  }
  body:not(.ay-var) .m-bas .m-damla{
    display:block; width:21px; height:36px; flex:0 0 auto;
  }
  body:not(.ay-var) .m-bas .m-logo-yazi{
    display:flex; flex-direction:column; line-height:1; min-width:0;
  }
  body:not(.ay-var) .m-bas .m-logo-ust{
    font-size:1.18rem; font-weight:800; letter-spacing:-.01em;
    color:#E7BE4A; white-space:nowrap;
  }
  body:not(.ay-var) .m-bas .m-logo-alt{
    font-size:.6rem; font-weight:700; letter-spacing:.05em;
    color:#E7BE4A; opacity:.88; white-space:nowrap; margin-top:2px;
  }
  /* sayfa adı yerine logo duruyor */
  body:not(.ay-var) .m-bas .m-bas-yazi{display:none}
  /* Logo öne geçince hamburger ortada kalıyordu. Ana sayfada menü
     en sağda; iç sayfalarda da oraya alıyoruz ki aynı yerde olsun. */
  body:not(.ay-var) .m-bas .m-menu{order:9; margin-left:2px}
  body:not(.ay-var) .m-bas #mArama{order:7}
  body:not(.ay-var) .m-bas .m-ikon{order:8}
}

/* ==========================================================
   ANA SAYFA — MASAÜSTÜ  (maketin birebir karşılığı)
   ----------------------------------------------------------
   29.08.2026. Telefondaki ana yüz masaüstünde tamamen kapalıydı;
   masaüstü ayrı bir tasarım gösteriyordu. Artık ana sayfa her iki
   ekranda da aynı: açık bantlı logo başlığı, ofis fotoğrafı,
   solda güvence yazıları, sağda rezervasyon kartı.

   ÖLÇÜLER MAKETTEN. Maket 1670 piksel genişliğinde; her ölçü
   min(Xvw, Ypx) yazıldı:
     • 1670'in altında  → maketle aynı ORANDA küçülür
     • 1670 ve üstünde  → maketle aynı PİKSELDE kalır
   Böylece dar dizüstünde de 4K ekranda da tasarım bozulmuyor.

   Maketten ölçülen değerler (1670x950):
     bant yüksekliği 118   damla 70x85     ŞANLIURFA 76 punto
     bayrak 42          menü 50           kart 647 geniş
     kart iç boşluk 47   düğme 80 yüksek   slogan 40 punto
   ========================================================== */
@media (min-width:761px){

  /* ---------- BAŞLIK BANDI ---------- */
  body.ay-var .ust{display:none}          /* koyu üst bar ana sayfada yok */

  body.ay-var .m-bas{
    display:flex; position:relative; z-index:30;
    align-items:center;
    min-height:min(7.07vw, 118px);
    padding:0 min(2.7vw, 45px) 0 min(2.9vw, 48px);
    /* Bant görseli KULLANILMIYOR: içinde damla var, HTML'deki damla
       SVG'siyle üst üste binerdi. Renkler o görselden örneklendi. */
    background:linear-gradient(180deg,#E7E6E1 0%,#EFEDE8 58%,#F5F2ED 100%);
    box-shadow:none; gap:0;
  }
  body.ay-var .m-bas .m-logo{
    display:flex; align-items:center;
    gap:min(0.72vw, 12px);
    flex:1 1 auto; min-width:0; padding-left:0;
    text-decoration:none;
  }
  body.ay-var .m-bas .m-damla{
    display:block;
    width:min(4.2vw, 70px); height:min(5.1vw, 85px);
    flex:0 0 auto;
  }
  body.ay-var .m-bas .m-logo-yazi{
    display:flex; flex-direction:column; align-items:center;
    line-height:1; min-width:0;
  }
  body.ay-var .m-bas .m-logo-ust{
    font-size:min(4.55vw, 76px);
    font-weight:800; letter-spacing:-.005em;
    color:#CE9830; white-space:nowrap;
  }
  body.ay-var .m-bas .m-logo-alt{
    font-size:min(1.8vw, 30px);
    font-weight:700; letter-spacing:.02em;
    color:#CE9830; white-space:nowrap;
    margin-top:min(0.36vw, 6px);
  }
  body.ay-var .m-bas .m-bas-yazi,
  body.ay-var .m-bas #mArama{display:none}

  /* bayrak — makette yalnız bayrak var, "TR" yazısı ve ok yok */
  body.ay-var .m-bas .m-ikon{order:8; gap:0; flex:0 0 auto}
  body.ay-var .m-bas .m-ikon .dil-btn{
    padding:0!important; border:0!important;
    background:none!important; box-shadow:none!important; gap:0!important;
  }
  body.ay-var .m-bas .m-ikon .dil-kisa,
  body.ay-var .m-bas .m-ikon .dil-ok{display:none!important}
  body.ay-var .m-bas .m-ikon .dil-bayrak{
    width:min(2.5vw, 42px)!important;
    height:min(2.5vw, 42px)!important;
    flex-basis:min(2.5vw, 42px)!important;
    max-width:42px; max-height:42px;
    border-radius:min(0.6vw, 10px)!important;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(20,26,38,.20);
  }
  /* bayrak SVG'si 3:2; kare kutuyu doldursun diye yanlardan kırpılıyor */
  body.ay-var .m-bas .m-ikon .dil-bayrak svg{
    width:150%; height:100%; margin-left:-25%; display:block;
  }

  /* menü — makette üç kalın çizgi */
  body.ay-var .m-bas .m-menu{
    order:9; flex:0 0 auto;
    width:min(3vw, 50px);
    gap:min(0.54vw, 9px);
    margin-left:min(3.3vw, 55px);
  }
  body.ay-var .m-bas .m-menu span{
    display:block; width:100%!important;
    height:min(0.24vw, 4px);
    background:#2B2B2B; border-radius:2px;
  }
  body.ay-var .m-bas .m-menu span:nth-child(3){display:block}
  body.ay-var .m-bas .m-menu::after{display:none}   /* kırmızı nokta makette yok */

  /* ---------- KAHRAMAN ---------- */
  .anayuz{
    display:flex; flex-direction:column; justify-content:center;
    position:relative; z-index:1;
    /* bant ile birlikte tam bir ekran */
    min-height:calc(100vh - min(7.07vw, 118px));
    padding:0; margin:0;
    background:#FAF9F5; overflow:hidden;
  }
  /* Zemin fotoğrafı. Telefonda "100% auto" ile genişliğe göre
     ölçekleniyordu (tabelaların yeri tutsun diye). Masaüstünde
     cover; dikey konum %6, çünkü ofis tabelaları görselin üst
     %7–16 bandında — %22'de kadraj dışında kalıyordu. */
  .anayuz::before{
    content:""; position:absolute; inset:0; z-index:0;
    /* Masaüstünde GENİŞ ofis karesi (1575x763). Telefondaki dikey
       fotoğraf (853x1700) geniş ekranda 2,3 kat büyüyüp kadraja
       tek tabela sığdırıyordu. Bu kare kullanıcının gönderdiği
       kartsız maketten alındı; sol yazı ve yüzen düğmelerin izi
       onarıldı (o bölgelerin üstünde zaten gerçekleri duruyor). */
    background:url("../img/hero/damla-ofis-genis.jpg?f=4") no-repeat center center/cover;
  }
  .anayuz::after{display:none}
  .ay-isik{display:none}          /* tabela ışığı telefon kadrajına göre ayarlı */

  /* iki sütun: solda yazılar (aşağı yaslı), sağda kart (ortada) */
  .ay-ic{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) min(38.7vw, 647px);
    grid-template-rows:1fr auto auto;
    column-gap:min(2.4vw, 40px); row-gap:min(0.6vw, 10px);
    width:100%; max-width:1670px;
    margin:0 auto;
    padding:min(3vw,50px) min(9.5vw,158px) min(5.4vw,90px) min(4.7vw,78px);
    box-sizing:border-box;
  }

  /* ---------- REZERVASYON KARTI ---------- */
  .ay-kart{
    grid-column:2; grid-row:1 / span 3; align-self:center;
    background:#FFFFFF;
    border-radius:min(1.7vw, 28px);
    padding:min(1.7vw,28px) min(2.8vw,47px) min(2.8vw,47px);
    box-shadow:0 22px 52px rgba(20,26,38,.18), 0 2px 6px rgba(20,26,38,.06);
  }
  .ay-satir{
    position:relative;
    display:flex; align-items:center;
    gap:min(1.5vw, 25px);
    width:100%; margin:0;
    padding:min(1.3vw,22px) 0;
    background:none; border:0;
    font:inherit; color:inherit; text-align:start;
    cursor:pointer;
  }
  .ay-satir:active{opacity:.72}
  .ay-satir.ay-yer{padding-bottom:min(1.9vw,32px)}
  .ay-ikon{
    flex:0 0 min(2.6vw,44px);
    width:min(2.6vw,44px); height:min(2.6vw,44px);
    color:#C4CDD7;
    display:grid; place-items:center;
  }
  .ay-metin{display:flex; flex-direction:column; gap:min(0.24vw,4px); flex:1; min-width:0}
  .ay-sehir,
  .ay-tarih{
    font-size:min(1.55vw, 26px);
    font-weight:700; letter-spacing:-.005em;
    color:#1B2430; line-height:1.2;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .ay-nokta,
  .ay-saat{
    font-size:min(1.3vw, 22px);
    color:#5E6A78; line-height:1.25;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  /* Gerçek tarih girişi satırın üstünde saydam duruyor. Bu kural
     mobil bloktaydı; masaüstüne alınmayınca tarayıcı kendi tarih
     kutusunu çıplak gösteriyordu. */
  .ay-gizli{
    position:absolute; inset:0; width:100%; height:100%;
    margin:0; padding:0; border:0;
    opacity:0; background:transparent;
    -webkit-appearance:none; appearance:none;
    cursor:pointer; z-index:2;
  }
  .ay-bul{
    display:block; width:100%;
    margin-top:min(1.5vw,25px);
    padding:min(1.6vw,27px) min(0.7vw,12px);
    border:0; border-radius:min(0.72vw,12px);
    background:linear-gradient(180deg,#FFC61E 0%,#F2AC0E 100%);
    color:#1A1405;
    font:inherit; font-size:min(1.7vw,28px); font-weight:700; letter-spacing:.01em;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(221,161,17,.34);
    transition:transform .12s ease;
  }
  .ay-bul:hover{transform:translateY(-1px)}
  .ay-bul:active{transform:translateY(1px)}

  /* ---------- SOLDAKİ GÜVENCE YAZILARI ---------- */
  .ay-odeme{
    grid-column:1; grid-row:2; align-self:end;
    display:flex; flex-direction:column; align-items:flex-start;
    gap:min(0.9vw,15px); text-align:left; max-width:none; margin:0;
  }
  .ay-odeme-bas{
    display:flex; align-items:center; gap:min(0.42vw,7px);
    font-style:normal;
    font-size:min(1.02vw, 17px);
    font-weight:800; letter-spacing:.11em; line-height:1;
    color:#8A6510; white-space:nowrap;
  }
  /* Kalkan simgesine ölçü verilmezse SVG kabın tamamına yayılıp
     kahramanı kaplıyor. */
  .ay-odeme-bas svg{
    width:min(1.14vw,19px); height:min(1.14vw,19px);
    flex:0 0 min(1.14vw,19px);
  }
  .ay-odeme b{
    padding:min(0.78vw,13px) min(1.86vw,31px);
    border-radius:999px;
    background:linear-gradient(180deg,#FFCE33 0%,#F0A80B 100%);
    color:#1A1405;
    font-size:min(1.32vw, 22px);
    font-weight:800; letter-spacing:.06em; white-space:nowrap;
  }
  .ay-odeme span{
    font-size:min(1.14vw, 19px);
    font-weight:700; letter-spacing:.035em; line-height:1.4;
    color:#5A5140;
  }
  .ay-slogan{
    grid-column:1; grid-row:3; align-self:end;
    text-align:left; line-height:1.26; max-width:none;
    margin:min(1.1vw,18px) 0 0;
  }
  .ay-slogan b{
    display:block;
    font-size:min(2.4vw, 40px);
    font-weight:800; letter-spacing:.015em;
    background-image:linear-gradient(100deg,#8E6A10 0%,#B98F22 28%,#F6E4AC 45%,#B98F22 62%,#8E6A10 100%);
    background-size:280% 100%; background-position:180% 0;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    animation:ayIsikSeridi 5.4s linear infinite;
  }
  .ay-slogan i{
    display:block; margin-top:min(0.6vw,10px);
    font-style:normal;
    font-size:min(1.44vw, 24px);
    font-weight:700; letter-spacing:.04em; color:#5A5140;
  }

  /* eski masaüstü kahramanı (rozet + üç şerit) yerini bıraktı */
  body.ay-var .marka-bolum{display:none}
}

/* ==========================================================
   ANA SAYFA MASAÜSTÜ — OKUNURLUK VE BAYRAK
   ----------------------------------------------------------
   29.08.2026: kahraman fotoğrafı çok parlak (beyaz mermer zemin).
   Soldaki güvence yazıları orta tonda olduğu için üstünde
   kayboluyordu. Renkler koyulaştırıldı ve yazılara beyaz hâle
   verildi — koyu bir perde koymak yerine, fotoğraf açık kalsın.

   Bayrağın altındaki "TR" masaüstünde de görünüyor (maketteki gibi).
   ========================================================== */
@media (min-width:761px){

  /* --- bayrak + TR --- */
  body.ay-var .m-bas .m-ikon .dil-btn{
    flex-direction:column!important;
    gap:min(0.24vw,4px)!important;
  }
  body.ay-var .m-bas .m-ikon .dil-kisa{
    display:block!important;
    font-size:min(0.86vw,14px);
    font-weight:800; letter-spacing:.06em;
    color:#2B2B2B; line-height:1;
  }

  /* --- soldaki yazılar: okunur olsun --- */
  .ay-odeme-bas{
    color:#6E4F08;
    text-shadow:0 1px 0 rgba(255,255,255,.85), 0 2px 12px rgba(255,255,255,.8);
  }
  .ay-odeme-bas svg{filter:drop-shadow(0 1px 2px rgba(255,255,255,.9))}
  .ay-odeme b{
    color:#171106;
    box-shadow:0 6px 18px rgba(196,140,10,.32);
  }
  .ay-odeme span{
    color:#3A3428; font-weight:800;
    text-shadow:0 1px 0 rgba(255,255,255,.85), 0 2px 12px rgba(255,255,255,.8);
  }
  /* Altın geçişli başlıkta text-shadow çalışmıyor (yazı saydam,
     renk arka plandan geliyor). Onun yerine geçişin tonlarını
     koyulaştırdık — parlak zeminde seçiliyor. */
  .ay-slogan b{
    background-image:linear-gradient(100deg,
      #5F4406   0%,
      #8A6710  28%,
      #C9A94F  45%,
      #8A6710  62%,
      #5F4406 100%);
  }
  .ay-slogan i{
    color:#3A3428; font-weight:800;
    text-shadow:0 1px 0 rgba(255,255,255,.85), 0 2px 12px rgba(255,255,255,.8);
  }
}

/* ==========================================================
   ÜST BANT — FOTOĞRAF ARKADAN GEÇSİN
   ----------------------------------------------------------
   29.08.2026: bant düz renk bir şeritti; makette ise yarı saydam
   ve arkasından ofis fotoğrafı görünüyor. Bandı kahramanın
   ÜSTÜNE bindirip saydam yapıyoruz, fotoğraf da en tepeden
   başlıyor. Telefon görünümü ayrı blokta, etkilenmiyor.
   ========================================================== */
@media (min-width:761px){
  body.ay-var .m-bas{
    position:absolute; top:0; left:0; right:0;
    background:linear-gradient(180deg,
      rgba(248,247,244,.93) 0%,
      rgba(246,244,239,.86) 55%,
      rgba(244,242,236,.66) 100%);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  .anayuz{
    /* bant üstte bindiği için yer bırakıyoruz */
    padding-top:min(7.07vw, 118px);
    min-height:100vh;
  }
  /* fotoğraf en tepeden başlasın ki bandın arkasından görünsün */
  .anayuz::before{inset:0}
  /* kart ve yazılar bandın altında kalsın */
  .ay-ic{padding-top:min(1.6vw,26px)}
}

/* ==========================================================
   SOLDAKİ YAZILAR — OKUNURLUK (2. tur)
   ----------------------------------------------------------
   30.08.2026: renkleri koyultmak yetmedi. Sebep zeminin DÜZ
   OLMAMASI: fotoğrafın onarılıp düzleştirilen bölgesi maketteki
   yerinde duruyor, ama tarayıcı fotoğrafı "cover" ile kırpınca
   yazılar o düz alanın üstüne denk gelmiyor — arkalarına cam
   kapılar, saksı ve koltuk giriyor. Harfin yarısı açık yarısı
   koyu zemine düşünce göz seçemiyor.

   Çözüm: yazı bloklarının TAM ARKASINA bulanık beyaz hâle.
   Fotoğrafın geri kalanına dokunmuyor; kenarları eriyip gittiği
   için kutu gibi durmuyor. Koyu perde koymuyoruz, fotoğraf
   açık kalsın diye.

   Ayrıca başlıktaki altın parlama efektinin açık tonu harflerin
   üstünden geçerken yazıyı kaybediyordu — geçiş koyulaştırıldı.
   Beyaz hâleler 12px'ten 3px'e indi; geniş hâle harfi bulanık
   gösteriyordu.
   ========================================================== */
@media (min-width:761px){

  /* --- 1) yazının arkasına hâle --- */
  .ay-odeme,
  .ay-slogan{position:relative; z-index:0}
  .ay-odeme::before,
  .ay-slogan::before{
    content:""; position:absolute; z-index:-1;
    inset:min(-1.5vw,-25px) min(-3.4vw,-57px) min(-1.5vw,-25px) min(-2.6vw,-43px);
    background:rgba(255,255,255,.80);
    border-radius:min(2.4vw,40px);
    filter:blur(min(1.7vw,28px));
    pointer-events:none;
  }
  /* iki blok bitişik: aralarındaki boşluk boş kalmasın */
  .ay-odeme::before{bottom:min(-2.4vw,-40px)}
  .ay-slogan::before{top:min(-2.4vw,-40px)}

  /* --- 2) yazılar: koyu, kalın, dar hâle --- */
  .ay-odeme-bas{
    color:#4E3703;
    font-size:min(1.08vw,18px); letter-spacing:.095em;
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,.95);
  }
  .ay-odeme-bas svg{filter:none}
  .ay-odeme span,
  .ay-slogan i{
    color:#2A2418; font-weight:800;
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,.95);
  }
  .ay-slogan b{
    background-image:linear-gradient(100deg,
      #4A3403   0%,
      #6E5008  26%,
      #A98526  45%,
      #6E5008  64%,
      #4A3403 100%);
    filter:drop-shadow(0 1px 1px rgba(255,255,255,.55));
  }
}


/* ==========================================================
   TABELALAR — IŞIKLI ÇERÇEVE (masaüstü)
   ----------------------------------------------------------
   30.08.2026: fotoğraftaki iki "Damla Rent A Car" panosu ölü
   duruyordu. Artık çerçeveleri yanıyor: altın rim + çerçevenin
   etrafında dönen ışık + panonun üstünden geçen parıltı.

   NEDEN ALTIN, BEYAZ DEĞİL: ilk denemede çerçeve beyaz ışıktı
   ama pano da duvar da zaten bembeyaz — ışık hiç görünmedi.
   Altın hem seçiliyor hem de logonun rengi.

   ZOR OLAN KISIM — panoların yerini bulmak.
   Fotoğraf "cover" ile sığdırılıyor; ekran oranı değiştikçe
   görsel büyüyüp kayıyor, sabit vw değeri panodan kayar.
   Cover hesabını CSS'e yaptırıyoruz:

     --s  = bir fotoğraf pikselinin ekranda kaç piksel ettiği
          = max(kutu_eni/1575, kutu_boyu/928)
     --ox = görselin soldan taşma payı (ortalanmış)
     --oy = üstten taşma payı

   Her pano GÖRSELİN İÇİNDEKİ piksel koordinatıyla yazılıyor;
   ekran ne olursa olsun panonun üstüne oturuyor. Ölçüler
   görselden kenar taramasıyla alındı:
     sol pano   x 152.5  y 225   272.5x115   eğim 3.6°
     sağ pano   x 472    y 252   245.5x106   eğim 3.2°
   (İlk ölçümde sağ panonun sağ kenarı 23 piksel fazla çıkmıştı:
    kenar tarayıcı panoyu değil arkadaki pencere pervazını bulmuş.
    Bu yüzden çerçeve panodan taşıyordu. Ölçüm 4 kat büyütülmüş
    cetvelli kırpma ile tekrarlandı.)
   (Perspektiften panolar hafif eğik — çerçeve de eğik.)

   cqw/cqh için .ay-isik kendisi "boyut kabı" yapıldı; inset:0
   olduğu ve içeriği boyutu etkilemediği için güvenli. Eski
   tarayıcıda @supports girmez, ışık çıkmaz, sayfa sağlam kalır.
   ========================================================== */

/* dönen ışığın açısı — canlandırılabilmesi için tür bildirimi */
@property --ay-aci{ syntax:'<angle>'; initial-value:0deg; inherits:false }

@media (min-width:761px){
  @supports (width:1cqw){

    .ay-isik{
      display:block!important;
      position:absolute; inset:0; z-index:1;
      pointer-events:none; overflow:hidden;
      container-type:size;
    }

    .ay-isik i{
      --s:max(calc(100cqw / 1575), calc(100cqh / 928));
      --ox:calc((100cqw - var(--s) * 1575) / 2);
      --oy:calc((100cqh - var(--s) * 928) / 2);

      position:absolute; box-sizing:border-box;
      left:calc(var(--ox) + var(--s) * var(--px));
      top:calc(var(--oy) + var(--s) * var(--py));
      width:calc(var(--s) * var(--pw));
      height:calc(var(--s) * var(--ph));
      transform:rotate(var(--pa));
      border-radius:calc(var(--s) * 4);
      overflow:hidden;

      /* altın rim + dışa yayılan sıcak hâle + içeride aydınlanma */
      box-shadow:
        0 0 0 calc(var(--s) * 1.8)  rgba(206,152,48,.90),
        0 0 0 calc(var(--s) * 2.9)  rgba(255,236,183,.75),
        0 0 calc(var(--s) * 10) calc(var(--s) * 2.5) rgba(255,198,84,.72),
        0 0 calc(var(--s) * 26) calc(var(--s) * 7)   rgba(248,170,36,.38),
        inset 0 0 calc(var(--s) * 16) rgba(255,226,158,.55);
      animation:ayTabelaNefes 4.9s ease-in-out infinite;
    }
    .ay-isik i:nth-child(1){--px:152.5; --py:225; --pw:272.5; --ph:115; --pa:3.6deg}
    .ay-isik i:nth-child(2){--px:472;   --py:252; --pw:245.5; --ph:106; --pa:3.2deg;
      animation-delay:-1.6s}

    /* panonun üstünden geçen parıltı */
    .ay-isik i::before{
      content:"";
      position:absolute; top:-25%; bottom:-25%; left:0;
      width:46%;
      background:linear-gradient(102deg,
        rgba(255,255,255,0)     0%,
        rgba(255,240,196,.30)  28%,
        rgba(255,251,232,.90)  50%,
        rgba(255,240,196,.30)  72%,
        rgba(255,255,255,0)   100%);
      transform:translateX(-170%);
      animation:ayTabelaIsik 5.8s cubic-bezier(.42,0,.28,1) infinite;
    }
    .ay-isik i:nth-child(2)::before{animation-delay:.42s}

  }
}

/* çerçevenin nefes alışı — sönmüyor, canlanıp diniyor */
@keyframes ayTabelaNefes{
  0%, 100%{opacity:.72}
  46%     {opacity:1}
}
/* ışığın çerçeve turu */
@keyframes ayTabelaTur{
  to{--ay-aci:360deg}
}

/* ==========================================================
   TABELALAR — IŞIKLI ÇERÇEVE (telefon)
   ----------------------------------------------------------
   Masaüstünde yapılan ışıklı çerçevenin telefon karşılığı.
   Kutu ölçüleri yeni değil: parıltı şeridi zaten bu kutuları
   kullanıyordu (görselden ölçülmüştü), aynı yerlere çerçeve
   koyuyoruz. Telefondaki fotoğrafta panolar düz duruyor,
   masaüstündeki gibi eğim yok.

   DÖNEN IŞIK TELEFONDA YOK — bilerek. Dönen ışık konik geçişin
   açısını canlandırıyor, bu da her karede yeniden çizim demek.
   Buradaki çerçeve yalnızca saydamlıkla nefes alıyor; onu ekran
   kartı hallediyor, işlemciye dokunmuyor.
   ========================================================== */
@media (max-width:760px){
  .ay-isik i{
    box-sizing:border-box;
    box-shadow:
      0 0 0 .42vw rgba(206,152,48,.88),
      0 0 0 .68vw rgba(255,236,183,.70),
      0 0 2.4vw .6vw rgba(255,198,84,.62),
      0 0 6vw  1.7vw rgba(248,170,36,.32),
      inset 0 0 3.8vw rgba(255,226,158,.5);
    animation:ayTabelaNefes 4.9s ease-in-out infinite;
  }
  .ay-isik i:nth-child(2){animation-delay:-1.6s}
}

/* ==========================================================
   KUTU HARF IŞIĞI
   ----------------------------------------------------------
   30.08.2026: çerçeve yandı ama yazılar hâlâ ölüydü. Gerçek
   kutu harf tabelada ışık harfin çevresine taşar; onu taklit
   ediyoruz.

   Yazı fotoğrafın içinde, ona CSS ile dokunamayız. Bu yüzden
   altın harfler fotoğraftan ayıklanıp ÇEVRELERİNE hâle üreten
   ayrı bir katman hazırlandı (tabela-isik-*.png). Hâle harfin
   kendisini kaplamaz — sadece dışına taşar, harf net kalır.

   Katman tabelanın kutusunun içinde durduğu için panonun eğimini
   ve yerini kendiliğinden alıyor; çerçeveyle aynı nefesi alıyor,
   ayrı bir canlandırma çalıştırmıyor.

   Dosyalar tek renk ve 16 kademe saydamlıkla üretildi: dördü
   toplam 63 KB, telefon yalnız 30 KB'ını indiriyor.
   ========================================================== */
.ay-isik b{
  position:absolute; inset:0;
  background:no-repeat center/100% 100%;
  pointer-events:none;
}

@media (max-width:760px){
  .ay-isik i:nth-child(1) b{background-image:url("../img/hero/tabela-isik-mobil-1.png?f=1")}
  .ay-isik i:nth-child(2) b{background-image:url("../img/hero/tabela-isik-mobil-2.png?f=1")}
}
@media (min-width:761px){
  .ay-isik i:nth-child(1) b{background-image:url("../img/hero/tabela-isik-genis-1.png?f=1")}
  .ay-isik i:nth-child(2) b{background-image:url("../img/hero/tabela-isik-genis-2.png?f=1")}
}

/* ==========================================================
   ÇERÇEVENİN ETRAFINDA DÖNEN IŞIK — masaüstü + telefon
   ----------------------------------------------------------
   30.08.2026: önce yalnız masaüstünde vardı, telefonu yormasın
   diye. Ölçünce görüldü ki telefondaki pano çok küçük (yaklaşık
   123x67 px); dönen ışığın yeniden çizdiği alan masaüstündekinin
   onda biri kadar. Yük yok, telefona da açıldı.

   Halka, konik geçişin ortasından maskeyle oyuluyor: iki maske
   katmanı XOR'lanınca ortası boşalıyor, yalnız kenar payı kalıyor.
   Bu yüzden kalınlığı "padding" belirliyor.

   Kalınlık iki ekranda ayrı yazılı ama ORAN aynı — pano
   genişliğinin yaklaşık %1,5'i. Masaüstünde fotoğraf pikseli
   (--s) cinsinden, telefonda vw cinsinden.

   Kurallar tek yerde: ikisi ayrı yazılsaydı biri değişip öteki
   unutulurdu.
   ========================================================== */
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .ay-isik i::after{
    content:"";
    position:absolute; inset:0; box-sizing:border-box;
    border-radius:inherit;
    background:conic-gradient(from var(--ay-aci),
      rgba(255,255,255,0)   0deg,
      rgba(255,255,255,0) 206deg,
      rgba(255,205,96,.40) 278deg,
      rgba(252,178,40,.90) 322deg,
      rgba(255,158,10,1)   340deg,
      rgba(255,236,190,1)  346deg,
      rgba(252,190,60,.80) 352deg,
      rgba(255,255,255,0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
            mask-composite:exclude;
    animation:ayTabelaTur 3.9s linear infinite;
  }
  /* sağdaki yarım tur geriden gelsin — ikisi aynı anda dönmesin */
  .ay-isik i:nth-child(2)::after{animation-delay:-1.95s}

  @media (min-width:761px){ .ay-isik i::after{padding:calc(var(--s) * 4)} }
  @media (max-width:760px){ .ay-isik i::after{padding:.55vw} }
}

/* tabela ışıkları: kahraman ekranda değilken dursun (anayuz.js) */
.ay-isik-dur i,
.ay-isik-dur i::before,
.ay-isik-dur i::after{animation-play-state:paused!important}

/* ==========================================================
   TELEFON — SOLDAKİ YAZILAR NETLEŞSİN
   ----------------------------------------------------------
   30.08.2026: masaüstündeki okunurluk düzeltmesinin telefon
   karşılığı. Burada HÂLE YOK, bilerek: telefonda yazının
   arkası düz (parlak zemin, sonra krem sayfa). Masaüstündeki
   sorun dalgalı arka plandı — cam kapılar, saksı. Telefonda
   o sorun yok, hâle koysak krem zeminde açık bir leke gibi
   dururdu.

   Kalan tek sorun altın başlığın açık tonu: parlama efekti
   üstünden geçerken yazı kayboluyordu. Geçiş koyulaştırıldı,
   diğer satırlar da koyu renge alınıp ince beyaz hâle verildi.
   ========================================================== */
@media (max-width:760px){
  .ay-odeme-bas{
    color:#4E3703;
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,.95);
  }
  .ay-odeme span,
  .ay-slogan i{
    color:#2A2418; font-weight:800;
    text-shadow:0 1px 0 rgba(255,255,255,.9), 0 0 3px rgba(255,255,255,.95);
  }
  /* Altın geçişli başlıkta text-shadow işlemiyor — yazı saydam,
     rengi arka plandan geliyor. Onun yerine geçişin tonları
     koyulaştırıldı; parlama artık yazıyı yutmuyor. */
  .ay-slogan b{
    background-image:linear-gradient(100deg,
      #4A3403   0%,
      #6E5008  26%,
      #A98526  45%,
      #6E5008  64%,
      #4A3403 100%);
    filter:drop-shadow(0 1px 1px rgba(255,255,255,.55));
  }
}

/* ==========================================================
   YÜZEN DÜĞMELER — KALP ATIŞI
   ----------------------------------------------------------
   31.08.2026: WhatsApp, telefon ve Instagram düğmeleri kalp
   gibi atsın, göz oraya gitsin.

   Üçü AYNI ANDA atmıyor: sırayla 0 / 0,3 / 0,6 saniye gecikmeli.
   Hepsi birlikte zıplayınca köşe titriyor gibi duruyordu; sırayla
   atınca göz her birini ayrı ayrı fark ediyor.

   (Ana sayfanın ilk ekranında Instagram zaten çekiliyor; orada
   yalnız WhatsApp ile telefon görünüyor.)

   Atış GERÇEK kalp ritmi: iki vuruş, sonra dinlenme. Tek düze
   bir "büyü-küçül" mekanik duruyor; his ikinci vuruşun
   birinciden hemen sonra gelmesinden geliyor.

   NEDEN "transform" DEĞİL "scale":
   Mobilde .fab-tel için transform:translateX(22px)!important
   var (alt çubuk hizası için). !important, canlandırmayı
   yener — transform ile yazsaydık telefon düğmesi hiç atmazdı.
   "scale" ayrı bir özellik; kaydırmayı bozmadan üstüne biniyor.

   Halka ayrı katmanda (::after) ve yalnız transform + opacity
   ile canlandırılıyor; bunları ekran kartı çiziyor, işlemciye
   dokunmuyor. box-shadow ile yapılsa her karede yeniden çizim
   olurdu.
   ========================================================== */
.fab-wa,
.fab-tel,
.fab-ig{
  position:relative;
  animation:fabKalp 2.2s ease-in-out infinite;
}
.fab-tel{animation-delay:.3s}      /* sırayla atsınlar */
.fab-ig {animation-delay:.6s}

.fab-wa::after,
.fab-tel::after,
.fab-ig::after{
  content:"";
  position:absolute; inset:0;
  border-radius:50%;
  border:2px solid var(--fab-hale);
  pointer-events:none;
  animation:fabHalka 2.2s ease-out infinite;
}
.fab-wa {--fab-hale:#4CAF50}
.fab-tel{--fab-hale:#6BA5D0}
/* Instagram'ın kendi geçişinden alınan mor-pembe */
.fab-ig {--fab-hale:#D6249F}
.fab-tel::after{animation-delay:.3s}
.fab-ig::after {animation-delay:.6s}

@keyframes fabKalp{
  0%   {scale:1}
  8%   {scale:1.15}    /* birinci vuruş */
  16%  {scale:1.02}
  24%  {scale:1.11}    /* ikinci vuruş */
  34%  {scale:1}
  100% {scale:1}       /* dinlenme */
}
@keyframes fabHalka{
  0%   {transform:scale(1);    opacity:.75}
  70%  {transform:scale(1.85); opacity:0}
  100% {transform:scale(1.85); opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .fab-wa, .fab-tel, .fab-ig{animation:none!important; scale:1!important}
  .fab-wa::after, .fab-tel::after, .fab-ig::after{display:none}
}


/* ==========================================================
   ARAÇ VİTRİNİ — kartın içinde, yalnız telefonda
   ----------------------------------------------------------
   01.09.2026. Kartın üst kısmındaki yer + iki tarih satırının
   yerine araçlar geçiyor. Satırlar SİLİNMEDİ, burada gizlendi
   — masaüstünde kart eskisi gibi çalışıyor.

   Kartlar sayfanın altındaki "Öne Çıkan Araçlar" şeridiyle
   aynı sınıfları kullanıyor; buradaki tek iş onları kartın
   içine oturtmak.

   Şerit kartın dolgusunu aşıp kenarlara kadar uzanıyor
   (eksi kenar boşluğu): yandaki kartın ucu kartın kendi
   yuvarlak köşesinde kesiliyor, "devamı var" belli oluyor.
   ========================================================== */
@media (max-width:760px){

  /* satırlar gizlensin, vitrin onların yerini alsın */
  .ay-kart .ay-satir{display:none!important}

  .ay-vitrin{
    display:block;
    margin:2px -18px 14px;      /* kartın 18px dolgusunu aş */
  }
  .ay-vitrin .ars-yol{
    padding:0 18px 2px;
    scroll-padding-inline:18px;
  }
  .ay-vitrin .ars-kart{
    width:min(232px, 62vw);
  }
  /* Kart içinde daha yumuşak dursun: dış gölge yerine ince
     çerçeve. Beyaz kartın üstünde ağır gölge kirli duruyor. */
  .ay-vitrin .ars-kart{
    box-shadow:0 2px 8px rgba(20,26,38,.08);
  }
}

/* masaüstünde vitrin yok — kart eski hâlinde */
@media (min-width:761px){
  .ay-vitrin{display:none!important}
}

/* ==========================================================
   ARAÇ VİTRİNİ — KISA EKRANLI TELEFONLAR
   ----------------------------------------------------------
   Vitrin kartı, yerini aldığı üç satırdan daha uzun. Uzun
   ekranda (812 px) sığıyor ama 667 pxlik telefonlarda slogan
   kadrajın dışına taşıyordu.

   Burada araç kartı küçülüyor: fotoğraf oranı 4:3 yerine
   16:10, ad tek satır, boşluklar dar. Fotoğrafın boyu kartın
   ENİNE bağlı olduğu için kartı daraltmak en çok yeri burada
   kazandırıyor.

   Uzun ekranlarda bu blok hiç devreye girmez.
   ========================================================== */
@media (max-width:760px) and (max-height:720px){
  .ay-vitrin{margin:0 -16px 10px}
  .ay-vitrin .ars-yol{padding:0 16px 2px; gap:10px}
  .ay-vitrin .ars-kart{width:min(200px, 56vw)}
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 10}
  .ay-vitrin .ars-alt{padding:8px 10px 9px}
  /* ad tek satıra iniyor: iki satırlık yer ayırmak burada
     lüks. Uzun adlar "…" ile kesiliyor. */
  .ay-vitrin .ars-ad{
    -webkit-line-clamp:1;
    min-height:0;
    font-size:.88rem;
  }
  .ay-vitrin .ars-fiyat{margin-top:6px; padding:5px 7px}
  .ay-vitrin .ars-fiyat b{font-size:.94rem}
  .ay-vitrin .ars-fiyat em{font-size:.58rem}
}

/* ==========================================================
   VİTRİN — KUTU KÜÇÜLDÜ, BEYAZ YUMUŞADI
   ----------------------------------------------------------
   01.09.2026 (ikinci tur).

   1) Araç kartı küçüldü. Fotoğraf 4:3 yerine 16:10, kart
      daraldı, boşluklar kısaldı. Fotoğrafın boyu kartın ENİNE
      bağlı olduğu için en çok yeri kartı daraltmak kazandırıyor.
      Amaç: altındaki güvence yazıları ve slogan ekrana rahat
      otursun — kart uzayınca aşağı taşıyorlardı.

   2) Kart artık kâğıt beyazı değil. Zemin fotoğrafı zaten
      bembeyaz mermer; üstüne saf beyaz kart binince ilk ekran
      tek düze bir beyaz lekeye dönüyordu. Kart hafif kremleşti
      ve yarı saydam oldu — arkasındaki ofis fotoğrafı hafifçe
      görünüyor, derinlik geliyor. İnce bir kenar çizgisi de
      kartın nerede bittiğini belli ediyor.

   Yalnız telefon. Masaüstünde kart eski hâlinde.
   ========================================================== */
@media (max-width:760px){

  /* ---- 1) kutu küçülsün ---- */
  .ay-vitrin{margin:0 -18px 11px}
  .ay-vitrin .ars-yol{gap:10px}
  .ay-vitrin .ars-kart{width:min(206px, 56vw)}
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 10}
  .ay-vitrin .ars-alt{padding:9px 11px 10px}
  .ay-vitrin .ars-ad{
    font-size:.9rem;
    min-height:0;              /* iki satırlık yer ayrılmıyor */
  }
  .ay-vitrin .ars-fiyat{margin-top:7px; padding:6px 8px}
  .ay-vitrin .ars-fiyat b{font-size:.96rem}
  .ay-vitrin .ars-fiyat em{font-size:.6rem}
  .ay-vitrin .ars-sinif{font-size:.52rem; padding:3px 7px}

  /* ---- 2) beyaz yumuşasın ---- */
  .ay-kart{
    background:rgba(253,251,246,.90);
    -webkit-backdrop-filter:blur(7px);
            backdrop-filter:blur(7px);
    border:1px solid rgba(255,255,255,.75);
    box-shadow:
      0 16px 38px rgba(20,26,38,.17),
      0 2px 6px rgba(20,26,38,.07);
  }
  /* Araç kartı, üstünde durduğu kremin içinde kaybolmasın */
  .ay-vitrin .ars-kart{
    background:#FFFFFF;
    border-color:#E9E6DF;
  }
}

/* ==========================================================
   VİTRİN — BEYAZ KART KALKTI
   ----------------------------------------------------------
   01.09.2026 (üçüncü tur). Araçlar artık beyaz bir kartın
   içinde değil, doğrudan ofis fotoğrafının üstünde duruyor.

   Zemin zaten bembeyaz mermer; üstüne beyaz kart binince ilk
   ekran tek düze bir beyaz lekeydi. Kabuk kalkınca fotoğraf
   nefes alıyor ve göz doğrudan araca gidiyor.

   Şerit ekranın kenarlarına kadar uzanıyor: yandaki kartın
   ucu ekran kenarında kesiliyor, "devamı var" belli oluyor.

   Araç kartlarının gölgesi koyulaştı — beyaz kartın içinde
   hafif gölge yetiyordu, parlak fotoğrafın üstünde yetmiyor.

   Yalnız telefon. Masaüstünde kart olduğu gibi duruyor.
   ========================================================== */
@media (max-width:760px){

  .ay-kart{
    background:none;
    border:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
    padding:0;
    border-radius:0;
  }

  .ay-vitrin{margin:0 -26px 14px}
  .ay-vitrin .ars-yol{
    padding:2px 26px 6px;
    scroll-padding-inline:26px;
  }
  .ay-vitrin .ars-kart{
    box-shadow:0 10px 26px rgba(20,26,38,.22), 0 2px 6px rgba(20,26,38,.10);
    border-color:rgba(255,255,255,.92);
  }

  /* düğme artık kartın içinde değil; kendi durduğu için
     gölgesi biraz daha belirgin */
  .ay-bul{
    box-shadow:0 8px 20px rgba(221,161,17,.38), 0 2px 6px rgba(20,26,38,.12);
  }
}

/* ==========================================================
   FİYAT NOTU — sloganın yerine (yalnız telefon)
   ----------------------------------------------------------
   01.09.2026. Kartlardaki fiyatlar AYLIK kiralamada geçerli
   günlük fiyatlar. Ziyaretçi bunu bilmeden "günlük 1.499 TL"
   diye anlıyor, sonra telefonda başka rakam duyunca güveni
   sarsılıyordu. Telefonda sloganın yerini bu not aldı.

   Slogan silinmedi, telefonda gizlendi — masaüstünde duruyor.

   Yazı süslü değil, okunur: ilk satır koyu ve net (asıl bilgi),
   ikinci satır daha sakin (ne yapması gerektiği). Yanındaki
   halka simge "bu bir uyarı değil, bilgi" havası veriyor.
   ========================================================== */
@media (max-width:760px){

  .ay-slogan{display:none}

  .ay-not{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:start;
    column-gap:8px;
    row-gap:3px;
    width:100%;
    max-width:330px;
    margin:2px auto 0;
    padding:11px 14px;
    border-radius:12px;
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(6px);
            backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.8);
    text-align:left;
  }
  .ay-not svg{
    grid-row:1 / span 2;
    width:17px; height:17px;
    margin-top:1px;
    color:#B4861A;
    flex:0 0 17px;
  }
  .ay-not b{
    font-size:.78rem;
    font-weight:800;
    line-height:1.3;
    letter-spacing:.005em;
    color:#2A2418;
  }
  .ay-not span{
    font-size:.72rem;
    font-weight:600;
    line-height:1.3;
    color:#6E6553;
  }
}


/* ==========================================================
   FİYAT NOTU + VİTRİN — KISA EKRANLI TELEFONLAR
   ----------------------------------------------------------
   667 pxlik telefonlarda (iPhone SE, 8) not kadrajın 18 px
   dışında kalıyordu. Araç kartı bir tık daha daralıyor
   (fotoğrafın boyu enine bağlı, en çok yeri o kazandırıyor)
   ve notun boşlukları kısalıyor. Uzun ekranlarda bu blok
   devreye girmez.
   ========================================================== */
@media (max-width:760px) and (max-height:720px){
  .ay-vitrin{margin:0 -26px 9px}
  .ay-vitrin .ars-kart{width:min(180px, 50vw)}

  .ay-not{
    margin-top:0;
    padding:8px 12px;
    column-gap:7px;
    max-width:320px;
  }
  .ay-not svg{width:15px; height:15px; flex-basis:15px}
  .ay-not b{font-size:.74rem}
  .ay-not span{font-size:.68rem}
}

/* ==========================================================
   FİYAT NOTU — GÜZELLEŞTİRME
   ----------------------------------------------------------
   01.09.2026. Not, düz gri bir kutuydu; sayfanın diline
   ait değildi. Artık kartlardaki FİYAT KUTUSUYLA aynı dilde:
   krem zemin, altın çerçeve, altın vurgu. Süs olsun diye
   değil — notun konusu zaten o fiyat kutusu, göz ikisini
   birbirine bağlasın diye.

   İki satırın işi ayrı:
     1. satır koyu ve kalın  — asıl bilgi
     2. satır altın          — ne yapması gerektiği
   Altın renk gözü ikinci satıra çekiyor; orası eyleme
   çağıran satır.
   ========================================================== */
@media (max-width:760px){
  .ay-not{
    background:linear-gradient(180deg,#FFFDF7 0%,#FFF8E9 100%);
    border:1px solid #EFE2BD;
    box-shadow:
      0 6px 18px rgba(20,26,38,.10),
      inset 0 1px 0 rgba(255,255,255,.9);
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
    padding:12px 15px;
    border-radius:13px;
    column-gap:10px;
    row-gap:4px;
  }
  .ay-not svg{
    width:19px; height:19px;
    margin-top:0;
    flex-basis:19px;
    color:#E0A81C;                     /* dolu altın rozet */
    filter:drop-shadow(0 1px 2px rgba(196,140,10,.35));
  }
  .ay-not b{
    font-size:.8rem;
    color:#241E12;
    letter-spacing:0;
  }
  .ay-not span{
    font-size:.74rem;
    font-weight:700;
    color:#9A7315;                     /* eyleme çağıran satır */
  }
}
@media (max-width:760px) and (max-height:720px){
  .ay-not{padding:9px 12px; border-radius:11px}
  .ay-not svg{width:16px; height:16px; flex-basis:16px}
}

/* ==========================================================
   FİYAT NOTU — MASAÜSTÜ
   ----------------------------------------------------------
   01.09.2026. Not önce yalnız telefondaydı. Ama bilgi telefona
   özel değil: masaüstünden bakan da "günlük 1.166 TL" diye
   anlayıp sonra telefonda başka rakam duyuyordu. Not iki
   ekranda da duruyor.

   Telefonda sloganın YERİNE geçmişti; masaüstünde slogan
   duruyor, not onun ALTINA giriyor — orada yer var.

   Izgaraya dördüncü satır eklendi; kart da dört satır boyunca
   uzuyor ki dikey ortalaması bozulmasın.
   ========================================================== */
@media (min-width:761px){
  .ay-ic{grid-template-rows:1fr auto auto auto}
  .ay-kart{grid-row:1 / span 4}

  .ay-not{
    display:grid;
    grid-column:1; grid-row:4;
    justify-self:start;
    grid-template-columns:auto 1fr;
    align-items:start;
    column-gap:min(0.66vw,11px);
    row-gap:min(0.24vw,4px);
    max-width:min(37vw, 616px);
    margin:min(1.02vw,17px) 0 0;
    padding:min(0.78vw,13px) min(0.96vw,16px);
    border-radius:min(0.78vw,13px);
    background:linear-gradient(180deg,#FFFDF7 0%,#FFF8E9 100%);
    border:1px solid #EFE2BD;
    box-shadow:
      0 6px 18px rgba(20,26,38,.10),
      inset 0 1px 0 rgba(255,255,255,.9);
    text-align:left;
  }
  .ay-not svg{
    grid-row:1 / span 2;
    width:min(1.38vw,23px); height:min(1.38vw,23px);
    margin-top:min(0.06vw,1px);
    color:#E0A81C;
    filter:drop-shadow(0 1px 2px rgba(196,140,10,.35));
  }
  .ay-not b{
    font-size:min(1.08vw, 18px);
    font-weight:800; line-height:1.32; letter-spacing:0;
    color:#241E12;
  }
  .ay-not span{
    font-size:min(0.99vw, 16.5px);
    font-weight:700; line-height:1.32;
    color:#9A7315;
  }
}


/* ==========================================================
   09.09.2026 - REKLAM DONUSUM DUZELTMELERI
   ----------------------------------------------------------
   Google Ads son 7 gun: 74 tiklama, 6 iletisim (%8,11),
   rezervasyon formu 0. Tiklamanin %93,8i cep telefonu.
   Asagidaki uc duzeltme, reklamdan gelen ziyaretcinin
   iletisime gecmesini engelleyen dogrulanmis noktalari kapatiyor.
   ========================================================== */

/* 1) ILK EKRANDA YAZILI ILETISIM DUGMESI
      Reklam "WhatsApptan yazin, aninda fiyat alin" diyor ama ilk
      ekranda "WhatsApp" kelimesi hic gecmiyordu; iletisim yalniz
      sag alttaki iki YAZISIZ daireydi. Masaustunde kart eski
      hâlinde kaliyor, dugmeler yalniz telefonda cikiyor. */
.ay-iletisim{display:none}

@media (max-width:760px){
  .ay-iletisim{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-top:9px;
  }
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{
    display:flex; align-items:center; justify-content:center;
    min-height:52px;
    padding:12px 14px;
    border-radius:9px;
    font:inherit; font-size:1rem; font-weight:700;
    letter-spacing:.01em;
    text-decoration:none;
    transition:transform .12s ease;
  }
  .ay-iletisim .ay-wa{
    background:linear-gradient(180deg,#2FD86F 0%,#1EB955 100%);
    color:#06331A;
    box-shadow:0 6px 16px rgba(30,185,85,.34);
  }
  .ay-iletisim .ay-ara{
    background:#FFFFFF;
    color:#1F2329;
    border:1px solid rgba(20,26,38,.16);
    box-shadow:0 4px 12px rgba(20,26,38,.10);
    white-space:nowrap;
  }
  .ay-iletisim .ay-wa:active,
  .ay-iletisim .ay-ara:active{transform:scale(.985)}
}

/* 2) VITRIN ZIPLAMASI
      .ay-vitrin[hidden] iken bile display:block uygulaniyordu:
      bos kutu ciziliyor, JS ~200 px kart sokunca sayfa kayiyordu. */
.ay-vitrin[hidden]{display:none!important}

/* 3) iOS FORM YAKINLASTIRMA TUZAGI
      16 px altindaki alanlara iPhone dokununca sayfayi zumluyor
      ve geri cikmiyor; kullanici rezervasyon formunda sikisiyordu. */
.ralan input,
.ralan select,
.ralan textarea,
.rtel select,
.rtel input{font-size:16px}
/* 09.09.2026 ek - iletisim dugmelerinin olcusu.
   Ilk hâlde yazi iki satira dusuyordu, sonra da sari dugmeden
   5 px kisa ve 0,64 px kucuk yaziyla duruyordu: satir ritmi bozuktu.
   Artik ucu de ayni yukseklik (57 px) ve ayni yazi olcusunde.
   Yazi ekrana gore kuculuyor; 360 px altinda alt alta geciyor. */
@media (max-width:760px){
  .ay-iletisim{
    gap:9px;
    margin-top:10px;
  }
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{
    min-height:57px;
    font-size:clamp(.9rem,4.3vw,1.04rem);
    letter-spacing:normal;
    border-radius:9px;
  }
  .ay-iletisim .ay-wa{padding:12px 10px}
  .ay-iletisim .ay-ara{padding:12px 14px}
}

/* cok dar telefonlarda yan yana sigmiyor - alt alta gecsin */
@media (max-width:359px){
  .ay-iletisim{grid-template-columns:1fr}
}
/* ==========================================================
   09.09.2026 - ORTA BOY TELEFONLARDA ILK EKRANA SIGDIRMA
   ----------------------------------------------------------
   Sitenin kendi kisa-ekran kademeleri 700 ve 620 pxde basliyor.
   Ama tarayici cubuklariyla birlikte cogu telefonun gorunen
   yuksekligi 700-820 arasinda kaliyor (ornek: 412x747 Samsung).
   Bugun eklenen iletisim dugmeleri 67 px yer kapladigi icin
   fiyat notu kadrajin disinda kaliyordu (45 px tasma).
   Bu kademe o 45 pxi geri kazaniyor; dokunma alanlari 50 px,
   yazilar okunur kaliyor. 820 pxin ustunde hic devreye girmez.
   ========================================================== */
@media (max-width:760px) and (max-height:820px){
  .ay-vitrin{margin-bottom:9px}
  .ay-bul{padding:13px 12px; font-size:.99rem; margin-top:9px}
  .ay-iletisim{margin-top:8px}
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{
    min-height:50px;
    font-size:clamp(.86rem,4.1vw,.99rem);
  }
  .ay-odeme{margin-top:9px; gap:5px}
  .ay-odeme b{padding:6px 12px; font-size:.66rem}
  .ay-odeme span{font-size:.6rem}
}
/* SON 11 PX - fiyat notu hâlâ 11 px tasiyordu. Not kutusunun
   dolgusu ve satir araligi ile blok aralari kisildi; yazi
   puntolari AYNI kaldi, okunurluk dusmedi. */
@media (max-width:760px) and (max-height:820px){
  .ay-vitrin{margin-bottom:6px}
  .ay-bul{margin-top:7px}
  .ay-iletisim{margin-top:6px}
  .ay-odeme{margin-top:7px}
  .ay-not{padding:9px 13px; row-gap:3px; margin-top:1px}
  .ay-not b{line-height:1.22}
}
/* --- 760 px alti: bir kademe daha kis ---
   Vitrin fotografi 16:10 yerine 16:9 (yaklasik 13 px),
   dugmeler 46 px, not kutusunun dolgusu 8 px.
   Yazi puntolarina dokunulmadi. */
@media (max-width:760px) and (max-height:760px){
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 9}
  .ay-vitrin{margin-bottom:5px}
  .ay-bul{padding:11px 12px}
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{min-height:46px}
  .ay-odeme{gap:4px}
  .ay-not{padding:8px 12px}
}
/* --- 680 px alti: kucuk telefonlar (ornek 375x640) ---
   Vitrin karti daraliyor, dugmeler 42 px, not kutusu
   sikisiyor. Dokunma alani 42 pxin altina inmiyor. */
@media (max-width:760px) and (max-height:680px){
  .ay-vitrin .ars-kart{width:min(172px, 48vw)}
  .ay-vitrin{margin-bottom:3px}
  .ay-bul{padding:9px 12px; font-size:.95rem; margin-top:5px}
  .ay-iletisim{margin-top:5px}
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{min-height:42px; font-size:clamp(.82rem,3.9vw,.93rem)}
  .ay-odeme{margin-top:5px; gap:3px}
  .ay-odeme-bas{font-size:.5rem}
  .ay-not{padding:6px 11px; row-gap:2px; margin-top:0}
  .ay-not b{font-size:.78rem; line-height:1.2}
  .ay-not span{font-size:.7rem}
}
/* --- 650 px alti: son kademe ---
   Kart biraz daha daraliyor ve "DOLANDIRICILIGA KARSI GUVENCE"
   sus basligi gizleniyor. Asil mesaj olan altin "ON ODEME YOK"
   rozeti ve "ODEME OFISTE VEYA ARAC TESLIMINDE" satiri KALIYOR. */
@media (max-width:760px) and (max-height:650px){
  .ay-vitrin .ars-kart{width:min(160px, 46vw)}
  .ay-vitrin{margin-bottom:2px}
  .ay-odeme-bas{display:none}
  .ay-not b{line-height:1.16}
}

/* ==========================================================
   13.09.2026 - REKLAMDAN GELENE DIKKAT DAGITANLARI GIZLE
   olcum.js reklam ziyaretcisinde <html class="kaynak-google-ads"> koyuyor.
   Tiklama basina ~29 TL odenen ziyaretci Catar zeytinyagi bandina,
   liste arasindaki Catar seritlerine ve Instagram dugmesine gitmesin.
   Normal ziyaretcide hepsi yerinde duruyor.
   ========================================================== */
.kaynak-google-ads .rek,
.kaynak-google-ads .lrek,
.kaynak-google-ads .fab-ig{display:none!important}

/* 13.09.2026 - rezervasyon formunda WhatsApp kacis baglantisi */
.rez-wa{display:block;margin:10px 0 0;padding:12px 10px;border-radius:9px;background:#E9F9EF;border:1px solid #BFE8CD;color:#0B6B32;font-weight:700;font-size:.92rem;line-height:1.3;text-align:center;text-decoration:none}
.rez-wa:active{transform:scale(.99)}
.rez-izin{margin-top:6px}
/* 13.09.2026 ek - liste icindeki Catar seritleri tablo gorunumunde
   ".ilan-tablo tbody tr.lrek" kuralina yeniliyordu (daha ozgul). */
html.kaynak-google-ads .ilan-tablo tbody tr.lrek,
html.kaynak-google-ads #ilanAlan .lrek{display:none!important}

/* ==========================================================
   13.09.2026 - TELEFONDA FIYAT NOTU KALKTI, ILK EKRAN YENIDEN OTURDU
   ----------------------------------------------------------
   Kullanici istedi: "Fiyatlar aylik kiralamada gecerli..." notu
   telefonda kaldirildi. Olculdugunde 6 telefon olcusunun 6'sinda
   da sag alttaki yuvarlak WhatsApp/telefon dugmeleri notun ustune
   biniyordu. Not MASAUSTUNDE duruyor (orada ayrica istenmisti).

   09.09'daki kisa-ekran kademeleri (820/760/680/650) bu notu
   kadraja sigdirmak icin her seyi kisiyordu. Not kalkinca 70-135 px
   yer acildi. Asagidaki degerler o yeri geri dagitiyor; her biri
   8 olcude (360x640 - 412x915) OLCULEREK secildi. Iki kural var:

   1) "Hemen Ara" dugmesinin alti, sag alttaki telefon dugmesinin
      ustunden en az ~12 px yukarida kalmali. Telefon dugmesi kalp
      gibi atip %15 buyuyor; daha az payda atarken degiyor.
      Dugmelerin ALTINDAKI ortali yazilar dar oldugu icin yuvarlak
      dugmelere yetismiyor - acilan yer o yuzden oraya veriliyor.
   2) Icerik alt kenara tasmamali, uzun ekranda da altta koca bir
      bos bant kalmamali: uzun telefonda araclar buyuyor.
   ========================================================== */
@media (max-width:760px){
  .ay-not{display:none!important}
}

/* --- 820 px alti --- */
@media (max-width:760px) and (max-height:820px){
  .ay-vitrin{margin-bottom:10px}
  .ay-bul{padding:14px 12px; font-size:1.02rem; margin-top:10px}
  .ay-iletisim{margin-top:10px}
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{min-height:54px; font-size:clamp(.9rem,4.3vw,1.02rem)}
  .ay-odeme{margin-top:14px; gap:7px}
  .ay-odeme b{padding:7px 14px; font-size:.7rem}
  .ay-odeme span{font-size:.63rem}
}
/* --- 760 px alti (ornek 412x733, 390x700) ---
   Fotograf 16:9 yerine yine 16:10. Dugme sirasi telefon dugmesinden
   uzak dursun diye ustteki bosluklar dar, acilan yer asagida. */
@media (max-width:760px) and (max-height:760px){
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 10}
  .ay-vitrin{margin-bottom:6px}
  .ay-bul{padding:12px 12px; margin-top:7px}
  .ay-iletisim{margin-top:7px}
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{min-height:50px}
  .ay-odeme{margin-top:26px; gap:6px}
}
/* --- 680 px alti (ornek 375x667) --- */
@media (max-width:760px) and (max-height:680px){
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 9}
  .ay-vitrin .ars-kart{width:min(176px, 49vw)}
  .ay-vitrin{margin-bottom:4px}
  .ay-bul{padding:10px 12px; font-size:.95rem; margin-top:4px}
  .ay-iletisim{margin-top:4px}
  .ay-iletisim .ay-wa,
  .ay-iletisim .ay-ara{min-height:44px; font-size:clamp(.86rem,4.1vw,.97rem)}
  .ay-odeme{margin-top:18px; gap:5px}
  .ay-odeme-bas{font-size:.55rem}
}
/* --- 650 px alti (ornek 360x640) ---
   "DOLANDIRICILIGA KARSI GUVENCE" basligi GERI GELDI; not sigsin
   diye gizlenmisti, artik yeri var. */
@media (max-width:760px) and (max-height:650px){
  .ay-vitrin .ars-kart{width:min(158px, 44vw)}
  .ay-vitrin{margin-bottom:3px}
  .ay-bul{padding:8px 12px; margin-top:3px}
  .ay-iletisim{margin-top:3px}
  .ay-odeme-bas{display:flex}
}
/* --- 780 px ustu: araclar buyusun --- */
@media (max-width:760px) and (min-height:780px){
  .ay-vitrin .ars-foto img{aspect-ratio:4 / 3}
  .ay-vitrin .ars-kart{width:min(220px, 56vw)}
}
/* --- 850 px ustu (ornek 430x860) --- */
@media (max-width:760px) and (min-height:850px){
  .ay-vitrin .ars-kart{width:min(240px, 58vw)}
  .ay-vitrin{margin-bottom:14px}
  .ay-bul{padding:16px 12px; margin-top:14px}
  .ay-iletisim{margin-top:12px}
  .ay-odeme{margin-top:22px; gap:8px}
}
/* --- 900 px ustu (ornek 412x915) --- */
@media (max-width:760px) and (min-height:900px){
  .ay-vitrin .ars-kart{width:min(256px, 62vw)}
  .ay-odeme{margin-top:30px}
}

/* ==========================================================
   13.09.2026 - "ARACLARIN TUMUNU GOR" DUGMESI YENILENDI
   ----------------------------------------------------------
   Duz sari kutu yerine: derinlikli altin, ust kenarda isik
   cizgisi, arada bir uzerinden gecen parilti ve yazinin
   yaninda koyu daire icinde ok. Uc kopyasi da ayni gorunur:
   ilk ekran (.ay-bul), one cikan araclar (.ars-hepsi),
   benzer ilanlar (.benzer-hepsi).

   YUKSEKLIK DEGISMEDI: dolgu/kenar eklenmedi, ok dairesi
   eksi dikey payla satir yuksekligini buyutmuyor. Telefonda
   "Hemen Ara" ile sag alttaki telefon dugmesi arasindaki pay
   bu yukseklige gore ayarli (bkz. yukaridaki kademeler).

   Parilti yalniz transform ile kayiyor (ekran kartinda,
   cizimi yormaz); hareket azaltma acik cihazda duruyor.
   ========================================================== */
.ay-bul,
.ars-hepsi,
.benzer-hepsi{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(180deg,#FFD84D 0%,#FFC21C 46%,#F2A40C 100%);
  color:#1A1405;
  font-weight:800;
  letter-spacing:.015em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 0 rgba(168,104,0,.26),
    inset 0 0 0 1px rgba(190,120,0,.22),
    0 10px 22px -8px rgba(226,150,8,.62),
    0 2px 5px rgba(20,26,38,.12);
  text-shadow:0 1px 0 rgba(255,236,170,.55);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

/* uzerinden gecen parilti */
.ay-bul::before,
.ars-hepsi::before,
.benzer-hepsi::before{
  content:"";
  position:absolute;
  top:-20%; bottom:-20%; left:0;
  width:34%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 30%,
    rgba(255,255,255,.72) 50%,
    rgba(255,255,255,.18) 70%,
    rgba(255,255,255,0) 100%);
  transform:translateX(-140%) skewX(-20deg);
  animation:tumuParilti 4.6s cubic-bezier(.45,.05,.3,1) 1.4s infinite;
}
@keyframes tumuParilti{
  0%, 64% {transform:translateX(-140%) skewX(-20deg)}
  100%    {transform:translateX(420%) skewX(-20deg)}
}

/* yazinin yaninda koyu daire icinde ok */
.ay-bul::after,
.ars-hepsi::after,
.benzer-hepsi::after{
  content:"";
  display:inline-block;
  width:1.5em; height:1.5em;
  margin:-.4em 0 -.4em .6em;
  vertical-align:middle;
  border-radius:50%;
  background:#1A1405 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12h11.5M12.5 6.5 18 12l-5.5 5.5' fill='none' stroke='%23FFC61E' stroke-width='2.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow:0 2px 6px rgba(26,20,5,.28);
  position:relative; top:-.06em;
  animation:tumuOk 4.6s ease-in-out 1.4s infinite;
}
@keyframes tumuOk{
  0%, 66%, 100% {transform:translateX(0)}
  76%           {transform:translateX(4px)}
  86%           {transform:translateX(0)}
}
/* Arapca sagdan sola: ok da sola baksin */
html[dir="rtl"] .ay-bul::after,
html[dir="rtl"] .ars-hepsi::after,
html[dir="rtl"] .benzer-hepsi::after{
  margin:-.4em .6em -.4em 0;
  transform:scaleX(-1);
  animation:none;
}

@media (hover:hover){
  .ay-bul:hover,
  .ars-hepsi:hover,
  .benzer-hepsi:hover{
    transform:translateY(-2px);
    filter:brightness(1.04) saturate(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.66),
      inset 0 -2px 0 rgba(168,104,0,.26),
      inset 0 0 0 1px rgba(190,120,0,.22),
      0 16px 30px -10px rgba(226,150,8,.72),
      0 3px 8px rgba(20,26,38,.14);
  }
}
.ay-bul:active,
.ars-hepsi:active,
.benzer-hepsi:active{
  transform:translateY(1px) scale(.99);
  filter:brightness(.97);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(168,104,0,.26),
    inset 0 0 0 1px rgba(190,120,0,.24),
    0 5px 12px -6px rgba(226,150,8,.6),
    0 1px 3px rgba(20,26,38,.12);
}

@media (prefers-reduced-motion:reduce){
  .ay-bul::before,
  .ars-hepsi::before,
  .benzer-hepsi::before{animation:none; display:none}
  .ay-bul::after,
  .ars-hepsi::after,
  .benzer-hepsi::after{animation:none}
}

/* ==========================================================
   13.09.2026 - TELEFONDA TABELALAR YUKARI ALINDI
   ----------------------------------------------------------
   Tabelalarin alti ile arac kartlari arasinda yalniz 15-17 px
   vardi; cerceve isigi ve kart golgesiyle "ic ice" duruyordu.
   Fotograf ve ustundeki isik katmani (.ay-isik) BIRLIKTE
   yukari kaydirildi — ikisi ayri kayarsa isik kutudan tasar.
   Tabelanin ustundeki tavan payi 14 vw'den ~8 vw'ye indi,
   askilar hala gorunuyor. Kartlarin yeri degismedi, alttaki
   dugmelerin payi da ayni kaldi. Masaustune dokunulmadi.
   ========================================================== */
@media (max-width:760px){
  :root{--ay-tabela-kay:6vw}
  .anayuz::before{
    background-position:center calc(-1 * var(--ay-tabela-kay));
  }
  .ay-isik i{
    top:calc(var(--ay-bant) + env(safe-area-inset-top, 0px) + var(--my) - var(--ay-tabela-kay));
  }
}

/* ==========================================================
   13.09.2026 - TELEFON VITRINI ORTALANDI
   ----------------------------------------------------------
   Kartlar soldan 26 px'te basliyor ama ikinci kart her ekranda
   sagdan tasiyordu (360'ta 18 px, 375'te 39 px, uzun ekranda
   100 px+). Alttaki sari dugme ise iki yandan 26 px ortada;
   ilk ekran yamuk duruyordu.

   Artik iki kart TAM sigiyor ve sari dugmenin kenarlarina
   hizali: genislik = (seridin ic genisligi - aradaki bosluk)/2.
   Yuzde, flex seridin ic kutusuna gore cozuluyor; ekran
   olcusunden bagimsiz. Kaydirma adimi (anayuz.js adim()) kart
   genisligini olctugu icin kendiliginden uyuyor; son adimda
   son iki kart tam gorunuyor (DamlaSonHizali).

   Kart daraldigi icin fotograf orani kademeyle ayarlandi:
   kart yuksekligi eskisiyle ayni kaldi, "Hemen Ara" ile telefon
   dugmesi arasindaki pay bozulmadi. Ad tek satir; en uzun
   birkac ad "..." ile kisaliyor.
   ========================================================== */
@media (max-width:760px){
  .ay-vitrin{margin-left:-26px; margin-right:-26px}
  .ay-vitrin .ars-yol{
    gap:10px;
    padding-left:26px; padding-right:26px;
    scroll-padding-inline:26px;
  }
  .ay-vitrin .ars-kart{width:calc((100% - 10px) / 2)}
  .ay-vitrin .ars-foto img{aspect-ratio:4 / 3}
  .ay-vitrin .ars-alt{padding:8px 9px 9px}
  .ay-vitrin .ars-ad{
    display:block;
    -webkit-line-clamp:unset;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    min-height:0;
    font-size:clamp(.8rem, 3.5vw, .9rem);
    letter-spacing:-.005em;
  }
  .ay-vitrin .ars-fiyat{padding:5px 6px}
}
@media (max-width:760px) and (max-height:680px){
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 10}
}
@media (max-width:760px) and (max-height:650px){
  .ay-vitrin .ars-foto img{aspect-ratio:16 / 9}
}
@media (max-width:760px) and (min-height:780px){
  .ay-vitrin .ars-foto img{aspect-ratio:1 / 1}
}
/* 700-720 px boylu telefonda (390x700) 4:3 foto "Hemen Ara"yi
   telefon dugmesine 5,6 px'e kadar yaklastirdi; 3:2 ile pay 11+ */
@media (max-width:760px) and (min-height:681px) and (max-height:720px){
  .ay-vitrin .ars-foto img{aspect-ratio:3 / 2}
}
/* Yabanci dilde adin yanina "mieten / rental" ekleniyor; tek
   satirlik vitrin kartinda hepsi "..." ile kesiliyordu. Vitrinde
   gizli; alttaki serit ve arac listesinde duruyor. */
@media (max-width:760px){
  html[data-dil] .ay-vitrin .ars-kirala{display:none}
}
/* Uzun ekranda kart daralinca altta bos yer buyudu (412x915'te
   121 -> 142 px); guvence yazilari biraz asagi insin. Dugmelere
   dokunmuyor, telefon dugmesi payi degismiyor. */
@media (max-width:760px) and (min-height:780px){
  .ay-odeme{padding-top:6px}
}
@media (max-width:760px) and (min-height:900px){
  .ay-odeme{padding-top:20px}
}