/* ==========================================================================
   Muditap360 — Kart tasarım aracı (tasarla.php)
   ========================================================================== */


/* Başlık ---------------------------------------------------------------- */
.designer-hero { padding: 28px 0 8px; background: linear-gradient(180deg, var(--soft), #fff); }

.designer-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.designer-hero h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.035em; margin-bottom: 10px; }
.designer-hero h1 .serif { color: var(--primary); }
.designer-hero p { color: var(--muted); max-width: 52ch; margin: 0; }

.progress-steps { display: flex; gap: 4px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; }
.progress-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--muted); transition: background .3s, color .3s; }
.progress-steps span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-2); font-size: 12px; font-weight: 700; transition: background .3s, color .3s; }
.progress-steps li.is-done span { background: var(--green); color: #fff; }
.progress-steps li.is-active { background: var(--ink); color: #fff; }
.progress-steps li.is-active span { background: var(--lime); color: var(--ink); }

/* Izgara ---------------------------------------------------------------- */
.designer { padding: 32px 0 96px; }
.designer-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.stage-col { position: sticky; top: calc(var(--header-h) + 16px); display: flex; flex-direction: column; gap: 14px; }

/* Sahne ----------------------------------------------------------------- */
.stage {
    --stage-bg: #F3F2FA; --stage-dot: rgba(11, 11, 26, .08);
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 520px; padding: 76px 32px 56px; border-radius: var(--r-xl); overflow: hidden;
    background: radial-gradient(var(--stage-dot) 1px, transparent 1.4px) 0 0 / 18px 18px, radial-gradient(circle at 50% 40%, #fff, var(--stage-bg) 70%);
    transition: background .4s;
}
.stage[data-bg="dark"] { --stage-bg: #06060F; --stage-dot: rgba(255, 255, 255, .07); background: radial-gradient(var(--stage-dot) 1px, transparent 1.4px) 0 0 / 18px 18px, radial-gradient(circle at 50% 40%, #232342, var(--stage-bg) 70%); }
.stage-toolbar { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.segmented { display: inline-flex; padding: 4px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 999px; }
.segmented button { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); transition: background .25s, color .25s; }
.segmented button.is-active { background: var(--ink); color: #fff; }
.stage-tools { display: flex; gap: 6px; }
.tool-btn { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-size: 17px; color: var(--ink); background: rgba(255, 255, 255, .8); border: 1px solid var(--line); backdrop-filter: blur(10px); transition: background .2s, color .2s, transform .2s; }
.tool-btn:hover { background: var(--ink); color: #fff; }
.tool-btn:active { transform: scale(.94); }
.stage-hint { position: absolute; bottom: 14px; margin: 0; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stage[data-bg="dark"] .stage-hint { color: #8E8EA8; }
.stage-shadow { width: 70%; max-width: 380px; height: 24px; margin-top: 28px; border-radius: 50%; background: radial-gradient(rgba(11, 11, 26, .28), transparent 70%); filter: blur(6px); }
.stage[data-bg="dark"] .stage-shadow { background: radial-gradient(rgba(0, 0, 0, .7), transparent 70%); }

.stage-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stage-specs li { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.stage-specs i { font-size: 26px; color: var(--primary); flex-shrink: 0; }
.stage-specs strong { display: block; font-size: 13.5px; color: var(--ink); line-height: 1.2; }
.stage-specs small { font-size: 12px; color: var(--muted); }

/* Kart ------------------------------------------------------------------ */
.dcard-wrap { width: 100%; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; }
.dcard-wrap.is-dragging { cursor: grabbing; }
.dcard {
    --accent: #D7FF3A; --accent-ink: #0B0B1A; --accent-text: #D7FF3A;
    --face-bg: #15151D; --face-fg: #fff; --face-sub: rgba(255, 255, 255, .62);
    --card-font: "Bricolage Grotesque", sans-serif;
    container-type: inline-size;
    width: min(100%, 470px); aspect-ratio: 85.6 / 54; perspective: 1600px;
}
.dcard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease); will-change: transform; }
.dcard-wrap.is-dragging .dcard-inner { transition: none; }
.dface {
    position: absolute; inset: 0; border-radius: 4.6cqi; overflow: hidden;
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    background: var(--face-bg); color: var(--face-fg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 30px 50px -20px rgba(11, 11, 26, .55), 0 0 0 1px rgba(11, 11, 26, .06);
}
.dface--back { transform: rotateY(180deg); }
/* Işık yansıması: JS --gx/--gy ile yönlendirir */
.dface::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .28), transparent 45%); mix-blend-mode: soft-light; }

/* Malzemeler */
.skin-siyah .dface       { --face-bg: radial-gradient(circle at 85% 0%, #2B2B3D, transparent 55%), #111118; }
.skin-beyaz .dface       { --face-bg: linear-gradient(160deg, #fff, #F2F2F7); --face-fg: #0B0B1A; --face-sub: rgba(11, 11, 26, .55); }
.skin-lacivert .dface    { --face-bg: radial-gradient(circle at 90% 0%, #33408A, transparent 55%), #161D45; }
.skin-bambu .dface       { --face-bg: repeating-linear-gradient(92deg, rgba(0, 0, 0, .035) 0 2px, transparent 2px 9px), repeating-linear-gradient(90deg, #D9B98A 0 18%, #CFAE7C 18% 22%, #DDBF92 22% 55%, #C9A571 55% 58%, #D7B685 58% 100%); --face-fg: #3A2710; --face-sub: rgba(58, 39, 16, .65); }
.skin-seffaf .dface      { --face-bg: linear-gradient(135deg, rgba(235, 240, 250, .82), rgba(200, 212, 235, .6)); --face-fg: #1B2350; --face-sub: rgba(27, 35, 80, .6); backdrop-filter: blur(8px); }
.skin-karbon .dface      { --face-bg: radial-gradient(circle at 80% 0%, rgba(255, 255, 255, .12), transparent 50%), repeating-linear-gradient(45deg, #26262B 0 3px, #141417 3px 6px); }
.skin-altin .dface       { --face-bg: linear-gradient(125deg, #9C7422 0%, #F6DE8D 28%, #C9982C 52%, #FFF0B3 74%, #A77C24 100%); --face-fg: #3A2906; --face-sub: rgba(58, 41, 6, .7); }
.skin-gumus .dface       { --face-bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 3px), linear-gradient(125deg, #8E949E 0%, #F1F3F6 32%, #A6ACB5 55%, #E7EAEE 78%, #8A9099 100%); --face-fg: #1D2127; --face-sub: rgba(29, 33, 39, .65); }
.skin-siyah-metal .dface { --face-bg: repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px), linear-gradient(125deg, #0B0B0E, #34343C 45%, #121216); }
.skin-rose .dface        { --face-bg: linear-gradient(125deg, #B7736A 0%, #F6CFC4 30%, #C98E83 55%, #FBE1D9 76%, #A9655C 100%); --face-fg: #3F1C17; --face-sub: rgba(63, 28, 23, .7); }
.skin-instagram .dface   { --face-bg: linear-gradient(135deg, #FEDA75 0%, #FA7E1E 25%, #D62976 55%, #962FBF 78%, #4F5BD5 100%); }

/* Ön yüz öğeleri */
.df-logo { position: absolute; left: 7cqi; top: 7.5cqi; height: 13cqi; display: flex; align-items: center; transition: all .5s var(--ease); }
.df-logo img { max-height: 100%; max-width: 34cqi; object-fit: contain; }
.df-mono { height: 100%; aspect-ratio: 1; border-radius: 3.4cqi; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-family: var(--card-font); font-weight: 800; font-size: 5.4cqi; letter-spacing: -.02em; }
.df-nfc { position: absolute; right: 7cqi; top: 7.5cqi; font-size: 7.5cqi; color: var(--accent-text); transition: all .5s var(--ease); }
.df-person { position: absolute; left: 7cqi; right: 7cqi; bottom: 7.5cqi; display: flex; flex-direction: column; transition: all .5s var(--ease); }
.df-name { font-family: var(--card-font); font-size: 7.4cqi; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.df-title { font-size: 3.5cqi; font-weight: 600; margin-top: 1.4cqi; color: var(--face-sub); }
.df-company { font-size: 3.1cqi; font-weight: 700; margin-top: .6cqi; text-transform: uppercase; letter-spacing: .14em; color: var(--accent-text); }
.df-company:empty { display: none; }
.df-name, .df-title, .df-company, .df-biz, .df-cta, .df-handle { overflow-wrap: anywhere; }

/* Yerleşim: merkez */
.layout-merkez .df-logo { left: 50%; top: 13cqi; transform: translateX(-50%); height: 15cqi; }
.layout-merkez .df-person { align-items: center; text-align: center; bottom: 10cqi; }
/* Yerleşim: modern */
.layout-modern .df-logo { top: 50%; transform: translateY(-50%); height: 20cqi; }
.layout-modern .df-mono { font-size: 8cqi; }
.layout-modern .dface--front::before { content: ""; position: absolute; left: 36cqi; top: 16%; bottom: 16%; width: .5cqi; border-radius: 1cqi; background: var(--accent); opacity: .9; }
.layout-modern .df-person { left: 42cqi; bottom: auto; top: 50%; transform: translateY(-50%); }
.layout-modern .df-nfc { top: auto; bottom: 7cqi; }

/* Ürün tiplerine göre görünürlük */
.df-google, .df-social { display: none; }
.type-google .df-person, .type-sosyal .df-person { display: none; }
.type-google .df-google, .type-sosyal .df-social { display: flex; }
.type-google .df-mono, .type-sosyal .df-mono { display: none; }
.type-google .df-logo, .type-sosyal .df-logo { left: auto; right: 7cqi; top: auto; bottom: 7.5cqi; height: 10cqi; transform: none; }

.df-google { position: absolute; left: 7cqi; right: 7cqi; top: 7.5cqi; bottom: 7.5cqi; flex-direction: column; align-items: flex-start; }
.df-g { width: 11cqi; height: 11cqi; padding: 1.8cqi; background: #fff; border-radius: 3cqi; box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .12); }
.df-biz { font-family: var(--card-font); font-size: 6.6cqi; font-weight: 700; margin-top: auto; line-height: 1.05; letter-spacing: -.02em; }
.df-cta { font-size: 3.4cqi; color: var(--face-sub); margin-top: 1.2cqi; font-weight: 600; }
.df-stars { display: flex; gap: .8cqi; margin-top: 2.2cqi; color: #FBBC04; font-size: 5cqi; }
.layout-merkez .df-google { align-items: center; text-align: center; }
.layout-merkez.type-google .df-biz { margin-top: 4cqi; }
.layout-modern .df-google { left: 42cqi; justify-content: center; }
.layout-modern .df-g { position: absolute; left: -35cqi; top: 50%; transform: translateY(-50%); width: 20cqi; height: 20cqi; padding: 3cqi; }
.layout-modern.type-google .df-biz { margin-top: 0; }

.df-social { position: absolute; left: 7cqi; right: 7cqi; top: 7.5cqi; bottom: 7.5cqi; flex-direction: column; align-items: flex-start; }
.df-social-icon { font-size: 12cqi; line-height: 1; }
.df-handle { font-family: var(--card-font); font-size: 7.4cqi; font-weight: 700; margin-top: auto; letter-spacing: -.02em; }
.df-follow { display: inline-flex; align-items: center; gap: 1cqi; margin-top: 2cqi; padding: 1.4cqi 3.4cqi; border-radius: 99px; font-size: 3.4cqi; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.layout-merkez .df-social { align-items: center; text-align: center; }
.layout-modern .df-social { left: 42cqi; justify-content: center; }
.layout-modern .df-social-icon { position: absolute; left: -32cqi; top: 50%; transform: translateY(-50%); font-size: 18cqi; }
.layout-modern.type-sosyal .df-handle { margin-top: 0; }

/* Arka yüz */
.dface--back { display: flex; align-items: center; gap: 6cqi; padding: 7cqi; }
.db-qr { flex-shrink: 0; width: 34cqi; aspect-ratio: 1; padding: 2.4cqi; background: #fff; color: #0B0B1A; border-radius: 3.4cqi; box-shadow: 0 1cqi 4cqi rgba(0, 0, 0, .15); }
.db-qr svg { width: 100%; height: 100%; }
.db-info { display: flex; flex-direction: column; gap: 1.4cqi; min-width: 0; }
.db-info strong { font-family: var(--card-font); font-size: 6cqi; line-height: 1.05; letter-spacing: -.02em; }
.db-url { font-size: 3cqi; color: var(--face-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-nfc { display: inline-flex; align-items: center; gap: 1cqi; align-self: flex-start; margin-top: 1.6cqi; padding: 1.2cqi 2.8cqi; border-radius: 99px; font-size: 3cqi; font-weight: 700; background: var(--accent); color: var(--accent-ink); }
.db-brand { position: absolute; right: 6cqi; bottom: 5cqi; font-family: var(--f-display); font-weight: 800; font-size: 3cqi; opacity: .55; }
.db-brand b { color: var(--accent-text); }

/* Yapılandırma paneli --------------------------------------------------- */
.config { display: flex; flex-direction: column; gap: 14px; }
.cfg-step { margin: 0; padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; min-width: 0; transition: border-color .3s, box-shadow .3s; }
.cfg-step:focus-within { border-color: rgba(91, 75, 255, .45); box-shadow: 0 0 0 4px rgba(91, 75, 255, .08); }
.cfg-step legend { float: left; width: 100%; display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 18px; font-family: var(--f-display); font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.cfg-step legend + * { clear: both; }

/* Gizli radyo/checkbox — erişilebilir kalır */
.type-card input, .swatch input, .font-opt input, .layout-opt input, .accent-opt input[type="radio"], .extra input { position: absolute; opacity: 0; pointer-events: none; }

.type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.type-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.type-card:hover { border-color: #C9C4FF; }
.type-card:has(input:checked) { border-color: var(--primary); background: var(--primary-50); }
.type-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.type-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; background: var(--soft); color: var(--primary); transition: background .2s, color .2s; }
.type-card:has(input:checked) .type-icon { background: var(--primary); color: #fff; }
.type-body strong { display: block; font-size: 14px; color: var(--ink); line-height: 1.3; }
.type-body small { font-size: 12px; color: var(--muted); }
.type-price { font-family: var(--f-display); font-weight: 700; color: var(--ink); font-size: 17px; }
.type-check { position: absolute; top: 12px; right: 12px; font-size: 22px; color: var(--primary); opacity: 0; transform: scale(.5); transition: .25s var(--ease); }
.type-card:has(input:checked) .type-check { opacity: 1; transform: none; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.swatch { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.swatch[hidden] { display: none; }
.swatch:hover { border-color: #C9C4FF; }
.swatch:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.swatch-dot { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(11, 11, 26, .12); }
.swatch-label strong { display: block; font-size: 13px; color: var(--ink); line-height: 1.2; }
.swatch-label small { font-size: 11.5px; color: var(--muted); }

.upload { margin-bottom: 18px; }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-drop { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed #CFCBEA; border-radius: var(--r); background: var(--soft); cursor: pointer; transition: border-color .2s, background .2s; }
.upload-drop:hover, .upload.is-over .upload-drop { border-color: var(--primary); background: var(--primary-50); }
.upload input:focus-visible + .upload-drop { outline: 2px solid var(--primary); outline-offset: 2px; }
.upload-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--primary); font-size: 22px; box-shadow: var(--shadow-sm); }
.upload-drop strong { display: block; color: var(--ink); font-size: 15px; }
.upload-drop small { color: var(--muted); font-size: 12.5px; }
.upload-file { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r); }
.upload-file[hidden] { display: none; }
.upload-file img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; background: repeating-conic-gradient(#EEE 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.upload-file span { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.quick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.quick-chips button { padding: 5px 11px; border-radius: 999px; background: var(--soft); font-size: 12px; font-weight: 600; color: var(--text); transition: background .2s; }
.quick-chips button:hover { background: var(--lime); color: var(--ink); }

.font-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.font-opt, .layout-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.font-opt span { font-size: 26px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.font-opt small, .layout-opt small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.font-opt:has(input:checked), .layout-opt:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.font-opt:has(input:focus-visible), .layout-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

.layout-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.layout-mini { position: relative; width: 74px; aspect-ratio: 1.586; border-radius: 7px; background: var(--ink); }
.layout-mini i { position: absolute; background: var(--lime); border-radius: 2px; }
.layout-mini i:nth-child(1) { width: 14px; height: 14px; border-radius: 4px; }
.layout-mini i:nth-child(2) { height: 5px; width: 32px; background: #fff; }
.layout-mini i:nth-child(3) { height: 3px; width: 22px; background: rgba(255, 255, 255, .5); }
.layout-mini--klasik i:nth-child(1) { left: 7px; top: 7px; }
.layout-mini--klasik i:nth-child(2) { left: 7px; bottom: 13px; }
.layout-mini--klasik i:nth-child(3) { left: 7px; bottom: 7px; }
.layout-mini--merkez i:nth-child(1) { left: 50%; top: 8px; transform: translateX(-50%); }
.layout-mini--merkez i:nth-child(2) { left: 50%; bottom: 14px; transform: translateX(-50%); }
.layout-mini--merkez i:nth-child(3) { left: 50%; bottom: 8px; transform: translateX(-50%); }
.layout-mini--modern i:nth-child(1) { left: 7px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; }
.layout-mini--modern i:nth-child(2) { left: 34px; top: 17px; }
.layout-mini--modern i:nth-child(3) { left: 34px; top: 26px; }
.layout-mini--modern::before { content: ""; position: absolute; left: 28px; top: 9px; bottom: 9px; width: 1.5px; background: var(--lime); }

.accent-row { display: flex; flex-wrap: wrap; gap: 10px; }
.accent-opt { position: relative; cursor: pointer; }
.accent-opt span:not(.sr-only) { display: block; width: 36px; height: 36px; border-radius: 50%; background: var(--a); box-shadow: inset 0 0 0 1px rgba(11, 11, 26, .15); transition: transform .2s var(--ease), box-shadow .2s; }
.accent-opt:hover span { transform: scale(1.08); }
.accent-opt:has(input:checked) span:not(.sr-only) { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }
.accent-opt:has(input:focus-visible) span:not(.sr-only) { outline: 2px solid var(--primary); outline-offset: 4px; }
.accent-opt--custom { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#FF4F4F, #FFD93D, #4FFF8A, #4FC3F7, #8B7BFF, #FF4FA3, #FF4F4F); color: #fff; font-size: 16px; overflow: hidden; }
.accent-opt--custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.accent-opt--custom i { pointer-events: none; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.accent-opt--custom.is-active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink); }

.qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tier { display: flex; flex-direction: column; align-items: center; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 12px; line-height: 1.2; transition: border-color .2s, background .2s; }
.tier strong { font-size: 12.5px; color: var(--ink); }
.tier small { font-size: 11.5px; font-weight: 700; color: var(--green); }
.tier:hover { border-color: var(--green); }
.tier.is-active { border-color: var(--green); background: #E4F8F0; }

.extras { display: flex; flex-direction: column; gap: 8px; }
.extra { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.extra::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid #C8C6DA; transition: .2s; }
.extra:has(input:checked) { border-color: var(--primary); background: var(--primary-50); }
.extra:has(input:checked)::before { background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat; border-color: var(--primary); }
.extra:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.extra i { font-size: 22px; color: var(--primary); }
.extra span { flex: 1; font-weight: 600; font-size: 14px; color: var(--ink); }
.extra strong { font-size: 14px; color: var(--ink); }

/* Özet ------------------------------------------------------------------ */
.summary { padding: 24px; border-radius: var(--r-lg); background: var(--ink); color: #C9C9DD; }
.summary h2 { color: #fff; font-size: 20px; margin-bottom: 16px; }
.summary-lines { margin: 0; display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; border-bottom: 1px dashed rgba(255, 255, 255, .15); }
.summary-lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary-lines div[hidden] { display: none; }
.summary-lines dt { color: #A9A9C2; }
.summary-lines dd { margin: 0; color: #fff; font-weight: 600; white-space: nowrap; }
.summary-lines .is-discount dd, .summary-lines .is-discount dt { color: var(--lime); }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 10px; }
.summary-total span { color: #fff; font-weight: 600; }
.summary-total small { color: #8E8EA8; font-weight: 500; font-size: 12px; }
.summary-total strong { font-family: var(--f-display); font-size: 34px; color: #fff; letter-spacing: -.03em; }
.summary-eta { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 16px; }
.summary-eta i { font-size: 18px; color: var(--lime); }
.summary-eta strong { color: #fff; }
.summary-actions { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }
.link-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #C9C9DD; transition: color .2s; }
.link-btn:hover { color: var(--lime); }
.summary-trust { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12.5px; }
.summary-trust li { display: flex; align-items: center; gap: 8px; }
.summary-trust i { color: var(--lime); }

.mobile-buy { display: none; }

/* Adım kaydırma vurgusu */
.cfg-step.is-flash { animation: flash 1s var(--ease); }
@keyframes flash { 30% { box-shadow: 0 0 0 4px rgba(215, 255, 58, .7); } }
.dcard.is-pop .dcard-inner { animation: pop .45s var(--ease); }
@keyframes pop { 40% { scale: 1.035; } }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .progress-steps li { padding-right: 7px; font-size: 0; gap: 0; }
    .progress-steps span { font-size: 12px; }
}

@media (max-width: 960px) {
    .designer-grid { grid-template-columns: minmax(0, 1fr); }
    .stage-col { top: calc(var(--header-h) + 4px); z-index: 20; }
    .stage { min-height: 0; padding: 60px 16px 18px; border-radius: var(--r-lg); box-shadow: 0 14px 30px -18px rgba(11, 11, 26, .35); }
    .dcard { width: min(78%, 400px); }
    .stage-shadow, .stage-hint, .stage-specs { display: none; }
    .stage-toolbar { top: 10px; left: 10px; right: 10px; }
    .designer { padding-bottom: 120px; }
    .mobile-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -20px rgba(11, 11, 26, .4); }
    .mobile-buy small { display: block; font-size: 12px; color: var(--muted); }
    .mobile-buy strong { font-family: var(--f-display); font-size: 22px; color: var(--ink); }
    .page-designer .wa-float { bottom: 88px; }
}

@media (max-width: 560px) {
    .designer-hero h1 { font-size: 34px; }
    .progress-steps { width: 100%; justify-content: space-between; }
    .progress-steps li { flex: 1; justify-content: center; padding: 5px; }
    .type-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .type-card { padding: 12px; }
    .type-body small { display: none; }
    .fields { grid-template-columns: 1fr; }
    .font-grid { grid-template-columns: repeat(3, 1fr); }
    .cfg-step { padding: 18px 16px; }
    .swatches { grid-template-columns: 1fr 1fr; }
    .page-designer .wa-float { display: none; }
}

/* ==========================================================================
   Tabela tipleri — T tipi pleksi stant (10×15) ve kare kart (10×10)
   ========================================================================== */
.skin-mavi .dface    { --face-bg: radial-gradient(circle at 85% 0%, #5AA2FF, transparent 55%), #1877F2; }
.skin-kirmizi .dface { --face-bg: radial-gradient(circle at 85% 0%, #FF6B5E, transparent 55%), #D32F2F; }
.skin-yesil .dface   { --face-bg: radial-gradient(circle at 85% 0%, #34C38F, transparent 55%), #0B7A55; }
.skin-mor .dface     { --face-bg: radial-gradient(circle at 85% 0%, #9D86FF, transparent 55%), #5B3FE0; }
.skin-pembe .dface   { --face-bg: radial-gradient(circle at 85% 0%, #FFC2DA, transparent 55%), #F06BA2; }
.skin-sari .dface    { --face-bg: radial-gradient(circle at 85% 0%, #FFE58A, transparent 55%), #FFC62E; --face-fg: #2A2105; --face-sub: rgba(42, 33, 5, .7); }

/* Ölçüler: stant dikey 2:3, kare 1:1 */
.dcard.type-stant { aspect-ratio: 2 / 3; width: min(100%, 290px); }
.dcard.type-kare  { aspect-ratio: 1; width: min(100%, 380px); }
.type-stant .dface { border-radius: 3cqi; }
.type-kare .dface  { border-radius: 6.5cqi; }

/* Stant: şeffaf pleksi kenar + L taban */
.type-stant .dface { border: 2.8cqi solid rgba(225, 240, 250, .6); background-clip: padding-box; box-shadow: 0 0 0 .5cqi rgba(160, 200, 225, .75), 0 30px 50px -20px rgba(11, 11, 26, .45); }
.type-stant .dface::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .38) 0 11%, transparent 11% 60%, rgba(255, 255, 255, .14) 60% 67%, transparent 67%); }
.dcard-foot { display: none; }
/* T tipi taban: panel ortadan oturur, blok önden ve arkadan eşit taşar */
.type-stant .dcard-foot { display: block; position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.dcard-foot i { position: absolute; display: block; }
.dcard-foot .tb-top { left: -9%; right: -9%; top: calc(100% - 17cqi); height: 34cqi; transform: rotateX(90deg); border-radius: 1.4cqi; background: linear-gradient(0deg, rgba(236, 246, 252, .96), rgba(200, 224, 240, .92)); box-shadow: inset 0 0 0 .5cqi rgba(255, 255, 255, .75); }
.dcard-foot .tb-top::after { content: ""; position: absolute; left: 7%; right: 7%; top: calc(50% - .9cqi); height: 1.8cqi; border-radius: 1cqi; background: rgba(90, 120, 150, .35); }
.dcard-foot .tb-front { left: -9%; right: -9%; top: 100%; height: 8cqi; transform: translateZ(17cqi); border-radius: 0 0 1.2cqi 1.2cqi; background: linear-gradient(180deg, rgba(220, 238, 250, .98), rgba(168, 202, 226, .96)); box-shadow: inset 0 .5cqi 0 rgba(255, 255, 255, .8), inset 0 -.6cqi 0 rgba(120, 160, 190, .35); }
.dcard-foot .tb-side { left: calc(109% - 17cqi); width: 34cqi; top: 100%; height: 8cqi; transform: rotateY(90deg); border-radius: 0 0 1.2cqi 1.2cqi; background: linear-gradient(180deg, rgba(190, 218, 238, .98), rgba(140, 178, 206, .96)); }
.stage:has(.type-stant) .stage-shadow { margin-top: 34px; }
.type-stant .dcard-inner { transform-origin: 50% 100%; }
.dcard.type-stant { perspective: 1100px; }
.type-stant ~ .stage-shadow, .stage:has(.type-stant) .stage-shadow { margin-top: 8px; }

/* Tabela tiplerinde kart öğeleri yerine tabela yüzü */
.df-sign { display: none; }
.type-stant .df-person, .type-kare .df-person, .type-stant .df-logo, .type-kare .df-logo, .type-stant .df-nfc, .type-kare .df-nfc { display: none; }
.type-stant .df-sign, .type-kare .df-sign { display: flex; }

.df-sign { position: absolute; inset: 0; z-index: 2; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 3cqi; padding: 9cqi 8cqi; font-family: var(--card-font); }
.df-sign-logo { display: grid; place-items: center; width: 22cqi; aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 1cqi 3cqi rgba(0, 0, 0, .18); font-size: 12cqi; line-height: 1; overflow: hidden; flex: none; }
.df-sign-logo img { width: 74%; height: 74%; object-fit: contain; }
.df-sign-logo .df-sign-g { width: 62%; height: 62%; }
.df-sign-mono { font-weight: 800; font-size: 7cqi; color: #0B0B1A; }
.plat-instagram .df-sign-logo i { color: #D62976; }
.plat-tiktok .df-sign-logo i { color: #111; text-shadow: -.5cqi .35cqi 0 #25F4EE, .5cqi -.35cqi 0 #FE2C55; }
.plat-whatsapp .df-sign-logo i { color: #25D366; }
.plat-facebook .df-sign-logo i { color: #1877F2; }
.plat-youtube .df-sign-logo i { color: #FF0000; }
.plat-tripadvisor .df-sign-logo i { color: #00AF87; }
.df-sign-title { font-size: 8cqi; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; overflow-wrap: anywhere; }
.df-sign-cta { font-size: 4.6cqi; font-weight: 600; color: var(--face-sub); overflow-wrap: anywhere; }
.df-sign-stars { margin-top: 0; font-size: 6.4cqi; }
.type-stant:not(.plat-google):not(.plat-tripadvisor) .df-sign-stars, .type-kare:not(.plat-google):not(.plat-tripadvisor) .df-sign-stars { display: none; }
.plat-tripadvisor .df-sign-stars { color: #00AF87; }
.df-sign-qr { width: 40cqi; aspect-ratio: 1; padding: 2cqi; background: #fff; color: #0B0B1A; border-radius: 2.4cqi; flex: none; }
.df-sign-qr svg { width: 100%; height: 100%; display: block; }
.df-sign-tap { display: inline-flex; align-items: center; gap: 1.2cqi; font-size: 4cqi; font-weight: 700; color: var(--face-sub); }
.df-sign-tap i { font-size: 5.4cqi; color: var(--accent-text); }

/* Kare kart: sol üstte logo + başlık, sağ altta QR */
.type-kare .df-sign {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr auto auto; column-gap: 4cqi; row-gap: 2cqi;
    grid-template-areas: "logo ." "title title" "cta cta" "stars qr" "tap qr";
    align-items: end; justify-items: start; text-align: left; padding: 8cqi;
}
.type-kare .df-sign-logo { grid-area: logo; width: 17cqi; font-size: 9.5cqi; align-self: start; }
.type-kare .df-sign-title { grid-area: title; font-size: 8.6cqi; align-self: start; }
.type-kare .df-sign-cta { grid-area: cta; align-self: start; font-size: 4.2cqi; }
.type-kare .df-sign-stars { grid-area: stars; }
.type-kare .df-sign-qr { grid-area: qr; width: 34cqi; }
.type-kare .df-sign-tap { grid-area: tap; font-size: 3.8cqi; }

/* Arka yüz dikey/kare ölçülerde QR ortada */
.type-stant .dface--back, .type-kare .dface--back { flex-direction: column; justify-content: center; text-align: center; }
.type-stant .db-qr { width: 60cqi; }
.type-kare .db-qr { width: 46cqi; }
.type-stant .db-info, .type-kare .db-info { align-items: center; }
.type-stant .db-nfc, .type-kare .db-nfc { align-self: center; }
.type-stant .db-info strong { font-size: 8cqi; }
.type-stant .db-url { font-size: 4.2cqi; max-width: 70cqi; }
.type-kare .db-info strong { font-size: 6.4cqi; }

/* Platform seçici */
.platform-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.platform-opt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.platform-opt input { position: absolute; opacity: 0; pointer-events: none; }
.platform-opt i { font-size: 22px; line-height: 1; color: var(--ink); }
.platform-opt .platform-g { width: 22px; height: 22px; }
.platform-opt small { font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; }
.platform-opt:hover { border-color: #C9C4FF; }
.platform-opt:has(input:checked) { border-color: var(--ink); background: var(--soft); }
.platform-opt:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.platform-opt .fa-instagram { color: #D62976; }
.platform-opt .fa-whatsapp { color: #25D366; }
.platform-opt .fa-facebook { color: #1877F2; }
.platform-opt .fa-youtube { color: #FF0000; }
.platform-opt .fa-tripadvisor { color: #00AF87; }
@media (max-width: 560px) { .platform-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; } .platform-opt small { font-size: 10.5px; } }
@media (max-width: 960px) { .dcard.type-stant { width: min(52%, 240px); } .dcard.type-kare { width: min(66%, 320px); } }

/* ==========================================================================
   Tabela yerleşimleri
   T stant:  klasik = Ortalı · merkez = Büyük QR · modern = Üst bant
   Kare kart: klasik = Köşe QR · merkez = Ortalı · modern = Bölünmüş
   ========================================================================== */
/* Stant — Büyük QR: başlık üstte, QR sahneyi doldurur */
.type-stant.layout-merkez .df-sign { justify-content: space-between; gap: 2cqi; padding: 8cqi 7cqi 7cqi; }
.type-stant.layout-merkez .df-sign-logo { width: 15cqi; font-size: 8cqi; }
.type-stant.layout-merkez .df-sign-title { font-size: 7cqi; }
.type-stant.layout-merkez .df-sign-cta { font-size: 4cqi; }
.type-stant.layout-merkez .df-sign-stars { font-size: 5cqi; }
.type-stant.layout-merkez .df-sign-qr { width: 66cqi; padding: 3cqi; }
/* Stant — Üst bant: vurgu renginde başlık bandı */
.type-stant.layout-modern .df-sign { justify-content: flex-start; padding-top: 9cqi; }
.type-stant.layout-modern .df-sign::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 43%; z-index: -1; background: var(--accent); border-radius: 0 0 50% 50% / 0 0 10% 10%; }
.type-stant.layout-modern .df-sign-title { color: var(--accent-ink); }
.type-stant.layout-modern .df-sign-cta { color: var(--accent-ink); opacity: .75; }
.type-stant.layout-modern .df-sign-stars { margin-top: 7cqi; }
.type-stant.layout-modern .df-sign-tap i { color: currentColor; }

/* Kare — Ortalı */
.type-kare.layout-merkez .df-sign { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2.2cqi; padding: 7cqi; }
.type-kare.layout-merkez .df-sign-logo { width: 14cqi; font-size: 8cqi; }
.type-kare.layout-merkez .df-sign-title { font-size: 7cqi; }
.type-kare.layout-merkez .df-sign-cta { font-size: 3.8cqi; }
.type-kare.layout-merkez .df-sign-stars { font-size: 4.6cqi; }
.type-kare.layout-merkez .df-sign-qr { width: 34cqi; }
/* Kare — Bölünmüş: solda vurgu panelinde metin, sağda QR */
.type-kare.layout-modern .df-sign { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 8cqi; grid-template-areas: "logo qr" "title qr" "cta qr" "stars tap"; align-items: center; }
.type-kare.layout-modern .df-sign::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; z-index: -1; background: var(--accent); }
.type-kare.layout-modern .df-sign-title, .type-kare.layout-modern .df-sign-cta, .type-kare.layout-modern .df-sign-stars { color: var(--accent-ink); }
.type-kare.layout-modern .df-sign-title { font-size: 7.4cqi; align-self: end; }
.type-kare.layout-modern .df-sign-cta { opacity: .75; }
.type-kare.layout-modern .df-sign-qr { width: 36cqi; align-self: center; justify-self: center; }
.type-kare.layout-modern .df-sign-tap { justify-self: center; }

/* Yerleşim mini önizlemeleri — tabela tiplerinde gerçek oranla */
.layout-grid--stant .layout-mini { width: 40px; aspect-ratio: 2 / 3; }
.layout-grid--kare .layout-mini { width: 54px; aspect-ratio: 1; }
.layout-grid--stant .layout-mini::before, .layout-grid--kare .layout-mini::before { display: none; }
.layout-grid--stant .layout-mini i, .layout-grid--kare .layout-mini i { transform: none; left: auto; right: auto; top: auto; bottom: auto; }
.layout-grid--stant .layout-mini i:nth-child(1), .layout-grid--kare .layout-mini i:nth-child(1) { width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.layout-grid--stant .layout-mini i:nth-child(2), .layout-grid--kare .layout-mini i:nth-child(2) { width: 22px; height: 4px; background: #fff; }
.layout-grid--stant .layout-mini i:nth-child(3), .layout-grid--kare .layout-mini i:nth-child(3) { width: 16px; height: 16px; border-radius: 2px; background: var(--lime); }
/* Stant: ortalı */
.layout-grid--stant .layout-mini--klasik i:nth-child(1) { left: 15px; top: 7px; }
.layout-grid--stant .layout-mini--klasik i:nth-child(2) { left: 9px; top: 20px; }
.layout-grid--stant .layout-mini--klasik i:nth-child(3) { left: 12px; top: 30px; }
/* Stant: büyük QR */
.layout-grid--stant .layout-mini--merkez i:nth-child(1) { left: 16px; top: 5px; width: 7px; height: 7px; }
.layout-grid--stant .layout-mini--merkez i:nth-child(2) { left: 9px; top: 15px; }
.layout-grid--stant .layout-mini--merkez i:nth-child(3) { left: 7px; top: 24px; width: 26px; height: 26px; }
/* Stant: üst bant */
.layout-grid--stant .layout-mini--modern { background: linear-gradient(var(--lime) 0 42%, var(--ink) 42%); }
.layout-grid--stant .layout-mini--modern i:nth-child(1) { left: 15px; top: 5px; }
.layout-grid--stant .layout-mini--modern i:nth-child(2) { left: 9px; top: 17px; background: var(--ink); }
.layout-grid--stant .layout-mini--modern i:nth-child(3) { left: 12px; top: 32px; background: #fff; }
/* Kare: köşe QR */
.layout-grid--kare .layout-mini--klasik i:nth-child(1) { left: 6px; top: 6px; }
.layout-grid--kare .layout-mini--klasik i:nth-child(2) { left: 6px; top: 19px; }
.layout-grid--kare .layout-mini--klasik i:nth-child(3) { right: 6px; bottom: 6px; }
/* Kare: ortalı */
.layout-grid--kare .layout-mini--merkez i:nth-child(1) { left: 22px; top: 5px; }
.layout-grid--kare .layout-mini--merkez i:nth-child(2) { left: 16px; top: 17px; }
.layout-grid--kare .layout-mini--merkez i:nth-child(3) { left: 19px; top: 26px; }
/* Kare: bölünmüş */
.layout-grid--kare .layout-mini--modern { background: linear-gradient(90deg, var(--lime) 0 50%, var(--ink) 50%); }
.layout-grid--kare .layout-mini--modern i:nth-child(1) { left: 5px; top: 8px; }
.layout-grid--kare .layout-mini--modern i:nth-child(2) { left: 3px; top: 24px; width: 20px; background: var(--ink); }
.layout-grid--kare .layout-mini--modern i:nth-child(3) { right: 6px; top: 19px; background: #fff; }

/* ==========================================================================
   Admin tasarım sihirbazı (admin/sihirbaz.php) + müşteri onay sayfası (tasarim-onay.php)
   ========================================================================== */
.wiz-bar { padding: 22px 0; background: var(--ink); color: #C9C9DD; }
.wiz-bar-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap; }
.wiz-bar-title { flex: 1 1 380px; min-width: 0; }
.wiz-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #A9A9C2; }
.wiz-back:hover { color: #fff; }
.wiz-badge { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(215, 255, 58, .14); color: var(--lime); font-size: 12px; font-weight: 700; }
.wiz-bar h1 { color: #fff; font-size: clamp(24px, 3vw, 34px); margin: 10px 0 4px; letter-spacing: -.02em; }
.wiz-bar p { margin: 0; font-size: 14px; }
.wiz-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .1); color: #fff; }
.wiz-status.tone-lime { background: rgba(215, 255, 58, .18); color: var(--lime); }
.wiz-status.tone-coral { background: rgba(255, 107, 74, .2); color: #FFB3A1; }
.wiz-status.tone-blue { background: rgba(79, 195, 247, .18); color: #9ADDFB; }
.wiz-share { flex: 1 1 420px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wiz-share .alert { margin: 0; }
.wiz-link span:first-child { display: block; font-size: 12px; font-weight: 700; color: #A9A9C2; margin-bottom: 6px; }
.wiz-link-row { display: flex; gap: 6px; }
.wiz-link-row input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff; font-size: 13px; }
.wiz-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wiz-actions form { display: contents; }
.wiz-actions .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .3); }
.wiz-actions .btn--outline:hover { background: #fff; color: var(--ink); }
.wiz-wa { background: #25D366; color: #fff; }
.wiz-wa:hover { background: #1EB856; color: #fff; }
.summary-admin { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.summary-admin label span { display: block; font-size: 12px; font-weight: 700; color: #A9A9C2; margin-bottom: 4px; }
.summary-admin input, .summary-admin textarea { width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 14px; }
.summary-admin input:focus, .summary-admin textarea:focus { outline: none; border-color: var(--lime); }

.proof { padding: 36px 0 90px; background: linear-gradient(180deg, var(--soft), #fff 40%); }
.proof-head { max-width: 720px; margin-bottom: 26px; }
.proof-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.proof-head h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; margin: 8px 0; }
.proof-head p { color: var(--muted); margin: 0 0 12px; }
.proof-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--soft); color: var(--ink); }
.proof-status.tone-lime { background: #EEFBD8; color: #3F7D0B; }
.proof-status.tone-coral { background: #FFF1EE; color: var(--coral); }
.proof-alert { margin-bottom: 20px; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.proof-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: center; padding: 34px 26px; border-radius: var(--r-xl); background: radial-gradient(rgba(11, 11, 26, .07) 1px, transparent 1.4px) 0 0 / 18px 18px, radial-gradient(circle at 50% 40%, #fff, #EFEEF8 72%); }
.proof-face { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.proof-face figcaption { font-size: 13px; font-weight: 700; color: var(--muted); }
.proof-card { width: 100%; display: grid; place-items: center; }
.proof-card .dcard { width: 100%; max-width: 360px; }
.proof-card .dcard.type-stant { max-width: 220px; }
.proof-card .dcard.type-kare { max-width: 300px; }
.proof-face--back .dcard-inner { transform: rotateY(180deg); }
.proof-card .dcard-foot { display: none !important; }
.proof-info { padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.proof-info h2 { font-size: 18px; margin-bottom: 12px; }
.proof-info dl { margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.proof-info dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px dashed var(--line); padding-bottom: 8px; }
.proof-info dt { color: var(--muted); }
.proof-info dd { margin: 0; text-align: right; font-weight: 600; color: var(--ink); }
.proof-link { max-width: 220px; overflow-wrap: anywhere; font-size: 12.5px; }
.proof-note { display: flex; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border-radius: 14px; background: #FFF8E6; }
.proof-note i { font-size: 22px; color: #B7791F; }
.proof-note p { margin: 2px 0 0; font-size: 14px; }
.proof-approve { margin-bottom: 10px; }
.proof-revise { border: 1px solid var(--line); border-radius: 14px; }
.proof-revise summary { padding: 12px 14px; cursor: pointer; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.proof-revise form { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.proof-revise textarea { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid var(--line); font: inherit; }
.proof-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0; font-size: 13px; color: var(--muted); }
.proof-hint i { color: var(--green); }
@media (max-width: 960px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .proof-stage { grid-template-columns: minmax(0, 1fr); } }

/* Yelp */
.plat-yelp .df-sign-logo i, .platform-opt .fa-yelp { color: #D32323; }
.type-stant.plat-yelp .df-sign-stars, .type-kare.plat-yelp .df-sign-stars { display: flex; color: #FF4D4D; }

/* ==========================================================================
   Tasarla — ürün görselli tip kartları, Google kartı yön seçimi, dikey kart
   ========================================================================== */
.type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.type-card { padding: 10px 10px 12px; gap: 8px; }
.type-art { display: block; border-radius: 12px; overflow: hidden; background: var(--soft); }
.type-art .pv { aspect-ratio: 16 / 11; }
.type-art .pv::before { width: 55%; }
.type-card:has(input:checked) .type-art { box-shadow: 0 0 0 2px var(--primary); }
.type-card .type-body strong { font-size: 13.5px; }
.type-card .type-price { font-size: 15px; }
.type-check { top: 16px; right: 16px; z-index: 2; background: #fff; border-radius: 50%; }
@media (max-width: 960px) { .type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.orient-row { margin-top: 16px; }
.orient-row[hidden] { display: none; }
.orient-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.orient-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background .2s; }
.orient-opt input { position: absolute; opacity: 0; pointer-events: none; }
.orient-opt strong { display: block; font-size: 14px; color: var(--ink); }
.orient-opt small { font-size: 12px; color: var(--muted); }
.orient-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-50); }
.orient-mini { flex-shrink: 0; display: block; border-radius: 4px; background: var(--ink); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); }
.orient-mini--h { width: 40px; height: 26px; }
.orient-mini--v { width: 26px; height: 40px; }
.orient-opt:has(input:checked) .orient-mini { background: var(--primary); }

/* Dikey Google kartı: 54 × 85,6 */
.df-google-qr, .df-google-tap, .df-gband { display: none; }
.dcard.type-google.orient-dikey { aspect-ratio: 54 / 85.6; width: min(100%, 290px); }
.type-google.orient-dikey .dface { border-radius: 6cqi; }
.type-google.orient-dikey .df-google { left: 9cqi; right: 9cqi; top: 11cqi; bottom: 9cqi; align-items: center; justify-content: center; text-align: center; gap: 3.2cqi; }
.type-google.orient-dikey .df-g { width: 24cqi; height: 24cqi; padding: 4.5cqi; border-radius: 50%; }
.type-google.orient-dikey .df-biz { margin-top: 2cqi; font-size: 10cqi; }
.type-google.orient-dikey .df-cta { font-size: 5.4cqi; margin-top: 0; }
.type-google.orient-dikey .df-stars { font-size: 8cqi; margin-top: 0; }
.type-google.orient-dikey .df-google-qr { display: block; width: 54cqi; aspect-ratio: 1; padding: 3cqi; margin-top: 2cqi; background: #fff; color: #0B0B1A; border-radius: 4cqi; }
.type-google.orient-dikey .df-google-qr svg { width: 100%; height: 100%; display: block; }
.type-google.orient-dikey .df-google-tap { display: inline-flex; align-items: center; gap: 1.4cqi; font-size: 5cqi; font-weight: 700; color: var(--face-sub); }
.type-google.orient-dikey .df-google-tap i { color: var(--accent-text); font-size: 6cqi; }
.type-google.orient-dikey .df-logo { left: 50%; right: auto; top: auto; bottom: 4cqi; transform: translateX(-50%); height: 9cqi; }
.type-google.orient-dikey .df-nfc { top: 6cqi; right: 7cqi; font-size: 9cqi; }
/* Dikey yerleşimleri: Büyük QR (merkez) · Renk bantlı (modern) */
.type-google.orient-dikey.layout-merkez .df-google { gap: 2cqi; }
.type-google.orient-dikey.layout-merkez .df-g { width: 16cqi; height: 16cqi; padding: 3cqi; }
.type-google.orient-dikey.layout-merkez .df-biz { font-size: 8cqi; }
.type-google.orient-dikey.layout-merkez .df-google-qr { width: 70cqi; }
.type-google.orient-dikey.layout-modern .df-gband { display: block; position: absolute; left: 0; right: 0; top: 0; height: 5cqi; z-index: 3; background: linear-gradient(90deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%); }
.type-google.orient-dikey.layout-modern .dface--front::before { display: none; }
.type-google.orient-dikey.layout-modern .df-google { top: 14cqi; }
.type-google.orient-dikey .df-google { position: absolute; }
/* Arka yüz dikeyde QR üstte */
.type-google.orient-dikey .dface--back { flex-direction: column; justify-content: center; text-align: center; }
.type-google.orient-dikey .db-qr { width: 64cqi; }
.type-google.orient-dikey .db-info { align-items: center; }
.type-google.orient-dikey .db-info strong { font-size: 9cqi; }
.type-google.orient-dikey .db-url { font-size: 4.6cqi; max-width: 80cqi; }
.type-google.orient-dikey .db-nfc { align-self: center; font-size: 4.6cqi; }
.proof-card .dcard.type-google.orient-dikey { max-width: 220px; }
/* Yerleşim minileri — dikey Google */
.layout-grid--gdikey .layout-mini { width: 38px; aspect-ratio: 54 / 85.6; }
.layout-grid--gdikey .layout-mini::before { display: none; }
.layout-grid--gdikey .layout-mini i { transform: none; left: auto; right: auto; top: auto; bottom: auto; }
.layout-grid--gdikey .layout-mini i:nth-child(1) { left: 14px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.layout-grid--gdikey .layout-mini i:nth-child(2) { left: 8px; top: 20px; width: 22px; height: 4px; background: #fff; }
.layout-grid--gdikey .layout-mini i:nth-child(3) { left: 10px; top: 30px; width: 18px; height: 18px; border-radius: 2px; background: var(--lime); }
.layout-grid--gdikey .layout-mini--merkez i:nth-child(1) { width: 7px; height: 7px; left: 15px; top: 5px; }
.layout-grid--gdikey .layout-mini--merkez i:nth-child(3) { left: 6px; top: 22px; width: 26px; height: 26px; }
.layout-grid--gdikey .layout-mini--modern { background: linear-gradient(90deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%) top / 100% 5px no-repeat, var(--ink); }
.type-google.orient-dikey.layout-modern .df-g { position: static; transform: none; left: auto; top: auto; width: 24cqi; height: 24cqi; padding: 4.5cqi; }
.type-google.orient-dikey.layout-modern .df-biz { margin-top: 2cqi; }

/* Onay sayfası: tasarımın mockup fotoğrafları */
.proof-mockups { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--line, #E8E7F2); }
.proof-mockups-head { max-width: 640px; margin-bottom: 20px; }
.proof-mockups-head h2 { margin: 10px 0 6px; font-size: clamp(24px, 3vw, 32px); }
.proof-mockups-head p { color: var(--muted, #6F6F88); font-size: 15px; margin: 0; }
.proof-mockup-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.proof-mockup { position: relative; display: block; border-radius: 20px; overflow: hidden; background: #F4F3FA; box-shadow: 0 18px 40px -26px rgba(11, 11, 26, .5); }
.proof-mockup img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.proof-mockup:hover img { transform: scale(1.04); }
.proof-mockup span { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; background: rgba(11, 11, 26, .72); color: #fff; font-size: 12.5px; font-weight: 700; opacity: 0; transition: opacity .2s; }
.proof-mockup:hover span { opacity: 1; }

/* ==========================================================================
   Google yorum kartı — ek yerleşimler: renk şeritli, iki tonlu, yorum balonu (yatay),
   arama çubuklu, iki tonlu (dikey). Katalogdaki aynı adlı modellerin düzenlenebilir hâli.
   ========================================================================== */
.layout-opt[hidden] { display: none; }
.df-gbub { display: contents; }
.df-gsearch { display: none; }

/* Yatay yeni yerleşimlerde QR ön yüzde, sağda; logo sağ üste çıkar */
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-google-qr { display: block; position: absolute; left: calc(100% + 6cqi); top: 56%; transform: translateY(-50%); width: 30cqi; aspect-ratio: 1; padding: 2cqi; background: #fff; color: #0B0B1A; border-radius: 3cqi; box-shadow: 0 0 0 .4cqi rgba(11, 11, 26, .08); }
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-google-qr svg { width: 100%; height: 100%; display: block; }
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-google { right: 42cqi; }
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-logo { top: 5cqi; bottom: auto; right: 7cqi; height: 9cqi; }
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-logo img { max-width: 30cqi; }
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-nfc { display: none; }
.type-google.orient-yatay:is(.layout-serit, .layout-ikiton, .layout-balon) .df-google-tap { display: inline-flex; align-items: center; gap: 1.2cqi; margin-top: 2cqi; font-size: 3.2cqi; font-weight: 700; color: var(--face-sub); }

/* Renk şeritli */
.type-google.orient-yatay.layout-serit .df-gband { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 5cqi; z-index: 3; background: linear-gradient(180deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%); }
.type-google.orient-yatay.layout-serit .df-google { left: 11cqi; }
.type-google.orient-yatay.layout-serit .df-google-qr { left: calc(100% + 5cqi); }

/* İki tonlu (yatay): kart beyaz, renk solda eğik panelde */
.type-google.layout-ikiton .dface--front { background: #fff; }
.type-google.layout-ikiton .dface--front::before { content: ""; position: absolute; background: var(--face-bg); }
.type-google.orient-yatay.layout-ikiton .dface--front::before { left: 0; top: 0; bottom: 0; width: 60cqi; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
.type-google.orient-yatay.layout-ikiton .df-google { right: 50cqi; }
.type-google.orient-yatay.layout-ikiton .df-g { border-radius: 50%; }
.type-google.orient-yatay.layout-ikiton .df-google-qr { left: calc(100% + 13cqi); top: 50%; box-shadow: none; padding: 0; }
.type-google.orient-yatay.layout-ikiton .df-google-tap { position: absolute; left: calc(100% + 13cqi); width: 30cqi; bottom: -2cqi; justify-content: center; margin: 0; color: rgba(11, 11, 26, .6); white-space: nowrap; }
.type-google.layout-ikiton .df-google-tap i { color: inherit; }

/* Yorum balonu */
.type-google.orient-yatay.layout-balon .df-gbub { display: flex; flex-direction: column-reverse; gap: 1.6cqi; order: -1; position: relative; align-self: flex-start; max-width: 100%; padding: 3.6cqi 4.4cqi; border-radius: 4.5cqi; background: #fff; color: #0B0B1A; box-shadow: 0 0 0 .4cqi rgba(11, 11, 26, .08), 0 2.4cqi 6cqi -2cqi rgba(11, 11, 26, .35); }
.type-google.orient-yatay.layout-balon .df-gbub::after { content: ""; position: absolute; left: 6cqi; top: calc(100% - .4cqi); border: 3cqi solid transparent; border-top-color: #fff; border-left-color: #fff; }
.type-google.orient-yatay.layout-balon .df-cta { margin: 0; font-family: var(--card-font); font-size: 5cqi; font-weight: 700; line-height: 1.12; color: #0B0B1A; }
.type-google.orient-yatay.layout-balon .df-stars { margin: 0; font-size: 5.6cqi; }
.type-google.orient-yatay.layout-balon .df-g { position: absolute; left: 0; bottom: 0; width: 9cqi; height: 9cqi; padding: 1.6cqi; border-radius: 50%; }
.type-google.orient-yatay.layout-balon .df-biz { margin-top: auto; padding-left: 11.5cqi; min-height: 9cqi; display: flex; align-items: center; font-size: 5cqi; }
.type-google.orient-yatay.layout-balon .df-google-tap { display: none; }

/* Dikey — arama çubuklu */
.type-google.orient-dikey.layout-arama .df-g { display: none; }
.type-google.orient-dikey.layout-arama .df-gsearch { display: flex; align-items: center; gap: 3cqi; width: 100%; padding: 3.4cqi 5cqi; border-radius: 99px; background: #fff; color: #0B0B1A; box-shadow: 0 0 0 .5cqi rgba(11, 11, 26, .08), 0 2cqi 5cqi -1.5cqi rgba(11, 11, 26, .3); }
.df-gs-g { width: 10cqi; height: 10cqi; flex: none; }
.df-gsearch em { flex: 1; font-style: normal; font-weight: 600; font-size: 6.6cqi; text-align: left; opacity: .75; white-space: nowrap; }
.df-gsearch i { font-size: 7.6cqi; color: #4285F4; }
.type-google.orient-dikey.layout-arama .df-google-qr { width: 52cqi; }

/* Dikey — iki tonlu: üstte renkli kavisli alan, altta beyaz zeminde yıldızlar ve QR */
.type-google.orient-dikey.layout-ikiton .dface--front::before { left: 0; right: 0; top: 0; height: 45%; border-radius: 0 0 50% 50% / 0 0 15% 15%; }
.type-google.orient-dikey.layout-ikiton .df-google { top: 8cqi; justify-content: flex-start; gap: 2.6cqi; }
.type-google.orient-dikey.layout-ikiton .df-g { width: 22cqi; height: 22cqi; }
.type-google.orient-dikey.layout-ikiton .df-biz { font-size: 8.6cqi; }
.type-google.orient-dikey.layout-ikiton .df-stars { margin-top: auto; }
.type-google.orient-dikey.layout-ikiton .df-google-qr { width: 50cqi; margin-top: 0; padding: 0; border-radius: 0; }
.type-google.orient-dikey.layout-ikiton .df-google-tap { color: rgba(11, 11, 26, .6); }
.type-google.orient-dikey.layout-ikiton .df-nfc { color: var(--face-fg); }

/* Yerleşim küçük önizlemeleri */
.layout-mini--serit { background: linear-gradient(180deg, #4285F4 0 25%, #EA4335 25% 50%, #FBBC05 50% 75%, #34A853 75%) left / 5px 100% no-repeat, var(--ink); }
.layout-mini--serit i:nth-child(1) { left: 11px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.layout-mini--serit i:nth-child(2) { left: 11px; bottom: 9px; width: 24px; }
.layout-mini--serit i:nth-child(3) { right: 7px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: #fff; }
.layout-mini--ikiton { background: linear-gradient(100deg, var(--ink) 0 56%, #fff 56%); box-shadow: inset 0 0 0 1px rgba(11, 11, 26, .15); }
.layout-mini--ikiton i:nth-child(1) { left: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.layout-mini--ikiton i:nth-child(2) { left: 7px; bottom: 9px; width: 22px; }
.layout-mini--ikiton i:nth-child(3) { right: 6px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: var(--ink); }
.layout-mini--balon i:nth-child(1) { left: 7px; top: 7px; width: 34px; height: 17px; border-radius: 5px 5px 5px 0; background: #fff; }
.layout-mini--balon i:nth-child(2) { left: 7px; bottom: 7px; width: 20px; height: 4px; }
.layout-mini--balon i:nth-child(3) { right: 7px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; background: var(--lime); }
.layout-grid--gdikey .layout-mini--arama i:nth-child(1) { left: 5px; top: 7px; width: 28px; height: 8px; border-radius: 99px; }
.layout-grid--gdikey .layout-mini--ikiton { background: linear-gradient(180deg, var(--ink) 0 42%, #fff 42%); box-shadow: inset 0 0 0 1px rgba(11, 11, 26, .15); }
.layout-grid--gdikey .layout-mini--ikiton i:nth-child(1) { left: 14px; top: 5px; }
.layout-grid--gdikey .layout-mini--ikiton i:nth-child(2) { left: 8px; top: 18px; }
.layout-grid--gdikey .layout-mini--ikiton i:nth-child(3) { left: 10px; top: 33px; background: var(--ink); }

/* IBAN / ödeme tabelası */
.plat-iban .df-sign-logo i, .platform-opt .ph-bank { color: #0B7A55; }
/* QR menü tabelası */
.plat-menu .df-sign-logo i, .platform-opt .ph-fork-knife { color: #E8590C; }
/* ==========================================================================
   Mobil tasarım deneyimi — önizleme ekranı kaplamasın, form rahat doldurulsun
   Önizleme yüksekliği ekranın ~%34'üyle sınırlı (kart türünden bağımsız: dikey stant, kare, yatay kart);
   form doldurulurken otomatik küçülür (.is-compact, designer.js), dokununca / düğmeyle büyür.
   ========================================================================== */
.tool-btn--size { display: none; }
@media (max-width: 960px) {
    .designer-hero { padding: 14px 0 2px; }
    .designer-hero h1 { font-size: clamp(25px, 7.2vw, 34px); margin-bottom: 6px; }
    .designer-hero p { font-size: 13.5px; line-height: 1.5; }
    .designer-hero-row { gap: 12px; }
    .designer { padding-top: 12px; }
    .designer-grid { gap: 16px; }
    .tool-btn--size { display: grid; }

    .stage { --pv-h: 30vh; --pv-h: 30svh; padding: 54px 12px 14px; transition: padding .3s var(--ease); }
    .stage .dcard { width: min(80%, 400px, calc(var(--pv-h) * 1.585)); transition: width .3s var(--ease); }
    .stage .dcard.type-stant { width: min(56%, 240px, calc(var(--pv-h) * .667)); }
    .stage .dcard.type-kare { width: min(66%, 320px, var(--pv-h)); }
    .stage .dcard.type-google.orient-dikey { width: min(56%, 240px, calc(var(--pv-h) * .631)); }

    /* Form doldururken: küçük önizleme, araç çubuğu sade */
    .stage-col.is-compact .stage { --pv-h: 17vh; --pv-h: 17svh; padding: 46px 10px 10px; cursor: zoom-in; }
    .stage-col.is-compact .stage-toolbar { top: 8px; }
    .stage-col.is-compact .segmented button { padding: 5px 12px; font-size: 12px; }
    .stage-col.is-compact .tool-btn { width: 32px; height: 32px; font-size: 15px; }
    .stage-col.is-compact [data-stage-bg] { display: none; }
}
@media (max-width: 560px) {
    .designer-hero p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .breadcrumb { margin-bottom: 6px; }
    .progress-steps li { padding: 4px; }
}
/* Yatay telefon: önizleme ve form yan yana; önizleme ekranı kapatmaz */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 560px) {
    .designer-hero { padding: 8px 0 0; }
    .designer-hero p, .designer-hero .breadcrumb, .progress-steps { display: none; }
    .designer-hero h1 { font-size: 22px; margin: 0; }
    .designer-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; }
    .stage-col { position: sticky; top: calc(var(--header-h) + 6px); }
    .stage, .stage-col.is-compact .stage { --pv-h: 36vh; --pv-h: 36svh; padding: 46px 10px 10px; cursor: default; }
    .tool-btn--size { display: none; }
    .mobile-buy { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
    .mobile-buy strong { font-size: 18px; }
    .page-designer .wa-float { display: none; }
}

/* Tripadvisor: Font Awesome 6 bu marka ikonunu kaldırdı → baykuş logosu SVG maske ile (renk currentColor) */
.fa-tripadvisor::before { content: "" !important; display: inline-block; width: 1.5em; height: 1em; vertical-align: -.125em; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 26%27%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.8%27%3E%3Ccircle cx=%2711%27 cy=%2715%27 r=%277.6%27/%3E%3Ccircle cx=%2729%27 cy=%2715%27 r=%277.6%27/%3E%3Cpath d=%27M2.5 8.2C9 2.6 31 2.6 37.5 8.2%27/%3E%3C/g%3E%3Ccircle cx=%2711%27 cy=%2715%27 r=%273.4%27/%3E%3Ccircle cx=%2729%27 cy=%2715%27 r=%273.4%27/%3E%3Cpath d=%27M17.2 21.2 20 25.4l2.8-4.2z%27/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 40 26%27%3E%3Cg fill=%27none%27 stroke=%27%23000%27 stroke-width=%272.8%27%3E%3Ccircle cx=%2711%27 cy=%2715%27 r=%277.6%27/%3E%3Ccircle cx=%2729%27 cy=%2715%27 r=%277.6%27/%3E%3Cpath d=%27M2.5 8.2C9 2.6 31 2.6 37.5 8.2%27/%3E%3C/g%3E%3Ccircle cx=%2711%27 cy=%2715%27 r=%273.4%27/%3E%3Ccircle cx=%2729%27 cy=%2715%27 r=%273.4%27/%3E%3Cpath d=%27M17.2 21.2 20 25.4l2.8-4.2z%27/%3E%3C/svg%3E") center / contain no-repeat; }