/* * TNO Catalog — tema-nötr stiller. * Renkler CSS değişkenlerinden gelir; tema kendi değişkenlerini tanımlıyorsa * --tno-* değerlerini child theme'de ezerek uyumlandırın. */ .tno { /* * Renk ve yazi tipleri temanin (Outgrid/UiCore + Elementor) kendi global * degiskenlerinden okunur; tema yeniden markalanirsa katalog da onunla * birlikte degisir. Yedek degerler theneworder.co'nun bugunku paleti. */ --tno-accent: var(--e-global-color-uicore_primary, #5c000d); --tno-accent-2: var(--e-global-color-uicore_secondary, #99000b); --tno-accent-ink: var(--e-global-color-uicore_white, #ffffff); --tno-ink: var(--e-global-color-uicore_headline, #140407); --tno-body: var(--e-global-color-uicore_body, #252525); --tno-muted: var(--e-global-color-uicore_accent, #747474); --tno-bg: var(--e-global-color-uicore_white, #ffffff); --tno-bg-soft: var(--e-global-color-uicore_light, #f6ecec); --tno-line: color-mix(in srgb, var(--tno-ink) 12%, transparent); --tno-font-head: var(--e-global-typography-uicore_primary-font-family, "Noto Serif"), Georgia, serif; --tno-font-text: var(--e-global-typography-uicore_text-font-family, "DM Sans"), system-ui, sans-serif; /* Tema dugmeleri 6px; katalog da ayni yariciapi kullanir. */ --tno-radius: 6px; --tno-radius-lg: 10px; --tno-shadow: 0 1px 2px rgba(31, 5, 6, .05), 0 10px 30px -18px rgba(31, 5, 6, .35); color: var(--tno-body); font-family: var(--tno-font-text); font-size: 16px; line-height: 1.55; } /* * Koyu tema OPT-IN'dir: 'ye `tno-force-dark` eklenirse devreye girer. * Ziyaretcinin isletim sistemi koyu moddaysa diye otomatik koyulasmaz -- * tema (Outgrid/UiCore) her zaman acik oldugu icin beyaz sayfada koyu * kartlar cikiyordu. */ body.tno-force-dark .tno { --tno-ink: #e8eaed; --tno-body: #d4d7dc; --tno-muted: #9aa3af; --tno-line: #2a3040; --tno-bg: #14161c; --tno-bg-soft: #1a1d25; --tno-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7); } /* * Basliklar: tema (uicore-global.css) h1-h6 rengini global olarak zorluyor; * kendi rengimizi geri aliyoruz yoksa kart basliklari kaybolur. */ .tno h1, .tno h2, .tno h3, .tno h4, .tno h5, .tno h6, .tno .tno-card__title, .tno .tno-group__title, .tno .tno-cat__title, .tno .tno-pricing__cat, .tno .tno-hero__title, .tno .tno-single__title { color: var(--tno-ink); font-family: var(--tno-font-head); font-weight: 600; letter-spacing: -.027em; } /* * Tema (Outgrid/UiCore) her sayfaya kendi baslik seridini basiyor. Sanal * katalog sayfalarinda o serit BOS kaliyor -- sayfanin kendi hero'su ve H1'i * var. Bos serit hem yer kapliyor hem de sayfada ikinci (bos) bir H1 * olusturuyor; gizliyoruz. */ body.tno-page .uicore-page-title { display: none; } .tno *, .tno *::before, .tno *::after { box-sizing: border-box; } .tno-main { padding-block: clamp(28px, 5vw, 64px); } /* Baslik seridi olan sayfalarda ust boslugu serit verir. */ .tno-main:has(> .tno-band) { padding-block: 0 clamp(48px, 6vw, 88px); } .tno-body { padding-top: clamp(28px, 4vw, 56px); } /* Detay sayfasinin serit icindeki baslik bolumu. */ .tno-single__head .tno-single__meta { margin: 14px 0 0; } .tno-single__head .tno-single__title { margin: 10px 0; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; } .tno-single__head .tno-single__lede { margin: 0; max-width: 70ch; } .tno-single__head .tno-badges { margin-top: 16px; } /* Rozetlerin varsayilan zemini seridin rengiyle ayni -- seritte beyaza cevir. */ .tno-band .tno-badges li { background: var(--tno-bg); color: var(--tno-ink); } .tno-wrap { /* Tema kabi: min(95%, 1370px) */ max-width: 1370px; width: 95%; margin-inline: auto; } .tno-wrap--narrow { max-width: 520px; } /* ---------- Hero / breadcrumb ---------- */ /* * Baslik seridi temanin kendi sayfa basligiyla (.uicore-page-title, bkz. * /shop) ayni: tam genislikte acik pembe zemin, ustte breadcrumb, altta * serif baslik. Tema kendi seridini bos bastigi icin gizliyoruz, yerine * bunu koyuyoruz -- ziyaretci farki gormesin. */ .tno-band { background: var(--tno-bg-soft); /* Ust bosluk seffaf/absolute basligi telafi eder; tno.js olcup yaziyor. */ padding-block: 96px 44px; } .tno-hero { margin: 0; } .tno-hero--center { text-align: center; } .tno-hero__title { margin: 18px 0 10px; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.15; } .tno-hero__lede { margin: 0; max-width: 68ch; color: var(--tno-body); font-size: 1.0625rem; } .tno-hero--center .tno-hero__lede { margin-inline: auto; } .tno-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 0; color: var(--tno-ink); font-size: 1rem; } .tno-breadcrumb a { color: inherit; text-decoration: none; } .tno-breadcrumb a:hover { color: var(--tno-accent); text-decoration: underline; } /* ---------- Filtreler ---------- */ .tno-filters { margin-bottom: 24px; } .tno-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .tno-tab { display: inline-flex; gap: 7px; align-items: center; padding: 8px 14px; border: 1px solid var(--tno-line); border-radius: 999px; background: var(--tno-bg); color: var(--tno-ink); font-size: .875rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .tno-tab:hover { border-color: var(--tno-accent); color: var(--tno-accent); } .tno-tab.is-active { border-color: var(--tno-accent); background: var(--tno-accent); color: var(--tno-accent-ink); } .tno-filters__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .tno-field { display: inline-flex; min-width: 0; } .tno-field--search { flex: 1 1 240px; } .tno-field input, .tno-field select { width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--tno-line); border-radius: var(--tno-radius); background: var(--tno-bg); color: var(--tno-ink); font: inherit; font-size: .9375rem; } .tno-field input:focus, .tno-field select:focus { outline: 2px solid var(--tno-accent); outline-offset: 1px; } .tno-count { margin-left: auto; color: var(--tno-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; } /* ---------- Gruplar ---------- */ .tno-group { margin-bottom: 44px; scroll-margin-top: 100px; } .tno-group__head { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--tno-line); } .tno-group__title { margin: 0; font-size: 1.375rem; letter-spacing: -.01em; } .tno-group__desc { margin: 4px 0 0; color: var(--tno-muted); font-size: .9375rem; } /* ---------- Izgara & kart ---------- */ .tno-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } .tno-catalog[data-columns="1"] .tno-grid { grid-template-columns: 1fr; } .tno-catalog[data-columns="2"] .tno-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); } .tno-catalog[data-columns="4"] .tno-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); } .tno-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--tno-line); border-radius: var(--tno-radius); background: var(--tno-bg); transition: box-shadow .18s, transform .18s, border-color .18s; } .tno-card:hover { border-color: var(--tno-accent); box-shadow: var(--tno-shadow); transform: translateY(-2px); } .tno-card.is-featured { border-color: var(--tno-accent); box-shadow: 0 0 0 1px var(--tno-accent) inset; } .tno-card[hidden] { display: none !important; } .tno-card__head { display: flex; gap: 10px; align-items: center; justify-content: space-between; color: var(--tno-muted); font-size: .75rem; } .tno-card__country { display: inline-flex; gap: 5px; align-items: center; font-weight: 600; } .tno-card__code { padding: 2px 7px; border: 1px solid var(--tno-line); border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .6875rem; letter-spacing: .02em; } .tno-card__title { margin: 0; font-size: 1.0625rem; line-height: 1.35; } .tno-card__title a { color: inherit; text-decoration: none; } .tno-card__title a:hover { color: var(--tno-accent); } .tno-card__desc { margin: 0; color: var(--tno-muted); font-size: .875rem; } .tno-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .tno-badges li { padding: 3px 9px; border-radius: 999px; background: var(--tno-bg-soft); color: var(--tno-muted); font-size: .6875rem; font-weight: 600; } .tno-incl { margin: 2px 0 0; padding: 0; list-style: none; font-size: .875rem; } .tno-incl li { position: relative; padding-left: 20px; margin-bottom: 5px; color: var(--tno-muted); } .tno-incl li::before { content: ""; position: absolute; top: .48em; left: 3px; width: 9px; height: 5px; border-left: 2px solid var(--tno-accent); border-bottom: 2px solid var(--tno-accent); transform: rotate(-45deg); } .tno-incl__more { padding-left: 20px; font-weight: 600; } .tno-incl__more::before { display: none; } .tno-incl--full { columns: 2; column-gap: 28px; } @media (max-width: 700px) { .tno-incl--full { columns: 1; } } .tno-card__foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--tno-line); } .tno-card__actions { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- Fiyat ---------- */ .tno-price { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; } .tno-price__now { color: var(--tno-ink); font-family: var(--tno-font-head); font-size: 1.5rem; font-weight: 600; letter-spacing: -.027em; } .tno-price--lg .tno-price__now { font-size: 2rem; } .tno-price__old { color: var(--tno-muted); font-size: .875rem; } .tno-price__per { color: var(--tno-muted); font-size: .8125rem; } .tno-chip { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--tno-accent) 14%, transparent); color: var(--tno-accent); font-size: .6875rem; font-weight: 700; } /* ---------- Düğmeler ---------- */ .tno-btn { display: inline-flex; gap: 8px; align-items: center; justify-content: center; min-height: 44px; padding: 10.5px 19.5px; border: 1px solid transparent; border-radius: var(--tno-radius); font-family: var(--tno-font-text); font-size: .9375rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; transition: filter .15s, border-color .15s, background .15s, color .15s; } .tno-btn--primary { background: var(--tno-accent); color: var(--tno-accent-ink); } .tno-btn--primary:hover { background: var(--tno-accent-2); color: var(--tno-accent-ink); } .tno-btn--ghost { border-color: var(--tno-line); background: transparent; color: var(--tno-ink); } .tno-btn--ghost:hover { border-color: var(--tno-accent); color: var(--tno-accent); } .tno-btn--sm { min-height: 34px; padding: 6px 12px; font-size: .8125rem; } .tno-btn--block { width: 100%; } .tno-btn[disabled] { opacity: .6; cursor: not-allowed; } /* ---------- Kategori kartları ---------- */ .tno-cats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .tno-cat { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--tno-line); border-radius: var(--tno-radius); background: var(--tno-bg); color: inherit; text-decoration: none; transition: box-shadow .18s, border-color .18s, transform .18s; } .tno-cat:hover { border-color: var(--tno-accent); box-shadow: var(--tno-shadow); transform: translateY(-2px); } .tno-cat__title { margin: 0; font-size: 1.0625rem; } .tno-cat__desc { margin: 0; color: var(--tno-muted); font-size: .875rem; } .tno-cat__foot { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tno-line); color: var(--tno-muted); font-size: .8125rem; } /* ---------- Fiyat tablosu ---------- */ .tno-pricing__group { margin-bottom: 34px; } .tno-pricing__cat { margin: 0 0 10px; font-size: 1.125rem; } .tno-table-wrap { overflow-x: auto; } .tno-table { width: 100%; border-collapse: collapse; font-size: .9375rem; } .tno-table th, .tno-table td { padding: 11px 12px; border-bottom: 1px solid var(--tno-line); text-align: left; vertical-align: middle; } .tno-table thead th { color: var(--tno-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .tno-table tbody th { font-weight: 600; } .tno-table tbody th a { color: inherit; text-decoration: none; } .tno-table tbody th a:hover { color: var(--tno-accent); text-decoration: underline; } .tno-ta-r { text-align: right !important; } .tno-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; color: var(--tno-muted); } /* ---------- Paket detayı ---------- */ .tno-single__grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } @media (max-width: 900px) { .tno-single__grid { grid-template-columns: 1fr; } } .tno-single__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; color: var(--tno-muted); font-size: .8125rem; } .tno-single__meta a { color: inherit; } .tno-single__title { margin: 0 0 12px; font-size: clamp(1.6rem, 3.2vw, 2.35rem); line-height: 1.18; letter-spacing: -.02em; } .tno-single__lede { margin: 0 0 16px; color: var(--tno-muted); font-size: 1.0625rem; } .tno-section { margin-top: 34px; } .tno-section > h2 { margin: 0 0 12px; font-size: 1.25rem; } .tno-steps { margin: 0; padding-left: 20px; color: var(--tno-muted); } .tno-steps li { margin-bottom: 6px; } .tno-faq details { padding: 12px 14px; border: 1px solid var(--tno-line); border-radius: 10px; margin-bottom: 8px; background: var(--tno-bg); } .tno-faq summary { cursor: pointer; font-weight: 600; } .tno-faq details > div { margin-top: 8px; color: var(--tno-muted); font-size: .9375rem; } .tno-buybox { position: sticky; top: 96px; padding: 22px; border: 1px solid var(--tno-line); border-radius: var(--tno-radius); background: var(--tno-bg-soft); box-shadow: var(--tno-shadow); } .tno-buybox__features { margin: 8px 0 16px; color: var(--tno-muted); font-size: .8125rem; } .tno-buybox__note { margin: 12px 0 0; color: var(--tno-muted); font-size: .75rem; text-align: center; } /* ---------- Müşteri paneli girişi ---------- */ .tno-auth__box { border: 1px solid var(--tno-line); border-radius: var(--tno-radius); background: var(--tno-bg); box-shadow: var(--tno-shadow); overflow: hidden; } .tno-auth__tabs { display: flex; border-bottom: 1px solid var(--tno-line); } .tno-auth__tab { flex: 1; padding: 14px 10px; border: 0; border-bottom: 2px solid transparent; background: var(--tno-bg-soft); color: var(--tno-muted); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; } .tno-auth__tab.is-active { border-bottom-color: var(--tno-accent); background: var(--tno-bg); color: var(--tno-ink); } .tno-auth__body { padding: 22px; } .tno-auth__field { margin-bottom: 14px; } .tno-auth__field label { display: block; margin-bottom: 5px; font-size: .8125rem; font-weight: 600; } .tno-auth__field input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--tno-line); border-radius: 10px; background: var(--tno-bg); color: var(--tno-ink); font: inherit; font-size: .9375rem; } .tno-auth__field input:focus { outline: 2px solid var(--tno-accent); outline-offset: 1px; } .tno-auth__hint { margin: 5px 0 0; color: var(--tno-muted); font-size: .75rem; } .tno-auth__msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: .875rem; } .tno-auth__msg.is-error { background: rgba(220, 38, 38, .1); color: #b91c1c; } .tno-auth__msg.is-ok { background: rgba(22, 163, 74, .1); color: #15803d; } .tno-auth__links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 14px; font-size: .8125rem; } .tno-auth__links button { border: 0; background: none; color: var(--tno-accent); font: inherit; font-size: inherit; font-weight: 600; cursor: pointer; padding: 0; } .tno-auth__legal { margin-top: 16px; color: var(--tno-muted); font-size: .75rem; text-align: center; } .tno-auth__who { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } /* ---------- Çeşitli ---------- */ .tno-empty { padding: 28px; border: 1px dashed var(--tno-line); border-radius: var(--tno-radius); color: var(--tno-muted); text-align: center; } .tno-panel-btn { display: inline-flex; align-items: center; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- Menüye eklenen bağlantılar ---------- */ .tno-menu-item.is-signed-in > a { font-weight: 700; } .tno-auth__lede { margin: 0 0 16px; color: var(--tno-muted); font-size: .9375rem; text-align: center; } .tno-auth__cta { display: grid; gap: 10px; }