/*
Theme Name: Ocak Kebap
Theme URI: https://example.com/ocak-kebap
Author: Claude
Description: Et ve kebap restoranları için, sıcak/ateş temalı, tek sayfa düzeninde özgün bir WordPress teması. Hakkımızda, menü, galeri ve iletişim bölümleri içerir.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ocak-kebap
*/

:root{
  --color-coal:#0A0A0A;
  --color-ember:#D4AF37;
  --color-smoke:#6E6A63;
  --color-cream:#F4EFE4;
  --color-brass:#8A6E2F;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--color-cream);
  color:var(--color-coal);
  font-family:"Source Sans 3", "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.7;
}
h1,h2,h3,h4{
  font-family:"Fraunces", Georgia, serif;
  font-weight:600;
  letter-spacing:0.01em;
  margin:0 0 .5em;
}
a{color:var(--color-ember); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; display:block;}

.container{max-width:1100px; margin:0 auto; padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--color-coal);
  color:var(--color-cream);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
}
.site-branding{
  font-family:"Fraunces", serif;
  font-size:1.5rem; font-weight:700; color:var(--color-cream);
}
.site-branding span{color:var(--color-ember);}
.primary-menu{display:flex; gap:28px; list-style:none; margin:0; padding:0;}
.primary-menu a{
  color:var(--color-cream); font-weight:600; font-size:.95rem;
  letter-spacing:.04em; text-transform:uppercase;
}
.primary-menu a:hover{color:var(--color-ember); text-decoration:none;}
.header-phone{
  background:var(--color-ember); color:var(--color-coal); padding:8px 16px;
  border-radius:2px; font-weight:700; font-size:.9rem; white-space:nowrap;
}
.header-phone:hover{background:var(--color-cream); color:var(--color-coal); text-decoration:none;}
.menu-toggle{display:none; background:none; border:0; color:var(--color-cream); font-size:1.6rem;}

/* ---------- Ember divider (signature element) ---------- */
.ember-divider{
  display:flex; align-items:center; gap:12px;
  margin:0 auto 48px; max-width:280px;
}
.ember-divider::before, .ember-divider::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--color-brass));
}
.ember-divider::after{background:linear-gradient(90deg, var(--color-brass), transparent);}
.ember-divider .dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--color-ember);
  box-shadow:0 0 0 4px rgba(217,83,30,.15);
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:78vh; display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(30,27,25,.55), rgba(30,27,25,.85)), var(--color-coal) center/cover;
  color:var(--color-cream); text-align:center; overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; object-fit:cover; width:100%; height:100%;
  opacity:.55; z-index:0;
}
video.hero-bg{ pointer-events:none; }
.hero-content{position:relative; z-index:1; margin:0 auto; padding:60px 24px;}
.hero-eyebrow{
  text-transform:uppercase; letter-spacing:.2em; font-size:.85rem;
  color:var(--color-ember); margin-bottom:14px; font-weight:700;
}
.hero h1{
  font-size:clamp(2.4rem, 6vw, 4.5rem); margin-bottom:16px; color:#fff;
}
.hero p{font-size:1.15rem; max-width:540px; margin:0 auto 28px; color:var(--color-cream);}
.btn{
  display:inline-block; padding:14px 32px; background:var(--color-ember);
  color:var(--color-coal); font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  font-size:.9rem; border-radius:2px; transition:background .2s;
}
.btn:hover{background:var(--color-cream); text-decoration:none;}
.btn-outline{
  background:transparent; border:1px solid var(--color-cream); color:var(--color-cream);
  margin-left:12px;
}
.btn-outline:hover{background:var(--color-cream); color:var(--color-coal);}

/* ---------- Sections ---------- */
.section{padding:90px 0;}
.section-alt{background:#fff;}
.section-head{text-align:center; margin-bottom:8px;}
.section-eyebrow{
  text-transform:uppercase; letter-spacing:.2em; font-size:.8rem;
  color:var(--color-brass); font-weight:700; margin-bottom:10px;
}
.section-head h2{font-size:clamp(1.8rem, 4vw, 2.6rem);}
.section-lead{
  max-width:640px; margin:0 auto 40px; text-align:center; color:#55504C;
}

/* About */
.about-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center;
}
.about-grid img{border-radius:4px;}
.about-stats{display:flex; gap:32px; margin-top:28px;}
.about-stats div{text-align:center;}
.about-stats strong{display:block; font-family:"Fraunces",serif; font-size:2rem; color:var(--color-ember);}
.about-stats span{font-size:.85rem; color:var(--color-smoke); text-transform:uppercase; letter-spacing:.08em;}

/* Menu */
.menu-tabs{display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:40px;}
.menu-tabs button{
  background:none; border:1px solid var(--color-brass); color:var(--color-coal);
  padding:8px 20px; border-radius:20px; font-weight:600; cursor:pointer;
  font-size:.9rem; transition:.2s;
}
.menu-tabs button.is-active, .menu-tabs button:hover{
  background:var(--color-ember); color:#fff; border-color:var(--color-ember);
}
.menu-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:28px 48px;}
.menu-item{display:flex; justify-content:space-between; gap:16px; border-bottom:1px dashed #D8CFC2; padding-bottom:14px;}
.menu-item h4{margin:0 0 4px; font-size:1.1rem;}
.menu-item p{margin:0; color:var(--color-smoke); font-size:.92rem;}
.menu-item .price{
  font-family:"Fraunces", serif; font-weight:700; color:var(--color-ember); white-space:nowrap;
}
.menu-cta{text-align:center; margin-top:48px;}

/* Gallery */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.gallery-grid figure{margin:0; overflow:hidden; border-radius:4px; aspect-ratio:1/1;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.gallery-grid figure:hover img{transform:scale(1.06);}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px;}
.contact-info dt{
  font-weight:700; text-transform:uppercase; font-size:.8rem;
  letter-spacing:.1em; color:var(--color-brass); margin-top:24px;
}
.contact-info dt:first-child{margin-top:0;}
.contact-info dd{margin:4px 0 0; font-size:1.05rem;}
.map-frame{width:100%; height:100%; min-height:340px; border:0; border-radius:4px;}

/* ---------- Footer ---------- */
.site-footer{background:var(--color-coal); color:var(--color-cream); padding:48px 0 24px;}
.footer-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:24px;}
.footer-grid h3{color:var(--color-cream);}
.footer-grid a{color:var(--color-cream);}
.social-links{display:flex; gap:14px; list-style:none; padding:0; margin:12px 0 0;}
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--color-smoke); border-radius:50%;
}
.social-links a:hover{border-color:var(--color-ember); color:var(--color-ember);}
.site-footer .copy{
  text-align:center; font-size:.85rem; color:var(--color-smoke);
  border-top:1px solid #3A3531; padding-top:20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .about-grid, .contact-grid{grid-template-columns:1fr; gap:32px;}
  .menu-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 720px){
  .menu-toggle{display:block;}
  .primary-menu{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--color-coal); flex-direction:column; padding:16px 24px; gap:18px;
  }
  .primary-menu.is-open{display:flex;}
  .header-phone{display:none;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .gallery-grid figure:hover img{transform:none;}
}

/* Visible focus */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--color-ember); outline-offset:2px;
}