/* ============ Alibaba Çiftliği (PHP) — tema değişkeni tabanlı stiller ============ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--c-text); background: var(--c-site_bg); }
img { display: block; max-width: 100%; }
a { text-decoration: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.font-heading { font-family: var(--font-heading); }
.font-script { font-family: var(--font-script); }

/* buttons */
.al-btn { font-family: var(--font-body); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.8rem;
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:4px; border:2px solid transparent;
  cursor:pointer; transition: background-color .28s, color .28s, border-color .28s, transform .2s; }
.al-btn:hover { transform: translateY(-2px); }
.al-btn-primary { background:var(--c-primary_btn_bg); color:var(--c-primary_btn_text); border-color:var(--c-primary_btn_border); }
.al-btn-primary:hover { background:var(--c-primary_btn_hover_bg); color:var(--c-primary_btn_hover_text); border-color:var(--c-primary_btn_hover_bg); }
.al-btn-secondary { background:var(--c-secondary_btn_bg); color:var(--c-secondary_btn_text); border-color:var(--c-secondary_btn_border); }
.al-btn-secondary:hover { background:var(--c-secondary_btn_hover_bg); color:var(--c-secondary_btn_hover_text); border-color:var(--c-secondary_btn_hover_bg); }
.al-btn-gold { background:var(--c-gold_btn_bg); color:var(--c-gold_btn_text); border-color:var(--c-gold_btn_bg); }
.al-btn-gold:hover { background:var(--c-gold_btn_hover); border-color:var(--c-gold_btn_hover); }

.al-input { width:100%; background:var(--c-res_input_bg); border:1px solid var(--c-res_input_border); color:var(--c-form_input_text);
  padding:.85rem 1rem; border-radius:4px; font-family:var(--font-body); outline:none; }
.al-input::placeholder { color:var(--c-placeholder); }

.eyebrow { text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; font-weight:600; color:var(--c-subheading); display:inline-flex; align-items:center; gap:.75rem; }
.eyebrow::before { content:""; width:34px; height:1px; background:var(--c-subheading); display:inline-block; }
.section { position:relative; padding:96px 0; }
.overlay { position:absolute; inset:0; }
.rel { position:relative; }

/* navbar */
header.nav { position:fixed; top:0; left:0; right:0; z-index:50; transition:background-color .3s, box-shadow .3s; background:var(--c-header_bg); }
header.nav.sticky { background:var(--c-navbar_sticky_bg); box-shadow:0 8px 30px rgba(0,0,0,.35); }
.nav-inner { height:68px; display:flex; align-items:center; justify-content:space-between; }
.nav-links { display:flex; gap:28px; align-items:center; }
.nav-links a { color:var(--c-navbar_text); font-size:13px; font-weight:500; letter-spacing:.08em; }
.nav-links a:hover { color:var(--c-navbar_hover); }
.brand { display:flex; align-items:center; gap:8px; color:var(--c-navbar_text); }
.brand .b1 { font-family:var(--font-heading); font-weight:800; font-size:20px; letter-spacing:.08em; }
.brand .b2 { font-size:9px; letter-spacing:.35em; color:var(--c-accent); }
.burger { display:none; background:none; border:none; color:var(--c-navbar_text); font-size:22px; cursor:pointer; }
.mobile-menu { display:none; flex-direction:column; gap:10px; padding:12px 24px 20px; background:var(--c-mobile_menu_bg); }
.mobile-menu a { color:var(--c-navbar_text); font-size:14px; letter-spacing:.08em; }

/* hero */
.hero { min-height:92vh; display:flex; align-items:center; }
.hero.has-slider { position:relative; overflow:hidden; }
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease-in-out; }
.hero-slide.active { opacity:1; }
.hero.has-slider .overlay { z-index:1; }
.hero.has-slider .rel { z-index:2; }
.hero h1 { font-family:var(--font-heading); font-weight:800; font-size:clamp(3rem,7vw,5rem); line-height:.95; color:var(--c-hero_heading); margin:18px 0 0; }
.hero .script { font-family:var(--font-script); font-size:clamp(2.6rem,6vw,4.5rem); color:var(--c-hero_script); }
.hero p { color:var(--c-hero_desc); max-width:520px; font-size:1.05rem; line-height:1.7; margin:22px 0 30px; }

/* features */
.features { display:grid; grid-template-columns:repeat(4,1fr); background:var(--c-section_dark_bg); border-radius:8px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.3); margin-top:-64px; position:relative; z-index:20; }
.feature { padding:28px; text-align:center; border-right:1px solid rgba(197,151,72,.18); }
.feature:last-child { border-right:none; }
.feature i { color:var(--c-accent); font-size:34px; }
.feature h3 { font-family:var(--font-heading); color:var(--c-hero_heading); font-size:.95rem; letter-spacing:.04em; margin:12px 0 8px; }
.feature p { color:var(--c-menu_card_text); font-size:.78rem; line-height:1.6; margin:0; }

/* about */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.about h2 { font-family:var(--font-heading); font-weight:700; color:var(--c-about_heading); font-size:clamp(2rem,4vw,3rem); margin:16px 0 0; }
.about .script { font-family:var(--font-script); font-size:1.9rem; color:var(--c-about_subheading); }
.about p { color:var(--c-about_text); line-height:1.7; margin-top:22px; }
.about ul { list-style:none; padding:0; margin:22px 0; }
.about li { display:flex; align-items:center; gap:12px; color:var(--c-about_text); margin-bottom:12px; }
.about li i { color:var(--c-about_icon); }
.about img { height:420px; width:100%; object-fit:cover; border-radius:8px; border:6px solid var(--c-card_bg); box-shadow:0 20px 50px rgba(0,0,0,.25); }

/* menu */
.center { text-align:center; }
.section h2.title { font-family:var(--font-heading); font-weight:700; font-size:clamp(2rem,4vw,3rem); margin:12px 0 0; }
.menu-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:44px; }
.menu-card { background:var(--c-menu_card_bg); border:1px solid var(--c-menu_card_border); border-radius:8px; overflow:hidden; transition:transform .3s; }
.menu-card:hover { transform:translateY(-8px); }
.menu-card .ph { height:176px; overflow:hidden; }
.menu-card .ph img { width:100%; height:100%; object-fit:cover; }
.menu-card .body { padding:20px; text-align:center; }
.menu-card h3 { font-family:var(--font-heading); color:var(--c-menu_heading); font-size:1rem; margin:0 0 8px; }
.menu-card p { color:var(--c-menu_card_text); font-size:.78rem; line-height:1.6; margin:0 0 16px; }

/* reservation */
.res-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.res-form { background:var(--c-res_form_bg); padding:28px; border-radius:8px; box-shadow:0 20px 50px rgba(0,0,0,.15); }
.res-form .row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.res-panel { background:var(--c-res_panel_bg); padding:28px; border-radius:8px; }
.res-panel h3 { text-align:center; font-family:var(--font-heading); color:var(--c-menu_heading); margin:0 0 20px; }
.slots { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.slot { padding:10px; border-radius:4px; font-weight:500; font-size:.85rem; border:1px solid var(--c-menu_card_border); background:var(--c-res_slot_available); color:var(--c-menu_card_text); cursor:pointer; text-align:center; }
.slot.selected { background:var(--c-res_slot_selected); color:var(--c-secondary); border-color:var(--c-res_slot_selected); }
.slot.busy { background:var(--c-res_slot_busy); color:#ddd; opacity:.55; cursor:not-allowed; }
.res-info { text-align:center; color:var(--c-menu_card_text); font-size:.75rem; margin-top:22px; }
.flash { background:var(--c-success); color:#fff; padding:12px 16px; border-radius:6px; margin-bottom:16px; text-align:center; }

/* gallery */
.gal-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.gal-grid .cell { aspect-ratio:1; overflow:hidden; border-radius:6px; }
.gal-grid img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.gal-grid .cell:hover img { transform:scale(1.1); }
.gal-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; flex-wrap:wrap; gap:16px; }

/* footer */
footer.ft { padding:64px 0 24px; background:var(--c-footer_bg); position:relative; }
.ft-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.ft h4 { font-family:var(--font-heading); color:var(--c-footer_heading); letter-spacing:.04em; margin:0 0 16px; }
.ft p, .ft li, .ft a { color:var(--c-footer_text); font-size:.9rem; }
.ft ul { list-style:none; padding:0; margin:0; }
.ft ul li { margin-bottom:10px; }
.ft .brand-b { font-family:var(--font-heading); font-weight:800; color:var(--c-footer_heading); font-size:20px; letter-spacing:.08em; }
.ft .socials { display:flex; gap:12px; margin-top:20px; }
.ft .socials a { width:36px; height:36px; border:1px solid var(--c-footer_icon); color:var(--c-footer_icon); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ft .tag { font-family:var(--font-script); font-size:1.5rem; color:var(--c-footer_icon); margin-top:16px; }
.ft i { color:var(--c-footer_icon); }
.ft-copy { border-top:1px solid rgba(255,255,255,.1); margin-top:44px; padding-top:20px; text-align:center; color:var(--c-footer_text); font-size:.75rem; }

@media (max-width: 960px) {
  .nav-links { display:none; } .burger { display:block; }
  .features,.menu-grid { grid-template-columns:repeat(2,1fr); }
  .about-grid,.res-grid { grid-template-columns:1fr; }
  .gal-grid { grid-template-columns:repeat(3,1fr); }
  .ft-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 560px) { .features,.menu-grid,.gal-grid,.ft-grid { grid-template-columns:1fr 1fr; } .res-form .row { grid-template-columns:1fr; } }

/* ============ FARKLI SİTE DÜZENLERİ ============ */
/* Modern: ortalanmış hero, görsel solda hakkımızda, 3'lü menü, tek sütun rezervasyon */
body.layout-modern .hero .rel { max-width:820px; margin:0 auto; text-align:center; }
body.layout-modern .hero .eyebrow { justify-content:center; }
body.layout-modern .hero p { margin-left:auto; margin-right:auto; }
body.layout-modern .hero .rel > div:last-child { justify-content:center; }
body.layout-modern .about-grid > div:first-child { order:2; }
body.layout-modern .about-grid > div:last-child { order:1; }
body.layout-modern .menu-grid { grid-template-columns:repeat(3,1fr); }
body.layout-modern .res-grid { grid-template-columns:1fr; }
body.layout-modern .gal-grid { grid-template-columns:repeat(3,1fr); }

/* Zarif: minimal ortalanmış hero, öne çıkan şerit yok, geniş boşluk, 2'li menü, ortalı footer */
body.layout-zarif .hero .rel { max-width:680px; margin:0 auto; text-align:center; }
body.layout-zarif .hero .eyebrow { justify-content:center; }
body.layout-zarif .hero p { margin-left:auto; margin-right:auto; }
body.layout-zarif .hero .rel > div:last-child { justify-content:center; }
body.layout-zarif .features { display:none; }
body.layout-zarif .section { padding:120px 0; }
body.layout-zarif .about-grid { max-width:760px; margin:0 auto; grid-template-columns:1fr; text-align:center; }
body.layout-zarif .about ul { display:inline-block; text-align:left; }
body.layout-zarif .menu-grid { grid-template-columns:repeat(2,1fr); max-width:820px; margin-left:auto; margin-right:auto; }
body.layout-zarif .gal-grid { grid-template-columns:repeat(4,1fr); }
body.layout-zarif .ft-grid { grid-template-columns:1fr; text-align:center; }
body.layout-zarif .ft .socials { justify-content:center; }
@media (max-width:960px){ body.layout-modern .menu-grid, body.layout-modern .gal-grid, body.layout-zarif .gal-grid { grid-template-columns:repeat(2,1fr); } }

/* Izgara / Grid */
body.layout-izgara .menu-grid { grid-template-columns:repeat(2,1fr); }
body.layout-izgara .menu-card .ph { height:240px; }
body.layout-izgara .gal-grid { grid-template-columns:repeat(4,1fr); }
body.layout-izgara .features { grid-template-columns:repeat(4,1fr); }
/* Dergi / Magazine */
body.layout-dergi .menu-grid { grid-template-columns:1fr; }
body.layout-dergi .menu-card { display:flex; align-items:stretch; }
body.layout-dergi .menu-card .ph { width:38%; height:auto; min-height:170px; }
body.layout-dergi .menu-card .body { flex:1; text-align:left; display:flex; flex-direction:column; justify-content:center; }
body.layout-dergi .gal-grid { grid-template-columns:repeat(2,1fr); }
body.layout-dergi .about-grid { gap:70px; }
@media (max-width:760px){
  body.layout-izgara .gal-grid { grid-template-columns:repeat(2,1fr); }
  body.layout-dergi .menu-card { display:block; }
  body.layout-dergi .menu-card .ph { width:100%; height:200px; }
}