/* ==========================================================================
   Harmonika Kutzal — Ana Sayfa (index.css)
   theme.css sonrasında yüklenir. Sadece index.html'e özel bölümler.
   ========================================================================== */
  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    height:100vh;
    min-height:100vh;
    margin:0; padding:0;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    overflow:hidden;
  }
  .hero .ph, .hero .ph-img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:center;}
  .hero::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(10,15,10,.35), rgba(10,15,10,.55));
  }
  .hero-content{position:relative; z-index:2; color:#fff; padding:0 20px;}
  .hero-content .script{font-size:42px; color:#fff; display:block; margin-bottom:18px;}
  .hero-content h1{
    font-size:40px; font-weight:400; letter-spacing:.02em;
    margin-bottom:34px; line-height:1.2;
  }
  .hero-content .hero-sub{
    font-family:'Jost', sans-serif;
    font-size:15px; font-weight:300; letter-spacing:.02em;
    color:rgba(255,255,255,.85);
    margin-top:-20px; margin-bottom:30px;
  }

  /* ---------- ABOUT ---------- */
  .about{
    background:var(--cream);
    padding:110px 0;
  }
  .about .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
  }
  .about .eyebrow{color:var(--green);}
  .about p{
    color:var(--muted);
    font-size:15.5px; line-height:1.85;
    margin-top:20px;
  }
  .about .img-box{height:420px; border-radius:2px; overflow:hidden;}

  /* ---------- SENSES / SAKINLIK & HUZUR ---------- */
  .senses{
    background:var(--cream-2);
    padding:100px 0;
    text-align:center;
  }
  .senses .eyebrow{color:var(--green);}
  .senses h2{font-size:30px; margin-top:14px; color:var(--ink);}
  .senses-intro{
    max-width:620px; margin:22px auto 50px;
    color:var(--muted); font-size:15px; line-height:1.85;
  }
  .senses-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:24px;
  }
  .sense-card{
    background:#fff;
    padding:40px 24px;
    border-radius:2px;
    border:1px solid rgba(0,0,0,.06);
  }
  .sense-icon{
    width:52px; height:52px; margin:0 auto 20px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:var(--cream-2);
    color:var(--green);
    font-size:22px;
  }
  .sense-card h3{font-size:16px; color:var(--ink); margin-bottom:12px; font-weight:400;}
  .sense-card p{color:var(--muted); font-size:13.5px; line-height:1.75;}

  /* ---------- SERENITY BANNER ---------- */
  .serenity-banner{
    position:relative; height:260px;
    display:flex; align-items:center; justify-content:center;
  }
  .serenity-banner .ph, .serenity-banner .ph-img{position:absolute; inset:0;}
  .serenity-banner::after{
    content:""; position:absolute; inset:0;
    background:rgba(10,20,14,.30);
  }
  .serenity-banner .script{
    position:relative; z-index:2; color:#fff; font-size:38px;
  }

  /* ---------- ATMOSPHERE ---------- */
  .atmosphere{
    background:var(--cream-2);
    padding:110px 0 70px;
    text-align:center;
  }
  .atmosphere .eyebrow{color:var(--green);}
  .atmosphere h2{font-size:34px; margin-top:14px;}
  .atmosphere .script{display:block; font-size:32px; color:var(--green); margin-top:10px;}
  .atmosphere .bento{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1fr;
    grid-template-rows:260px 220px;
    gap:20px;
    margin-top:56px;
    padding-bottom:100px;
  }
  .atmosphere .bento .img-box{border-radius:2px; overflow:hidden; height:100%;}
  .atmosphere .bento .b1{grid-column:1 / 2; grid-row:1 / 3;}
  .atmosphere .bento .b2{grid-column:2 / 5; grid-row:1 / 2;}
  .atmosphere .bento .b3{grid-column:2 / 3; grid-row:2 / 3;}
  .atmosphere .bento .b4{grid-column:3 / 4; grid-row:2 / 3;}
  .atmosphere .bento .b5{grid-column:4 / 5; grid-row:2 / 3;}

  /* ---------- ABOUT IMAGE BADGE ---------- */
  .about-img{position:relative;}
  .about-img .badge{
    position:absolute; right:20px; bottom:20px;
    background:var(--green);
    color:#fff;
    font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
    text-align:center; line-height:1.5;
    padding:16px 20px;
    max-width:150px;
  }

  /* ---------- OFFERINGS ---------- */
  .offerings{
    background:var(--cream);
    padding:110px 0;
    text-align:center;
  }
  .offerings > .wrap > .eyebrow{color:var(--green);}
  .offerings > .wrap > h2{font-size:34px; margin-top:14px;}
  .offerings > .wrap > .script{display:block; font-size:32px; color:var(--green); margin-top:10px;}
  .offerings .grid{
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center;
    margin-top:60px; text-align:left;
  }
  .offerings .img-box{height:360px; border-radius:2px; overflow:hidden;}
  .offerings .text h3{
    font-size:22px; letter-spacing:.03em; color:var(--ink); margin-bottom:18px;
  }
  .offerings .text p{
    color:var(--muted); font-size:15.5px; line-height:1.85;
  }

  /* ---------- ZENGIN MENU ---------- */
  .menu-rich{
    background:var(--cream);
    padding:100px 0 90px;
    text-align:center;
  }
  .menu-rich h2{font-size:36px; color:var(--ink);}
  .menu-rich .sub{
    max-width:680px; margin:20px auto 44px;
    color:var(--muted); font-size:15px; line-height:1.85;
  }
  .marquee-wrap{
    max-width:960px; margin:0 auto 44px;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track{
    display:flex;
    gap:16px;
    width:max-content;
    animation:marqueeScroll 38s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{animation-play-state:paused;}
  .marquee-item{
    flex:0 0 auto;
    width:130px; height:150px;
    border-radius:3px; overflow:hidden;
    display:block;
    transition:transform .2s ease;
  }
  .marquee-item:hover{transform:scale(1.06);}
  .marquee-item img, .marquee-item .ph{width:100%; height:100%; object-fit:cover; display:block;}
  @keyframes marqueeScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
  .menu-rich .more-btn{
    display:inline-block; margin-top:6px;
    background:var(--green); color:#fff;
    padding:15px 32px; border-radius:3px;
    font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;
    transition:background .2s;
  }
  .menu-rich .more-btn:hover{background:var(--green-soft);}

  /* ---------- RESERVE / EVENTS CTA ---------- */
  .reserve-cta{
    background:var(--green);
    padding:90px 20px;
    text-align:center;
    color:#fff;
  }
  .reserve-cta .eyebrow{color:rgba(255,255,255,.75);}
  .reserve-cta h2{font-size:30px; margin-top:14px; color:#fff;}
  .reserve-cta p{
    max-width:600px; margin:20px auto 30px;
    color:rgba(255,255,255,.85); font-size:15px; line-height:1.85;
  }
  .reserve-cta .phone-cta{
    display:inline-block;
    background:#fff; color:var(--green);
    font-size:16px; font-weight:600; letter-spacing:.02em;
    padding:16px 34px; border-radius:3px;
    transition:transform .2s ease;
  }
  .reserve-cta .phone-cta:hover{transform:scale(1.04);}

  /* ---------- FRANCHISE (COMPACT) ---------- */
  .franchise-mini{
    background:var(--cream-2);
    padding:34px 0;
  }
  .franchise-mini-inner{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; flex-wrap:wrap;
  }
  .franchise-mini .eyebrow{color:var(--green); display:block; margin-bottom:6px;}
  .franchise-mini p{color:var(--muted); font-size:13.5px; max-width:480px; line-height:1.7;}
  .franchise-link{
    flex:0 0 auto;
    font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
    color:var(--green); border-bottom:1px solid var(--green);
    padding-bottom:2px; white-space:nowrap;
  }
  .franchise-link:hover{color:var(--green-soft); border-color:var(--green-soft);}

  /* ---------- RESPONSIVE (index'e özel) ---------- */
  @media (max-width: 860px){
    .about .grid, .offerings .grid, footer .grid{
      grid-template-columns:1fr; gap:32px;
    }
    .atmosphere .bento{
      grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, 220px);
    }
    .atmosphere .bento .b1{grid-column:1 / 3; grid-row:1 / 2;}
    .atmosphere .bento .b2{grid-column:1 / 3; grid-row:2 / 3;}
    .atmosphere .bento .b3{grid-column:1 / 2; grid-row:3 / 4;}
    .atmosphere .bento .b4{grid-column:2 / 3; grid-row:3 / 4;}
    .atmosphere .bento .b5{grid-column:1 / 3; grid-row:4 / 5;}
    .about-img .badge{font-size:10.5px; padding:12px 16px; max-width:130px;}
    .marquee-item{width:100px; height:120px;}
    .senses-grid{grid-template-columns:1fr 1fr;}
    .hero-content h1{font-size:30px;}
    .hero{height:100vh; min-height:520px;}
    .franchise-mini-inner{flex-direction:column; align-items:flex-start;}
  }
  @media (max-width: 480px){
    .wrap{padding:0 20px;}
    .hero-content h1{font-size:24px;}
    .hero-content .script{font-size:30px;}
    .senses-grid{grid-template-columns:1fr;}
    .atmosphere .bento{grid-template-rows:repeat(4, 170px);}
    .reserve-cta h2{font-size:24px;}
    .reserve-cta .phone-cta{font-size:14px; padding:14px 24px;}
    .marquee-item{width:86px; height:100px;}
  }