/* ============================================================ GenePeak — Ürün Dosyası (Açık Ürün Kaydı) PDP alt bilgi bölümü. Tasarım ailesi: GenePeak Standardı. İçerik sahibin Shopify'daki custom.* metafield'larıdır (dossier.js); yazılmamış bölüm hiç çizilmez, yer tutucu yoktur. Gerçek site başlığı 72px sticky z-40'tır; buradaki yapışkan öğeler onun ALTINA (z-30) yerleşir. ============================================================ */ #urun-dosyasi{--gpd-cobalt:#0a57c9;--gpd-ink:#0d1c32;--gpd-ink2:#001636;--gpd-muted:#526784; --gpd-line:#dbe3f7;--gpd-line2:#dbe4f2;} /* Sahibin paket beyanları: açılır bölümlerden önce her zaman görünür. */ #urun-dosyasi .gpd-package-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin:0 0 24px;} #urun-dosyasi .gpd-package-fact{min-width:0;margin:0;padding:18px 16px;border:1px solid var(--gpd-line);border-radius:12px;background:#f4f7fc;} #urun-dosyasi .gpd-package-fact dt{margin:0 0 8px;font:600 10px/1.35 'Inter';letter-spacing:.06em;color:var(--gpd-muted);text-transform:uppercase;} #urun-dosyasi .gpd-package-fact dd{margin:0;font:700 clamp(18px,2vw,25px)/1.3 'Space Grotesk';letter-spacing:-.025em;color:var(--gpd-cobalt);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;} @media(max-width:520px){#urun-dosyasi .gpd-package-facts{gap:8px;}#urun-dosyasi .gpd-package-fact{padding:15px 11px;}#urun-dosyasi .gpd-package-fact dt{font-size:9px;}} #urun-dosyasi .gpd-grid{display:grid;grid-template-columns:minmax(0,1fr);} @media(min-width:1024px){ #urun-dosyasi .gpd-grid{grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:64px;} } /* ---- sol omurga (masaüstü): 72px başlığın altına oturur ---- */ #urun-dosyasi .gpd-rail{display:none;} @media(min-width:1024px){ #urun-dosyasi .gpd-rail{display:block;position:sticky;top:calc(var(--gp-header-h, 96px) + 24px);align-self:start;} } #urun-dosyasi .gpd-kicker{display:inline-block;font:700 11px/1 'Inter';letter-spacing:.22em;text-transform:uppercase;color:#0047ab;} #urun-dosyasi .gpd-title{font:700 clamp(28px,2.8vw,40px)/.95 'Space Grotesk';letter-spacing:-.04em;color:var(--gpd-ink);margin-top:14px;} #urun-dosyasi .gpd-dek{font:400 14px/1.65 'Inter';color:var(--gpd-muted);max-width:27ch;margin-top:14px;} #urun-dosyasi .gpd-nav{margin-top:28px;border-top:1px solid var(--gpd-line);} #urun-dosyasi .gpd-nav a{position:relative;display:flex;align-items:center;gap:14px;min-height:46px;padding:0 4px 0 16px; border-bottom:1px solid var(--gpd-line);font:600 13.5px/1.2 'Inter';color:var(--gpd-muted);transition:color .18s ease;} #urun-dosyasi .gpd-nav a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gpd-cobalt); transform:scaleY(0);transition:transform .18s ease;} #urun-dosyasi .gpd-nav a .n{font:700 11px/1 'Space Grotesk';color:#98a8c4;min-width:20px;transition:color .18s ease;} #urun-dosyasi .gpd-nav a:hover{color:var(--gpd-ink);} #urun-dosyasi .gpd-nav a[aria-current="true"]{color:var(--gpd-ink);} #urun-dosyasi .gpd-nav a[aria-current="true"]::before{transform:scaleY(1);} #urun-dosyasi .gpd-nav a[aria-current="true"] .n{color:var(--gpd-cobalt);} #urun-dosyasi .gpd-nav a .gpd-dot{margin-left:auto;width:7px;height:7px;border-radius:50%;flex:none;} #urun-dosyasi .gpd-dot--ok{background:#6fae84;} #urun-dosyasi .gpd-dot--wait{background:transparent;border:1.5px dashed #9db1d1;} #urun-dosyasi .gpd-dot--mix{background:linear-gradient(90deg,#6fae84 50%,transparent 50%);border:1.5px dashed #9db1d1;} #urun-dosyasi .gpd-dot--review{background:#f0aa2b;box-shadow:0 0 0 3px rgba(240,170,43,.14);} #urun-dosyasi .gpd-railstat{margin-top:24px;padding:14px 16px;border:1px solid var(--gpd-line);border-radius:10px;background:#fbfcff;} #urun-dosyasi .gpd-railstat p{font:600 11.5px/1.55 'Inter';color:var(--gpd-muted);} #urun-dosyasi .gpd-legend{display:flex;flex-direction:column;gap:7px;margin-top:11px;font:600 10.5px/1.3 'Inter';color:#7890ad;} #urun-dosyasi .gpd-legend span{display:inline-flex;align-items:center;gap:8px;} #urun-dosyasi .gpd-legend i{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;} /* ---- mobil omurga: başlığın (72px, z-40) altına yapışır ---- */ #urun-dosyasi .gpd-mobilenav{position:sticky;top:var(--gp-header-h, 72px);z-index:30;display:flex;gap:8px;overflow-x:auto; -webkit-overflow-scrolling:touch;margin:0 -24px 8px;padding:10px 24px;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--gpd-line);scrollbar-width:none;} #urun-dosyasi .gpd-mobilenav::-webkit-scrollbar{display:none;} @media(min-width:1024px){ #urun-dosyasi .gpd-mobilenav{display:none;} } #urun-dosyasi .gpd-mobilenav a{display:inline-flex;align-items:center;gap:7px;flex:none;min-height:44px;padding:0 15px; border-radius:999px;border:1px solid var(--gpd-line);font:600 12px/1 'Inter';color:var(--gpd-muted);background:#fff;white-space:nowrap;} #urun-dosyasi .gpd-mobilenav a .n{font:700 10px/1 'Space Grotesk';color:#98a8c4;} #urun-dosyasi .gpd-mobilenav a[aria-current="true"]{border-color:var(--gpd-cobalt);color:#00327d;background:#eef4ff;} #urun-dosyasi .gpd-mobilenav a[aria-current="true"] .n{color:var(--gpd-cobalt);} /* ---- modüller: açılır bölümler ---- Her modül yerel
'tir (.gp-acc, ortak kurallar product-family.css): kapalı başlar, bütün başlık satırı (numara + başlık + / −) düğmedir. */ #urun-dosyasi .gpd-mod{padding:0;border-bottom:1px solid var(--gpd-line); scroll-margin-top:calc(var(--gp-header-h, 72px) + 76px);} @media(min-width:1024px){ #urun-dosyasi .gpd-mod{scroll-margin-top:calc(var(--gp-header-h, 96px) + 16px);} } #urun-dosyasi .gpd-modhead{display:flex;align-items:center;gap:14px;min-height:64px;padding:16px 2px;} #urun-dosyasi .gpd-modhead .idx{flex:none;font:700 clamp(24px,2.2vw,32px)/1 'Space Grotesk';letter-spacing:-.03em;color:#ccdaf8;} #urun-dosyasi .gpd-modhead h3{font:700 clamp(19px,1.8vw,24px)/1.05 'Space Grotesk';letter-spacing:-.03em;color:var(--gpd-ink);} #urun-dosyasi .gpd-modhead:hover h3{color:var(--gpd-cobalt);} #urun-dosyasi .gpd-modbody{margin-top:0;padding:4px 2px 36px;} /* küçük etiketler (İÇİNDEKİLER, PORSİYON…): metin JS'te Türkçe büyütülür */ #urun-dosyasi .gpd-label{margin:0 0 8px;font:700 10px/1.4 'Inter';letter-spacing:.12em;color:var(--gpd-muted);} #urun-dosyasi .gpd-label--alert{color:#8e2a14;} #urun-dosyasi .gpd-block + .gpd-block,#urun-dosyasi .gpd-block + .gpd-allergen,#urun-dosyasi .gpd-allergen + .gpd-block{margin-top:22px;} /* besin: etiket şeridi */ #urun-dosyasi .gpd-ribbon{position:relative;border-radius:4px;background:linear-gradient(180deg,#fff 0%,#f5f8ff 58%,#edf2ff 100%); color:var(--gpd-ink2);box-shadow:0 18px 44px rgba(0,8,26,.12);padding:24px 28px 22px;overflow:hidden;} #urun-dosyasi .gpd-ribbon::before,#urun-dosyasi .gpd-ribbon::after{content:"";position:absolute;top:0;bottom:0;width:8px;opacity:.36; pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(10,87,201,.38) 0 1px,transparent 1px 17px);} #urun-dosyasi .gpd-ribbon::before{left:0;} #urun-dosyasi .gpd-ribbon::after{right:0;} #urun-dosyasi .gpd-ribbon__head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; font:700 9.5px/1 'Inter';letter-spacing:.16em;text-transform:uppercase;color:var(--gpd-muted);} #urun-dosyasi .gpd-serving{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;margin:16px 0 0;padding:10px 0; border-top:1px solid var(--gpd-line2);border-bottom:1px solid var(--gpd-line2);} #urun-dosyasi .gpd-serving__label{font:700 10px/1.4 'Inter';letter-spacing:.12em;color:var(--gpd-muted);} #urun-dosyasi .gpd-serving strong{font:700 15px/1.3 'Space Grotesk';color:var(--gpd-ink2);} #urun-dosyasi .gpd-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-top:14px;} #urun-dosyasi .gpd-table th,#urun-dosyasi .gpd-table td{padding:10px 8px;border-bottom:1px solid var(--gpd-line2);text-align:left;vertical-align:baseline;overflow-wrap:anywhere;} #urun-dosyasi .gpd-table thead th{font:700 9.5px/1.3 'Inter';letter-spacing:.1em;color:var(--gpd-muted);border-bottom:2px solid #c9d6ee;} #urun-dosyasi .gpd-table tbody th{font:600 13px/1.35 'Inter';color:var(--gpd-ink2);} #urun-dosyasi .gpd-table td{font:600 13px/1.3 'Space Grotesk';color:var(--gpd-ink2);} #urun-dosyasi .gpd-table td.gpd-blank{color:#94a7c4;} #urun-dosyasi .gpd-table thead th:first-child{width:46%;} #urun-dosyasi .gpd-table--extra tbody th{width:62%;} #urun-dosyasi .gpd-table .gpd-subrow th{padding-left:22px;font-weight:500;color:var(--gpd-muted);} #urun-dosyasi .gpd-table .gpd-grouprow th{padding-top:16px;font:700 10px/1.4 'Inter';letter-spacing:.12em;color:var(--gpd-ink2);} #urun-dosyasi .gpd-table tbody tr:last-child th,#urun-dosyasi .gpd-table tbody tr:last-child td{border-bottom:0;} #urun-dosyasi .gpd-tablefoot{font:500 11.5px/1.6 'Inter';color:#5f7190;margin:12px 0 0;padding-top:11px;border-top:1px solid var(--gpd-line2);max-width:70ch;} #urun-dosyasi .gpd-tablefoot + .gpd-tablefoot{border-top:0;padding-top:0;margin-top:8px;} /* kullanım: sahibin kendi numaraları (site saymaz) */ #urun-dosyasi .gpd-numbered{margin:0;padding:0;list-style:none;display:grid;gap:12px;max-width:66ch;} #urun-dosyasi .gpd-numbered li{display:flex;gap:12px;font:400 15px/1.7 'Inter';color:#434653;} #urun-dosyasi .gpd-numbered__n{flex:none;min-width:22px;font:700 15px/1.7 'Space Grotesk';color:var(--gpd-cobalt);} /* uyarılar ve alerjen: işaret + sözcük taşır, yalnızca renk değil */ #urun-dosyasi .gpd-warnings{margin:0;padding:4px 0 4px 16px;list-style:none;border-left:3px solid #c2410c;display:grid;gap:10px;max-width:70ch;} #urun-dosyasi .gpd-warnings li{display:flex;gap:10px;font:500 14.5px/1.6 'Inter';color:var(--gpd-ink);} #urun-dosyasi .gpd-warnings__mark{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;margin-top:2px;border-radius:50%; background:#fdecdf;color:#9a3412;font:800 12px/1 'Inter';} #urun-dosyasi .gpd-allergen{padding:4px 0 4px 16px;border-left:3px solid #c2410c;max-width:70ch;} #urun-dosyasi .gpd-allergen__text{margin:0;font:600 14.5px/1.6 'Inter';color:var(--gpd-ink);} /* içerik paragrafları ve listeler */ #urun-dosyasi .gpd-text{font:400 15px/1.7 'Inter';color:#434653;max-width:66ch;margin:0;} #urun-dosyasi .gpd-text + .gpd-text{margin-top:12px;} #urun-dosyasi .gpd-list{margin:0;padding:0;list-style:none;} #urun-dosyasi .gpd-list li{position:relative;padding:10px 0 10px 22px;border-bottom:1px solid var(--gpd-line);font:500 14px/1.6 'Inter';color:var(--gpd-ink);} #urun-dosyasi .gpd-list li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;border-radius:2px;background:var(--gpd-cobalt);opacity:.55;} #urun-dosyasi .gpd-list li:last-child{border-bottom:0;} #urun-dosyasi .gpd-fallback{font:500 14px/1.6 'Inter';color:var(--gpd-muted);} @media (max-width:520px){ #urun-dosyasi .gpd-ribbon{padding:20px 16px 18px;} #urun-dosyasi .gpd-table th,#urun-dosyasi .gpd-table td{padding:9px 5px;} } @media (prefers-reduced-motion: reduce){ #urun-dosyasi *,#urun-dosyasi *::before,#urun-dosyasi *::after{transition-duration:.01ms !important;animation-duration:.01ms !important;} } /* ---- "Benzer Ürünler" bandı (masaüstü): ana sayfadaki paneller gibi sayfanın sınırında ---- Bölümü storefront.js yaratır ya da sayfadaki [data-gp-related]'i kullanır; iki yolda da bu öznitelik vardır. Kutu başlığın içerik kutusudur (site-header.css --gph-shell 1440 px, --gph-pad 32 px → en çok 1376 px; arama kutusu ile "Sepet" aynı hizada). Açık zemin sınırın dışına taşmasın diye sayfa zemini beyaz, bant yuvarlatılmış bir panel. İç boşluk 1344 px altında daralır (en az 8 px): içerik, panel kutusu 32 px içeri girse de üstteki bölümlerin .wrapx kenarında kalır (1024 px'te x = 40). Bu dosya yalnızca ürün sayfalarında yüklenir; Tailwind'in bg-surface'ını body.bg-surface ile ezer. Sorgu home-mobile.css'teki masaüstü sorgusunun aynısı. */ @media not all and (max-width: 1023px) { body.bg-surface:has(#urun-dosyasi) { background-color: #fff; } section[data-gp-related] { width: calc(100% - 2 * var(--gph-pad, 32px)); max-width: calc(var(--gph-shell, 1440px) - 2 * var(--gph-pad, 32px)); margin: 0 auto 64px; border-radius: 16px; } section[data-gp-related] > .wrapx { padding-inline: clamp(8px, calc(50% - 600px), 40px); } }