/* PAYON tanıtım sayfası · "Günün menüsü" gezintisi, kurs şeritleri, özellik atlası, fiyat dilimi.
   Dünya: keçe pano, plastik harf, menü satırı (ad ··· süre). Üst çubuk 4 öğe; geri kalan her şey menü panosunda. */

/* ---------- üst çubuk (sade) ---------- */
.ust { gap: 14px; }
.ust .tabela { margin-left: 4px; }
.mp-ac {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 14px 0 12px; margin-left: auto;
  background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--murekkep); border-radius: 6px; cursor: pointer;
  font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; box-shadow: var(--golge-tent);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mp-ac:hover { transform: translateY(-1px); }
.mp-ac:active { transform: translateY(0); }
.mp-ikon { display: grid; gap: 3px; width: 18px; } .mp-ikon i { display: block; height: 3px; border-radius: 1px; background: var(--murekkep); box-shadow: 0 1px 0 rgba(17,42,74,.25); } .mp-ikon i:nth-child(2) { width: 70%; }
.mp-kurs { font-size: 13px; letter-spacing: .12em; color: var(--kehribar-koyu); padding-left: 10px; border-left: 1.5px solid var(--oluk-koyu); white-space: nowrap; }
.ust-link { font: 700 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--murekkep-2); padding: 8px 2px; border-bottom: 2px solid transparent; }
.ust-link:hover { border-bottom-color: var(--kehribar); }
.ust-demo { min-height: 38px; margin-top: 0; padding: 0 16px; font-size: 15px; border-radius: 6px; }
.ust-demo::after { display: none; }
@media (max-width: 760px) { .ust-link { display: none; } .mp-kurs { display: none; } .ust .tabela { display: none; } .ust { gap: 10px; } .marka img { width: 96px; } }
@media (max-width: 400px) { .ust-demo { padding: 0 11px; font-size: 14px; } }

/* ---------- menü panosu (tam ekran) ---------- */
.mp { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--zemin); overflow-y: auto; overscroll-behavior: contain;
  background-image: repeating-linear-gradient(0deg, rgba(17,42,74,.075) 0 1px, rgba(255,255,255,.7) 1px 2px, transparent 2px var(--oluk-h)); }
.mp[hidden] { display: none; }
.mp-ic { width: 100%; max-width: 1180px; margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px) 40px; }
.mp-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mp-baslik { font-size: clamp(34px, 5vw, 64px); line-height: 1.04; margin: 0; }
.mp-alt { margin: 8px 0 0; max-width: 56ch; color: var(--murekkep-2); font-size: clamp(16px, 1.5vw, 19px); }
.mp-kapat { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; background: var(--beyaz); border: 1.5px solid var(--murekkep); border-radius: 6px; cursor: pointer; box-shadow: var(--golge-tent); color: var(--murekkep); }
.mp-kapat svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }
.mp-yol { margin: 22px 0 6px; }
.mp-etiket { font: 800 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--kehribar-koyu); }
.mp-yollar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mp-yolbtn { position: relative; display: grid; gap: 2px; text-align: left; min-height: 60px; padding: 10px 18px 10px 16px; background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--murekkep); border-radius: 0 0 10px 10px; cursor: pointer; box-shadow: var(--golge-tent); margin-top: 9px; font: inherit; transition: transform .25s var(--ease); }
.mp-yolbtn::after { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -9px; height: 9px; background: var(--kece); border: 1.5px solid var(--murekkep); border-bottom: 0; border-radius: 8px 8px 0 0; clip-path: polygon(0 100%, 4% 0, 96% 0, 100% 100%); }
.mp-yolbtn:hover { transform: translateY(-2px); }
.mp-yolbtn b { font: 800 18px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.mp-yolbtn small { font-size: 13px; color: var(--soluk); }
.mp-yolbtn[aria-pressed="true"] { background: var(--murekkep); color: var(--beyaz); } .mp-yolbtn[aria-pressed="true"] small { color: #C9D4E3; } .mp-yolbtn[aria-pressed="true"]::after { background: var(--murekkep-2); }
.mp-yolnot { margin: 10px 0 0; min-height: 22px; font-size: 14px; color: var(--soluk); }
.mp-kurslar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; margin-top: 14px; }
.mp-kurs-s { min-width: 0; border-top: 3px solid var(--murekkep); padding-top: 10px; }
.mp-kurs-s.etkin { border-top-color: var(--nane); }
.mp-kurs-s h3 { margin: 0; font: 800 26px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--murekkep); text-shadow: var(--golge); }
.mp-kurs-s h3 span { color: var(--kehribar-koyu); margin-right: 6px; }
.mp-kurs-s p { margin: 2px 0 8px; font-size: 14px; color: var(--soluk); }
.mp-girdi { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; width: 100%; padding: 10px 6px 10px 0; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--oluk); color: var(--murekkep); cursor: pointer; font: inherit; position: relative; }
.mp-girdi:hover, .mp-girdi:focus-visible { background: linear-gradient(90deg, color-mix(in srgb, var(--kehribar) 14%, transparent), transparent 80%); }
.mp-girdi .ad { font-size: 17px; line-height: 1.25; font-weight: 600; }
.mp-girdi .ad small { display: block; font-weight: 500; font-size: 13px; color: var(--soluk); margin-top: 1px; }
.mp-girdi .nokta { align-self: center; min-width: 8px; height: 2px; background-image: radial-gradient(circle, var(--oluk-koyu) 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; }
.mp-girdi .sure { font: 800 14px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; color: var(--kehribar-koyu); white-space: nowrap; }
.mp-girdi .no { display: none; width: 24px; height: 24px; margin-right: -2px; border-radius: 50%; background: var(--nane); color: var(--beyaz); font: 800 15px/24px "Barlow Condensed", sans-serif; text-align: center; align-self: center; }
.mp-kurslar.yolda .mp-girdi { opacity: .38; }
.mp-kurslar.yolda .mp-girdi.secili { opacity: 1; }
.mp-kurslar.yolda .mp-girdi.secili .no { display: block; }
.mp-alt-satir { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--oluk-koyu); font: 700 15px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.mp-alt-satir a { text-decoration: none; color: var(--murekkep-2); padding: 6px 0; border-bottom: 2px solid transparent; } .mp-alt-satir a:hover { border-bottom-color: var(--kehribar); }
.mp-baslat { margin-top: 12px; }
@media (max-width: 980px) { .mp-kurslar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } }
@media (max-width: 620px) { .mp-kurslar { grid-template-columns: 1fr; } .mp-ic { padding-top: 12px; } .mp-yolbtn { flex: 1 1 100%; } }
body.mp-acik { overflow: hidden; }
.mp:not([hidden]) .mp-ic { animation: mp-gir .45s var(--ease) both; }
@keyframes mp-gir { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mp:not([hidden]) .mp-ic { animation: none; } }

/* ---------- tadım yolu: yüzen "Sonraki" ---------- */
.mp-pill { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 4px; padding: 6px; background: var(--murekkep); color: var(--beyaz); border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(17,42,74,.6); max-width: calc(100vw - 20px); }
.mp-pill[hidden] { display: none; }
.mp-pill button { white-space: nowrap; min-height: 44px; padding: 0 14px; background: transparent; border: 0; color: inherit; cursor: pointer; font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; }
.mp-pill button:hover { background: rgba(255,255,255,.12); }
.mp-pill .mp-ileri { background: var(--nane); color: var(--murekkep); } .mp-pill .mp-ileri:hover { background: color-mix(in srgb, var(--nane) 82%, white); }
.mp-pill .mp-konum { padding: 0 10px; font: 700 14px/1.15 "Barlow Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: center; min-width: 108px; }
.mp-pill .mp-konum small { display: block; font-size: 12px; opacity: .72; }

/* ---------- kurs şeritleri ---------- */
.kurs { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; max-width: 1160px; margin: 0 auto; padding: calc(var(--oluk-h) * .6) clamp(16px, 4vw, 40px) 0; scroll-margin-top: var(--oluk-h); }
.kurs-no { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--murekkep); border-radius: 50%; font: 800 28px/1 "Barlow Condensed", sans-serif; color: var(--murekkep); box-shadow: var(--golge); background: var(--beyaz); }
.kurs h2 { margin: 0; font: 800 clamp(20px, 2.2vw, 28px)/1 "Barlow Condensed", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--kehribar-koyu); }
.kurs p { margin: 0; font-size: 16px; color: var(--soluk); }
.kurs::after { content: ""; grid-column: 1 / -1; height: 2px; margin-top: 14px; background-image: radial-gradient(circle, var(--oluk-koyu) 1px, transparent 1.5px); background-size: 7px 2px; background-repeat: repeat-x; }
section[id], .kapi[id] { scroll-margin-top: calc(var(--oluk-h) + 6px); }
.kurs + .pano .pano-ic { border-top: 0 !important; }

/* ---------- özellik atlası ---------- */
.ozl-rol { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.ozl-rol button { min-height: 46px; padding: 0 18px; background: var(--beyaz); color: var(--murekkep); border: 1.5px solid var(--murekkep); border-radius: 6px; cursor: pointer; font: 800 16px/1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.ozl-rol button[aria-selected="true"] { background: var(--murekkep); color: var(--beyaz); box-shadow: var(--golge-tent); }
.ozl-rol button small { margin-left: 6px; color: var(--kehribar-koyu); } .ozl-rol button[aria-selected="true"] small { color: #F5C985; }
.ozl-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ozl { display: grid; gap: 6px; align-content: start; padding: 14px 16px 14px; background: var(--beyaz); border: 1.5px solid var(--oluk-koyu); border-radius: 0 0 10px 10px; position: relative; margin-top: 8px; }
.ozl::before { content: ""; position: absolute; left: -1.5px; right: -1.5px; top: -8px; height: 8px; background: var(--kece); border: 1.5px solid var(--oluk-koyu); border-bottom: 0; border-radius: 6px 6px 0 0; }
.ozl b { font: 800 20px/1.1 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--murekkep); }
.ozl span { font-size: 15px; line-height: 1.4; color: var(--murekkep-2); }
.ozl em { justify-self: start; font: 800 12px/1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; font-style: normal; padding: 4px 7px; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-1.5deg); }
.ozl em.canli { color: var(--nane-koyu); } .ozl em.test { color: var(--kehribar-koyu); } .ozl em.pilot { color: var(--murekkep-2); }
.ozl[hidden] { display: none; }
.ozl-dip { margin-top: 14px; font-size: 14px; color: var(--soluk); max-width: 70ch; }

/* ---------- fiyat dilimi ---------- */
.fy-dilim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.fy-rakam { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fy-rakam b { font: 800 clamp(64px, 11vw, 132px)/.95 "Barlow Condensed", sans-serif; color: var(--murekkep); text-shadow: var(--golge); letter-spacing: .01em; }
.fy-rakam span { font: 800 clamp(18px, 2vw, 26px)/1.1 "Barlow Condensed", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--kehribar-koyu); }
.fy-liste { list-style: none; margin: 0; padding: 0; }
@media (max-width: 760px) { .fy-dilim { grid-template-columns: 1fr; } }