/* ==========================================================================
   HotelNerede - Hesap ve İşletme Paneli

   Bu dosya elle yazılmıştır, Tailwind derlemesine girmez. Sebebi şu: panel
   ekranları projeye sonradan eklendi ve tailwind.css depoya derlenmiş halde
   giriyor. Yeni yardımcı sınıflar kullanmak, derlemeyi yeniden çalıştırmayı
   zorunlu kılardı; bu dosya sayfaya $ekStiller ile eklenerek o bağımlılık
   ortadan kalkıyor.

   Renkler tailwind.config.js'teki paletle birebir aynıdır:
     primary #0692CF   koyu #0578ab   başarı #00A25D   yıldız #FFB400
     başlık  #333333   metin #777777  soluk #B1B1B1    sayfa  #F9F9F9
   ========================================================================== */

.hp-sayfa {
    background: #F9F9F9;
    min-height: 60vh;
}

.hp-kabuk {
    max-width: 1280px;
    margin: 0 auto;
    padding: 34px 20px 64px;
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 27px;
    align-items: start;
}

/* ---------- Sayfa başlığı ---------- */
.hp-ust {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.hp-ust h1 {
    font-size: 24px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 4px;
}

.hp-ust p {
    font-size: 13px;
    color: #777777;
    margin: 0;
}

.hp-yol {
    font-size: 12px;
    color: #B1B1B1;
    margin-bottom: 6px;
}

.hp-yol a { color: #0692CF; }
.hp-yol a:hover { text-decoration: underline; }

/* ==========================================================================
   Kenar menü
   ========================================================================== */
.hp-kenar {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
    overflow: hidden;
    position: sticky;
    top: 90px;
}

.hp-kimlik {
    padding: 22px 20px;
    display: flex;
    align-items: center;
    gap: 13px;
    background: linear-gradient(135deg, #0692CF, #0578ab);
    color: #FFFFFF;
}

.hp-kimlik__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    flex-shrink: 0;
}

.hp-kimlik__bilgi { min-width: 0; }

.hp-kimlik__bilgi strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-kimlik__bilgi span {
    display: block;
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-menu { padding: 10px 0; }

.hp-menu__grup {
    padding: 12px 20px 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #B1B1B1;
}

.hp-menu a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 20px;
    font-size: 14px;
    color: #555555;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}

.hp-menu a i {
    width: 17px;
    text-align: center;
    font-size: 14px;
    color: #B1B1B1;
    transition: color .15s;
}

.hp-menu a:hover {
    background: #F4FAFD;
    color: #0692CF;
}

.hp-menu a:hover i { color: #0692CF; }

.hp-menu a.is-aktif {
    background: #F4FAFD;
    color: #0692CF;
    font-weight: 700;
    border-left-color: #0692CF;
}

.hp-menu a.is-aktif i { color: #0692CF; }

.hp-menu a em {
    margin-left: auto;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    background: #0692CF;
    color: #FFFFFF;
    border-radius: 9px;
    padding: 1px 7px;
}

.hp-cikis {
    border-top: 1px solid #ececec;
    padding: 12px 20px;
}

.hp-cikis button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-size: 14px;
    color: #D9000D;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.hp-cikis button:hover { text-decoration: underline; }

/* ==========================================================================
   İçerik kartları
   ========================================================================== */
.hp-icerik {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.hp-kart {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
    padding: 24px 26px;
}

.hp-kart__bas {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ececec;
}

.hp-kart__bas i {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #F4FAFD;
    color: #0692CF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.hp-kart__bas h2 {
    font-size: 16px;
    font-weight: 800;
    color: #333333;
    margin: 0;
}

.hp-kart__bas p {
    font-size: 12px;
    color: #777777;
    margin: 2px 0 0;
}

.hp-kart__bas .hp-kart__sag { margin-left: auto; }

/* ---------- Özet kutuları ---------- */
.hp-ozet {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.hp-ozet__kutu {
    background: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hp-ozet__ikon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #F4FAFD;
    color: #0692CF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.hp-ozet__kutu strong {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #333333;
    line-height: 1.2;
}

.hp-ozet__kutu span {
    font-size: 12px;
    color: #777777;
}

/* ==========================================================================
   Formlar
   ========================================================================== */
.hp-form { display: flex; flex-direction: column; gap: 17px; }

.hp-ikili {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.hp-uclu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
}

.hp-alan { display: block; position: relative; }

.hp-alan > span {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 7px;
}

.hp-alan > span em {
    font-style: normal;
    font-weight: 400;
    color: #B1B1B1;
}

.hp-alan input,
.hp-alan select,
.hp-alan textarea {
    width: 100%;
    height: 46px;
    border: 1px solid #E4E7EA;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #333333;
    background: #FFFFFF;
    transition: border-color .15s, box-shadow .15s;
}

.hp-alan textarea {
    height: auto;
    min-height: 104px;
    padding: 12px 14px;
    line-height: 1.55;
    resize: vertical;
}

.hp-alan select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px;
    padding-right: 34px;
}

.hp-alan input:focus,
.hp-alan select:focus,
.hp-alan textarea:focus {
    outline: none;
    border-color: #0692CF;
    box-shadow: 0 0 0 3px rgba(6, 146, 207, .12);
}

.hp-alan input:disabled {
    background: #F4F5F6;
    color: #999999;
    cursor: not-allowed;
}

.hp-alan.is-hata input,
.hp-alan.is-hata select,
.hp-alan.is-hata textarea { border-color: #D9000D; }

.hp-alan b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #D9000D;
    margin-top: 6px;
}

.hp-alan small {
    display: block;
    font-size: 12px;
    color: #B1B1B1;
    margin-top: 6px;
}

/* Şifre göster/gizle */
.hp-goz {
    position: absolute;
    right: 6px;
    top: 27px;
    width: 36px;
    height: 40px;
    border: 0;
    background: none;
    color: #B1B1B1;
    cursor: pointer;
    font-size: 14px;
}

.hp-goz:hover { color: #0692CF; }
.hp-alan:has(.hp-goz) input { padding-right: 42px; }

/* Onay kutusu */
.hp-onay {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #555555;
    cursor: pointer;
    line-height: 1.5;
}

.hp-onay input { display: none; }

.hp-onay__kutu {
    width: 19px;
    height: 19px;
    border: 1px solid #D5D9DD;
    border-radius: 5px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    transition: background .15s, border-color .15s;
}

.hp-onay__kutu i {
    font-size: 10px;
    color: #FFFFFF;
    opacity: 0;
    transition: opacity .15s;
}

.hp-onay input:checked + .hp-onay__kutu {
    background: #0692CF;
    border-color: #0692CF;
}

.hp-onay input:checked + .hp-onay__kutu i { opacity: 1; }

/* Radyo kartları (hesap türü seçimi) */
.hp-secim {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.hp-secim label {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 15px 16px;
    border: 1.5px solid #E4E7EA;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.hp-secim label:hover { border-color: #9FD3EC; }

.hp-secim input { display: none; }

.hp-secim i {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #F4F6F8;
    color: #777777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.hp-secim strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #333333;
    margin-bottom: 2px;
}

.hp-secim small {
    display: block;
    font-size: 12px;
    color: #777777;
    line-height: 1.45;
}

.hp-secim input:checked + i { background: #0692CF; color: #FFFFFF; }
.hp-secim label:has(input:checked) { border-color: #0692CF; background: #F7FBFE; }

/* ---------- Düğmeler ---------- */
.hp-eylem {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.hp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    padding: 0 24px;
    border: 0;
    border-radius: 8px;
    background: #0692CF;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.hp-btn:hover { background: #0578ab; color: #FFFFFF; }

.hp-btn--hayalet {
    background: #FFFFFF;
    color: #555555;
    border: 1px solid #E4E7EA;
}

.hp-btn--hayalet:hover { background: #F4F6F8; color: #333333; }

.hp-btn--tam { width: 100%; }

/* ==========================================================================
   Durum bildirimleri
   ========================================================================== */
.hp-uyari {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    border-radius: 10px;
    border: 1px solid #FFE2A8;
    background: #FFF8E9;
    font-size: 13px;
    color: #6B5518;
    line-height: 1.55;
}

.hp-uyari > i { font-size: 16px; color: #E0A008; margin-top: 1px; flex-shrink: 0; }
.hp-uyari strong { display: block; font-size: 14px; color: #4E3D0C; margin-bottom: 3px; }
.hp-uyari a { color: #0692CF; font-weight: 700; text-decoration: underline; }
.hp-uyari form { margin-top: 8px; }

.hp-uyari--basari {
    border-color: #B7E6CE;
    background: #EFFAF4;
    color: #14603C;
}
.hp-uyari--basari > i { color: #00A25D; }
.hp-uyari--basari strong { color: #0C4C2E; }

.hp-uyari--hata {
    border-color: #F6C6C9;
    background: #FDF0F1;
    color: #7A1B21;
}
.hp-uyari--hata > i { color: #D9000D; }
.hp-uyari--hata strong { color: #6A161B; }

.hp-uyari--bilgi {
    border-color: #BFE3F4;
    background: #F1F9FD;
    color: #14556F;
}
.hp-uyari--bilgi > i { color: #0692CF; }
.hp-uyari--bilgi strong { color: #0E4358; }

/* Durum rozetleri */
.hp-rozet {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 25px;
    padding: 0 11px;
    border-radius: 13px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.hp-rozet i { font-size: 9px; }

.hp-rozet--bekliyor { background: #FFF3DC; color: #A9740A; }
.hp-rozet--onayli   { background: #E4F7EE; color: #00794A; }
.hp-rozet--red      { background: #FDECED; color: #C0111C; }
.hp-rozet--askida   { background: #EFF1F3; color: #66727C; }
.hp-rozet--taslak   { background: #EFF1F3; color: #66727C; }
.hp-rozet--pasif    { background: #EFF1F3; color: #66727C; }

/* ==========================================================================
   Tablo ve listeler
   ========================================================================== */
.hp-tablo-sar { overflow-x: auto; }

.hp-tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    min-width: 620px;
}

.hp-tablo th {
    text-align: left;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #B1B1B1;
    padding: 0 14px 11px;
    border-bottom: 1px solid #ececec;
    white-space: nowrap;
}

.hp-tablo td {
    padding: 14px;
    border-bottom: 1px solid #F2F4F5;
    color: #555555;
    vertical-align: middle;
}

.hp-tablo tr:last-child td { border-bottom: 0; }
.hp-tablo tbody tr:hover { background: #FAFCFD; }

.hp-tablo strong { color: #333333; font-weight: 700; }
.hp-tablo .hp-soluk { display: block; font-size: 12px; color: #B1B1B1; margin-top: 2px; }

.hp-tablo__gorsel {
    width: 54px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    background: #F0F2F4;
}

/* Bilgi satırları (salt okunur profil özeti) */
.hp-satirlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 26px; }

.hp-satir {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #F2F4F5;
    font-size: 13px;
}

.hp-satir span { color: #777777; flex-shrink: 0; }
.hp-satir strong { color: #333333; font-weight: 700; text-align: right; word-break: break-word; }

/* Yetkili olunan bölüm etiketleri */
.hp-etiketler { display: flex; flex-wrap: wrap; gap: 8px; }

.hp-etiket {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 13px;
    border-radius: 8px;
    background: #F4FAFD;
    border: 1px solid #D6EDF8;
    color: #0578ab;
    font-size: 13px;
    font-weight: 700;
}

.hp-etiket i { font-size: 11px; }

/* Boş durum */
.hp-bos {
    text-align: center;
    padding: 44px 20px;
    color: #777777;
}

/* Yalnız DOĞRUDAN çocuk: kutunun süs ikonu bu. Torun seçicisi
   kullanılırsa boş durum içindeki düğmenin ikonu da 34px'e büyüyüp
   blok hâline geliyor ve yazının üstüne biniyordu. */
.hp-bos > i {
    display: block;
    font-size: 34px;
    color: #DDE2E6;
    margin-bottom: 14px;
}

.hp-bos > strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #333333;
    margin-bottom: 5px;
}

.hp-bos > p { font-size: 13px; margin: 0 0 16px; }

/* ==========================================================================
   Profil görseli (avatar)

   Üç biçim aynı çerçeveyi paylaşır: yüklenen görsel, hazır ikon ya da baş
   harf. Ortak sınıf `.hp-avatar`; kenar menüsü ve üst menüdeki kutular da
   aynı kuralları devralır ki avatar her yerde aynı görünsün.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Paylaşılan avatar bileşeni

   `hn-avatar` her avatarın üzerindedir; onu yerleştiren kabın sınıfı
   (hp-hesap-btn__harf, hp-kimlik__avatar, hp-avatar--buyuk ...) yalnız ölçü
   ve yerleşimden sorumludur. Renk ve kırpma buraya aittir.

   İkon rengi bilerek `> i` üzerinden verilir, kabın kendisine değil: kaplar
   baş harf için kendi metin rengini kuruyor ("hp-hesap-btn__harf { color }")
   ve dosyada daha sonra tanımlandıkları için kaba yazılan her rengi
   eziyorlardı — ikon mavi zeminde mavi kalıyor, yani görünmüyordu. Ayrı bir
   elemanı hedefleyince o yarış tümüyle ortadan kalkar; yeni bir yere avatar
   koyduğunda da bir daha bu ayarı yapman gerekmez.

   Simge ölçüsü `em` ile verilir. Kaplar baş harfin punto ayarını zaten kutu
   boyuyla orantılı seçiyor (28px kutu/13px, 46px/19px, 96px/34px), dolayısıyla
   ikon her boyda kendiliğinden orantılı çıkar.
   -------------------------------------------------------------------------- */
.hn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;          /* kare olmayan görsel çerçeveden taşmasın */
    flex-shrink: 0;
    line-height: 1;
}

.hn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* İki sınıflı seçici: kabın "…__harf i" gibi kuralları özgüllükte geçilsin */
.hn-avatar.hn-avatar--ikon > i { color: #FFFFFF; font-size: .95em; opacity: 1; }

/* Baş harf çerçevesinin kendi zemini yoksa yumuşak bir dolgu kalsın */
.hp-avatar {
    background: rgba(255, 255, 255, .22);
    color: #FFFFFF;
    font-weight: 800;
}

/* ---------- Profil formundaki alan ---------- */
.hp-avatar-alan {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ececec;
}

.hp-avatar-onizleme { flex-shrink: 0; }

.hp-avatar--buyuk {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    font-size: 34px;
    background: linear-gradient(135deg, #0692CF, #0578ab);
    box-shadow: 0 6px 20px rgba(6, 146, 207, .22);
}

.hp-avatar--buyuk i { font-size: 36px; }

.hp-avatar-secim { flex: 1; min-width: 0; }

.hp-avatar-secim__baslik {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #333333;
    margin-bottom: 10px;
}

.hp-avatar-dugmeler {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Dosya girişi görsel olarak gizlenir; etiketin kendisi düğmedir */
.hp-avatar-yukle { position: relative; overflow: hidden; cursor: pointer; }
.hp-avatar-yukle input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.hp-avatar-kaldir { font-size: 13px; }

.hp-avatar-ayrac {
    position: relative;
    text-align: center;
    margin: 18px 0 14px;
}

.hp-avatar-ayrac::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #ececec;
}

.hp-avatar-ayrac span {
    position: relative;
    background: #FFFFFF;
    padding: 0 12px;
    font-size: 12px;
    color: #B1B1B1;
}

/* ---------- Hazır ikon seçimi ---------- */
.hp-ikon-secim {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hp-ikon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.hp-ikon input { display: none; }

.hp-ikon__kutu {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 19px;
    border: 3px solid transparent;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.hp-ikon:hover .hp-ikon__kutu { transform: translateY(-2px); }

.hp-ikon input:checked + .hp-ikon__kutu {
    border-color: #101828;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.hp-ikon small { font-size: 11px; color: #777777; }
.hp-ikon input:checked ~ small { color: #333333; font-weight: 700; }

.hp-avatar-not { display: block; font-size: 12px; color: #B1B1B1; margin-top: 12px; }
.hp-avatar-hata { display: block; font-size: 12px; font-weight: 600; color: #D9000D; margin-top: 10px; }

@media (max-width: 639px) {
    .hp-avatar-alan { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
    .hp-avatar-secim { width: 100%; }
    .hp-avatar-dugmeler,
    .hp-ikon-secim { justify-content: center; }
}

/* ==========================================================================
   İlan yönetimi sekmeleri
   ========================================================================== */
.hp-sekme {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    background: #FFFFFF;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .06);
}

.hp-sekme a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: #666666;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.hp-sekme a i { font-size: 13px; color: #B1B1B1; transition: color .15s; }
.hp-sekme a:hover { background: #F4FAFD; color: #0692CF; }
.hp-sekme a:hover i { color: #0692CF; }
.hp-sekme a.is-aktif { background: #0692CF; color: #FFFFFF; }
.hp-sekme a.is-aktif i { color: #FFFFFF; }

/* ==========================================================================
   Sayfa adresi alanı

   Önek ("/villa/") ve yenileme düğmesi tek bir kutu gibi görünsün diye
   sarmalayıcı kenarlığı taşır, içteki input kenarlıksızdır.
   ========================================================================== */
/* Seçiciler `.hp-alan` ile başlatıldı — alan başlıklarını bloklayan
   `.hp-alan > span` kuralı (özgüllük 0,1,1) sade `.hp-url` kuralını
   (0,1,0) eziyordu: düzen flex yerine blok olarak çiziliyor, önek alta
   düşüyor ve input kırpılıyordu. Bu biçimiyle (0,2,0) sarmalayıcı hangi
   etiketle yazılırsa yazılsın doğru çalışır. */
.hp-alan .hp-url {
    display: flex;
    align-items: stretch;
    height: 46px;
    border: 1px solid #E4E7EA;
    border-radius: 8px;
    background: #FFFFFF;
    overflow: hidden;
    margin: 0;
    transition: border-color .15s, box-shadow .15s;
}

.hp-alan .hp-url:focus-within {
    border-color: #0692CF;
    box-shadow: 0 0 0 3px rgba(6, 146, 207, .12);
}

.hp-alan .hp-url__on {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 12px;
    background: #F4F6F8;
    border-right: 1px solid #ECEFF2;
    font-size: 13px;
    font-weight: 400;
    color: #98A2B3;
    white-space: nowrap;
    flex-shrink: 0;
}

.hp-alan .hp-url input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0 12px;
    font-size: 14px;
    color: #333333;
    background: none;
}

.hp-alan .hp-url input:focus { outline: none; box-shadow: none; border: 0; }

/* Salt okunur adres: elle yazılmadığı belli olsun ama okunaklı kalsın.
   Tümüyle soluk bir alan "devre dışı" izlenimi verir; oysa alan çalışıyor,
   yalnız değeri başka bir alandan türüyor. */
.hp-alan .hp-url.is-kilitli { background: #FAFBFC; }

.hp-alan .hp-url input[readonly] {
    color: #475467;
    cursor: default;
    background: none;
}

.hp-alan .hp-url.is-kilitli:focus-within {
    border-color: #E4E7EA;
    box-shadow: none;
}

.hp-alan .hp-url__kilit {
    width: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #ECEFF2;
    background: #F4F6F8;
    color: #98A2B3;
    font-size: 12px;
}

/* ==========================================================================
   Tanıtım metni editörü (Trumbowyg)

   Kütüphanenin kendi görünümü panelin diliyle uyuşmuyor; kenarlık, köşe
   yarıçapı ve odak halkası diğer form alanlarıyla eşitlenir ki editör
   sayfaya yamanmış gibi durmasın.
   ========================================================================== */
.hp-alan .trumbowyg-box {
    margin: 0;
    border: 1px solid #E4E7EA;
    border-radius: 8px;
    min-height: 240px;
    background: #FFFFFF;
    transition: border-color .15s, box-shadow .15s;
}

.hp-alan .trumbowyg-box:focus-within {
    border-color: #0692CF;
    box-shadow: 0 0 0 3px rgba(6, 146, 207, .12);
}

.hp-alan .trumbowyg-button-pane {
    background: #F8FAFC;
    border-bottom: 1px solid #ECEFF2;
    border-radius: 7px 7px 0 0;
}

/* Kütüphane araç çubuğunun altına ince bir çizgi çiziyor; iki çizgi olmasın */
.hp-alan .trumbowyg-button-pane::after { display: none; }

.hp-alan .trumbowyg-button-pane button { border-radius: 6px; }
.hp-alan .trumbowyg-button-pane button:hover,
.hp-alan .trumbowyg-button-pane button:focus { background: #E4F1F9; }
.hp-alan .trumbowyg-button-pane .trumbowyg-active { background: #D6EDF8; }

.hp-alan .trumbowyg-editor {
    min-height: 190px;
    padding: 14px;
    font-size: 14px;
    line-height: 1.65;
    color: #333333;
}

.hp-alan .trumbowyg-editor h3 { font-size: 17px; font-weight: 800; margin: 16px 0 8px; }
.hp-alan .trumbowyg-editor h4 { font-size: 15px; font-weight: 700; margin: 14px 0 7px; }
.hp-alan .trumbowyg-editor p  { margin: 0 0 10px; }
.hp-alan .trumbowyg-editor ul,
.hp-alan .trumbowyg-editor ol { margin: 0 0 10px; padding-left: 22px; }
.hp-alan .trumbowyg-editor li { margin-bottom: 4px; }

.hp-alan .trumbowyg-editor blockquote {
    margin: 0 0 10px;
    padding-left: 14px;
    border-left: 3px solid #D6EDF8;
    color: #666666;
}

/* ==========================================================================
   Özellik seçimi
   ========================================================================== */
.hp-ozellik-gruplar { display: flex; flex-direction: column; gap: 22px; }

.hp-ozellik-grup__baslik {
    font-size: 13px;
    font-weight: 800;
    color: #333333;
    margin: 0 0 11px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ececec;
}

.hp-ozellik-liste {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.hp-ozellik {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid #E4E7EA;
    border-radius: 9px;
    font-size: 13px;
    color: #555555;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.hp-ozellik input { display: none; }

.hp-ozellik__kutu {
    width: 17px;
    height: 17px;
    border: 1px solid #D5D9DD;
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
}

.hp-ozellik__kutu i { font-size: 9px; color: #FFFFFF; opacity: 0; transition: opacity .15s; }
.hp-ozellik > i { font-size: 13px; color: #B1B1B1; width: 16px; text-align: center; flex-shrink: 0; }
.hp-ozellik span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.hp-ozellik:hover { border-color: #9FD3EC; }
.hp-ozellik:has(input:checked) { border-color: #0692CF; background: #F7FBFE; color: #0578ab; }
.hp-ozellik input:checked + .hp-ozellik__kutu { background: #0692CF; border-color: #0692CF; }
.hp-ozellik input:checked + .hp-ozellik__kutu i { opacity: 1; }
.hp-ozellik:has(input:checked) > i { color: #0692CF; }

/* ==========================================================================
   Fotoğraf yükleme ve galeri
   ========================================================================== */
.hp-yukle { display: flex; flex-direction: column; gap: 15px; }

.hp-yukle__kutu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 30px 20px;
    border: 2px dashed #D6E3EC;
    border-radius: 12px;
    background: #FAFCFE;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}

.hp-yukle__kutu:hover { border-color: #0692CF; background: #F4FAFD; }
.hp-yukle__kutu i { font-size: 26px; color: #0692CF; margin-bottom: 4px; }
.hp-yukle__kutu strong { font-size: 14px; font-weight: 800; color: #333333; }
.hp-yukle__kutu small { font-size: 12px; color: #777777; }
.hp-yukle__kutu input[type="file"] { margin-top: 10px; font-size: 12px; max-width: 100%; }

.hp-galeri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 14px;
}

.hp-galeri__oge {
    position: relative;
    margin: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #F0F2F4;
    aspect-ratio: 4 / 3;
}

.hp-galeri__oge.is-kapak { border-color: #0692CF; }

.hp-galeri__oge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-galeri__rozet {
    position: absolute;
    top: 8px;
    left: 8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 7px;
    background: #0692CF;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 700;
}

.hp-galeri__rozet i { font-size: 9px; }

.hp-galeri__oge figcaption {
    position: absolute;
    right: 7px;
    bottom: 7px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity .15s;
}

.hp-galeri__oge:hover figcaption,
.hp-galeri__oge:focus-within figcaption { opacity: 1; }

.hp-galeri__oge figcaption form { margin: 0; }

.hp-galeri__oge figcaption button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .95);
    color: #555555;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
    transition: background .15s, color .15s;
}

.hp-galeri__oge figcaption button:hover { background: #0692CF; color: #FFFFFF; }
.hp-galeri__oge figcaption button.is-tehlike:hover { background: #D9000D; color: #FFFFFF; }

/* Dokunmatik ekranda hover yok; düğmeler hep görünür */
@media (hover: none) {
    .hp-galeri__oge figcaption { opacity: 1; }
}

/* Dört kutuluk özet (rezervasyon süzgeci) */
.hp-ozet--dortlu { grid-template-columns: repeat(4, minmax(0, 1fr)); }

a.hp-ozet__kutu { transition: border-color .15s, box-shadow .15s; border: 1px solid transparent; }
a.hp-ozet__kutu:hover { border-color: #9FD3EC; }
.hp-ozet__kutu.is-secili { border-color: #0692CF; box-shadow: inset 0 0 0 1px #0692CF; }

/* ==========================================================================
   Sayfa üstü tek seferlik mesaj
   ========================================================================== */
.hp-flas {
    position: fixed;
    left: 50%;
    top: 84px;
    transform: translateX(-50%);
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: min(460px, calc(100vw - 32px));
}

.hp-flas__oge {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 16px;
    border-radius: 9px;
    background: #FFFFFF;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .12);
    border-left: 4px solid #00A25D;
    font-size: 13px;
    color: #333333;
    animation: hpFlas .3s ease;
}

.hp-flas__oge i { color: #00A25D; font-size: 15px; margin-top: 1px; }
.hp-flas__oge--hata { border-left-color: #D9000D; }
.hp-flas__oge--hata i { color: #D9000D; }
.hp-flas__oge--uyari { border-left-color: #E0A008; }
.hp-flas__oge--uyari i { color: #E0A008; }

@keyframes hpFlas {
    from { opacity: 0; transform: translateY(-9px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Üst menüdeki hesap kutusu

   Giriş yapmış üye, "Giriş / Kayıt" düğmesinin yerinde bir açılır menü görür.
   Başlık şeffaf (hero üstünde) ya da beyaz (iç sayfa) olabildiği için düğme
   iki durumda da okunur kalacak şekilde ayrı ayrı boyanır.
   ========================================================================== */
.hp-hesap-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 14px 0 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 21px;
    background: rgba(255, 255, 255, .12);
    color: #FFFFFF;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.hp-hesap-btn:hover { background: rgba(255, 255, 255, .22); }

.hp-hesap-btn__harf {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #0692CF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

.hp-hesap-btn i { font-size: 11px; opacity: .8; }

/* İç sayfaların beyaz başlığında koyu varyant */
.site-header--inner .hp-hesap-btn,
.site-header.is-sticky .hp-hesap-btn {
    border-color: #E0E4E8;
    background: #FFFFFF;
    color: #333333;
}

.site-header--inner .hp-hesap-btn__harf,
.site-header.is-sticky .hp-hesap-btn__harf {
    background: #0692CF;
    color: #FFFFFF;
}

.site-header--inner .hp-hesap-btn:hover,
.site-header.is-sticky .hp-hesap-btn:hover { background: #F4F6F8; }

.hp-hesap-menu {
    width: 246px;
    padding: 0;
    overflow: hidden;
}

.hp-hesap-menu__bas {
    padding: 15px 17px;
    border-bottom: 1px solid #ececec;
    background: #F9FBFC;
}

.hp-hesap-menu__bas strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-hesap-menu__bas span {
    display: block;
    font-size: 12px;
    color: #B1B1B1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hp-hesap-menu > a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 17px;
    font-size: 13.5px;
    color: #555555;
    transition: background .15s, color .15s;
}

.hp-hesap-menu > a i { width: 16px; text-align: center; color: #B1B1B1; font-size: 13px; }
.hp-hesap-menu > a:hover { background: #F4FAFD; color: #0692CF; }
.hp-hesap-menu > a:hover i { color: #0692CF; }

.hp-hesap-menu__cikis { border-top: 1px solid #ececec; }

.hp-hesap-menu__cikis button {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 17px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 13.5px;
    color: #D9000D;
    cursor: pointer;
    text-align: left;
}

.hp-hesap-menu__cikis button i { width: 16px; text-align: center; font-size: 13px; }
.hp-hesap-menu__cikis button:hover { background: #FDF2F3; }

/* ==========================================================================
   Giriş / kayıt formundaki açılır listeler

   tailwind.css'teki .hs-form kuralları yalnız input'u kapsıyor; kayıt
   formuna eklenen şirket türü ve il/ilçe seçicileri aynı görünümü alsın diye
   burada eşlenir.
   ========================================================================== */
.hs-form .od-alan select {
    width: 100%;
    height: 48px;
    border: 1px solid #E4E7EA;
    border-radius: 8px;
    padding: 0 34px 0 14px;
    font-size: 14px;
    font-family: inherit;
    color: #333333;
    background-color: #FFFFFF;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23777' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px;
}

.hs-form .od-alan select:focus {
    outline: none;
    border-color: #0692CF;
    box-shadow: 0 0 0 3px rgba(6, 146, 207, .12);
}

.hs-form .od-alan.is-hata select { border-color: #D9000D; }

/* ==========================================================================
   Duyarlı davranış
   ========================================================================== */
@media (max-width: 1023px) {
    .hp-kabuk { grid-template-columns: minmax(0, 1fr); }
    .hp-kenar { position: static; }
    .hp-ozet  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-menu  { display: flex; flex-wrap: wrap; padding: 8px; gap: 4px; }
    .hp-menu__grup { display: none; }
    .hp-menu a { border-left: 0; border-radius: 8px; padding: 9px 13px; }
    .hp-menu a.is-aktif { border-left: 0; }
}

@media (max-width: 1023px) {
    /* Dar ekranda hesap düğmesi yalnız baş harfe iner */
    .hp-hesap-btn__ad { display: none; }
    .hp-hesap-btn { padding: 0 10px 0 6px; }
}

@media (max-width: 1023px) {
    .hp-ozellik-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-ozet--dortlu  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .hp-kabuk   { padding: 22px 14px 44px; }
    .hp-ozellik-liste { grid-template-columns: minmax(0, 1fr); }
    .hp-galeri  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hp-kart    { padding: 20px 17px; }
    .hp-ikili,
    .hp-uclu,
    .hp-secim,
    .hp-satirlar { grid-template-columns: minmax(0, 1fr); }
    .hp-ozet    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .hp-ust h1  { font-size: 20px; }
    .hp-eylem .hp-btn { width: 100%; }
}

/* ==========================================================================
   Üst menüdeki açılır alt menü (panelden yönetilen sayfalar)

   main-nav yalnız düz <a> bekleyecek şekilde yazılmıştı; alt sayfası olan
   bir öğe artık .main-nav__grup sarmalayıcısıyla geliyor. Buradaki kurallar
   o sarmalayıcıyı hem masaüstünde (hover ile açılan panel) hem mobil
   çekmecede (.is-open — düz, girintili liste) doğru gösterir.

   Tailwind derlemesi elle değiştirilemediği için bu kurallar hesap.css'te
   duruyor; o dosya zaten her sayfada koşulsuz yükleniyor.
   ========================================================================== */
.main-nav__grup { position: relative; display: inline-flex; align-items: center; }

.main-nav__grup > a { display: inline-flex; align-items: center; gap: 6px; }
.main-nav__ok { font-size: 10px; opacity: .8; transition: transform .18s; }
.main-nav__grup:hover .main-nav__ok { transform: rotate(180deg); }

.main-nav__alt {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 210px;
    padding: 8px;
    border-radius: 12px;
    background: #FFFFFF;
    box-shadow: 0 12px 34px rgba(16, 24, 40, .16);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .16s, transform .16s;
    z-index: 220;
}

/* Düğme ile panel arasındaki boşlukta imleç kaybolmasın diye köprü */
.main-nav__grup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 12px;
}

.main-nav__grup:hover .main-nav__alt,
.main-nav__grup:focus-within .main-nav__alt {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 4px);
}

.main-nav .main-nav__alt a {
    padding: 9px 12px;
    border-radius: 8px;
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.main-nav .main-nav__alt a:hover { background: #F4F6F8; color: #0692CF; opacity: 1; }

/* ---------- Mobil çekmece ----------
   Çekmecede açılır panel mantığı yok: grup başlığı ve alt sayfalar düz
   liste olarak, alt sayfalar girintili çıkar. */
.main-nav.is-open .main-nav__grup {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.main-nav.is-open .main-nav__grup::after { content: none; }
.main-nav.is-open .main-nav__ok { display: none; }

.main-nav.is-open .main-nav__alt {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.main-nav.is-open .main-nav__alt a {
    padding: 12px 0 12px 16px;
    border-radius: 0;
    border-bottom: 1px solid #ececec;
    font-size: 14px;
    color: #667085;
}

/* ==========================================================================
   Çerez bildirimi

   Panelden açılıp kapanır; hesap.css her sayfada yüklendiği için stil
   burada duruyor (sayfa.css yalnız kurumsal sayfalarda var).
   ========================================================================== */
.hn-cerez {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 400;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 14px;
    background: #101828;
    color: #FFFFFF;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
    animation: hnCerezBelir .35s cubic-bezier(.22, 1, .36, 1);
}

.hn-cerez[hidden] { display: none; }
.hn-cerez p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .84); }

.hn-cerez button {
    flex-shrink: 0;
    padding: 10px 22px;
    border: 0;
    border-radius: 9px;
    background: #0692CF;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}

.hn-cerez button:hover { background: #0578ab; }

@keyframes hnCerezBelir {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 639px) {
    .hn-cerez { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; left: 12px; right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .hn-cerez { animation: none; }
}

/* ==========================================================================
   REZERVASYON DETAYI  (/hesap/rezervasyon/{kod})
   ========================================================================== */

/* Listedeki detay bağlantısı: satırın sonunda, sütun genişliğini
   şişirmesin diye dar tutuldu. */
.hp-tablo__eylem { width: 1%; white-space: nowrap; text-align: right; }

.hp-detay-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid #E4E7EA;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #0692CF;
    background: #FFFFFF;
    transition: background .15s, border-color .15s;
}

.hp-detay-btn:hover { background: #F4FAFD; border-color: #BEE3F5; color: #0578ab; }
.hp-detay-btn i { font-size: 10px; }

/* Yalnız ekran okuyucular için: boş <th> başlıksız kalmasın */
.hp-gizli {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Üst şerit: kod + durum ---------- */
.hp-rez-bas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}

.hp-rez-bas__etiket {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #B1B1B1;
    margin-bottom: 3px;
}

.hp-rez-bas__kod {
    display: block;
    font-size: 21px;
    font-weight: 800;
    color: #333333;
    letter-spacing: .5px;
}

.hp-rez-bas .hp-soluk { display: block; margin-top: 2px; }

/* ---------- İlan satırı ---------- */
.hp-rez-ilan {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px;
    margin-bottom: 18px;
    border: 1px solid #E4E7EA;
    border-radius: 10px;
}

.hp-rez-ilan img {
    width: 74px;
    height: 74px;
    border-radius: 9px;
    object-fit: cover;
    flex-shrink: 0;
}

.hp-rez-ilan > div { flex: 1; min-width: 140px; }
.hp-rez-ilan strong { display: block; font-size: 15px; font-weight: 800; color: #333333; }
.hp-rez-ilan .hp-soluk { display: block; margin-top: 3px; }

.hp-rez-ilan__yok {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 15px;
    margin: 0 0 18px;
    border-radius: 10px;
    background: #F9F9F9;
    font-size: 13px;
    line-height: 1.6;
    color: #777777;
}

.hp-rez-ilan__yok i { color: #B1B1B1; margin-top: 2px; }

/* ---------- Etiket / değer ızgarası ---------- */
.hp-veri {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

.hp-veri dt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #B1B1B1;
    margin-bottom: 4px;
}

.hp-veri dd { margin: 0; font-size: 14px; font-weight: 700; color: #333333; }

/* ---------- Tutar dökümü ---------- */
.hp-rez-tutar { display: flex; flex-direction: column; }

.hp-rez-tutar__satir {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid #F1F3F5;
    font-size: 14px;
    color: #777777;
}

.hp-rez-tutar__satir:last-child { border-bottom: 0; }
.hp-rez-tutar__satir strong { font-size: 15px; font-weight: 800; color: #333333; }
.hp-rez-tutar--odendi { color: #00A25D !important; }
.hp-rez-tutar__satir--kalan strong { color: #333333; }

.hp-rez-not {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: #F4FAFD;
    font-size: 12.5px;
    line-height: 1.6;
    color: #0578ab;
}

.hp-rez-not i { margin-top: 2px; }

/* ---------- Not kutusu ---------- */
.hp-rez-notlar {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #F9F9F9;
}

.hp-rez-notlar span {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #B1B1B1;
    margin-bottom: 5px;
}

.hp-rez-notlar p { margin: 0; font-size: 13.5px; line-height: 1.65; color: #555555; }

.hp-rez-yardim { margin: 0; font-size: 13px; color: #777777; text-align: center; }
.hp-rez-yardim a { color: #0692CF; font-weight: 700; }
.hp-rez-yardim a:hover { text-decoration: underline; }

@media (max-width: 767px) {
    .hp-veri { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hp-rez-bas { align-items: flex-start; }
}

/* ==========================================================================
   Tekrarlanan satırlar (repeater) — tur yönetimi

   Satırlar dikey akar, alanlar satır içinde esner. Dar ekranda alanlar alt
   alta düşer; sabit sütun genişliği verilseydi telefonda tarih ve kontenjan
   kutuları okunmaz hale gelirdi.
   ========================================================================== */
.hp-tekrar { display: flex; flex-direction: column; gap: 10px; }

.hp-tekrar__liste { display: flex; flex-direction: column; gap: 10px; }

.hp-tekrar__satir {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px; border: 1px solid #ececec; border-radius: 10px; background: #fbfcfd;
}

.hp-tekrar__alanlar { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; min-width: 0; }
.hp-tekrar__alanlar .hp-alan { min-width: 140px; margin: 0; }

.hp-tekrar__sil {
    flex: 0 0 auto; width: 32px; height: 32px; margin-top: 22px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #ececec; border-radius: 8px; background: #fff;
    color: #b1b1b1; cursor: pointer; transition: .15s;
}
.hp-tekrar__sil:hover { border-color: #e5484d; background: #e5484d; color: #fff; }

.hp-tekrar__bos {
    margin: 0; padding: 16px; text-align: center;
    border: 1px dashed #dcdcdc; border-radius: 10px;
    font-size: 13px; color: #999;
}

.hp-tekrar__ekle {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
    height: 36px; padding: 0 14px;
    border: 1px dashed #0692cf; border-radius: 8px; background: #f2fafe;
    font-size: 13px; font-weight: 700; color: #0692cf; cursor: pointer; transition: .15s;
}
.hp-tekrar__ekle:hover { background: #0692cf; color: #fff; border-style: solid; }

@media (max-width: 640px) {
    .hp-tekrar__satir { flex-direction: column; }
    .hp-tekrar__alanlar .hp-alan { min-width: 100%; }
    .hp-tekrar__sil { margin-top: 0; align-self: flex-end; }
}

/* Üçlü alan satırı (fiyat sekmesi) */
.hp-uclu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .hp-uclu { grid-template-columns: 1fr; } }

/* Alan altı bilgi satırı — ikonlu, tek satır. hp-uyari kutusu bunun için
   fazla ağır kalıyordu (o gerçek bir uyarı için). */
.hp-dipnot {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0; padding: 10px 12px;
    border-radius: 8px; background: #f5f9fc;
    font-size: 12.5px; line-height: 1.6; color: #667;
}
.hp-dipnot i { margin-top: 2px; color: #0692cf; }
.hp-dipnot a { color: #0692cf; font-weight: 600; }

/* ==========================================================================
   Favorilerim listesi

   Rezervasyon tablosu gibi satır satır ama tablo değil: favoride önemli
   olan görsel, o yüzden her kayıt küçük bir kart olarak durur. Kalp
   düğmesi listeden çıkarır (bkz. assets/js/main.js).
   ========================================================================== */
.hp-favoriler {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hp-favori {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid #ECECEC;
    border-radius: 12px;
    background: #FFFFFF;
    transition: box-shadow .2s, border-color .2s;
}

.hp-favori:hover {
    border-color: #D8E7F1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .06);
}

.hp-favori__gorsel {
    flex: 0 0 128px;
    width: 128px;
    height: 88px;
    border-radius: 9px;
    overflow: hidden;
    display: block;
}

.hp-favori__gorsel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hp-favori__ic { flex: 1 1 auto; min-width: 0; }

.hp-favori__etiket {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #0692CF;
}

.hp-favori__ic h3 {
    margin: 3px 0 4px;
    font-size: 15.5px;
    font-weight: 800;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-favori__ic h3 a:hover { color: #0692CF; }

.hp-favori__ic p {
    margin: 0;
    font-size: 12.5px;
    color: #777777;
    display: flex;
    align-items: center;
    gap: 6px;
}

.hp-favori__ic p i { color: #B1B1B1; font-size: 11px; }

.hp-favori__yan {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.hp-favori__fiyat { text-align: right; }

.hp-favori__fiyat strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: #0692CF;
}

.hp-favori__fiyat span { font-size: 11.5px; color: #B1B1B1; }

.hp-favori__eylem { display: flex; align-items: center; gap: 8px; }

/* Listedeki kalp: dolu doğar, tıklanınca kayıt listeden çıkar */
.hp-favori__kalp {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    border: 1px solid #E4E7EA;
    background: #FFFFFF;
    color: #D9000D;
    font-size: 14px;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.hp-favori__kalp:hover { background: #FFF3F4; border-color: #F3C6C9; }

@media (max-width: 720px) {
    .hp-favori { flex-wrap: wrap; }
    .hp-favori__gorsel { flex-basis: 96px; width: 96px; height: 70px; }
    .hp-favori__yan { width: 100%; justify-content: space-between; }
}