/* Pratik Menü landing2: kırmızı-beyaz gradyanlar, telefon çerçeveleri, referans yelpazesi ve kaydırınca beliren bölümler.
   Renkler tasarım token'larından türetilir (--qd-primary, --color-accent); ham hex yalnızca nötr gölge/çerçeve tonlarındadır. */
body.pl { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; background: #fff; }
.pl ::selection { background: color-mix(in srgb, var(--qd-primary) 22%, white); }

/* Hero zemini: kırmızıdan beyaza yumuşak geçiş, süzülen bulutlar ve hafif doku */
.pl-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 85% at 50% -12%, color-mix(in srgb, var(--qd-primary) 24%, white) 0%, color-mix(in srgb, var(--qd-primary) 8%, white) 42%, #fff 76%); }
.pl-blob { position: absolute; border-radius: 9999px; filter: blur(70px); opacity: .55; animation: pl-drift 24s ease-in-out infinite alternate; }
.pl-blob.b1 { width: 540px; height: 540px; left: -180px; top: -160px; background: color-mix(in srgb, var(--qd-primary) 42%, white); }
.pl-blob.b2 { width: 460px; height: 460px; right: -160px; top: 60px; background: color-mix(in srgb, var(--color-accent, #FF8A3D) 40%, white); animation-duration: 30s; animation-delay: -8s; }
.pl-blob.b3 { width: 380px; height: 380px; left: 38%; top: 420px; background: color-mix(in srgb, var(--qd-primary) 22%, white); animation-duration: 34s; animation-delay: -14s; }
.pl-grain { position: absolute; inset: 0; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes pl-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(60px, 40px) scale(1.18); } }

.pl-gradient-text { background: linear-gradient(95deg, var(--qd-primary) 10%, color-mix(in srgb, var(--qd-primary) 55%, var(--color-accent, #FF8A3D)) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-caret { display: inline-block; width: .08em; height: .82em; margin-left: .06em; vertical-align: -.06em; background: var(--qd-primary); border-radius: 2px; animation: pl-blink 1s steps(1) infinite; }
@keyframes pl-blink { 50% { opacity: 0; } }
.pl-squiggle path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: pl-draw 1.4s .6s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }

.pl-btn-primary { background: linear-gradient(135deg, var(--qd-primary), var(--qd-primary-dark)); box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--qd-primary) 70%, transparent); }
.pl-btn-primary:hover { box-shadow: 0 18px 38px -12px color-mix(in srgb, var(--qd-primary) 85%, transparent); }

/* Telefon çerçevesi: 390×844 ekran oranı */
.pl-phone { position: relative; border-radius: 2.7rem; padding: 9px; background: linear-gradient(160deg, #273142, #0b0f17 60%);
  box-shadow: 0 50px 90px -40px rgba(17, 24, 39, .55), 0 0 0 1px rgba(17, 24, 39, .4), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
/* Ekran: üstte durum çubuğu (saat, çentik, simgeler), altında 390×844 menü görüntüsü */
.pl-screen { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 2.1rem; aspect-ratio: 390 / 890; background: #fff; }
.pl-status { position: relative; display: flex; flex: 0 0 5.2%; align-items: center; justify-content: space-between; padding: 0 9%; font-size: clamp(7px, 3.4cqw, 13px); font-weight: 700; color: #111827; }
.pl-status::after { content: ""; position: absolute; left: 50%; top: 22%; width: 30%; height: 62%; transform: translateX(-50%); border-radius: 9999px; background: #0b0f17; }
.pl-screen > img, .pl-shot { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; object-position: top; }
.pl-phone { container-type: inline-size; }
.pl-glow { position: absolute; inset: 10% -10% -6%; z-index: -1; border-radius: 9999px; filter: blur(60px); background: color-mix(in srgb, var(--qd-primary) 35%, transparent); }

/* Kartlar */
.pl-card { border-radius: 1.75rem; background: #fff; box-shadow: 0 1px 0 rgba(17, 24, 39, .04), 0 24px 60px -36px rgba(17, 24, 39, .35); outline: 1px solid rgba(17, 24, 39, .06); transition: transform .35s ease, box-shadow .35s ease; }
.pl-card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(17, 24, 39, .04), 0 34px 70px -36px rgba(17, 24, 39, .45); }
.pl-mini { border-radius: 1.1rem; background: #fff; box-shadow: 0 10px 30px -18px rgba(17, 24, 39, .35); outline: 1px solid rgba(17, 24, 39, .06); }
.pl-soft { background: linear-gradient(180deg, color-mix(in srgb, var(--qd-primary) 6%, white), #fff); }
.pl-dots { background-image: radial-gradient(color-mix(in srgb, var(--qd-primary) 22%, transparent) 1px, transparent 1px); background-size: 18px 18px; }

/* Süzülen bildirimler */
.pl-float { animation: pl-float 6.5s ease-in-out infinite; }
.pl-float.d1 { animation-delay: -1.5s; } .pl-float.d2 { animation-delay: -3s; } .pl-float.d3 { animation-delay: -4.5s; }
@keyframes pl-float { 50% { transform: translateY(-12px); } }

/* Kayan yetenek şeridi */
.pl-marquee { mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pl-marquee-track { display: flex; width: max-content; animation: pl-marquee 46s linear infinite; }
.pl-marquee:hover .pl-marquee-track { animation-play-state: paused; }
@keyframes pl-marquee { to { transform: translateX(-50%); } }

/* Kaydırınca belirme (JS yoksa her şey görünür) */
.pl-js .pl-reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.pl-js .pl-reveal.is-in { opacity: 1; transform: none; }
.pl-reveal[data-delay="1"] { transition-delay: .08s; } .pl-reveal[data-delay="2"] { transition-delay: .16s; }
.pl-reveal[data-delay="3"] { transition-delay: .24s; } .pl-reveal[data-delay="4"] { transition-delay: .32s; }

/* Mini arayüzlerde yazılıyormuş gibi satırlar ve çubuklar */
.pl-type { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--qd-primary); width: 0; animation: pl-typing 2.6s steps(40) .4s forwards, pl-caret-blink .9s steps(1) infinite; }
@keyframes pl-caret-blink { 50% { border-color: transparent; } }
@keyframes pl-typing { to { width: 100%; } }
.pl-bar { transform-origin: bottom; animation: pl-grow 1.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes pl-grow { from { transform: scaleY(.1); } }
.pl-pulse { animation: pl-pulse 2s ease-out infinite; }
@keyframes pl-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--qd-primary) 45%, transparent); } 80%, 100% { box-shadow: 0 0 0 12px transparent; } }

/* Referans yelpazesi: kart konumları JS ile (plFan) */
.pl-fan { --pl-card-w: 232px; position: relative; height: 700px; }
.pl-fan-card { position: absolute; left: 50%; top: 10px; width: var(--pl-card-w); margin-left: calc(var(--pl-card-w) / -2); transform-origin: 50% 115%;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, filter .6s ease; will-change: transform; }
@media (min-width: 768px) { .pl-fan { --pl-card-w: 300px; height: 790px; } }
.pl-fan-card { container-type: inline-size; border-radius: 2rem; }
.pl-fan-card:focus-visible { outline: 3px solid var(--qd-primary); outline-offset: 6px; }
.pl-showcase-phone { padding: 8px; border-radius: 2rem; background: white; box-shadow: 0 30px 65px -30px rgb(17 24 39 / .45); border: 1px solid rgb(0 0 0 / .08); }
.pl-showcase-phone.is-active { outline: 2px solid color-mix(in srgb, var(--qd-primary) 30%, white); }
.pl-showcase-screen { display: flex; flex-direction: column; aspect-ratio: 390 / 890; overflow: hidden; border-radius: 1.55rem; background: #f7f7f7; container-type: inline-size; }
.pl-showcase-status { display: flex; align-items: center; justify-content: space-between; padding: 3% 6%; flex-shrink: 0; font-size: 3cqw; font-weight: 700; }
.pl-showcase-notch { width: 25%; height: 1.25em; background: #111827; border-radius: 1rem; }
.pl-showcase-real { display: block; width: 100%; flex: 1; min-height: 0; object-fit: cover; object-position: top; }
.pl-showcase-caption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 12px 4px 5px; font-size: 3.8cqw; font-weight: 800; }
.pl-showcase-caption > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-showcase-link, .pl-showcase-example { flex-shrink: 0; padding: .5em .65em; border-radius: 1rem; font-size: .85em; }
.pl-showcase-link { background: var(--color-primary-soft); color: var(--qd-primary); }
.pl-showcase-link:hover { background: var(--qd-primary); color: white; }
.pl-showcase-example { background: #f3f4f6; color: #4b5563; }
.pl-menu-preview { display: flex; flex: 1; flex-direction: column; min-height: 0; gap: .8em; padding: .8em 1em 1em; font-size: 3.35cqw; color: #17202c; }
.pl-menu-heading { display: flex; flex-direction: column; align-items: center; gap: .45em; text-align: center; }
.pl-menu-monogram { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 6.2em; height: 5.2em; border-radius: 1em; color: white; }
.pl-menu-monogram i { font-size: 2.1em; }
.pl-menu-monogram b { font-size: 1.1em; letter-spacing: .15em; }
.pl-menu-heading > strong { font-size: 1.65em; font-weight: 800; }
.pl-menu-heading > span:last-child { color: #606873; }
.pl-menu-search { display: flex; align-items: center; gap: .7em; background: white; border-radius: 1.2em; padding: 1em; box-shadow: 0 1px 3px rgb(0 0 0 / .09); color: #707780; }
.pl-menu-search > span { flex: 1; }
.pl-menu-search > b { color: var(--tone); }
.pl-menu-categories { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; }
.pl-menu-categories > div { display: flex; flex-direction: column; align-items: center; gap: .45em; padding: .7em; border-radius: 1.2em; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / .09); }
.pl-menu-categories img { width: 3.8em; height: 3.8em; border-radius: .8em; object-fit: cover; }
.pl-menu-categories strong { font-size: 1.05em; }
.pl-menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; font-weight: 700; }
.pl-menu-actions > span { padding: .9em .5em; text-align: center; border-radius: 1em; background: white; }
.pl-menu-actions > span:first-child { color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, white); }
.pl-menu-section { display: flex; align-items: center; justify-content: space-between; padding: .2em 0; font-size: 1.35em; }
.pl-menu-section strong { padding-left: .6em; border-left: 3px solid var(--tone); }
.pl-menu-products { display: grid; flex: 1; min-height: 0; grid-template-rows: repeat(3, 1fr); gap: .7em; }
.pl-menu-product { position: relative; display: flex; align-items: center; gap: .8em; min-height: 0; padding: .65em; border-radius: 1.2em; background: white; box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.pl-menu-product > img { width: 6.1em; height: 100%; max-height: 7em; object-fit: cover; border-radius: .8em; }
.pl-menu-product > div { display: flex; flex: 1; flex-direction: column; gap: .4em; min-width: 0; padding-right: 1em; }
.pl-menu-product strong { font-size: 1.15em; }
.pl-menu-product div > span { font-size: .9em; color: #69707a; }
.pl-menu-product b { color: var(--tone); font-size: 1.3em; }
.pl-menu-add { position: absolute; right: .55em; bottom: .55em; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--tone); color: white; font-size: 1.4em; }
.pl-menu-cart { display: flex; align-items: center; gap: .8em; padding: 1em; border-radius: 1.4em; background: var(--tone); color: white; }
.pl-menu-cart > i { font-size: 2em; }
.pl-menu-cart > span { display: flex; flex: 1; flex-direction: column; }
.pl-menu-cart strong { font-size: 1.25em; }
.pl-menu-cart small { opacity: .85; }
.pl-menu-cart > b { padding: .6em .8em; border-radius: 2em; background: white; color: var(--tone); }
.pl-tone-red { --tone: var(--qd-primary); } .pl-tone-dark { --tone: var(--qd-secondary); }
.pl-tone-orange { --tone: color-mix(in srgb, var(--color-accent, #FF8A3D) 68%, black); } .pl-tone-rose { --tone: color-mix(in srgb, var(--qd-primary) 75%, var(--qd-secondary)); }
.pl-tone-bg { background: linear-gradient(140deg, var(--tone), color-mix(in srgb, var(--tone) 55%, black)); }
.pl-tone-soft { background: color-mix(in srgb, var(--tone) 12%, white); }

@media (prefers-reduced-motion: reduce) {
  .pl-blob, .pl-float, .pl-marquee-track, .pl-caret, .pl-type, .pl-bar, .pl-pulse, .pl-squiggle path { animation: none !important; }
  .pl-type { width: 100%; border: 0; } .pl-squiggle path { stroke-dashoffset: 0; }
  .pl-js .pl-reveal { opacity: 1; transform: none; transition: none; }
  .pl-fan-card, .pl-card { transition: none; }
}

/* Blog makale gövdesi (Irena editöründen gelen temizlenmiş HTML) */
.pl-article { font-size: 1.125rem; line-height: 1.85; color: rgb(17 24 39 / .82); overflow-wrap: anywhere; }
.pl-article > * + * { margin-top: 1.25em; }
.pl-article h2 { margin-top: 2.2em; font-size: 1.75rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: #111827; }
.pl-article h3 { margin-top: 1.8em; font-size: 1.35rem; font-weight: 800; line-height: 1.3; color: #111827; }
.pl-article h4 { margin-top: 1.6em; font-size: 1.1rem; font-weight: 800; color: #111827; }
.pl-article ul, .pl-article ol { padding-left: 1.5em; }
.pl-article ul { list-style: disc; }
.pl-article ol { list-style: decimal; }
.pl-article li + li { margin-top: .4em; }
.pl-article li::marker { color: var(--color-primary); font-weight: 700; }
.pl-article a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pl-article blockquote { border-left: 4px solid var(--color-primary); background: var(--color-primary-soft); border-radius: 0 1rem 1rem 0; padding: 1rem 1.25rem; font-style: italic; }
.pl-article img { max-width: 100%; height: auto; border-radius: 1.25rem; }
.pl-article hr { border: 0; border-top: 1px solid rgb(0 0 0 / .1); margin: 2.5em 0; }
.pl-article pre { overflow-x: auto; border-radius: 1rem; background: #111827; color: #f9fafb; padding: 1rem 1.25rem; font-size: .95rem; }
.pl-article code { border-radius: .4rem; background: rgb(0 0 0 / .06); padding: .1em .35em; font-size: .92em; }
.pl-article pre code { background: none; padding: 0; }