/* ═══════════════════════════════════════════════════════════════════════ PACKMORE OTURUM FORMU — giriş / kayıt / şifremi unuttum ORTAK stilleri Ölçüm: harness/live-auth.json (3 sayfa × 4 viewport). dış kap max-width 672 · üst 64 · yan 16 → ≥1280'de 64 · ortalı form tek kolon · gap 16 · radius 8 · beyaz gölge rgba(0,0,0,.2) 0 0 10px (`shadow-04`) padding 16 → ≥1024'te 24 (`p-4 lg:p-6`) başlık 20px/28 w600 (`text-xl`) alan 44px · radius 8 · 1px #1a232d · 14px/20 · padding 8px 14px düğme 40px · radius 8 · #e07028 · 16px/24 w600 · padding 8px 16px sosyal 42px · padding 10 · 1px #1a232d · 14px/20 w500 · gap 6 ═══════════════════════════════════════════════════════════════════════ */ /* Canlı `wrapper mtwrap flex h-full !max-w-2xl items-center justify-center`. `mtwrap` üstten 64px veriyor (ölçüldü: margin-top 64). `!max-w-2xl` `wrapper`ın 1718 sınırını 672'ye indiriyor. */ .cc_qyfayfbe_pZzXai8oTD .pm-auth, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth, .cc_qyfayfbe_nCHqTQDqkY .pm-auth, .cc_qyfayfbe_dHosNTUSZI .pm-auth, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 672px; margin-inline: auto; /* `mtwrap` DEĞİŞKEN: ölçüldü 1440'ta 64, 1280'in altında 40 (`mt-10 xl:mt-16`). Sabit 64 yazmak sayfayı üç viewport'ta 24px aşağı itiyordu. */ margin-top: 40px; padding-inline: 16px; } @media (min-width: 1280px) { .cc_qyfayfbe_pZzXai8oTD .pm-auth, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth, .cc_qyfayfbe_nCHqTQDqkY .pm-auth, .cc_qyfayfbe_dHosNTUSZI .pm-auth, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth { margin-top: 64px; padding-inline: 64px; } } /* `grid w-full grid-cols-1 gap-4 rounded-lg bg-white p-4 shadow-04 lg:p-6` */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__form, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__form, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__form, .cc_qyfayfbe_dHosNTUSZI .pm-auth__form, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__form, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__form, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__form { display: grid; width: 100%; grid-template-columns: 1fr; gap: 16px; border-radius: var(--pm-radius); background: var(--pm-white); padding: 16px; /* `shadow-04` — Tailwind gölge yardımcıları ÜÇ katman basıyor (ring + ring-offset + gölge); ilk ikisi saydam ama hesaplanmış değerde duruyor. Tek katman yazmak canlı ↔ harness karşılaştırmasında fark üretiyordu. */ box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.2) 0 0 10px 0; } /* 🔴 Eşik `lg:` = 1024 (bu temada kategori şeridi 1280'de dönüyor; ikisi AYRI — md. 24). Ölçüldü: 1024'te padding 24, 768'de 16. */ @media (min-width: 1024px) { .cc_qyfayfbe_pZzXai8oTD .pm-auth__form, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__form, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__form, .cc_qyfayfbe_dHosNTUSZI .pm-auth__form, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__form, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__form, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__form { padding: 24px; } } .cc_qyfayfbe_pZzXai8oTD .pm-auth__title, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__title, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__title, .cc_qyfayfbe_dHosNTUSZI .pm-auth__title, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__title, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__title, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; } /* `-mt-2 text-left text-sm` */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__desc, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__desc, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__desc, .cc_qyfayfbe_dHosNTUSZI .pm-auth__desc, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__desc, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__desc, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__desc { margin: -8px 0 0; text-align: left; font-size: 14px; line-height: 20px; } /* `fieldset.grid grid-cols-1 gap-1` — tarayıcının fieldset varsayılanları (kenarlık, dolgu, min-width) temizleniyor. */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__field, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__field, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__field, .cc_qyfayfbe_dHosNTUSZI .pm-auth__field, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__field, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__field, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__field { display: grid; grid-template-columns: 1fr; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; } /* `h-11 rounded-lg border border-button-01 px-3.5 text-sm` — dikey dolgu canlıda 8px (tarayıcı varsayılanı değil; ölçüldü `8px 14px`). */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__input, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__input, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__input, .cc_qyfayfbe_dHosNTUSZI .pm-auth__input, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__input, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__input, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__input { height: 44px; width: 100%; border-radius: var(--pm-radius); border: 1px solid var(--pm-ink); padding: 8px 14px; font-size: 14px; line-height: 20px; color: var(--pm-ink); background: var(--pm-white); } .cc_qyfayfbe_pZzXai8oTD .pm-auth__input::placeholder, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__input::placeholder, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__input::placeholder, .cc_qyfayfbe_dHosNTUSZI .pm-auth__input::placeholder, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__input::placeholder, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__input::placeholder, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__input::placeholder { color: rgba(0, 0, 0, 0.6); } /* Canlı select: Tailwind forms `appearance:none` + gri ok (6b7280) `calc(100% - 8px) 50%` 21×21 — ölçüldü (adres formu). Yerel görünüm kapanmadan satır yüksekliği `normal` kalıyor. */ .cc_qyfayfbe_pZzXai8oTD select.pm-auth__input, .cc_qyfayfbe_B9aiA3CPF6 select.pm-auth__input, .cc_qyfayfbe_nCHqTQDqkY select.pm-auth__input, .cc_qyfayfbe_dHosNTUSZI select.pm-auth__input, .cc_qyfayfbe_ZdEwuCicz7 select.pm-auth__input, .cc_qyfayfbe_rnGGXPCwg9 select.pm-auth__input, .cc_qyfayfbe_1P0tRQIKQ2 select.pm-auth__input { appearance: none; -webkit-appearance: none; line-height: 20px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: calc(100% - 8px) 50%; background-size: 21px 21px; background-repeat: no-repeat; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__input:focus, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__input:focus, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__input:focus, .cc_qyfayfbe_dHosNTUSZI .pm-auth__input:focus, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__input:focus, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__input:focus, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__input:focus { border-color: #000; outline: none; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__input:disabled, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__input:disabled, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__input:disabled, .cc_qyfayfbe_dHosNTUSZI .pm-auth__input:disabled, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__input:disabled, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__input:disabled, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__input:disabled { opacity: 0.4; } /* `text-xs font-medium text-red-600` */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__error, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__error, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__error, .cc_qyfayfbe_dHosNTUSZI .pm-auth__error, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__error, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__error, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__error { font-size: 12px; line-height: 16px; font-weight: 500; color: rgb(220, 38, 38); } .cc_qyfayfbe_pZzXai8oTD .pm-auth__pwwrap, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__pwwrap, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__pwwrap, .cc_qyfayfbe_dHosNTUSZI .pm-auth__pwwrap, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__pwwrap, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__pwwrap, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__pwwrap { position: relative; } /* `absolute right-3.5 top-3.5` · ikon `size-4` = 16px */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__eye, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__eye, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__eye, .cc_qyfayfbe_dHosNTUSZI .pm-auth__eye, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__eye, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__eye, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__eye { position: absolute; right: 14px; top: 14px; display: flex; border: 0; background: none; padding: 0; color: inherit; font-size: 16px; cursor: pointer; } /* `w-full rounded-lg bg-button-02 font-semibold text-white` + taban düğme `flex items-center justify-center truncate` — ölçülen yükseklik 40 = 8 + 24 + 8. */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__submit, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__submit, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__submit, .cc_qyfayfbe_dHosNTUSZI .pm-auth__submit, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__submit, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__submit, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__submit { display: flex; width: 100%; align-items: center; justify-content: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; border-radius: var(--pm-radius); background: var(--pm-accent); padding: 8px 16px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--pm-white); cursor: pointer; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__submit:disabled, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__submit:disabled, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__submit:disabled, .cc_qyfayfbe_dHosNTUSZI .pm-auth__submit:disabled, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__submit:disabled, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__submit:disabled, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__submit:disabled { cursor: default; opacity: 0.6; } /* Giriş ve şifre sayfalarında düğmenin kendi sarmalayıcısı var; kayıtta yok. */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__submitwrap, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__submitwrap, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__submitwrap, .cc_qyfayfbe_dHosNTUSZI .pm-auth__submitwrap, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__submitwrap, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__submitwrap, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__submitwrap { width: 100%; margin-top: 16px; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__submitwrap--sm, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__submitwrap--sm, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__submitwrap--sm, .cc_qyfayfbe_dHosNTUSZI .pm-auth__submitwrap--sm, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__submitwrap--sm, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__submitwrap--sm, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__submitwrap--sm { margin-top: 8px; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__links, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__links, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__links, .cc_qyfayfbe_dHosNTUSZI .pm-auth__links, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__links, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__links, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__links { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 500; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__links a, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__links a, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__links a, .cc_qyfayfbe_dHosNTUSZI .pm-auth__links a, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__links a, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__links a, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__links a { font-size: 14px; line-height: 20px; text-decoration: underline; color: inherit; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__links a:first-child, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__links a:first-child, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__links a:first-child, .cc_qyfayfbe_dHosNTUSZI .pm-auth__links a:first-child, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__links a:first-child, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__links a:first-child, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__links a:first-child { margin-right: auto; } /* `mx-auto flex items-center justify-center text-base font-medium text-button-02 underline` */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__backlink, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__backlink, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__backlink, .cc_qyfayfbe_dHosNTUSZI .pm-auth__backlink, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__backlink, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__backlink, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__backlink { margin-inline: auto; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--pm-accent); text-decoration: underline; } /* `flex flex-col items-center justify-center gap-4` */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__social, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__social, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__social, .cc_qyfayfbe_dHosNTUSZI .pm-auth__social, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__social, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__social, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__social { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } /* `flex w-full items-center justify-center gap-1.5 rounded-lg border border-button-01 p-2.5 text-sm font-medium text-button-01` → 42px */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__socialbtn, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__socialbtn, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__socialbtn, .cc_qyfayfbe_dHosNTUSZI .pm-auth__socialbtn, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__socialbtn, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__socialbtn, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__socialbtn { display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px; border-radius: var(--pm-radius); border: 1px solid var(--pm-ink); background: none; padding: 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--pm-ink); cursor: pointer; } /* 🔴 İkonlar KARE DEĞİL: canlıda yükseklik sabit, genişlik viewBox oranından geliyor (Google 488/512 → 12px yükseklikte 11.4px genişlik). `1em × 1em` yazmak Google ikonunu 12×12 yapıp düğme içeriğini 0.6px kaydırıyordu. */ .cc_qyfayfbe_pZzXai8oTD .pm-auth__socialbtn svg, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__socialbtn svg, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__socialbtn svg, .cc_qyfayfbe_dHosNTUSZI .pm-auth__socialbtn svg, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__socialbtn svg, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__socialbtn svg, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__socialbtn svg { width: auto; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__socialbtn--google svg, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__socialbtn--google svg, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__socialbtn--google svg, .cc_qyfayfbe_dHosNTUSZI .pm-auth__socialbtn--google svg, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__socialbtn--google svg, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__socialbtn--google svg, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__socialbtn--google svg { height: 12px; } .cc_qyfayfbe_pZzXai8oTD .pm-auth__socialbtn--fb svg, .cc_qyfayfbe_B9aiA3CPF6 .pm-auth__socialbtn--fb svg, .cc_qyfayfbe_nCHqTQDqkY .pm-auth__socialbtn--fb svg, .cc_qyfayfbe_dHosNTUSZI .pm-auth__socialbtn--fb svg, .cc_qyfayfbe_ZdEwuCicz7 .pm-auth__socialbtn--fb svg, .cc_qyfayfbe_rnGGXPCwg9 .pm-auth__socialbtn--fb svg, .cc_qyfayfbe_1P0tRQIKQ2 .pm-auth__socialbtn--fb svg { height: 13px; }