/* ciftci.app tasarım token'ları — tek kaynak. Bileşenler yalnızca bu değişkenleri kullanır. */
:root {
  color-scheme: light;

  /* Renk: toprak/ekin tonları; metin kontrastı WCAG AA (≥4.5:1) */
  --c-bg: #fbfcfa;
  --c-surface: #ffffff;
  --c-surface-2: #f1f4f0;
  --c-text: #10211a;
  --c-text-muted: #435249;
  --c-border: #e3e9e2;
  --c-primary: #14713a;
  --c-primary-hover: #0f5a2e;
  --c-on-primary: #ffffff;
  --c-accent: #a85a12;
  --c-focus: #1d5fbf;
  --c-success-bg: #e4f3e6; --c-success: #14713a;
  --c-warning-bg: #fdf0dd; --c-warning: #8a4f08;
  --c-error-bg: #fbe3e0; --c-error: #a3231a;
  --c-info-bg: #e4effa; --c-info: #1b5aa0;

  /* Tipografi: sistem fontu (ek indirme yok) */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-base: 0.875rem;
  --fs-sm: calc(var(--fs-base) * 0.9);
  --fs-lg: calc(var(--fs-base) * 1.05);
  --fs-xl: calc(var(--fs-base) * 1.1);
  --fs-2xl: calc(var(--fs-base) * 1.2);
  --fs-3xl: calc(var(--fs-base) * 1.45);
  --lh: 1.4;
  --lh-tight: 1.2;

  /* Aralık ölçeği (4px tabanlı) */
  --s-1: 0.2rem; --s-2: 0.35rem; --s-3: 0.5rem; --s-4: 0.7rem;
  --s-5: 0.9rem; --s-6: 1.2rem; --s-7: 1.75rem; --s-8: 2.5rem;

  /* Etkileşim: en küçük dokunma hedefi 48px (tek elle kullanım) */
  --tap: 38px;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.06);
  --container: 1200px;
  --gutter: 12px;
  --tabbar-h: 54px;
  --fs-page: var(--fs-2xl);
  --t-green: #eef6ef;
  --t-amber: #fdf4e8;
  --t-blue: #ebf3fb;
  --grad-primary: linear-gradient(135deg, #1f8a45, #0f5f2f);
}

/* Büyük yazı modu (kullanıcı tercihi) */
:root[data-font="lg"] { --fs-base: 1.0625rem; --tap: 46px; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #141812; --c-surface: #1c211a; --c-surface-2: #252b22;
  --c-text: #e9ece4; --c-text-muted: #b9c1b3; --c-border: #3a4236;
  --c-primary: #6fbf7c; --c-primary-hover: #86cf92; --c-on-primary: #0d1a10;
  --c-accent: #e09a55; --c-focus: #7fb0ff;
  --c-success-bg: #1d3320; --c-success: #a6deae;
  --c-warning-bg: #3a2c10; --c-warning: #f2cc85;
  --c-error-bg: #3d1a17; --c-error: #f5aaa2;
  --c-info-bg: #172a42; --c-info: #a9c8f2;
  --shadow: none; --t-green: #1b2a20; --t-amber: #2e2517; --t-blue: #18263a; --grad-primary: linear-gradient(135deg, #2d8f4e, #1b6a38);
}

/* Temel sıfırlama ve tipografi — mobile-first */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fs-base) / var(--lh) var(--font);
  overflow-wrap: break-word;
}
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: var(--lh-tight); margin: 0 0 var(--s-3); text-wrap: balance; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--s-4); }
a { color: var(--c-primary); text-underline-offset: 0.15em; }
/* Özgüllük 0: renkli düğme ve kart bağlantılarının yazı rengini ezmez */
:where(a:hover) { color: var(--c-primary-hover); }
code, pre { font-family: var(--font-mono); font-size: var(--fs-sm); }
pre { overflow-x: auto; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack > * + * { margin-top: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.muted { color: var(--c-text-muted); }
.eyebrow { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--s-2); }
.lead { font-size: var(--fs-lg); color: var(--c-text-muted); }

.skip-link { position: absolute; left: var(--s-2); top: -100px; padding: var(--s-2) var(--s-3); background: var(--c-surface); z-index: 100; }
.skip-link:focus { top: var(--s-2); }

@media (min-width: 768px) {
  h1 { font-size: var(--fs-3xl); }
  h2 { font-size: var(--fs-2xl); }
}

/* Bileşenler: button, field, card, list, nav, alert, empty-state, skeleton */

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); color: var(--c-text);
  font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.btn--primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.btn--primary:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--c-primary); }
.btn--danger { color: var(--c-error); border-color: currentColor; }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-sm); }
.btn--lg { min-height: calc(var(--tap) + 8px); font-size: var(--fs-lg); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Form alanları */
.field { display: grid; gap: var(--s-1); }
.field__label { font-weight: 600; }
/* Etiket alanın içinde: boş alanda ortada, dokununca veya dolunca üst kenarda. placeholder=" " boşluğu CSS'e bildirir. */
.field:has(> .field__label:not(.sr-only) + :is(.input, .select, .textarea, .field__control)) { --embed-h: calc(var(--tap) + 6px); position: relative; }
.field > .field__label:not(.sr-only):has(+ :is(.input, .select, .textarea, .field__control)) { position: absolute; z-index: 1; top: 3px; left: calc(var(--s-3) + 1px); right: var(--s-5); overflow: hidden; color: var(--c-text-muted); font-size: calc(var(--fs-base) * 0.8); font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; transition: top 0.12s, transform 0.12s, font-size 0.12s; }
.field > .field__label:not(.sr-only):has(+ :is(.input, .textarea, .field__control > .input)[placeholder=" "]:placeholder-shown:not(:focus):not(:-webkit-autofill)) { top: calc(var(--embed-h) / 2); right: var(--s-2); transform: translateY(-50%); font-size: var(--fs-sm); font-weight: 500; }
.field > .field__label:not(.sr-only) + :is(.input, .select, .textarea), .field > .field__label:not(.sr-only) + .field__control > .input { min-height: var(--embed-h); padding-block: 15px 1px; }
.field > .field__label:not(.sr-only) + .select { padding-inline-start: calc(var(--s-3) - 3px); }
.field > .field__label:not(.sr-only) + .textarea { padding-block: 18px var(--s-1); }
.field__hint { font-size: var(--fs-sm); color: var(--c-text-muted); margin: 0; }
.field__error { font-size: var(--fs-sm); color: var(--c-error); margin: 0; font-weight: 600; }
.input, .select, .textarea {
  width: 100%; min-height: var(--tap); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface);
}
.textarea { min-height: 4.92rem; }
.field--error .input { border-color: var(--c-error); border-width: 2px; }
.field__control--suffix { display: flex; align-items: stretch; }
.field__control--suffix .input { border-start-end-radius: 0; border-end-end-radius: 0; }
.field__suffix {
  display: flex; align-items: center; padding: 0 var(--s-3);
  border: 1px solid var(--c-border); border-inline-start: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--c-surface-2); color: var(--c-text-muted);
}

/* Kart, liste, rozet */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--s-4); box-shadow: var(--shadow); }
.list { list-style: none; margin: 0; padding: 0; }
.list__item { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-border); }
.list__item:last-child { border-bottom: 0; }
.product-thumb { flex: none; width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--c-border); } /* F-177 vitrindeki ürün fotoğrafı */
.list.card { padding-block: 0; padding-inline: var(--s-4); }
.badge { display: inline-block; padding: 0.1em 0.5em; border-radius: 999px; background: var(--c-warning-bg); color: var(--c-warning); font-size: var(--fs-sm); font-weight: 700; }

/* Uyarılar */
.alert { padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); border-inline-start: 4px solid currentColor; }
.alert--success { background: var(--c-success-bg); color: var(--c-success); }
.alert--warning { background: var(--c-warning-bg); color: var(--c-warning); }
.alert--error { background: var(--c-error-bg); color: var(--c-error); }
.alert--info { background: var(--c-info-bg); color: var(--c-info); }

/* Boş durum ve iskelet yükleyici */
.empty-state { text-align: center; padding: var(--s-7) var(--s-4); border: 2px dashed var(--c-border); border-radius: var(--radius); }
.skeleton { height: 1em; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--c-surface-2), var(--c-border), var(--c-surface-2)); background-size: 200% 100%; animation: sk 1.4s ease-in-out infinite; }
.skeleton--title { height: 1.5em; width: 60%; }
.skeleton--short { width: 40%; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Public site başlığı */
.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 64px; padding-block: var(--s-2); }
.brand { font-weight: 700; font-size: var(--fs-lg); color: var(--c-text); text-decoration: none; }
.brand span { color: var(--c-primary); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.site-nav a:not(.btn) { color: var(--c-text); text-decoration: none; font-weight: 500; }
.site-main { padding-block: var(--s-6); }
.site-footer { padding-block: var(--s-6); color: var(--c-text-muted); border-top: 1px solid var(--c-border); }

/* Hero: genişlik daraltma YOK — kapsayıcının tamamını kullanır (global kural) */
.hero { padding-block: var(--s-6) var(--s-7); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.notice { padding: var(--s-4); background: var(--c-surface-2); border-radius: var(--radius); }

/* Uygulama kabuğu: alt sekme çubuğu (5 ana eylem) */
.app-main { width: 100%; padding: var(--s-4) var(--gutter) calc(var(--tabbar-h) + var(--s-6) + env(safe-area-inset-bottom)); max-width: var(--container); margin-inline: auto; }
.page-head { margin-bottom: var(--s-5); }
.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: repeat(5, 1fr);
  min-height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom);
  background: var(--c-surface); border-top: 1px solid var(--c-border);
}
.tabbar__item { display: flex; align-items: center; justify-content: center; min-height: var(--tap); padding: var(--s-1); font-size: var(--fs-sm); font-weight: 600; text-align: center; color: var(--c-text-muted); text-decoration: none; }
.tabbar__item[aria-current="page"] { color: var(--c-primary); box-shadow: inset 0 3px 0 var(--c-primary); }

/* Kimlik sayfaları: tek sütun kart, tek elle kullanım */
.auth-header { padding: var(--s-4) var(--gutter); }
.auth-main { padding: 0 var(--gutter) var(--s-7); }
.auth-card { margin-inline: auto; max-width: 24.6rem; }
.btn--block { width: 100%; }
.input--code { font-size: var(--fs-2xl); letter-spacing: 0.3em; text-align: center; font-family: var(--font-mono); }
.badge--ok { background: var(--c-success-bg); color: var(--c-success); }
.badge--danger { background: var(--c-error-bg); color: var(--c-error); }
.code-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.code-list code, .secret-key code { font-size: var(--fs-lg); }
.secret-key { padding: var(--s-3); background: var(--c-surface-2); border-radius: var(--radius-sm); word-break: break-all; }

/* Seçim listeleri (radio/checkbox) — tüm satır dokunma hedefi */
fieldset.field { border: 0; padding: 0; margin: 0; }
.choice-list { display: grid; gap: var(--s-2); }
.choice { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); cursor: pointer; }
.choice input { width: 1.025rem; height: 1.025rem; accent-color: var(--c-primary); }
.choice:has(input:checked) { border-color: var(--c-primary); box-shadow: inset 0 0 0 1px var(--c-primary); }

/* Yardımcı düzenler */
.cluster--between { justify-content: space-between; }
.grid-2 { display: grid; gap: var(--s-3); }
@media (min-width: 480px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.choice-list--inline { grid-template-columns: repeat(auto-fill, minmax(6.97rem, 1fr)); }
.select--suffix { width: auto; border-start-start-radius: 0; border-end-start-radius: 0; border-inline-start: 0; }
.list__link { display: flex; flex-direction: column; flex: 1; min-width: 0; color: var(--c-text); text-decoration: none; }
.list__link:hover strong { text-decoration: underline; }
.list__meta { text-align: end; white-space: nowrap; }
.facts { display: grid; gap: var(--s-3); margin: 0; }
.facts div { display: flex; justify-content: space-between; gap: var(--s-3); border-bottom: 1px solid var(--c-border); padding-bottom: var(--s-2); }
.facts dt { color: var(--c-text-muted); }
.facts dd { margin: 0; font-weight: 600; text-align: end; }

/* Başlangıç sihirbazı adımları */
.steps { display: flex; gap: var(--s-2); list-style: none; padding: 0; margin: var(--s-4) 0 0; counter-reset: s; }
.steps__item { flex: 1; padding-top: var(--s-2); border-top: 4px solid var(--c-border); font-size: var(--fs-sm); color: var(--c-text-muted); }
.steps__item.is-done, .steps__item[aria-current="step"] { border-top-color: var(--c-primary); color: var(--c-text); }

/* Harita */
.map { height: min(65vh, 560px); min-height: 320px; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface-2); }
.map--sm { height: 260px; min-height: 220px; }
.map-toolbar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.map-toolbar [aria-pressed="true"] { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.map-stats { font-size: var(--fs-lg); margin: 0; }
.map-vertex { background: #fff; border: 3px solid #14713a; border-radius: 50%; box-shadow: 0 1px 4px rgb(0 0 0 / 0.4); }

/* PWA: bildirim şeridi ve senkron rozeti */
.app-banners { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); }
.app-banner { min-width: 0; overflow-wrap: anywhere; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--c-text); color: var(--c-bg); box-shadow: var(--shadow); }
.sync-badge { display: block; padding: var(--s-2) var(--gutter); background: var(--c-warning-bg); color: var(--c-warning); font-weight: 600; text-align: center; text-decoration: none; }
.sync-badge[hidden] { display: none; }

/* Kutucuk menü (Çiftliğim) */
.tile-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(12.3rem, 1fr)); }
.tile { display: flex; flex-direction: column; gap: var(--s-1); min-height: 4.92rem; padding: var(--s-4); border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); text-decoration: none; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--c-primary); color: var(--c-text); }
.tile strong { font-size: var(--fs-lg); }
.tile span { color: var(--c-text-muted); }

/* Ön rapor (Faz 02): her değerin altında kaynak/güven satırı; geniş ekranda iki sütun */
.badge--warn { background: var(--c-warning-bg); color: var(--c-warning); }
.report-grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .report-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.obs__meta { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 400; }
.obs__range { display: block; font-size: var(--fs-sm); color: var(--c-text-muted); font-weight: 400; }
.facts dt { min-width: 0; flex-shrink: 0; max-width: 50%; } /* kısa etiket ("İzin") harf harf bölünmesin (break-word min-content'i daraltıyor); uzun değer dd'de sarılır */
.table .is-deficit { color: var(--c-error); font-weight: 600; }

/* Laboratuvar (Faz 03) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mono { font-family: var(--font-mono); }
.h3 { font-size: var(--fs-lg); margin: 0; }
.text-end { text-align: end; }
.price { font-size: var(--fs-lg); }
.input--code-sm { font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; max-inline-size: 13.12rem; }
.sample-row { padding-top: var(--s-3); border-top: 1px solid var(--c-border); }
.is-highlight { box-shadow: 0 0 0 3px var(--c-primary); }
.table .is-issue { background: var(--c-warning-bg); }
.param-row .input { flex: 1; min-width: 8.2rem; }
.param-row[hidden] { display: none; }
/* Sonuç girişi: mobilde parametre başına blok (ad, değer + birim yan yana, yöntem); geniş ekranda tek satır */
.param-entries { display: grid; gap: var(--s-3); }
.param-entry { display: grid; gap: var(--s-1); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border); }
.param-entry__label { font-weight: 600; }
.param-entry__value { display: flex; gap: var(--s-2); }
.param-entry__value .input { flex: 1; min-width: 0; }
.param-entry__value .select { width: auto; min-width: 6.15rem; }
.input--sm { min-height: 40px; font-size: var(--fs-sm); }
@media (min-width: 900px) { .param-entry:not(.draft-row) { grid-template-columns: 16rem 1fr 14rem; align-items: center; } }
.param-entry__value .unit-input { flex: 0 0 7.38rem; }
.draft-row.is-issue { padding: var(--s-3); border-radius: var(--radius-sm); background: var(--c-warning-bg); border-bottom: 0; }
.layout-print { background: #fff; color: #000; }
.labels { padding: var(--s-4); }
.label-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8mm; }
.label { display: flex; gap: var(--s-3); align-items: center; padding: 4mm; border: 1px dashed #666; break-inside: avoid; }
.label__qr svg { width: 34mm; height: 34mm; }
.label__text { display: flex; flex-direction: column; gap: 2px; font-size: 11pt; }
.label__code { font-family: var(--font-mono); font-size: 13pt; font-weight: 700; letter-spacing: 0.05em; }
/* Önizleme yayını şeridi (PREVIEW_MODE) */
.preview-banner { background: var(--c-warning-bg); color: var(--c-warning); font-size: var(--fs-sm); text-align: center; padding: var(--s-1) var(--s-3); }
/* F-246 sözleşme metni, F-519 sezon raporu: baskıda uygulama kabuğu gizlenir, kartlar bölünmez */
.contract__terms { white-space: pre-wrap; }
.contract__hash { word-break: break-all; }
@media print {
  .no-print, .skip-link, .tabbar, .sync-badge, .app-banner, .preview-banner { display: none !important; }
  .labels { padding: 0; }
  .app-main { padding: 0; max-width: none; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* Uzun metin sayfaları (hakkımızda, yasal metinler) */
.prose h2 { margin-top: var(--s-6); }
.prose ul { padding-inline-start: var(--s-5); }
.prose li + li { margin-top: var(--s-2); }
.site-footer__inner { display: grid; gap: var(--s-3); }
.site-footer a { color: var(--c-text-muted); }

/* Tablo (yönetim) */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: var(--s-2); border-bottom: 1px solid var(--c-border); text-align: start; vertical-align: top; }
.table th { color: var(--c-text-muted); font-weight: 600; }

/* Hata sayfası */
.error-page { padding-block: var(--s-6); }
.debug-trace { padding: var(--s-4); background: var(--c-surface-2); border-radius: var(--radius-sm); white-space: pre-wrap; }

@media (min-width: 1024px) {
  /* Geniş ekranda sekme çubuğu sol menüdür; altında hesap ve çıkış sabit durur */
  :root { --side-w: 216px; }
  html.side-min { --side-w: 64px; }
  body.layout-app { padding-inline-start: var(--side-w); }
  .tabbar { inset: 0 auto 0 0; width: var(--side-w); display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-2); border-top: 0; border-inline-end: 1px solid var(--c-border); overflow-y: auto; }
  .tabbar__item { flex: none; flex-direction: row; justify-content: flex-start; gap: var(--s-2); padding-inline: var(--s-3); border-radius: 8px; }
  .tabbar__item[aria-current="page"] { box-shadow: none; background: var(--c-surface-2); }
  .tabbar__item:hover, .side-foot__out:hover, .side-foot__min:hover, .side-foot__user:hover { background: var(--c-surface-2); }
  .side-foot { display: grid; gap: 2px; margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--c-border); }
  .app-main { padding-bottom: var(--s-7); }
  html.side-min .tabbar__item { justify-content: center; padding-inline: 0; font-size: 0; }
  html.side-min .tabbar__item .ico { flex: none; }
  html.side-min .tabbar .acct__who, html.side-min .side-foot__out span { display: none; }
  html.side-min .side-foot__out, html.side-min .side-foot__user, html.side-min .side-foot__min { justify-content: center; }
  .acct__nav { display: none !important; }
}
@media (max-width: 1023.98px) {
  .side-foot { display: none; }
  .acct__panel { position: fixed; inset: auto 0 0 0; width: auto; max-height: 85dvh; overflow-y: auto; border-radius: 16px 16px 0 0; padding-bottom: calc(var(--s-3) + env(safe-area-inset-bottom)); }
}
.side-foot__user, .side-foot__out, .side-foot__min { display: flex; align-items: center; gap: var(--s-2); width: 100%; min-height: 36px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; color: var(--c-text); font: inherit; text-align: start; text-decoration: none; cursor: pointer; }
.side-foot__min { color: var(--c-text-muted); justify-content: flex-end; }
.acct { position: relative; }
.acct__av { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--c-primary); color: #fff; font-size: 13px; font-weight: 700; }
.acct__who { display: grid; min-width: 0; }
.acct__who b, .acct__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__who small { color: var(--c-text-muted); }
.acct__panel { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 80; width: 264px; padding: var(--s-2); border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); color: var(--c-text); box-shadow: var(--shadow); }
.acct__panel[hidden] { display: none; }
.acct__head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2); }
.acct__nav { padding-block: 4px; border-block: 1px solid var(--c-border); }
.acct__panel a, .acct__panel button { display: flex; align-items: center; width: 100%; min-height: var(--tap); padding: 0 var(--s-2); border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.acct__panel a:hover, .acct__panel button:hover, .acct__panel a:focus-visible, .acct__panel button:focus-visible { background: var(--c-surface-2); }
.acct__panel hr { margin: 4px 0; border: 0; border-top: 1px solid var(--c-border); }
.acct__panel button { color: var(--c-danger, #b42318); font-weight: 600; }
.auth-notice { position: fixed; inset: auto var(--s-3) calc(var(--tabbar-h) + var(--s-3)) var(--s-3); z-index: 90; }
.auth-end { max-width: 22rem; padding: var(--s-5); border: 0; border-radius: 12px; background: var(--c-surface); color: var(--c-text); }
.auth-end::backdrop { background: rgb(17 40 28 / 0.55); }
.card-list { list-style: none; padding: 0; margin: 0; }

/* Telefonda kurulum penceresi: tüm paketlerde (herkese açık sayfalar dahil) */
.pwa-gate { width: 100%; max-width: none; margin: auto 0 0; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 16px 16px 0 0; background: var(--c-surface); color: var(--c-text); text-align: center; }
.pwa-gate::backdrop { background: rgb(17 40 28 / 0.55); }
.pwa-gate img { margin-inline: auto; }
.pwa-gate h2 { margin: 10px 0 6px; font-size: 19px; }
.pwa-gate p { margin: 0 0 14px; color: var(--c-text-muted); }
.pwa-gate .btn { margin-top: 8px; min-height: 46px; }

/* Inter: uygulama ve ana sayfa paketlerinde ortak */
@font-face { font-family: "Inter Var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-0130, U+0132-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0; }
:root { --font: "Inter Var", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }

/* Herkese açık kabuk ile Çiftliğim, Tümü ve arazi listesi ekranları */

/* Herkese açık üst menü ve alt bilgi (home.php, public.php) */
.brand { display: inline-flex; align-items: center; font-size: 1.107rem; letter-spacing: -0.02em; }
.ico { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.25em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.site-header { position: sticky; top: 0; z-index: 30; }
.site-header__inner { flex-wrap: nowrap; }
.site-nav a:not(.btn) { font-size: 0.769rem; }
.site-nav a:not(.btn):hover { color: var(--c-primary); }
.site-actions { display: flex; align-items: center; gap: var(--s-2); }
.site-login { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--c-text); font-weight: 600; font-size: 0.769rem; text-decoration: none; }
.site-login span { display: none; }
.site-menu summary { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: var(--radius-sm); cursor: pointer; list-style: none; }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu__bars, .site-menu__bars::before, .site-menu__bars::after { display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--c-text); }
.site-menu__bars { position: relative; }
.site-menu__bars::before, .site-menu__bars::after { content: ""; position: absolute; left: 0; }
.site-menu__bars::before { top: -7px; }
.site-menu__bars::after { top: 7px; }
.site-menu[open] .site-menu__bars { background: transparent; }
.site-menu[open] .site-menu__bars::before { top: 0; transform: rotate(45deg); }
.site-menu[open] .site-menu__bars::after { top: 0; transform: rotate(-45deg); }
.site-menu__panel { position: absolute; inset: 100% 0 auto; display: grid; padding: var(--s-2) var(--gutter) var(--s-4); background: var(--c-surface); border-bottom: 1px solid var(--c-border); box-shadow: 0 12px 24px rgb(16 40 26 / 0.12); }
.site-menu__panel a:not(.btn) { display: flex; align-items: center; min-height: var(--tap); color: var(--c-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--c-border); }
.site-menu__panel .btn { margin-top: var(--s-3); }
.site-header .site-nav, .site-header .site-reg { display: none; }
.site-footer__cols { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: var(--s-6) var(--s-4); }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__brand p { margin: var(--s-2) 0 0; }
.site-footer h2 { margin: 0 0 var(--s-2); font-size: 0.769rem; color: var(--c-text); }
.site-footer ul { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; font-size: 0.769rem; }
.site-footer li a { display: inline-block; padding-block: 3px; }
@media (min-width: 1024px) {
  .site-header .site-nav { display: flex; }
  .site-header .site-reg { display: inline-flex; }
  .site-menu { display: none; }
  .site-login span { display: inline; padding-inline: var(--s-3); }
  .site-login .ico { display: none; }
  .site-footer__cols { grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: auto; }
}

/* Gruplu gezinme kartları */
.navgroups { display: grid; gap: var(--s-5); align-items: start; }
.navcard { margin: 0; padding: var(--s-1) var(--s-2); list-style: none; }
.navcard .rowlink { padding-inline: var(--s-1); border: 0; border-radius: 0; background: none; }
.navcard li + li .rowlink { border-top: 1px solid var(--c-border); }
.navcard a.rowlink:hover { background: var(--t-green); }
.navcard .tile { display: block; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.navcard .tile .ibox { color: var(--tint-ink); }
.navcard .tile .rowlink__title { color: var(--c-text); }
.rows--cols .rowlink { height: 100%; }

@media (min-width: 768px) { .rows--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .navgroups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.site-header .brand img { height: 56px; }
.site-footer .brand img { height: 80px; }

/* Ana sayfa: yalnız / yükler. Genişlik her yerde .container (header ile aynı); hero metninde daraltma yok. */
.lp {
  --lp-primary: #174d3a; --lp-action: #307c59; --lp-bg: #f7f8f5; --lp-soft: #e8eee6;
  --lp-warn: #d99c36; --lp-ink: #17251f; --lp-muted: #55635c; --lp-line: #e2e8e0;
  --lp-card: #fff; --lp-r: 16px;
  background: #fff; color: var(--lp-ink); font-size: 0.9375rem; line-height: 1.5;
}
.lp h1, .lp h2, .lp h3 { color: var(--lp-ink); letter-spacing: -0.02em; line-height: 1.16; margin: 0; }
.lp h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); font-weight: 800; }
.lp h3 { font-size: 1.0625rem; font-weight: 700; }
.lp p { margin: 0; }
.lp ul, .lp ol { margin: 0; padding: 0; list-style: none; }
.lp section, .lp [id] { scroll-margin-top: 76px; }
.lp img { height: auto; max-width: 100%; }
.lp .container { position: relative; }
.lp-sub { margin-top: 8px !important; color: var(--lp-muted); }
.lp-fine { margin-top: 10px !important; color: var(--lp-muted); font-size: 0.8125rem; }
.lp .lp-note { margin-inline: auto; padding-top: 10px; color: var(--lp-muted); font-size: 0.75rem; }
.lp-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px !important; padding: 4px 10px; border-radius: 99px; background: var(--lp-soft); color: var(--lp-primary); font-size: 0.75rem; font-weight: 700; }
.lp-eyebrow .ico { width: 15px; height: 15px; }
.lp-soon { display: inline-block; margin-inline-end: 4px; padding: 1px 7px; border-radius: 99px; background: #fbeed6; color: #7a4e08; font-size: 0.6875rem; font-weight: 700; }

.lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; font-weight: 700; text-decoration: none; }
.lp-btn .ico { width: 16px; height: 16px; }
.lp-btn--main { background: var(--lp-primary); color: #fff; }
.lp-btn--main:hover { background: var(--lp-action); color: #fff; }
.lp-btn--line { background: #fff; border-color: #c8d6cb; color: var(--lp-primary); }
.lp-btn--line:hover { border-color: var(--lp-primary); color: var(--lp-primary); }
.lp-btn--white { background: #fff; color: var(--lp-primary); }
.lp-btn--white:hover { background: var(--lp-soft); color: var(--lp-primary); }
.lp-btn--ghost { border-color: rgb(255 255 255 / 0.55); color: #fff; }
.lp-btn--ghost:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.lp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
/* Telefonda iki düğme tek sırada, eşit paylaşımlı */
@media (max-width: 767px) {
  .lp-actions { flex-wrap: nowrap; gap: 8px; }
  .lp-actions .lp-btn { flex: 1 1 0; min-width: 0; padding-inline: 8px; font-size: 13px; line-height: 1.2; text-align: center; }
}
.lp-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--lp-primary); font-weight: 700; text-decoration: none; }
.lp-link:hover { color: var(--lp-action); text-decoration: underline; }
.lp-link .ico { width: 15px; height: 15px; }
.lp-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.lp-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--lp-soft); color: var(--lp-primary); }
.lp-ic .ico { width: 22px; height: 22px; }

.lp-ticks { display: grid; gap: 5px; margin-top: 10px !important; }
.lp-ticks li { position: relative; padding-inline-start: 22px; }
.lp-ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border: solid var(--lp-action); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.lp-ticks--sm { font-size: 0.8125rem; gap: 3px; margin-top: 6px !important; }

/* Hero */
.lp-hero { position: relative; overflow: hidden; padding: 20px 0 14px; background: linear-gradient(180deg, #eaf3ea, #f7f8f5 70%, #fff); }
.lp-hero__in { display: grid; gap: 20px; }
.lp-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); font-weight: 800; letter-spacing: -0.03em; }
.lp-lead { margin-top: 12px !important; font-size: 1rem; color: #33423b; }
.lp-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 16px !important; font-size: 0.8125rem; font-weight: 600; }
.lp-tags li { display: flex; align-items: center; gap: 6px; }
.lp-tags .ico { flex: none; width: 18px; height: 18px; color: var(--lp-action); }
.lp-hero__art { position: relative; display: flex; justify-content: center; margin: 0; }
.lp-p--c { width: 260px; filter: drop-shadow(0 14px 22px rgb(23 77 58 / 0.22)); }
.lp-p--l, .lp-p--r { display: none; }

/* Başlangıç */
.lp-start { padding: 26px 0; }
.lp-start__grid { display: grid; gap: 8px; margin-top: 14px !important; }
.lp-start__grid a { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px; border: 1px solid var(--lp-line); border-radius: var(--lp-r); background: var(--lp-card); color: var(--lp-ink); font-weight: 700; text-decoration: none; }
.lp-start__grid a:hover { border-color: var(--lp-action); color: var(--lp-primary); }
.lp-start__grid a > span:nth-child(2) { flex: 1; }
.lp-start__grid a > .ico { flex: none; width: 16px; height: 16px; color: var(--lp-muted); }

/* Sorun → çözüm */
.lp-why { padding: 28px 0; background: var(--lp-bg); }
.lp-pairs { display: grid; gap: 6px; margin-top: 14px !important; }
.lp-pairs li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-card); }
.lp-pairs__p { color: #8c2f26; font-weight: 600; }
.lp-pairs li > .ico { display: none; }
.lp-pairs__a { display: flex; gap: 6px; color: var(--lp-primary); font-weight: 600; }
.lp-pairs__a .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* Özellik kartları */
.lp-band { padding: 26px 0; }
.lp-duo { display: grid; gap: 14px; }
.lp-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--lp-line); border-radius: 20px; background: var(--lp-card); }
.lp-card h2 { font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.45rem); }
.lp-card p + p { margin-top: 6px; }
.lp-card__art { position: relative; display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 0; padding: 12px 0 0; overflow: hidden; border-radius: 14px; background: linear-gradient(160deg, #eef5ec, #f7f8f5); max-height: 320px; }
.lp-card__art img { width: 190px; }
.lp-card__art--two img { width: 150px; }
.lp-card__art .lp-soil { position: absolute; z-index: 1; left: -30px; bottom: -6px; width: 180px; }
.lp-card__art--soil img:last-child, .lp-card__art--harvest img:last-child { position: relative; margin-inline-start: 56px; }

/* Roller */
.lp-roles { padding: 28px 0; background: var(--lp-bg); }
.lp-roles__grid { display: grid; gap: 10px; margin-top: 14px !important; }
.lp-roles__grid > li { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--lp-line); border-radius: var(--lp-r); background: var(--lp-card); }
.lp-roles__grid img { flex: none; width: 96px; height: 200px; object-fit: cover; object-position: top; }
.lp-roles__grid p { font-size: 0.8125rem; color: var(--lp-muted); margin-top: 3px; }

/* Adımlar */
.lp-how { padding: 28px 0; }
.lp-steps { display: grid; gap: 8px; margin-top: 14px !important; counter-reset: none; }
.lp-steps li { position: relative; padding: 10px 12px 10px 54px; border: 1px solid var(--lp-line); border-radius: 12px; }
.lp-steps__n { position: absolute; left: 12px; top: 11px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lp-primary); color: #fff; font-weight: 800; font-size: 0.875rem; }
.lp-steps h3 { font-size: 0.9375rem; }
.lp-steps p { font-size: 0.8125rem; color: var(--lp-muted); }

/* Asistan */
.lp-ai { padding: 28px 0; background: linear-gradient(160deg, #e8f2e6, #f7f8f5); }
.lp-ai__in { display: grid; gap: 16px; }
.lp-ai p:not(.lp-eyebrow):not(.lp-fine) { margin-top: 8px; }
.lp-ai__art { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 0; max-height: 330px; overflow: hidden; }
.lp-ai__art img:first-child { width: 180px; position: relative; z-index: 1; margin-inline-end: -28px; align-self: center; }
.lp-ai__art img:last-child { width: 190px; align-self: flex-start; }

/* Fayda, paket, SSS */
.lp-join { padding: 28px 0; }
.lp-join__grid { display: grid; gap: 10px; margin: 14px 0 16px !important; }
.lp-join__grid li { display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; }
.lp-join__grid .lp-ic { grid-row: span 2; }
.lp-join__grid p { font-size: 0.8125rem; color: var(--lp-muted); }
.lp-plans { padding: 28px 0; background: var(--lp-bg); }
.lp-plans__grid { display: grid; gap: 10px; margin-top: 14px !important; }
.lp-plans__grid li { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--lp-line); border-radius: var(--lp-r); background: var(--lp-card); }
.lp-plans__grid p { color: var(--lp-muted); }
.lp-plans__grid .lp-btn, .lp-plans__grid .lp-soon { align-self: end; justify-self: start; }
.lp-faq { padding: 28px 0; }
.lp-faq__list { display: grid; gap: 6px; margin-top: 14px; }
.lp-faq details { border: 1px solid var(--lp-line); border-radius: 12px; background: var(--lp-card); }
.lp-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 14px; font-weight: 700; cursor: pointer; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; flex: none; color: var(--lp-action); font-size: 1.25rem; font-weight: 500; line-height: 1; }
.lp-faq details[open] summary::after { content: "−"; }
.lp-faq details p { padding: 0 14px 12px; color: #33423b; }

/* Son çağrı */
.lp-final { padding: 26px 0 0; background: linear-gradient(120deg, #174d3a, #245f47 60%, #307c59); color: #fff; overflow: hidden; }
.lp-final h2 { color: #fff; }
.lp-final p { margin-top: 8px; color: #e4efe7; }
.lp-final__in { display: grid; gap: 10px; }
.lp-final img { justify-self: center; width: 240px; margin-bottom: -8px; }

.lp a:focus-visible, .lp summary:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

@media (min-width: 640px) {
  .lp-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-start__grid, .lp-roles__grid, .lp-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-join__grid, .lp-plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-faq__list { align-items: start; }
}
@media (min-width: 768px) {
  .lp-card { grid-template-columns: 220px 1fr; align-items: center; }
  .lp-card--flip { grid-template-columns: 1fr 220px; }
  .lp-card--flip .lp-card__art { order: 2; }
  .lp-card__art { max-height: 400px; }
  .lp-card__art img { width: 176px; }
  .lp-card__art--two img { width: 108px; }
  .lp-card__art .lp-soil { left: -34px; width: 130px; }
  .lp-card__art--soil img:last-child, .lp-card__art--harvest img:last-child { width: 150px; margin-inline-start: 50px; }
  .lp-ai__in { grid-template-columns: 1fr 1fr; align-items: center; }
  .lp-ticks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-final__in { grid-template-columns: 1fr 300px; align-items: end; }
  .lp-final img { width: 300px; }
  .lp-final__in > div { padding-bottom: 26px; }
  .lp-pairs li { grid-template-columns: 1fr 18px 1.2fr; align-items: center; gap: 10px; }
  .lp-pairs li > .ico { display: block; width: 16px; height: 16px; color: var(--lp-muted); }
}
@media (min-width: 1024px) {
  .lp-hero { padding: 26px 0 14px; }
  .lp-hero::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 240px; height: 254px; background: url(/img/lp/leaf-r-360.webp) right bottom / contain no-repeat; opacity: 0.8; pointer-events: none; }
  .lp-hero__in { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
  .lp-tags { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-hero__art { height: 480px; z-index: 1; }
  .lp-p { position: absolute; }
  .lp-p--c { position: relative; z-index: 2; width: 230px; }
  .lp-p--l, .lp-p--r { display: block; width: 196px; top: 34px; filter: drop-shadow(0 10px 16px rgb(23 77 58 / 0.16)); }
  .lp-p--l { left: 0; }
  .lp-p--r { right: 0; }
  .lp-start__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lp-start__grid a { font-size: 0.875rem; height: 100%; }
  .lp-start__grid a > .ico { display: none; }
  .lp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lp-roles__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .lp-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-card { grid-template-columns: 196px 1fr; padding: 14px; }
  .lp-card--flip { grid-template-columns: 1fr 196px; }
}