/* =========================================================
   HAMBURGER YAN PANEL  —  assets/anasayfa-hamburg-panel.css
   anasayfa-hamburg-panel.php için (önek: hp-)
   Sağdan sola kayan, ekranın yarısı genişliğinde bilgi paneli (yalnızca masaüstü).
   Renkler üst şeridin cyan / lacivert temasıyla uyumludur.
   ========================================================= */
.hp,
.hp-backdrop {
    --hp-bg: #0b1e33;
    --hp-bg2: #0f2f50;
    --hp-line: rgba(135, 208, 255, .22);
    --hp-cyan: #00d9ff;
    --hp-blue: #25c3fd;
    --hp-text: #eaf5ff;
    --hp-mut: #9fbad2;
    --hp-ink: #0b1e33;
    --hp-logo-bg: #ffffff;       /* logo şeridinin zemini: logo koyu renkliyse açık, beyaz renkliyse koyu yapın (ör. #0b1e33) */
    --hp-ease: cubic-bezier(.22, .8, .2, 1);
}

/* ---------- arka perde ---------- */
.hp-backdrop {
    position: fixed; inset: 0; z-index: 100000;
    background: rgba(4, 12, 22, .62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
}
.hp-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

html.hp-lock { overflow: hidden; padding-right: var(--hp-sbw, 0px); }

/* ---------- panel ---------- */
.hp {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 100001;
    width: 50vw; min-width: 440px; max-width: 820px;
    display: flex; flex-direction: column;
    color: var(--hp-text);
    background: linear-gradient(160deg, var(--hp-bg2) 0%, var(--hp-bg) 70%);
    border-left: 1px solid var(--hp-line);
    box-shadow: -30px 0 80px rgba(0, 0, 0, .45);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform .55s var(--hp-ease), visibility 0s linear .55s;
    overflow: hidden;
    box-sizing: border-box;
}
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp.is-open { transform: none; visibility: visible; transition-delay: 0s; }

/* sol kenarda neon ışık çizgisi + hafif mimari ızgara */
.hp::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; z-index: 3;
    background: linear-gradient(180deg, rgba(0, 217, 255, 0) 0%, var(--hp-cyan) 22%, var(--hp-blue) 70%, rgba(0, 217, 255, 0) 100%);
    filter: drop-shadow(0 0 7px rgba(0, 217, 255, .85));
    pointer-events: none;
}
.hp::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(135, 208, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(135, 208, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 40%, transparent 100%);
}

/* ---------- üst: logo şeridi ---------- */
.hp-head {
    position: relative; z-index: 2; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 22px 34px 22px 38px;
    background: var(--hp-logo-bg);
}
.hp-head::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: linear-gradient(90deg, var(--hp-cyan), var(--hp-blue) 60%, rgba(37, 195, 253, 0));
    box-shadow: 0 0 12px rgba(0, 217, 255, .7);
}
.hp-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hp-logo img { display: block; max-height: 58px; max-width: 280px; width: auto; height: auto; object-fit: contain; }
.hp-close {
    all: unset; box-sizing: border-box; flex: 0 0 auto;
    width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
    border-radius: 50%; color: var(--hp-ink);
    background: rgba(11, 30, 51, .07); border: 1px solid rgba(11, 30, 51, .14);
    transition: background .2s ease, color .2s ease, transform .3s var(--hp-ease), box-shadow .2s ease;
}
.hp-close svg { width: 20px; height: 20px; }
.hp-close:hover { background: var(--hp-ink); color: #fff; transform: rotate(90deg); box-shadow: 0 0 0 4px rgba(0, 217, 255, .25); }
.hp-close:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; }

/* ---------- gövde ---------- */
.hp-body {
    position: relative; z-index: 2; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
    padding: 30px 38px 22px;
    scrollbar-width: thin; scrollbar-color: rgba(37, 195, 253, .45) transparent;
}
.hp-body::-webkit-scrollbar { width: 8px; }
.hp-body::-webkit-scrollbar-thumb { background: rgba(37, 195, 253, .4); border-radius: 8px; }

/* giriş animasyonu: panel açılınca öğeler sırayla belirir */
.hp-body > * { opacity: 0; transform: translateY(16px); }
.hp.is-open .hp-body > * {
    opacity: 1; transform: none;
    transition: opacity .55s ease, transform .6s var(--hp-ease);
    transition-delay: calc(.2s + var(--i, 0) * .07s);
}

/* ---------- hızlı butonlar ---------- */
.hp-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 30px; }
.hp-cta:has(> .hp-btn:only-child) { grid-template-columns: 1fr; }
.hp-btn {
    display: flex; align-items: center; gap: 14px; min-width: 0;
    padding: 15px 18px; border-radius: 14px; text-decoration: none; color: #fff;
    border: 1px solid transparent;
    transition: transform .25s var(--hp-ease), box-shadow .25s ease, filter .2s ease;
}
.hp-btn svg { flex: 0 0 26px; width: 26px; height: 26px; }
.hp-btn span { display: flex; flex-direction: column; min-width: 0; }
.hp-btn small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.hp-btn b { font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-btn:hover { transform: translateY(-3px); }
.hp-btn--call {
    background: linear-gradient(135deg, #1e6fd9 0%, #25c3fd 100%);
    box-shadow: 0 10px 26px rgba(30, 111, 217, .38);
}
.hp-btn--call:hover { box-shadow: 0 14px 32px rgba(37, 195, 253, .5); }
.hp-btn--wa {
    background: linear-gradient(135deg, #128c4a 0%, #25d366 100%);
    box-shadow: 0 10px 26px rgba(18, 140, 74, .35);
}
.hp-btn--wa:hover { box-shadow: 0 14px 32px rgba(37, 211, 102, .45); }
.hp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- bölümler ---------- */
.hp-sec { margin-bottom: 28px; }
.hp-h {
    display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--hp-blue);
}
.hp-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--hp-line), transparent); }

.hp-row {
    display: flex; align-items: center; gap: 16px; padding: 12px 14px; margin: 0 -14px;
    border-radius: 12px; text-decoration: none; color: inherit;
    transition: background .2s ease, transform .25s var(--hp-ease);
}
a.hp-row:hover { background: rgba(37, 195, 253, .09); transform: translateX(4px); }
a.hp-row:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 0; }
.hp-row--static { align-items: flex-start; }
.hp-ico {
    flex: 0 0 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--hp-cyan);
    background: rgba(0, 217, 255, .09); border: 1px solid rgba(0, 217, 255, .3);
    box-shadow: inset 0 0 14px rgba(0, 217, 255, .08);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.hp-ico svg { width: 21px; height: 21px; }
a.hp-row:hover .hp-ico { background: var(--hp-cyan); color: var(--hp-ink); box-shadow: 0 0 16px rgba(0, 217, 255, .55); }
.hp-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-txt small { font-size: 12px; color: var(--hp-mut); letter-spacing: .04em; }
.hp-txt b { font-size: 16.5px; font-weight: 600; color: var(--hp-text); overflow-wrap: anywhere; }
.hp-addr { font-weight: 500 !important; line-height: 1.55; }

.hp-link {
    display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0 44px; padding: 9px 4px 9px 14px;
    font-size: 14px; font-weight: 600; color: var(--hp-cyan); text-decoration: none;
    border-bottom: 1px solid rgba(0, 217, 255, .4);
    transition: gap .25s var(--hp-ease), color .2s ease, border-color .2s ease;
}
.hp-link svg { width: 17px; height: 17px; }
.hp-link:hover { gap: 13px; color: #fff; border-color: #fff; }

/* çalışma saatleri */
.hp-row--hours { align-items: flex-start; }
.hp-hours { list-style: none; margin: 0; padding: 2px 0 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hp-hours li { display: flex; align-items: baseline; gap: 10px; font-size: 15.5px; }
.hp-hours li span { color: var(--hp-text); font-weight: 500; white-space: nowrap; }
.hp-hours li i { flex: 1; min-width: 14px; border-bottom: 1px dashed rgba(159, 186, 210, .4); transform: translateY(-4px); }
.hp-hours li b { color: var(--hp-cyan); font-weight: 600; text-align: right; }
.hp-hours li .hp-hours-solo { color: var(--hp-text); text-align: left; font-weight: 500; }

/* harita */
.hp-map {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px;
    border: 1px solid var(--hp-line); background: rgba(255, 255, 255, .04);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.hp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* sosyal medya */
.hp-social { display: flex; flex-wrap: wrap; gap: 12px; }
.hp-social a {
    width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; text-decoration: none;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--hp-line);
    transition: transform .3s var(--hp-ease), background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hp-social a svg { width: 21px; height: 21px; }
.hp-social a:hover { transform: translateY(-4px); background: var(--hp-cyan); color: var(--hp-ink); border-color: var(--hp-cyan); box-shadow: 0 0 20px rgba(0, 217, 255, .6); }
.hp-social a:focus-visible { outline: 2px solid var(--hp-blue); outline-offset: 3px; }

.hp-foot { margin: 34px 0 0; padding-top: 18px; border-top: 1px solid var(--hp-line); font-size: 12.5px; color: var(--hp-mut); text-align: center; }

/* ---------- küçük masaüstü ---------- */
@media (max-width: 1180px) {
    .hp { width: 60vw; }
    .hp-body { padding: 26px 28px 20px; }
    .hp-head { padding: 18px 26px 18px 30px; }
}

/* ---------- mobil: panel kullanılmaz (mobilde hamburger tam sayfa menüyü açar) ---------- */
@media (max-width: 900px) {
    .hp, .hp-backdrop { display: none !important; }
    html.hp-lock { overflow: auto; padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hp, .hp-backdrop, .hp-body > *, .hp-btn, .hp-row, .hp-close, .hp-social a, .hp-link { transition-duration: .01ms !important; transition-delay: 0s !important; }
}