/* © Blesyum · Fit App üreticisi — bkz. NOTICE * LİLA DÜZEN KATMANI — tasarımın bütün CSS'inden sonra yüklenir (lila-aktar.mjs). * Yazı boyutları içeri alımda düzeltildi (duzen/duzelt.mjs); burada: * 1. yazı: Plus Jakarta Sans (kendi sunucumuzdan; Google'a istek gitmez) * 2. tek içerik çerçevesi: üst çubuk, kahraman alanı, bölümler, bantlar ve * altbilgi AYNI sol/sağ kenara hizalanır (önce 72 / 152 / 88 / 408 px'ti) * 3. hareket: kaydırınca beliren içerik, düğme/kart/menü geçişleri, * sayfa geçişi (lila-hareket.js ile). "Hareketi azalt" açık cihazda kapalı. */ /* ─── 1. Yazı ─────────────────────────────────────────────────────────────── */ @font-face { font-family: 'Lila Sans'; src: url('/vitrin/lila/yazi/jakarta-normal-latin.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lila Sans'; src: url('/vitrin/lila/yazi/jakarta-normal-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Lila Sans'; src: url('/vitrin/lila/yazi/jakarta-italic-latin.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Lila Sans'; src: url('/vitrin/lila/yazi/jakarta-italic-latin-ext.woff2') format('woff2'); font-weight: 400 800; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } button, input, select, textarea { font-family: inherit; } h1, h2, h3 { text-wrap: balance; font-weight: 750; } /* Başlıktaki mor vurgu: tasarımda ayrı (italik/serif) bir yazı gibi duruyordu. */ h1 em, h2 em, h3 em { font-style: normal; font-weight: inherit; } p { text-wrap: pretty; } /* ─── 2. Tek içerik çerçevesi ─────────────────────────────────────────────── */ :root { /* İçerik en çok 1296 px; dar ekranda kenar boşluğu 20–72 px. */ --lila-cerceve: 1296px; --lila-kenar: clamp(20px, 5vw, 72px); /* Sayfa genişliği kaydırma çubuğu hariç (lila-hareket.js yazar; yoksa 100vw). */ --lila-yan: max(var(--lila-kenar), calc((var(--lila-gw, 100vw) - var(--lila-cerceve)) / 2)); /* Tasarımın kendi değişkenleri de aynı çerçeveye bağlanır. */ --gutter: var(--lila-yan); --theme-content-width: none; } .wrap { max-width: none; margin-left: 0; margin-right: 0; padding-left: var(--lila-yan); padding-right: var(--lila-yan); } /* Bantlar (kulüp çağrısı, "ilk adım"): yüzen kutu değil, kenardan kenara şerit. */ .cta-band.wrap, .x-club-call.wrap { width: auto; border-radius: 0; } .x-club-call .button { right: var(--lila-yan); } /* Yarı görselli kahraman/bölümler: yazı tarafı çerçevenin kenarına hizalı. */ .detail-hero-copy { padding-left: var(--lila-yan); } .x-life > :last-child { padding-right: var(--lila-yan); } @media (min-width: 1600px) { .cl-detail-hero, .co-shop-hero { padding-left: var(--lila-yan); padding-right: var(--lila-yan); } .cl-detail-hero-top, .cl-detail-hero-bottom, .cl-detail-rule, .cl-detail-hero h1 { max-width: none; } } /* ─── 3. Hareket ──────────────────────────────────────────────────────────── */ :root { --lh-egri: cubic-bezier(0.22, 1, 0.36, 1); --lh-yay: cubic-bezier(0.34, 1.4, 0.64, 1); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } /* Sayfa geçişi (aynı sitede sayfadan sayfaya; destekleyen tarayıcıda). */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: lh-cik 0.28s var(--lh-egri) both; } ::view-transition-new(root) { animation: lh-gel 0.5s var(--lh-egri) both; } .site-header { view-transition-name: lila-ust; } /* Kaydırınca beliren içerik — sınıfları lila-hareket.js verir. */ .lh .lh-gizli { opacity: 0; translate: 0 28px; } .lh .lh-gizli.lh-gorsel { translate: none; scale: 1.06; clip-path: inset(10% 0 10% 0); } .lh .lh-acik { opacity: 1; translate: none; scale: none; clip-path: inset(0 0 0 0); transition: opacity 0.9s var(--lh-egri) var(--lh-gecikme, 0s), translate 0.9s var(--lh-egri) var(--lh-gecikme, 0s), scale 1.4s var(--lh-egri) var(--lh-gecikme, 0s), clip-path 1.1s var(--lh-egri) var(--lh-gecikme, 0s); } /* Kahraman başlığı: kelime kelime aşağıdan gelir. */ .lh-kelime { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; } .lh-kelime > span { display: inline-block; translate: 0 105%; animation: lh-kelime 1s var(--lh-egri) both; animation-delay: calc(0.15s + var(--lh-sira, 0) * 0.06s); } /* JS gelene kadar kahraman yazısı boyanmasın (gelmezse 1,5 sn sonra görünür). */ .lh main > :first-child :is(h1, .eyebrow, h1 + p, .actions):not(.lh-hazir *, .lh-hazir) { animation: lh-guvence 0s 1.5s both; opacity: 0; } /* Üst çubuk: hep yapışık ve dolu zeminli; kaydırınca gölge alır. Başlıkta backdrop-filter/translate * kullanma — içindeki sabit telefon menüsünü başlığa hapsedip görünmez yapıyordu. */ .site-header { transition: background-color 0.3s, box-shadow 0.3s; } .site-header.lh-kaydi { box-shadow: 0 10px 30px #0000002e; } /* Düğmeler: hafif kalkış, ok çapraz kayar. */ .button, .icon-button, .text-link { transition: translate 0.35s var(--lh-yay), box-shadow 0.35s var(--lh-egri), background-color 0.25s, color 0.25s, border-color 0.25s; } .button:hover { translate: 0 -2px; box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--violet) 70%, transparent); } .button:active { translate: 0 0; transition-duration: 0.1s; } .icon-button:hover { translate: 0 -1px; } .arrow { display: inline-block; transition: translate 0.4s var(--lh-yay); } a:hover > .arrow, button:hover > .arrow, a:focus-visible > .arrow { translate: 3px -3px; } /* Metin bağlantıları: tasarımın alt kenarlığı yerine tek çizgi; üzerine gelince * lila çizgi soldan dolar (kenarlık + ayrı çizgi çift çizgi gösteriyordu). */ .text-link { border-bottom-color: transparent !important; text-decoration: none !important; background: linear-gradient(var(--lilac), var(--lilac)) left bottom / 0 1px no-repeat, linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: background-size 0.45s var(--lh-egri), color 0.25s; } .text-link:hover { background-size: 100% 1px, 100% 1px; } /* Menü: üst bağlantıların altı çizilir (yazının altından; arka plan çizgisi * yüksekliği farklı bağlantılarda yazının ortasına düşüp üstünü çiziyordu). */ .nav-trigger, .nav-direct { text-decoration: underline 2px transparent; text-underline-offset: 8px; transition: text-decoration-color 0.3s var(--lh-egri), color 0.2s; } .nav-trigger:hover, .nav-direct:hover, .nav-trigger[aria-expanded='true'] { text-decoration-color: var(--lilac); } .nav-trigger > span { display: inline-block; transition: rotate 0.3s var(--lh-egri); } .nav-trigger[aria-expanded='true'] > span { rotate: 180deg; } /* Menü paneli başlığın altından perde gibi iner (yukarıdan aşağı açılır); içindekiler * perdenin ardından sırayla aşağıdan gelir, öne çıkan görsel kahramandaki gibi yakından açılır. */ .mega:not([hidden]) { animation: lh-perde 0.6s var(--lh-egri) both; } .mega:not([hidden]) .mega-intro, .mega:not([hidden]) .mega-column, .mega:not([hidden]) .mega-feature { animation: lh-gel 0.6s var(--lh-egri) 0.14s both; } .mega:not([hidden]) .mega-column:nth-child(2) { animation-delay: 0.2s; } .mega:not([hidden]) .mega-column:nth-child(3) { animation-delay: 0.26s; } .mega:not([hidden]) .mega-column:nth-child(4), .mega:not([hidden]) .mega-feature { animation-delay: 0.32s; } .mega:not([hidden]) .mega-feature img { animation: lh-yakin 1.1s var(--lh-egri) 0.1s both; } .mega-links a { transition: color 0.2s, translate 0.3s var(--lh-egri); } .mega-links a:hover { translate: 4px 0; } /* Telefon menüsü tam ekran: hızlı başlayan eğriyle ekran bir anda beyazlıyordu. Perde yavaş başlayıp * yavaş biten eğriyle görünür biçimde aşağı iner; satırlar perde geçtikçe gelir. */ .mobile-nav:not([hidden]) { animation: lh-perde 0.75s cubic-bezier(0.65, 0, 0.35, 1) both; } .mobile-nav:not([hidden]) > * { animation: lh-gel 0.6s var(--lh-egri) 0.3s both; } /* Açılan alt başlığın bağlantıları. */ .mobile-nav details[open] > .mobile-menu-group { animation: lh-gel 0.45s var(--lh-egri) both; } .mobile-nav:not([hidden]) > :nth-child(2) { animation-delay: 0.36s; } .mobile-nav:not([hidden]) > :nth-child(3) { animation-delay: 0.42s; } .mobile-nav:not([hidden]) > :nth-child(4) { animation-delay: 0.48s; } .mobile-nav:not([hidden]) > :nth-child(5) { animation-delay: 0.54s; } .mobile-nav:not([hidden]) > :nth-child(6) { animation-delay: 0.60s; } .mobile-nav:not([hidden]) > :nth-child(7) { animation-delay: 0.66s; } .mobile-nav:not([hidden]) > :nth-child(n + 8) { animation-delay: 0.72s; } .menu-shade:not([hidden]) { animation: lh-belir 0.3s both; } .search-dialog[open], .search-dialog:not([hidden]) { animation: lh-buyu 0.4s var(--lh-egri) both; } /* Kartlar ve satırlar: üzerine gelince kalkar, görsel yakınlaşır. */ .lh-kart { transition: translate 0.45s var(--lh-egri), box-shadow 0.45s var(--lh-egri); } .lh-kart:hover { translate: 0 -4px; box-shadow: 0 22px 40px -24px #2a173c66; } .lh-yakin img { transition: scale 1.1s var(--lh-egri); } .lh-yakin:hover img { scale: 1.05; } /* SSS ve açılır içerik: yükseklik yumuşak açılır/kapanır (destekleyen tarayıcıda), * içerik aşağıdan belirir; artı simgesi yaylanarak döner. */ :root { interpolate-size: allow-keywords; } details::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--lh-egri), content-visibility 0.5s allow-discrete; } details[open]::details-content { block-size: auto; } details[open] > :not(summary) { animation: lh-gel 0.5s var(--lh-egri) both; } summary { transition: color 0.25s; } .faq-hub-item summary:hover { color: var(--violet); } .faq-hub-item summary > span { transition: rotate 0.45s var(--lh-yay), transform 0.45s var(--lh-yay), background-color 0.25s, border-color 0.25s; } .faq-hub-item summary:hover > span { border-color: var(--violet); } .mobile-nav summary::after { transition: rotate 0.35s var(--lh-egri); } .mobile-nav details[open] > summary::after { rotate: 180deg; } /* Pencereler (ders/kayıt/eğitim): ölçeklenerek gelir, arka plan yavaş kararır. */ dialog[open] { animation: lh-buyu 0.45s var(--lh-egri) both; } dialog[open]::backdrop { animation: lh-belir 0.35s both; } /* Sekme, filtre ve seçim düğmeleri: durum değişimi yumuşak (tasarımın kendi * geçişi olan düğmelere dokunmaz — :where özgüllüğü sıfır). */ :where(button, [role='tab'], .ed-filters a, .ed-pagination a) { transition: background-color 0.3s var(--lh-egri), color 0.3s var(--lh-egri), border-color 0.3s var(--lh-egri), box-shadow 0.3s var(--lh-egri); } .ed-filters :is(a, button) { transition: background-color 0.3s var(--lh-egri), color 0.3s, border-color 0.3s, translate 0.35s var(--lh-yay); } .ed-filters :is(a, button):hover { translate: 0 -2px; } /* Blog kartı: kalkar, başlık vurgu rengine döner (görsel yakınlaşması tasarımdan). */ .ed-post-card.lh-kart:hover { box-shadow: none; } .ed-post-card h2 { transition: color 0.3s; } .ed-post-card:hover h2 { color: var(--violet); } } @keyframes lh-gel { from { opacity: 0; translate: 0 14px; } } @keyframes lh-cik { to { opacity: 0; translate: 0 -10px; } } @keyframes lh-asagi { from { opacity: 0; translate: 0 -12px; } } @keyframes lh-perde { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } @keyframes lh-yakin { from { scale: 1.08; } } @keyframes lh-belir { from { opacity: 0; } } @keyframes lh-buyu { from { opacity: 0; scale: 0.97; } } @keyframes lh-kelime { to { translate: 0 0; } } @keyframes lh-guvence { to { opacity: 1; } } /* ─── 4. İkonlar ve görseller (19 Eki, ikinci tur) ────────────────────────── */ /* Remix ikonları (lila-ikon.css) satırla hizalı; tasarımın kendi kutu ölçüleri korunur. */ :is(span, b)[aria-hidden='true']:has(> [class^='ri-']), .arrow { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .arrow > [class^='ri-'], a > [class^='ri-'], button > [class^='ri-'] { font-size: 1.15em; vertical-align: -0.2em; } .nav-trigger > span { font-size: 16px; opacity: 0.75; } .icon-button > [class^='ri-'], .account-icon > [class^='ri-'] { font-size: 20px; vertical-align: middle; } .social-icon { display: inline-grid; place-items: center; } .social-icon > [class^='ri-'] { font-size: 18px; } [data-app-store] > [class^='ri-'] { font-size: 22px; } :is(.close-search, .ed-dialog-close, .engagement-dialog-close, [data-cl-book-close]) > [class^='ri-'] { font-size: 22px; } /* Hero sekmeleri: "Keşfet" okunun 25px sol boşluğu sekme numaralarına da düşüyordu. */ .motion-v5-hero .motion-tabs b { margin-left: 0; } /* Fotoğraflar alanı tam kaplar (tasarımın son düzeltmesi `contain` yapmıştı: * görselin yanında/altında boş bant kalıyordu). */ .motion-v5-hero .motion-photo img, .motion-v5-hero[data-slide] .motion-photo img { object-fit: cover !important; /* Geniş ekranda görsel üstten kırpılıyor, yüz kayboluyordu: odak üst kısım. */ object-position: 70% 15% !important; } /* Kahraman alanı ekranı doldurmasın (850px'e kadar uzuyordu). */ .motion-v5-hero.motion-hero { height: min(720px, calc(100svh - 90px)); min-height: 580px; } .ed-lesson-poster img, .ed-post-image img, .co-package-stage img, .sp-hero > img, .split-image img, .spa-photo img { object-fit: cover !important; } @media (min-width: 900px) { .sp-hero > img { align-self: stretch; height: 100%; min-height: 480px; } .x-life-photo { position: relative; overflow: hidden; } .x-life-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover !important; object-position: center 30%; } } /* Uygulama mağazası bağlantıları: altbilginin koyu zemininde öne çıkan, kompakt rozetler. */ .app-platforms > a { position: relative; min-width: 0; padding: 8px 16px 8px 12px; gap: 10px; border: 1px solid color-mix(in srgb, var(--lilac) 35%, transparent); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--lilac) 22%, transparent), transparent 60%), #1d1626; transition: translate 0.35s var(--lh-egri), border-color 0.25s, box-shadow 0.35s var(--lh-egri); } .app-platforms > a:hover { translate: 0 -2px; border-color: var(--lilac); box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--lilac) 60%, transparent); } .app-platforms > a > [class^='ri-'] { font-size: 22px; color: var(--lilac); } .app-platforms small { font-size: 12px; line-height: 1.25; letter-spacing: 0.02em; color: #b6a5c2; } .app-platforms span { font-size: 15px; line-height: 1.25; font-weight: 700; color: #fff; } /* Blog yazısı: metin başlıkla aynı sola hizalı ve daha geniş (760px ortada dar kalıyordu). */ .ed-article-body { max-width: 860px; margin: 0; } .ed-article .ed-post-tags { justify-content: flex-start; } .ed-article-next h2 { margin-bottom: 28px; } /* Logo: kiracının sitesindeki logo (route.ts → {{LOGO}}); yoksa adı yazı olarak. */ .lila-logo { display: block; width: auto !important; max-width: 260px !important; height: 54px !important; object-fit: contain; object-position: left center; } .footer-brand .lila-logo { height: 54px !important; max-width: 260px !important; } .lila-logo-yazi { display: block; font-size: 22px; font-weight: 750; line-height: 1.1; color: #fff; white-space: nowrap; } @media (max-width: 809.98px) { .lila-logo { height: 42px !important; max-width: 190px !important; } } /* ─── 5. Sayfa başları, form odağı, blog (19 Eki, üçüncü tur) ───────────────── */ /* İç sayfaların başlığı ve giriş alanı: 53–93px başlık, 85px boşluk → daha derli toplu. * Ana sayfanın kahraman alanı ayrı ölçekte. */ main h1:not(.motion-copy h1) { font-size: clamp(34px, 3.5vw, 50px) !important; line-height: 1.08 !important; } /* Yazı ölçeği — tüm sayfalarda aynı (kullanıcı: "bir sayfada başlık ince, birinde kalın"). * Tek aile (Lila Sans), iki kalınlık: başlık 700, metin 400. Boyutlar: * h1 34–50 · h2 bölüm 28–40 · kart başlığı (h2/h3) 20–22 · h3 19–22 · h4 17 * 28 px üstü süs yazıları (sayı, vurgu kelime) içeri alımda 700'e çekilir (duzelt.mjs). */ main :is(h1, h2, h3, h4), .site-footer :is(h2, h3) { font-weight: 700 !important; letter-spacing: -0.015em; } main :is(h1, h2, h3) :is(em, strong, span:not(.lh-kelime, .lh-kelime > span, [aria-hidden])) { font-weight: inherit !important; } main h2 { font-size: clamp(28px, 2.7vw, 40px) !important; line-height: 1.12 !important; } main h3, main :is([class*='card'], article, li, .class-row, .info-block) h2, main :is(span, small):first-child:not([class]) + h2 { font-size: clamp(19px, 1.45vw, 22px) !important; line-height: 1.25 !important; letter-spacing: -0.01em; } main .sport-copy h3 { font-size: clamp(28px, 2.7vw, 40px) !important; line-height: 1.12 !important; } main h4 { font-size: 17px !important; line-height: 1.3 !important; } /* Köşeler düz: tasarım köşesiz; içeri alımda tüm border-radius 0 (duzelt.mjs). */ :root { --theme-radius: 0; } .motion-v5-hero .motion-copy h1 { font-size: clamp(40px, 4.3vw, 62px) !important; } :is( .page-intro, .ed-intro, .ed-blog-intro, .immersive-intro, .detail-hero-copy, .sp-hero, .sp-hero-content, .wellbeing-hero, .engagement-career-hero, .engagement-community-hero, .engagement-workshop-hero, .cl-directory-hero, .cl-detail-hero, .ma6-hero, .support11-hero, .faq-hub-hero, .co-shop-hero ) { padding-top: clamp(28px, 3.4vw, 52px) !important; padding-bottom: clamp(32px, 3.8vw, 56px) !important; min-height: 0 !important; } /* Form alanları: tek, düzgün odak halkası (tarayıcının 5px uzaktaki çerçevesi ile * kutunun kendi çerçevesi üst üste biniyordu). */ input:not([type='checkbox'], [type='radio'], [type='range']), select, textarea { transition: border-color 0.2s, box-shadow 0.25s var(--lh-egri); } input:not([type='checkbox'], [type='radio'], [type='range']):focus, select:focus, textarea:focus { outline: none !important; border-color: var(--violet) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent) !important; } :is(.calc-input-wrap, .co-input-wrap, .body-lab-number-wrap, .calc-search, .faq-hub-search) :is(input, select):focus { box-shadow: none !important; border-color: transparent !important; } :is(.calc-input-wrap, .co-input-wrap, .body-lab-number-wrap):focus-within { outline: none !important; border-color: var(--violet) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 22%, transparent) !important; } :is(.calc-search, .faq-hub-search):focus-within { border-color: var(--violet) !important; box-shadow: 0 1px 0 var(--violet) !important; } :is(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; } /* Blog: etiket sayfasının başlığı, açıklaması ve filtreleri arasında boşluk. */ .ed-tag-intro { margin-bottom: 30px; } .ed-tag-intro h1 { margin: 14px 0 12px; } .ed-tag-intro p { color: #6e5c7b; } /* Yazı sonu: çizgi zeminle uyumlu, "sonraki" kartları blog listesi gibi. */ .ed-article-next { border-top-color: #e4dce9; } .ed-related-grid { gap: 45px 27px; } /* Fiyat tablosu: başlık altındaki siyah çizgi zeminle uyumlu, ince. */ .price-table th { border-bottom-color: var(--line) !important; } /* Detay sayfası başı: "Bilgi al" düğmenin yanında (dar sütunda alta düşüyordu). */ .detail-hero-copy .actions { flex-wrap: nowrap; gap: 24px; } /* Kariyer/topluluk/workshop bölümleri: tasarımda 1560 px kutuydu (geniş ekranda * zemin kenarlardan kopuyordu). Zeminli bölümler tam genişlik, içerik çerçevede; * zeminsiz bölümler çerçevenin kendisi — ayırıcı çizgiler içerikle aynı genişlikte. */ .engagement-shell { max-width: none !important; padding-inline: var(--lila-yan) !important; } .engagement-shell:is( .engagement-values, .engagement-openings, .engagement-community-statement, .engagement-community-news, .engagement-community-links, .engagement-workshop-program ) { margin-inline: var(--lila-yan) !important; padding-inline: 0 !important; } /* Açık pozisyon: ayrıntı satırının kendi çizgisi, kartın çizgisiyle çift oluyordu. */ .engagement-role-details { border: 0 !important; } /* Başvuru formu: telefon (ülke kodu seçicili) kendi satırında. */ .engagement-form-grid { grid-template-columns: 1fr !important; gap: 0 !important; } .engagement-form > .engagement-field-hint:first-child { margin-bottom: 22px; } /* Ülke kodu seçicinin oku (⌄ karakteri) satırın altına kayıyordu. */ .lp-phone-country summary::after { content: '' !important; flex: none; margin-left: 4px; width: 16px; height: 16px; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 13.17 16.95 8.2l1.41 1.42L12 15.98 5.64 9.62 7.05 8.2z'/%3E%3C/svg%3E") center / contain no-repeat; transition: rotate 0.3s var(--lh-egri); } .lp-phone-country[open] summary::after { rotate: 180deg; } /* Seçici daralıp ok "+90"a yapışıyordu: içeriği kadar yer, ok için nefes. */ .lp-phone-country { flex: none !important; } .lp-phone-country summary { /* Kutunun genişliği okun yerini saymıyordu (95px'te kalıyordu): yer açıkça verilir. */ min-width: 114px !important; gap: 8px !important; padding-inline: 14px 12px !important; } @media (max-width: 440px) { .lp-phone-country summary { min-width: 104px !important; padding-inline: 10px 8px !important; } } .lp-phone-country summary::after { margin-left: 2px; } /* Açılır listeler: lila-hareket.js her