/* ============================================================================ GÜÇLÜ KAL — EKLENTİ ÖN YÜZ BİLEŞEN KATMANI guclukal.com · Carmed İlaç ---------------------------------------------------------------------------- Kaynak : Kurumsal Kimlik Kılavuzu v1.0 (26 Temmuz 2026) kurumsal-kimlik/index.html + css/ana-sayfa.css + css/dokuman.css Bağımlılık : guclukal-tokens.css (child temada, 'guclukal-tokens' tanıtıcısı) ---------------------------------------------------------------------------- NE İŞE YARAR Kılavuzun sunum katmanı (.btn, .fld, .note, .tag, .panel) ana sayfa tasarımına özeldir ve genel adlar taşır. Bir eklenti WooCommerce + WoodMart sayfasının içine enjekte olduğu için o adlar çakışır. Bu dosya aynı spesifikasyonu `gk-` önekiyle, `.gk-scope` kapsamında yeniden kurar. İKİ EKLENTİDE DE AYNIDIR. 'guclukal-components' tek tanıtıcısıyla kuyruğa alınır; hangisi önce yüklerse o geçerli olur. Değiştirirken İKİSİNİ birden güncelleyin. ÜÇ SERT KURAL (kılavuz, README.md:144-152) 1. Soft corners since kit v1.1 — see section 10 at the end of this file (pill buttons/fields, 20px cards, 12px notices, soft shadows). The pharmacy "E" mark stays square (regulation). 2. Kargo ve teslimat vaadi hiçbir metinde geçmez. 3. Takviye edici gıda uyarısı gizlenmez, akordiyona kapatılmaz. ============================================================================ */ /* --------------------------------------------------------------------------- 0 · KAPSAYICI — eklenti ön yüzünün giriş noktası --------------------------------------------------------------------------- */ .gk-scope, .gk-scope *, .gk-scope *::before, .gk-scope *::after { box-sizing: border-box; } .gk-scope { font-family: var(--gk-font-sans); font-size: var(--gk-fs-md); line-height: var(--gk-lh-relaxed); letter-spacing: var(--gk-ls-normal); color: var(--gk-color-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Odak halkası — klavye kullanıcıları için zorunlu, ASLA kaldırılmaz. (kılavuz bölüm 9) */ .gk-scope :focus-visible { outline: var(--gk-border-thick) solid var(--gk-color-focus); outline-offset: 2px; /* No radius here: the ring follows the element's own corners. */ } /* Yarıçap sıfır — tema/WooCommerce mirasını kapsam içinde sıfırla. Daire istisnaları aşağıda tek tek geri verilir. */ .gk-scope input, .gk-scope select, .gk-scope textarea, .gk-scope button, .gk-scope .gk-btn, .gk-scope table, .gk-scope th, .gk-scope td, .gk-scope img { border-radius: 0; } /* --------------------------------------------------------------------------- 1 · TİPOGRAFİ Kılavuz bölüm 7. VERSAL yalnızca üst-etiket, rozet ve butonda; başlık ve menüde Türkçe okunurluğunu düşürdüğü için kullanılmaz. METİN ORTALANMAZ — sola hizalıdır. --------------------------------------------------------------------------- */ .gk-scope h1, .gk-scope h2, .gk-scope h3, .gk-scope h4, .gk-scope h5, .gk-scope h6 { font-family: var(--gk-font-sans); font-weight: var(--gk-fw-semibold); color: var(--gk-color-text-strong); text-transform: none; margin: 0 0 var(--gk-space-4); text-align: left; } .gk-scope h1 { font-size: var(--gk-fs-6xl); line-height: var(--gk-lh-tight); letter-spacing: var(--gk-ls-tighter); } .gk-scope h2 { font-size: var(--gk-fs-4xl); line-height: var(--gk-lh-snug); letter-spacing: var(--gk-ls-tight); } .gk-scope h3 { font-size: var(--gk-fs-3xl); line-height: var(--gk-lh-snug); letter-spacing: var(--gk-ls-tight); } .gk-scope h4 { font-size: var(--gk-fs-2xl); line-height: var(--gk-lh-snug); letter-spacing: var(--gk-ls-tight); } .gk-scope h5 { font-size: var(--gk-fs-xl); line-height: var(--gk-lh-normal); letter-spacing: var(--gk-ls-normal); } .gk-scope h6 { font-size: var(--gk-fs-lg); line-height: var(--gk-lh-normal); letter-spacing: var(--gk-ls-normal); } .gk-scope p { margin: 0 0 var(--gk-space-4); max-width: var(--gk-measure); } .gk-scope p:last-child { margin-bottom: 0; } .gk-scope a { color: var(--gk-color-text-link); text-decoration: none; transition: var(--gk-transition); } .gk-scope a:hover { color: var(--gk-color-text-link-hover); text-decoration: underline; } .gk-scope strong, .gk-scope b { font-weight: var(--gk-fw-semibold); } /* Üst-etiket (eyebrow) — uygulanmış örnekteki mono sürüm (ana-sayfa.css:46-52) */ .gk-eyebrow { display: block; font-family: var(--gk-font-mono); font-size: var(--gk-fs-2xs); font-weight: var(--gk-fw-medium); line-height: 1; letter-spacing: var(--gk-ls-wider); text-transform: uppercase; color: var(--gk-red-600); } .gk-eyebrow--mut { color: var(--gk-color-text-subtle); } .gk-eyebrow--inv { color: rgba(255, 255, 255, .62); } /* Panel/blok başlığı — 8×8 kırmızı kare + hairline (dokuman.css:179-185) */ .gk-sub { display: flex; align-items: center; gap: var(--gk-space-3); font-size: var(--gk-fs-xl); font-weight: var(--gk-fw-semibold); line-height: var(--gk-lh-snug); letter-spacing: var(--gk-ls-tight); color: var(--gk-color-text-strong); padding-bottom: var(--gk-space-3); border-bottom: var(--gk-border-hairline) solid var(--gk-color-border); margin: 0 0 var(--gk-space-5); } .gk-sub::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--gk-red-500); } /* Dipnot / mikro metin */ .gk-muted { color: var(--gk-color-text-muted); font-size: var(--gk-fs-xs); line-height: var(--gk-lh-loose); } /* Sayısal hizalama — fiyat ve tablo sütunları */ .gk-num, .gk-price { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: var(--gk-num-tabular); } /* Marka çizgisi */ .gk-rule { height: var(--gk-rule-brand); background: var(--gk-red-500); border: 0; margin: 0; } /* Ekran okuyucu metni */ .gk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------------- 2 · YERLEŞİM — kap, bölüm, bölüm başlığı, ızgara --------------------------------------------------------------------------- */ .gk-wrap { width: 100%; max-width: var(--gk-container); margin-inline: auto; } .gk-wrap--narrow { max-width: var(--gk-container-narrow); } .gk-sec { padding-block: var(--gk-section-y); } .gk-sec--tint { background: var(--gk-gray-50); border-block: var(--gk-border-hairline) solid var(--gk-color-border); } .gk-sec--flush { padding-block: 0; } /* Bölüm başlığı (ana-sayfa.css:60-74) */ .gk-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gk-space-6); padding-bottom: var(--gk-space-5); border-bottom: var(--gk-border-hairline) solid var(--gk-color-border); margin-bottom: var(--gk-space-8); } .gk-shead h2 { font-size: var(--gk-fs-4xl); line-height: 1.1; margin: 0; } .gk-shead .gk-eyebrow { margin-bottom: var(--gk-space-3); } .gk-shead__link { flex: none; font-size: var(--gk-fs-xs); font-weight: var(--gk-fw-semibold); line-height: 1; letter-spacing: var(--gk-ls-wide); text-transform: uppercase; color: var(--gk-red-700); border-bottom: var(--gk-border-thick) solid transparent; padding-bottom: 2px; } .gk-shead__link:hover { border-bottom-color: var(--gk-red-500); text-decoration: none; } @media (max-width: 640px) { .gk-shead { flex-direction: column; align-items: flex-start; } } /* Izgara — kartlar arasında boşluk değil 1px ayraç (kılavuz bölüm 6) */ .gk-grid { display: grid; gap: var(--gk-grid-gap); } .gk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Hairline ızgara: kartlar bitişik durur, ayrımı 1px çizgi yapar */ .gk-grid--hair { gap: var(--gk-products-gap); background: var(--gk-color-border); border: var(--gk-border-hairline) solid var(--gk-color-border); } .gk-grid--hair > * { background: var(--gk-color-surface); } @media (max-width: 1100px) { .gk-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .gk-grid--4, .gk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .gk-grid--4, .gk-grid--3, .gk-grid--2 { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- 3 · BUTONLAR Kılavuz bölüm 1. Taban 48px — WCAG 2.2 AA'nın 44px dokunmatik eşiğini aşar. Bir ekranda TEK birincil buton bulunur; iki kırmızı buton yan yana konmaz. --------------------------------------------------------------------------- */ .gk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--gk-space-2); height: var(--gk-btn-h); padding-inline: var(--gk-btn-px); border: var(--gk-border) solid transparent; border-radius: var(--gk-radius); background: none; font-family: var(--gk-font-sans); font-size: var(--gk-btn-fs); font-weight: var(--gk-btn-fw); line-height: 1; letter-spacing: var(--gk-btn-ls); text-transform: var(--gk-btn-transform); text-decoration: none; white-space: nowrap; cursor: pointer; transition: var(--gk-transition); -webkit-appearance: none; appearance: none; } .gk-btn:hover { text-decoration: none; } .gk-btn svg { width: 17px; height: 17px; flex: none; } .gk-btn img { width: 20px; height: 20px; flex: none; display: block; } .gk-btn[disabled], .gk-btn.is-disabled, .gk-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; pointer-events: none; } /* Boyutlar */ .gk-btn--sm { height: var(--gk-btn-h-sm); padding-inline: var(--gk-btn-px-sm); font-size: var(--gk-btn-fs-sm); } .gk-btn--lg { height: var(--gk-btn-h-lg); padding-inline: var(--gk-btn-px-lg); font-size: var(--gk-btn-fs-lg); } .gk-btn--block { width: 100%; } /* Birincil — eylem kırmızısı #D52433, beyaz metinle 5,09:1 (WCAG AA). Marka kırmızısı #ED323E küçük metinde KULLANILMAZ (yalnız ≥19px/700). */ .gk-btn--p { background: var(--gk-color-action); border-color: var(--gk-color-action); color: var(--gk-color-action-text); } .gk-btn--p:hover { background: var(--gk-color-action-hover); border-color: var(--gk-color-action-hover); color: var(--gk-color-action-text); } .gk-btn--p:active { background: var(--gk-color-action-active); border-color: var(--gk-color-action-active); } /* Vitrin / büyük CTA — marka kırmızısı yalnızca bu ölçüde serbest */ .gk-btn--brand { background: var(--gk-red-500); border-color: var(--gk-red-500); color: var(--gk-white); height: var(--gk-btn-h-lg); padding-inline: var(--gk-btn-px-lg); font-size: 19px; font-weight: var(--gk-fw-bold); letter-spacing: -.02em; text-transform: none; } .gk-btn--brand:hover { background: var(--gk-red-600); border-color: var(--gk-red-600); color: var(--gk-white); } /* İkincil — grafit outline, hover'da dolu grafite döner */ .gk-btn--s { background: transparent; border-color: var(--gk-color-border-contrast); color: var(--gk-color-text-strong); } .gk-btn--s:hover { background: var(--gk-color-action-2); border-color: var(--gk-color-action-2); color: var(--gk-color-action-2-text); } .gk-btn--s:active { background: var(--gk-color-action-2-active); border-color: var(--gk-color-action-2-active); } /* Hayalet / metin butonu — üçüncül eylem */ .gk-btn--g { background: transparent; border-color: transparent; padding-inline: var(--gk-space-2); color: var(--gk-color-text-link); } .gk-btn--g:hover { color: var(--gk-color-text-link-hover); text-decoration: underline; } /* Koyu zemin üstü ters */ .gk-btn--inv { background: transparent; border-color: rgba(255, 255, 255, .45); color: var(--gk-white); } .gk-btn--inv:hover { background: var(--gk-white); border-color: var(--gk-white); color: var(--gk-gray-900); } /* Eczacı — beyaz gövde + kırmızı çerçeve. Türkiye eczane levhası dili. `.gk-b2b` petrol kapsamında bile KIRMIZI kalır: petrol kanalı söyler, kırmızı E sektörü söyler (kılavuz bölüm 11). */ .gk-btn--pharm, .gk-b2b .gk-btn--pharm { background: var(--gk-white); border-width: var(--gk-border-thick); border-color: var(--gk-red-500); color: var(--gk-red-700); box-shadow: 3px 3px 0 0 rgba(11, 10, 9, .22); } .gk-btn--pharm:hover, .gk-b2b .gk-btn--pharm:hover { background: var(--gk-red-50); border-color: var(--gk-red-600); color: var(--gk-red-800); box-shadow: 0 0 0 0; transform: translate(3px, 3px); } /* B2B petrol butonu — yalnızca .gk-b2b kapsamında kullanılır */ .gk-btn--b2b { background: var(--gk-petrol-500); border-color: var(--gk-petrol-500); color: var(--gk-white); } .gk-btn--b2b:hover { background: var(--gk-petrol-600); border-color: var(--gk-petrol-600); color: var(--gk-white); } /* Sert gölge — marka imzası. Hover'da öğe gölgenin üzerine kayar. */ .gk-btn--hard { box-shadow: var(--gk-shadow-hard-sm); } .gk-btn--hard:hover { box-shadow: 0 0 0 0; transform: translate(3px, 3px); } /* Buton grubu */ .gk-btns { display: flex; flex-wrap: wrap; gap: var(--gk-space-3); align-items: center; } /* --------------------------------------------------------------------------- 4 · FORM Kılavuz bölüm 2. Etiket alanın ÜSTÜNDE durur; placeholder etiket yerine geçmez. Zorunlu alan YILDIZLA işaretlenmez — isteğe bağlı olanın etiketine "(isteğe bağlı)" yazılır. Hata hem kenarlıkla HEM metinle bildirilir. --------------------------------------------------------------------------- */ .gk-form { display: grid; gap: var(--gk-space-5); } .gk-fld { display: grid; gap: var(--gk-space-2); align-content: start; } .gk-fld > label, .gk-label { font-size: var(--gk-fs-xs); font-weight: var(--gk-fw-medium); line-height: var(--gk-lh-normal); color: var(--gk-color-text-strong); } .gk-label__opt { font-weight: var(--gk-fw-regular); color: var(--gk-color-text-subtle); } .gk-fld input[type="text"], .gk-fld input[type="email"], .gk-fld input[type="tel"], .gk-fld input[type="url"], .gk-fld input[type="number"], .gk-fld input[type="password"], .gk-fld input[type="search"], .gk-fld input[type="date"], .gk-fld select, .gk-fld textarea { width: 100%; height: var(--gk-input-h); padding: 0 var(--gk-input-px); border: var(--gk-border) solid var(--gk-input-border); border-radius: var(--gk-radius); background: var(--gk-input-bg); color: var(--gk-color-text); font-family: var(--gk-font-sans); /* 16px ZORUNLU — iOS'ta otomatik yakınlaştırmayı engeller */ font-size: var(--gk-input-fs); font-weight: var(--gk-fw-regular); line-height: var(--gk-lh-normal); transition: var(--gk-transition); -webkit-appearance: none; appearance: none; box-shadow: none; } .gk-fld textarea { height: auto; min-height: 120px; padding: var(--gk-space-3) var(--gk-input-px); resize: vertical; } /* Select — kendi okunu çizer (yarıçap yine 0) */ .gk-fld select { padding-right: calc(var(--gk-input-px) * 2 + 10px); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23404041' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--gk-input-px) center; background-size: 12px 8px; } .gk-fld input::placeholder, .gk-fld textarea::placeholder { color: var(--gk-color-text-subtle); opacity: 1; } .gk-fld input:focus, .gk-fld select:focus, .gk-fld textarea:focus { outline: var(--gk-border-thick) solid var(--gk-color-focus); outline-offset: 1px; border-color: var(--gk-color-focus); } .gk-fld input:disabled, .gk-fld select:disabled, .gk-fld textarea:disabled { background: var(--gk-color-surface-sunken); color: var(--gk-color-text-subtle); cursor: not-allowed; } .gk-fld--sm input, .gk-fld--sm select { height: var(--gk-input-h-sm); } /* Yardım metni ve hata */ .gk-hint { font-size: var(--gk-fs-2xs); line-height: var(--gk-lh-normal); color: var(--gk-color-text-subtle); } .gk-err { font-size: var(--gk-fs-2xs); line-height: var(--gk-lh-normal); font-weight: var(--gk-fw-medium); color: var(--gk-color-danger-text); } .gk-fld input[aria-invalid="true"], .gk-fld select[aria-invalid="true"], .gk-fld textarea[aria-invalid="true"], .gk-fld.is-invalid input, .gk-fld.is-invalid select, .gk-fld.is-invalid textarea { border-color: var(--gk-danger-500); } /* Checkbox — KESKİN. Yarıçap istisnası listesinde checkbox yok. */ .gk-check, .gk-radio { display: flex; align-items: flex-start; gap: var(--gk-space-3); /* dokunmatik hedef en az 44px */ min-height: 44px; padding-block: var(--gk-space-3); font-size: var(--gk-fs-sm); line-height: var(--gk-lh-normal); color: var(--gk-color-text); cursor: pointer; } .gk-check input[type="checkbox"], .gk-radio input[type="radio"] { flex: none; width: var(--gk-icon-md); height: var(--gk-icon-md); margin: 1px 0 0; border: var(--gk-border) solid var(--gk-color-border-strong); background: var(--gk-color-surface); cursor: pointer; transition: var(--gk-transition); -webkit-appearance: none; appearance: none; } .gk-check input[type="checkbox"] { border-radius: var(--gk-radius); } /* Radyo — yarıçapın TEK istisnalarından biri */ .gk-radio input[type="radio"] { border-radius: var(--gk-radius-full); border-width: var(--gk-border-thick); border-color: var(--gk-color-border-contrast); } .gk-check input[type="checkbox"]:hover, .gk-radio input[type="radio"]:hover { border-color: var(--gk-color-border-contrast); } .gk-check input[type="checkbox"]:checked { background: var(--gk-color-action); border-color: var(--gk-color-action); /* düz uçlu 1,5px beyaz tik */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4 5.6 10.4 11.5 3.9' fill='none' stroke='%23fff' stroke-width='1.75'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .gk-radio input[type="radio"]:checked { border-color: var(--gk-color-action); background-image: radial-gradient(circle at center, var(--gk-color-action) 0 4px, transparent 4px); } .gk-check input:disabled, .gk-radio input:disabled { opacity: .42; cursor: not-allowed; } .gk-check input:disabled ~ *, .gk-radio input:disabled ~ * { opacity: .42; } .gk-check a { text-decoration: underline; } /* Onay kutusunun hata durumu. .gk-check kuralları yukarıda geldiği için burada AYRICA yazılmak zorunda: aynı özgüllükte sonra gelen kural kazanır. Hata hem kenarlıkla HEM metinle bildirilir — yalnız renkle bildirilen hata erişilebilir değildir. */ .gk-fld.is-invalid .gk-check input[type="checkbox"], .gk-fld.is-invalid .gk-radio input[type="radio"], .gk-check input[type="checkbox"][aria-invalid="true"], .gk-radio input[type="radio"][aria-invalid="true"] { border-color: var(--gk-danger-500); border-width: var(--gk-border-thick); } /* Rıza / onay bloğu — form ile eylem çubuğu arasında kendi nefes alanı olur */ .gk-consent { padding-top: var(--gk-space-2); border-top: var(--gk-border-hairline) solid var(--gk-color-border); } .gk-consent .gk-check { align-items: flex-start; } /* Dosya yükleme — ham girdi gizlenir, görünür tetikleyici ikincil butondur */ .gk-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gk-space-3); } .gk-file input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gk-file input[type="file"]:focus-visible + .gk-btn { outline: var(--gk-border-thick) solid var(--gk-color-focus); outline-offset: 2px; } .gk-file__name { font-size: var(--gk-fs-2xs); color: var(--gk-color-text-subtle); } /* Sürükle-bırak alanı — yer tutucu diliyle aynı */ .gk-drop { display: grid; place-items: center; gap: var(--gk-space-2); padding: var(--gk-space-6); border: var(--gk-border) dashed var(--gk-gray-300); background: var(--gk-gray-100); text-align: center; color: var(--gk-color-text-muted); font-size: var(--gk-fs-sm); } .gk-drop.is-over { border-color: var(--gk-color-action); background: var(--gk-color-action-soft); } /* Satır düzeni — yan yana alanlar */ .gk-row { display: grid; gap: var(--gk-space-5); } .gk-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gk-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 720px) { .gk-row--2, .gk-row--3 { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------------- 5 · BİLDİRİM KUTULARI Kılavuz bölüm 3. Sol kenarda 3px renkli çizgi; üst/sağ/alt kenarlık yok. Hata rengi CTA kırmızısından KASITLI olarak ayrıdır (#A81622 ≠ #D52433) — alıcı hatayı buton sanmasın diye. --------------------------------------------------------------------------- */ .gk-note { border: 0; border-left: var(--gk-border-heavy) solid var(--gk-color-border-strong); border-radius: 0; background: var(--gk-color-surface-sunken); padding: var(--gk-space-4) var(--gk-space-5); font-size: var(--gk-fs-sm); line-height: 1.6; color: var(--gk-color-text); margin: 0 0 var(--gk-space-5); } .gk-note:last-child { margin-bottom: 0; } .gk-note strong { font-weight: var(--gk-fw-semibold); } .gk-note p { max-width: none; } .gk-note--ok { border-left-color: var(--gk-green-500); background: var(--gk-color-success-soft); color: var(--gk-color-success-text); } .gk-note--stop { border-left-color: var(--gk-danger-500); background: var(--gk-color-danger-soft); color: var(--gk-color-danger-text); } .gk-note--warn { border-left-color: var(--gk-amber-500); background: var(--gk-color-warning-soft); color: var(--gk-color-warning-text); } .gk-note--info { border-left-color: var(--gk-color-info); background: var(--gk-color-info-soft); color: var(--gk-color-info-text); } .gk-note--brand { border-left-color: var(--gk-red-500); } /* İkonlu kutu — hata yalnız renkle bildirilmez */ .gk-note--icon { display: flex; align-items: flex-start; gap: var(--gk-space-3); } .gk-note--icon svg { flex: none; width: var(--gk-icon-md); height: var(--gk-icon-md); margin-top: 2px; } /* Zorunlu mevzuat uyarısı — kırmızı KULLANILMAZ, uyarı alarm değil bilgilendirmedir. Gizlenmez, akordiyona kapatılmaz. */ .gk-compliance { border: 0; border-left: var(--gk-border-heavy) solid var(--gk-color-border-strong); background: var(--gk-color-surface-sunken); color: var(--gk-color-text-muted); padding: var(--gk-space-4); font-size: var(--gk-fs-xs); line-height: var(--gk-lh-loose); max-width: none; } .gk-compliance strong { color: var(--gk-color-text-strong); } /* --------------------------------------------------------------------------- 6 · ROZETLER Kılavuz bölüm 4. Bir kartta en fazla İKİ rozet. Kargo/teslimat rozeti YASAK. NOT: kılavuz "marka kırmızısı dolgu + beyaz metin ≥14px/700" der ama rozet ölçüsü 11px'tir; bu yüzden dolgu eylem kırmızısıdır (--gk-red-600, 5,09:1). --------------------------------------------------------------------------- */ .gk-tag { display: inline-flex; align-items: center; gap: 5px; height: var(--gk-badge-h); padding-inline: var(--gk-badge-px); border-radius: var(--gk-radius-pill); font-family: var(--gk-font-sans); font-size: var(--gk-badge-fs); font-weight: var(--gk-badge-fw); line-height: 1; letter-spacing: var(--gk-badge-ls); text-transform: uppercase; white-space: nowrap; } .gk-tag--sale { background: var(--gk-red-600); color: var(--gk-white); } .gk-tag--new { background: var(--gk-color-badge-new); color: var(--gk-white); } .gk-tag--best { background: var(--gk-color-badge-bestseller); color: var(--gk-gray-900); } .gk-tag--nat { background: var(--gk-color-badge-natural); color: var(--gk-white); } .gk-tag--oos { background: var(--gk-color-badge-oos); color: var(--gk-gray-900); } .gk-tag--ok { background: var(--gk-color-success-soft); color: var(--gk-color-success-text); box-shadow: inset 0 0 0 1px var(--gk-green-200); } .gk-tag--wait { background: var(--gk-color-warning-soft); color: var(--gk-color-warning-text); box-shadow: inset 0 0 0 1px var(--gk-amber-200); } .gk-tag--stop { background: var(--gk-color-danger-soft); color: var(--gk-color-danger-text); box-shadow: inset 0 0 0 1px var(--gk-red-200); } .gk-tag--info { background: var(--gk-color-info-soft); color: var(--gk-color-info-text); box-shadow: inset 0 0 0 1px var(--gk-petrol-200); } .gk-tag--n { background: var(--gk-color-surface-sunken); color: var(--gk-color-text-muted); box-shadow: inset 0 0 0 1px var(--gk-color-border); } /* Eczane rozeti — beyaz gövde, kırmızı çerçeve, 13px plaka. Çerçeve inset gölgeyle verilir ki 22px yükseklik bozulmasın. */ .gk-tag--pharm { background: var(--gk-white); color: var(--gk-red-700); box-shadow: inset 0 0 0 1px var(--gk-red-500); padding-inline: 6px; } .gk-tag--pharm img { width: 13px; height: 13px; object-fit: fill; } /* --------------------------------------------------------------------------- 7 · PANELLER / KARTLAR Kılavuz bölüm 5. "Keskin bir sistemde ayrımı gölge değil ÇİZGİ yapar." Kart hover'ında scale büyütme KULLANILMAZ — kenarlık koyulaşır, sert gölge belirir. Yumuşak gölge yalnızca üst katmanda (modal, açılır menü). --------------------------------------------------------------------------- */ .gk-panel { background: var(--gk-color-surface); border: var(--gk-border-hairline) solid var(--gk-color-border); border-radius: 0; padding: var(--gk-space-6); } .gk-panel--flush { padding: 0; overflow: hidden; } .gk-panel--sunken { background: var(--gk-color-surface-sunken); } .gk-panel--dark { background: var(--gk-gray-950); border-color: var(--gk-gray-900); color: var(--gk-gray-200); } .gk-panel--dark h1, .gk-panel--dark h2, .gk-panel--dark h3, .gk-panel--dark h4, .gk-panel--dark h5, .gk-panel--dark h6 { color: var(--gk-gray-0); } /* Üst kenar aksanı — B2C kırmızı, B2B petrol */ .gk-panel--accent { border-top: var(--gk-border-heavy) solid var(--gk-red-500); } .gk-b2b .gk-panel--accent { border-top-color: var(--gk-petrol-500); } /* Tıklanabilir kart */ .gk-panel--link { transition: var(--gk-transition); } .gk-panel--link:hover { border-color: var(--gk-color-border-contrast); box-shadow: var(--gk-shadow-hard-sm); } /* İstatistik kutusu */ .gk-stat { display: grid; gap: var(--gk-space-2); align-content: start; } .gk-stat__label { font-family: var(--gk-font-mono); font-size: var(--gk-fs-3xs); font-weight: var(--gk-fw-medium); letter-spacing: var(--gk-ls-wider); text-transform: uppercase; color: var(--gk-color-text-subtle); line-height: 1.4; } .gk-stat__value { font-size: var(--gk-fs-3xl); font-weight: var(--gk-fw-semibold); line-height: var(--gk-lh-none); letter-spacing: var(--gk-ls-tight); color: var(--gk-color-text-strong); font-variant-numeric: tabular-nums lining-nums; } .gk-stat__meta { font-size: var(--gk-fs-2xs); color: var(--gk-color-text-muted); } /* Boş durum */ .gk-empty { display: grid; gap: var(--gk-space-3); justify-items: start; padding: var(--gk-space-10) var(--gk-space-6); border: var(--gk-border) dashed var(--gk-color-border-strong); background: var(--gk-color-surface-sunken); color: var(--gk-color-text-muted); font-size: var(--gk-fs-sm); } .gk-empty strong { display: block; color: var(--gk-color-text-strong); font-size: var(--gk-fs-md); } /* --------------------------------------------------------------------------- 8 · TABLO Kılavuz bölüm 6. ZEBRA DESENİ KULLANILMAZ — ayrımı 1px hairline yapar. Sayısal sütunlar tabular-nums ile hizalanır. --------------------------------------------------------------------------- */ .gk-tablewrap { overflow-x: auto; border: var(--gk-border-hairline) solid var(--gk-color-border); background: var(--gk-color-surface); -webkit-overflow-scrolling: touch; } .gk-table { width: 100%; border-collapse: collapse; font-size: var(--gk-fs-sm); margin: 0; } .gk-table th, .gk-table td { text-align: left; padding: 11px var(--gk-space-4); border-bottom: var(--gk-border-hairline) solid var(--gk-color-border); vertical-align: top; border-radius: 0; } .gk-table thead th { font-family: var(--gk-font-mono); font-size: var(--gk-fs-3xs); font-weight: var(--gk-fw-medium); line-height: 1.4; letter-spacing: var(--gk-ls-wider); text-transform: uppercase; color: var(--gk-color-text-subtle); background: var(--gk-color-surface-sunken); white-space: nowrap; } .gk-table tbody tr:last-child td { border-bottom: 0; } .gk-table tbody tr:hover { background: var(--gk-color-surface-sunken); } .gk-table .num, .gk-table td[data-num] { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; } .gk-table code, .gk-table .mono { font-family: var(--gk-font-mono); font-size: .92em; } /* Sıralanabilir başlık */ .gk-table th[data-sort] { cursor: pointer; user-select: none; } .gk-table th[data-sort]:hover { color: var(--gk-color-text-strong); } .gk-table th[aria-sort="ascending"], .gk-table th[aria-sort="descending"] { color: var(--gk-red-700); box-shadow: inset 0 -2px 0 0 var(--gk-red-500); } /* Sayfalayıcı */ .gk-pager { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gk-space-2); margin-top: var(--gk-space-4); } .gk-pager button, .gk-pager .gk-pager__btn { min-width: 36px; height: 36px; padding-inline: var(--gk-space-3); border: var(--gk-border) solid var(--gk-color-border); background: var(--gk-color-surface); color: var(--gk-color-text); font-family: var(--gk-font-sans); font-size: var(--gk-fs-xs); font-weight: var(--gk-fw-medium); cursor: pointer; transition: var(--gk-transition); } .gk-pager button:hover { border-color: var(--gk-color-border-contrast); } .gk-pager button[aria-current="page"], .gk-pager .is-active { background: var(--gk-color-action-2); border-color: var(--gk-color-action-2); color: var(--gk-color-action-2-text); } .gk-pager button[disabled] { opacity: .42; cursor: not-allowed; } .gk-pager__info { font-size: var(--gk-fs-2xs); color: var(--gk-color-text-subtle); margin-left: auto; } /* --------------------------------------------------------------------------- 9 · SEKME, AKORDİYON, LİSTE --------------------------------------------------------------------------- */ .gk-tabs { display: flex; gap: 1px; background: var(--gk-color-border); border: var(--gk-border-hairline) solid var(--gk-color-border); overflow-x: auto; margin-bottom: var(--gk-space-6); } .gk-tabs button { flex: 1; position: relative; background: var(--gk-color-surface); border: 0; padding: 14px var(--gk-space-6); font-family: var(--gk-font-sans); font-size: var(--gk-fs-xs); font-weight: var(--gk-fw-semibold); line-height: 1; letter-spacing: var(--gk-ls-wide); text-transform: uppercase; color: var(--gk-color-text-muted); white-space: nowrap; cursor: pointer; transition: var(--gk-transition); } .gk-tabs button::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: transparent; } .gk-tabs button:hover { color: var(--gk-color-text-strong); } .gk-tabs button[aria-selected="true"] { color: var(--gk-color-text-strong); background: var(--gk-gray-50); } .gk-tabs button[aria-selected="true"]::after { background: var(--gk-red-500); } .gk-tabpanel[hidden] { display: none; } /* Akordiyon — native details/summary. UYARI: zorunlu mevzuat uyarısı buraya KONMAZ. */ .gk-acc { border: var(--gk-border-hairline) solid var(--gk-color-border); background: var(--gk-color-surface); } .gk-acc details { border-bottom: var(--gk-border-hairline) solid var(--gk-color-border); } .gk-acc details:last-child { border-bottom: 0; } .gk-acc summary { padding: var(--gk-space-5); font-size: var(--gk-fs-md); font-weight: var(--gk-fw-medium); color: var(--gk-color-text-strong); cursor: pointer; list-style: none; position: relative; padding-right: var(--gk-space-12); } .gk-acc summary::-webkit-details-marker { display: none; } .gk-acc summary:hover { background: var(--gk-gray-50); color: var(--gk-red-700); } .gk-acc summary::after { content: ""; position: absolute; right: var(--gk-space-5); top: 50%; width: 14px; height: 14px; margin-top: -7px; background-image: linear-gradient(var(--gk-red-500), var(--gk-red-500)), linear-gradient(var(--gk-red-500), var(--gk-red-500)); background-size: 14px 2px, 2px 14px; background-position: center, center; background-repeat: no-repeat; transition: transform var(--gk-dur-fast) var(--gk-ease-out), background-size var(--gk-dur-fast) var(--gk-ease-out); } .gk-acc details[open] summary::after { background-size: 14px 2px, 0 14px; transform: rotate(180deg); } .gk-acc details > div { padding: 0 var(--gk-space-5) var(--gk-space-5); font-size: var(--gk-fs-sm); line-height: 1.7; color: var(--gk-color-text-muted); } /* Madde listesi — madde imi logonun kare modülünden türetildi */ .gk-list { list-style: none; margin: 0 0 var(--gk-space-4); padding: 0; } .gk-list li { position: relative; padding-left: 20px; margin-bottom: 9px; font-size: var(--gk-fs-sm); line-height: 1.55; max-width: var(--gk-measure); } .gk-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--gk-red-500); } .gk-list--ok li::before { background: var(--gk-green-500); } .gk-list--no li::before { background: var(--gk-danger-500); } .gk-list--mut li::before { background: var(--gk-gray-400); } /* Tanım listesi — etiket/değer çiftleri */ .gk-dl { display: grid; gap: 0; margin: 0; } .gk-dl__row { display: flex; flex-wrap: wrap; gap: var(--gk-space-4); justify-content: space-between; padding: var(--gk-space-3) 0; border-bottom: var(--gk-border-hairline) solid var(--gk-color-border); font-size: var(--gk-fs-sm); } .gk-dl__row:last-child { border-bottom: 0; } .gk-dl__key { color: var(--gk-color-text-muted); } .gk-dl__val { font-weight: var(--gk-fw-medium); color: var(--gk-color-text-strong); text-align: right; } /* --------------------------------------------------------------------------- 10 · B2B KAPSAM ANAHTARI Eczacı/bayi kanalı. Eylem rengi petrole döner; "Eczacı Başvurusu" düğmesi ve eczane rozeti bu kapsamda bile KIRMIZI kalır — petrol kanalı söyler, kırmızı E sektörü söyler (kılavuz bölüm 11, README.md:86-91). --------------------------------------------------------------------------- */ .gk-b2b { --gk-color-action: var(--gk-petrol-500); --gk-color-action-hover: var(--gk-petrol-600); --gk-color-action-active: var(--gk-petrol-700); --gk-color-action-soft: var(--gk-petrol-50); --gk-color-action-soft-text: var(--gk-petrol-600); --gk-color-text-link: var(--gk-petrol-600); --gk-color-text-link-hover: var(--gk-petrol-700); --gk-color-focus: var(--gk-petrol-500); } .gk-b2b .gk-eyebrow { color: var(--gk-petrol-600); } .gk-b2b .gk-sub::before { background: var(--gk-petrol-500); } .gk-b2b .gk-rule { background: var(--gk-petrol-500); } .gk-b2b .gk-list li::before { background: var(--gk-petrol-500); } .gk-b2b .gk-tabs button[aria-selected="true"]::after { background: var(--gk-petrol-500); } .gk-b2b .gk-acc summary:hover { color: var(--gk-petrol-600); } .gk-b2b .gk-acc summary::after { background-image: linear-gradient(var(--gk-petrol-500), var(--gk-petrol-500)), linear-gradient(var(--gk-petrol-500), var(--gk-petrol-500)); } .gk-b2b .gk-table th[aria-sort="ascending"], .gk-b2b .gk-table th[aria-sort="descending"] { color: var(--gk-petrol-600); box-shadow: inset 0 -2px 0 0 var(--gk-petrol-500); } /* --------------------------------------------------------------------------- 11 · YARDIMCILAR --------------------------------------------------------------------------- */ .gk-stack { display: grid; gap: var(--gk-space-6); } .gk-stack--sm { gap: var(--gk-space-4); } .gk-stack--lg { gap: var(--gk-space-10); } .gk-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gk-space-3); } .gk-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gk-space-4); } .gk-hide { display: none !important; } /* `hidden` özniteliği gerçekten gizlesin. Tarayıcının kendi `[hidden]` kuralı USER-AGENT katmanındadır; temanın `p`/`div`'e verdiği herhangi bir `display` bildirimi (yazar katmanı) onu yener ve öğe gizlenmeden kalır. */ .gk-scope [hidden] { display: none !important; } @media (max-width: 560px) { .gk-btn--responsive { width: 100%; } } /* =========================================================================== TEMA SAVUNMASI — WoodMart'ın genel