/* ==========================================================================
   Harmonika Kutzal — Ortak Tema (theme.css)
   index.html ve menu.html tarafından paylaşılır: renk/font tokenları,
   reset, header/nav, buton stilleri, mobil nav ve gizlilik bildirimi.
   ========================================================================== */

  :root{
    --dark: #000000;        /* brand black - header/footer */
    --dark-2: #1a1a1a;
    --green: #377866;       /* brand primary teal-green */
    --green-soft: #619385;  /* brand secondary teal */
    --cream: #ffffff;       /* brand white - main page background */
    --cream-2: #f4f4f4;     /* brand light gray */
    --ink: #1a1a1a;
    --muted: #5c6b66;
    --line: rgba(0,0,0,0.10);
    --white: #ffffff;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Jost', sans-serif;
    background:var(--cream);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img, .ph, .ph-img{display:block; width:100%; height:100%; object-fit:cover;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  h1,h2,h3,.serif{font-family:'Aboreto', serif; font-weight:400;}
  .script{font-family:'Aguafina Script', cursive; font-style:normal; font-weight:400;}
  .eyebrow{
    font-family:'Jost', sans-serif;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-size:12.5px;
    font-weight:500;
  }

  /* placeholder image blocks — replace background-image with real Pomelli photos */
  .ph{
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#e4ddcd,#cfc6ae);
    color:#8a806a;
    font-family:'Jost', sans-serif;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    text-align:center;
    padding:10px;
  }
  .ph.dark{background:linear-gradient(135deg,#2c4638,#16241c); color:rgba(255,255,255,.55);}

  /* ---------- NAV ---------- */
  header{
    background:#ffffff;
    position:sticky; top:0; z-index:50;
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:box-shadow .25s ease;
  }
  header.scrolled{
    box-shadow:0 6px 20px rgba(0,0,0,.08);
  }
  nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    max-width:1180px; margin:0 auto;
  }
  .logo{color:var(--green);}
  .logo .name{
    font-family:'Aboreto', serif;
    font-size:20px; font-weight:400; letter-spacing:.02em;
    line-height:1.1;
    color:var(--green);
  }
  .logo .sub{
    font-size:9px; letter-spacing:.32em; color:var(--muted);
    text-transform:uppercase; margin-top:3px; display:block;
  }
  .nav-links{
    display:flex; align-items:center; gap:34px;
  }
  .nav-links a{
    color:var(--ink);
    font-size:13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
    transition:color .2s;
  }
  .nav-links a:hover{color:var(--green);}
  .btn{
    display:inline-block;
    background:var(--green);
    color:#fff;
    font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
    padding:12px 22px;
    border-radius:3px;
    transition:background .2s;
    white-space:nowrap;
  }
  .btn:hover{background:var(--green-soft);}
  .btn-outline{
    display:inline-block;
    border:1px solid rgba(255,255,255,.7);
    color:#fff;
    background:transparent;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:500;
    padding:13px 28px;
  }
  .menu-toggle{display:none; background:none; border:0; color:var(--green); font-size:22px;}

  html, body{overflow-x:hidden;}
  html{height:100%;}


  /* ---------- MOBILE NAV (shared) ---------- */
  @media (max-width: 860px){
    .nav-links{position:fixed; top:0; right:0; height:100vh; width:78%; max-width:320px;
      background:var(--dark); flex-direction:column; align-items:flex-start; justify-content:center;
      padding:40px; gap:26px; transform:translateX(100%); transition:transform .3s; }
    .nav-links a{color:rgba(255,255,255,.88);}
    .nav-links a:hover{color:#fff;}
    .nav-links.open{transform:translateX(0);}
    .nav-links .btn{margin-top:10px;}
    .menu-toggle{display:block;}
  }

  /* ---------- PRIVACY BAR ---------- */
  .privacy-bar{
    position:fixed; right:16px; bottom:16px; left:auto; z-index:400;
    max-width:340px; width:calc(100% - 32px);
    background:#fff; color:var(--ink);
    border:1px solid rgba(0,0,0,.1); border-radius:8px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    padding:16px 18px;
    display:none; flex-direction:column; align-items:flex-start; gap:12px;
    font-size:12.5px; line-height:1.6;
  }
  .privacy-bar.show{display:flex;}
  .privacy-bar span{color:var(--muted);}
  .privacy-bar button{
    background:var(--green); color:#fff; border:none;
    padding:9px 18px; border-radius:4px; font-size:12px;
    letter-spacing:.04em; text-transform:uppercase; cursor:pointer;
    flex:0 0 auto;
  }
  .privacy-bar button:hover{background:var(--green-soft);}
  /* ---------- FOOTER ---------- */
  footer{
    background:var(--green);
    color:rgba(255,255,255,.9);
    padding:90px 0 0;
  }
  footer .grid{
    display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:60px;
    padding-bottom:70px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  footer .brand .name{font-family:'Aboreto', serif; font-size:22px; font-weight:400;}
  footer .brand p{
    margin-top:18px; color:rgba(255,255,255,.62); font-size:14.5px; line-height:1.8; max-width:320px;
  }
  footer h4{
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.55); margin-bottom:20px; font-weight:500;
  }
  footer .addr, footer .phone{
    color:rgba(255,255,255,.85); font-size:14.5px; line-height:1.8;
  }
  footer .phone{margin-top:16px;}
  footer .map-link{color:rgba(255,255,255,.85); transition:color .2s;}
  footer .map-link:hover{color:#fff;}
  footer .map-cta{
    display:inline-block; margin-top:8px;
    font-size:12px; letter-spacing:.06em; text-transform:uppercase;
    color:#fff; border-bottom:1px solid rgba(255,255,255,.5);
    padding-bottom:2px;
  }
  footer .hours-row{
    display:flex; justify-content:space-between;
    font-size:14px; color:rgba(255,255,255,.8);
    padding:6px 0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  footer .hours-row:last-child{border-bottom:none;}
  footer .hours-row span:first-child{color:rgba(255,255,255,.55);}
  .foot-bottom{
    display:flex; justify-content:space-between; align-items:center;
    padding:26px 0; font-size:12.5px; color:rgba(255,255,255,.45);
  }



  /* Not: menu.html kendi sade footer tasarımını menu.css'te ayrıca tanımlar ve bu kuralların üzerine yazar. */

  /* ---------- MAILTO GERİ BİLDİRİM (TOAST) ---------- */
  .hk-toast{
    position:fixed; left:50%; bottom:28px; z-index:600;
    transform:translate(-50%, 12px);
    background:var(--ink); color:#fff;
    font-size:13px; letter-spacing:.01em;
    padding:12px 20px; border-radius:30px;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
    opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
    white-space:nowrap;
    max-width:90vw; overflow:hidden; text-overflow:ellipsis;
  }
  .hk-toast.show{
    opacity:1; transform:translate(-50%, 0);
  }