/* Umami — minimal Japon bar teması: beyaz zemin, siyah tipografi, tek kırmızı vurgu (hinomaru), Sora başlıklar, sıfır köşe, ince çizgiler, numaralı bölümler */
:root {
    --ink: #111; --text: #3b3b3b; --muted: #8a8a8a;
    --bg: #fff; --bg-alt: #f5f4f1; --line: #e6e4df; --card: #fff;
    --r: 0; --r-sm: 0; --r-lg: 0; --btn-r: 0;
    --shadow: none; --shadow-lg: 0 24px 60px rgba(0, 0, 0, .12);
    --head: 'Sora', system-ui, sans-serif; --body: 'Inter', system-ui, sans-serif; --head-w: 700; --header: 76px;
    --red: #d7261e;
}
body { background: var(--bg); }
h1, h2, h3, .h2, .h3 { letter-spacing: -.035em; }
h1 { font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: .98; font-weight: 800; }
h2, .h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.02; }
.kicker { color: var(--red); letter-spacing: .18em; font-size: .72rem; font-weight: 700; }
.btn { font-weight: 600; letter-spacing: .01em; border-width: 1.5px; }
.btn-primary { background: var(--red); }
.btn-primary:hover { background: #111; }
.btn-accent { background: #111; color: #fff; }
.btn-accent:hover { background: var(--red); color: #fff; }
.btn-outline, .btn-soft { background: transparent; border-color: #111; color: #111; }
.btn-outline:hover, .btn-soft:hover { background: #111; color: #fff; border-color: #111; }

/* Menü */
.site-header { background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.brand-mark { width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; }
.brand-mark .ic { opacity: 0; }
.brand-text strong { font-family: var(--head); font-weight: 800; font-size: 1.45rem; letter-spacing: .28em; }
.brand-text small { letter-spacing: .14em; font-size: .6rem; }
.nav-list > li > a { font-weight: 500; font-size: .93rem; }
.nav-list > li > a.on { color: var(--red); }
.nav-cta { background: #111; }
.nav-cta:hover { background: var(--red); }
.phone-chip .ic { color: var(--red); }

/* Hero: asimetrik kolaj + yüzen rozetler */
.um-hero { padding: 64px 0 90px; overflow: hidden; }
.um-hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 60px; align-items: center; }
.um-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: .78rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: #111; }
.um-eyebrow i { width: 14px; height: 14px; border-radius: 50%; background: var(--red); }
.um-hero .lead { color: var(--text); max-width: 520px; }
.um-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.um-collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 150px 150px 150px 150px; gap: 14px; }
.um-collage figure { margin: 0; overflow: hidden; background: #111; }
.um-collage img { width: 100%; height: 100%; object-fit: cover; }
.um-c1 { grid-column: 1 / 9; grid-row: 1 / 3; }
.um-c2 { grid-column: 9 / 13; grid-row: 1 / 4; }
.um-c3 { grid-column: 3 / 9; grid-row: 3 / 5; }
.um-collage::before { content: ''; position: absolute; left: -26px; bottom: 30px; width: 110px; height: 110px; border-radius: 50%; background: var(--red); z-index: 0; }
.um-collage figure { position: relative; z-index: 1; }
.um-badge { position: absolute; z-index: 2; display: flex; flex-direction: column; padding: 14px 18px; background: #fff; box-shadow: var(--shadow-lg); min-width: 150px; }
.um-badge strong { font-family: var(--head); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #111; }
.um-badge span { font-size: .8rem; color: var(--muted); }
.um-b1 { left: -18px; top: 44%; }
.um-b2 { right: -10px; bottom: 36px; background: #111; }
.um-b2 strong { color: #fff; }
.um-b2 span { color: #bbb; }
.um-b3 { right: 36%; top: -18px; border-top: 3px solid var(--red); }

/* Kayan şerit */
.um-ticker { overflow: hidden; background: #111; color: #fff; border-top: 1px solid #111; }
.um-ticker-in { display: flex; width: max-content; animation: umt 36s linear infinite; }
.um-ticker span { display: inline-flex; align-items: center; gap: 28px; padding: 16px 28px 16px 0; font-family: var(--head); font-weight: 600; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.um-ticker span::after { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
@keyframes umt { to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .um-ticker-in { animation: none; } }

/* Numaralı bölüm başlığı */
.um-no { display: block; font-family: var(--head); font-weight: 800; font-size: .9rem; color: var(--red); letter-spacing: .1em; margin-bottom: 14px; }
.um-head { display: grid; grid-template-columns: 70px 1fr auto; gap: 24px; align-items: end; padding-bottom: 26px; border-bottom: 2px solid #111; margin-bottom: 20px; }
.um-head .um-no { margin: 0 0 10px; font-size: 1.1rem; }
.um-head h2 { margin: 0 0 6px; }
.um-head p { margin: 0; color: var(--muted); max-width: 620px; }
.um-cats { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-bottom: 18px; }
.um-cats a { color: var(--muted); font-weight: 600; font-size: .92rem; }
.um-cats a:hover { color: var(--red); }

/* Menü satırları */
.menu-grid { gap: 0 56px; }
.menu-row { border-bottom: 1px solid var(--line); padding: 20px 0; }
.mr-img { border-radius: 0; flex-basis: 76px; }
.mr-img img { width: 76px; height: 76px; }
.mr-title { font-size: 1.12rem; letter-spacing: -.02em; }
.mr-dots { border-bottom: 1px solid var(--line); transform: translateY(-6px); }
.mr-price { font-family: var(--head); font-size: 1.05rem; color: #111; font-weight: 700; }
.mr-badge { background: var(--red); border-radius: 0; font-family: var(--body); letter-spacing: .04em; text-transform: uppercase; font-size: .62rem; }
.mr-tags li { border-radius: 0; background: transparent; border: 1px solid var(--line); font-weight: 600; }

/* Omakase */
.um-omakase { background: #111; color: #bdbdbd; }
.um-om-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
.um-om-intro { position: sticky; top: calc(var(--header) + 30px); }
.um-omakase h2 { color: #fff; }
.um-om-price { margin: 26px 0 28px; padding: 18px 0; border-top: 1px solid #2c2c2c; border-bottom: 1px solid #2c2c2c; font-family: var(--head); font-size: 1.9rem; font-weight: 700; color: #fff; letter-spacing: -.02em; }
.um-om-price small { display: block; font-family: var(--body); font-size: .85rem; font-weight: 500; color: #9a9a9a; letter-spacing: 0; }
.um-courses { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.um-courses li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid #262626; }
.um-courses li:first-child { border-top: 1px solid #262626; }
.um-courses li > span { font-family: var(--head); font-weight: 800; font-size: 1.5rem; color: #3a3a3a; line-height: 1.2; }
.um-courses li:hover > span { color: var(--red); }
.um-courses h3 { margin: 0 0 2px; font-size: 1.2rem; color: #fff; }
.um-courses p { margin: 0; font-size: .94rem; }

/* Ortak bileşenler */
.about-media img { border-radius: 0; }
.about-badge { background: var(--red); border-radius: 0; }
.about-badge strong { font-family: var(--head); letter-spacing: -.03em; }
.tick-list li > span { background: #111; border-radius: 0; }
.card { border: 1px solid var(--line); box-shadow: none; }
.card:hover { border-color: #111; }
.team-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card .c-media img { filter: grayscale(1); transition: filter .4s; }
.team-card:hover .c-media img { filter: none; }
.c-role { color: var(--red); font-weight: 600; }
.c-tags li { border-radius: 0; }
.sec-head.split { border-bottom: 2px solid #111; padding-bottom: 22px; }
.sec-head .kicker { color: var(--red); }
.g-item { border-radius: 0; }
.g-item figcaption { border-radius: 0; background: #fff; }
.um-quotes { background: var(--bg-alt); }
.quote-card { border: 0; }
.quote-card blockquote { color: #111; font-size: 1.05rem; }
.q-ic { color: var(--red); }
.q-stars { color: #111; }
.form-card { border: 1.5px solid #111; box-shadow: none; }
.form-card h2 .ic, .form-card h3 .ic { color: var(--red); }
.field input, .field select, .field textarea { border-radius: 0; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #111; box-shadow: none; }
.faq { border-radius: 0; background: #fff; }
.faq summary i { border-radius: 0; }
.faq[open] summary i { background: var(--red); color: #fff; }

/* İç sayfalar */
.page-hero { background: #fff; border-bottom: 2px solid #111; }
.page-hero::after { content: ''; position: absolute; right: 8%; top: 50%; width: 120px; height: 120px; margin-top: -60px; border-radius: 50%; background: var(--red); }
.ph-deco { display: none; }
.filter-pills a { border-radius: 0; }
.filter-pills a.on, .filter-pills a:hover { background: #111; border-color: #111; color: #fff; }
.group-title { border-bottom: 2px solid #111; padding-bottom: 10px; }
.spec-price strong { font-family: var(--head); }
.cta-band { background: #111; }
.cta-band.has-img::before { background: linear-gradient(90deg, rgba(0, 0, 0, .92), rgba(0, 0, 0, .55)); }
.site-footer { background: #0c0c0c; }
.site-footer .brand-mark { background: var(--red); }
.float-bar .fb-main { background: var(--red); }

@media (max-width: 960px) {
    .um-hero-grid, .um-om-grid { grid-template-columns: 1fr; gap: 56px; }
    .um-om-intro { position: static; }
    .um-collage { grid-template-rows: repeat(4, 120px); }
    .page-hero::after { width: 70px; height: 70px; margin-top: -35px; right: 20px; }
}
@media (max-width: 640px) {
    .um-hero { padding: 36px 0 60px; }
    .um-actions .btn { flex: 1; }
    .um-collage { grid-template-rows: repeat(4, 86px); gap: 8px; }
    .um-collage::before { width: 70px; height: 70px; left: -12px; }
    .um-badge { min-width: 0; padding: 10px 12px; }
    .um-badge strong { font-size: 1.1rem; }
    .um-badge span { font-size: .7rem; }
    .um-b1 { left: -6px; }
    .um-b2 { right: -4px; bottom: 10px; }
    .um-b3 { display: none; }
    .um-head { grid-template-columns: 1fr; gap: 10px; }
    .um-head .btn { justify-self: start; }
    .um-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .um-cats a { white-space: nowrap; }
    .um-courses li { grid-template-columns: 44px 1fr; }
    .um-courses li > span { font-size: 1.15rem; }
    .page-hero::after { display: none; }
}
