/* Layout glue on top of the ported globals.css — new PHP markup is plain
   HTML (not the original React component tree), so this fills gaps.
   The nav/footer/hero markup now reuses the real globals.css classes
   (.nav, .footer, .hero, .section, …) — see includes/site_generator.php. */
.container{max-width:1100px;margin:0 auto;padding:0 1rem;}
.menu-category{margin:2rem 0;}
.menu-item{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed #ddd;}
.card{border:1px solid #eee;border-radius:.5rem;padding:1rem;margin-bottom:1rem;}
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
form.request-form{display:flex;flex-direction:column;gap:.75rem;max-width:480px;}
form.request-form input,form.request-form select,form.request-form textarea{padding:.6rem;border:1px solid #ccc;border-radius:.4rem;font:inherit;}
.alert{padding:.75rem 1rem;border-radius:.4rem;margin-bottom:1rem;}
.alert-success{background:#e6f6ea;color:#146c2e;}
.alert-error{background:#fdeaea;color:#a11;}

/* Simple centered hero used by pages that don't have the full split hero
   (lezzet-cografyasi) — kept distinct from globals.css's rich `.hero`. */
.simple-hero{padding:140px 0 3rem;text-align:center;}

/* globals.css's .nav is `position:fixed`, designed for a React scroll
   listener that toggles `.nav.scrolled`. Our static pages don't run that
   listener and most page bodies don't reserve top padding for an overlay
   nav, so keep it in normal flow to avoid content being hidden underneath. */
.nav{position:static;background:#fff;backdrop-filter:none;border-bottom:1px solid var(--border-g,#eee);}

/* Real Instagram story photos in the home page's social section, replacing
   the icon-only placeholder grid. */
.ig-account-chip{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:.85rem;text-decoration:none;transition:background .2s ease;}
.ig-account-chip:hover{background:rgba(255,255,255,.16);}
.ig-photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:28px 0 32px;}
.ig-photo-item{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:#111;}
.ig-photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease;}
.ig-photo-item:hover img{transform:scale(1.06);}
.ig-photo-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0);opacity:0;transition:opacity .25s ease,background .25s ease;}
.ig-photo-item:hover .ig-photo-overlay{opacity:1;background:rgba(0,0,0,.35);}
@media (max-width:768px){.ig-photo-grid{grid-template-columns:repeat(3,1fr);}}

/* Blog/tarif detail: header + cover full width, then a TOC (left, sticky) +
   body grid. The nav is static here (see above), so globals.css's 120px hero
   top padding (meant for a fixed overlay nav) is far too much. */
.post-article{padding-bottom:48px;}
.post-article .blog-post-hero{padding:32px 0 28px;max-width:860px;}
.post-article .post-title{margin:12px 0 14px;}
.post-article .post-cover-wrap{margin-bottom:40px;}
.post-article .post-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px;align-items:start;}
.post-article .post-layout.no-toc{grid-template-columns:minmax(0,1fr);}
.post-article .post-toc-aside{position:sticky;top:24px;}
.post-article .post-toc{margin-bottom:0;padding:20px 22px;}
.post-article .post-toc-list li{line-height:1.45;}
.post-main{min-width:0;max-width:760px;}
.post-content > :first-child{margin-top:0;}
.post-content h2{scroll-margin-top:24px;}
.post-content img{max-width:100%;height:auto;}
.post-related{margin-top:56px;padding-top:32px;border-top:1px solid var(--border-g,#eee);}
.post-related > h2{font-family:var(--serif);font-size:26px;color:var(--black);margin-bottom:20px;}
.post-back{margin-top:24px;}
@media (max-width:1000px){
  .post-article .post-layout{grid-template-columns:minmax(0,1fr);gap:0;}
  .post-article .post-toc-aside{position:static;}
  .post-article .post-toc{margin-bottom:32px;}
  .post-main{max-width:none;}
}
@media (max-width:600px){
  .post-article .blog-post-hero{padding:20px 0 20px;}
  .post-article .post-cover-wrap{aspect-ratio:16/9;margin-bottom:28px;border-radius:12px;}
  .post-content{font-size:15.5px;line-height:1.8;}
}
.share-btn{text-decoration:none;}

/* Blog / Tarifler list pages. The nav is static here, so drop globals.css's
   120px top padding; hero background spans full width, text in container. */
.blog-page-hero{padding:56px 0 44px;margin-bottom:48px;}
.blog-page-title{margin-bottom:10px;}
.blog-page-sub{font-size:16px;color:var(--muted);max-width:640px;line-height:1.7;margin:0;}
.blog-list{padding-bottom:80px;}
.blog-card-img img{display:block;}
.blog-card-title{font-size:19px;}
.blog-card-excerpt{margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.blog-read-more{margin-top:auto;}
@media (max-width:600px){
  .blog-page-hero{padding:36px 0 28px;margin-bottom:28px;}
  .blog-card-body{padding:18px;}
}

/* Simple content pages (lezzet-cografyasi, ilikya): plain sections/cards
   need vertical rhythm. */
.simple-hero{padding:72px 0 48px;}
.simple-hero h1{font-family:var(--serif);font-size:clamp(28px,4.5vw,46px);line-height:1.2;margin:10px 0 18px;color:var(--black);}
.simple-hero h1 em{color:var(--red);}
.simple-hero > p:not(.eyebrow){max-width:720px;margin:0 auto 20px;line-height:1.7;}
.simple-hero .btn{margin:4px;}
main section:not(.section):not(.hero):not([class*="hero"]):not([style]){margin-bottom:40px;}
main section > h2{font-family:var(--serif);font-size:clamp(22px,3vw,28px);color:var(--black);margin:0 0 12px;line-height:1.3;}
main section > p{line-height:1.75;margin-bottom:16px;}
main .card{padding:20px 22px;margin-bottom:16px;border-radius:12px;background:var(--bg,#fff);}
main .card h2{margin:0 0 12px;}
main .card h3{font-size:18px;margin:0 0 8px;color:var(--black);}
main .card p{line-height:1.7;margin:0 0 10px;}
main .card p:last-child{margin-bottom:0;}
main .grid{margin-top:16px;}
main .grid > .card{margin-bottom:0;}
main > .container:last-child, main > div.container:last-child{padding-bottom:72px;}
main .btn + .btn{margin-left:8px;}
@media (min-width:900px){ #katman-analizi ~ section .grid{grid-template-columns:repeat(4,1fr);} }
main > section[style]:first-child + section{margin-top:48px;}
main > section.container:last-child{padding-bottom:72px;margin-bottom:0;}
main > section.container[style]{margin-bottom:40px;}