@font-face { font-family:"IBM Plex Sans"; src:url("/Content/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2"); font-style:normal; font-weight:400 600; font-display:swap; unicode-range:U+0100-02FF,U+1E00-1EFF,U+20A0-20CF; } @font-face { font-family:"IBM Plex Sans"; src:url("/Content/fonts/ibm-plex-sans-latin.woff2") format("woff2"); font-style:normal; font-weight:400 600; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+20AC; } @font-face { font-family:"Oswald"; src:url("/Content/fonts/oswald-latin-ext.woff2") format("woff2"); font-style:normal; font-weight:500 700; font-display:swap; unicode-range:U+0100-02FF,U+1E00-1EFF,U+20A0-20CF; } @font-face { font-family:"Oswald"; src:url("/Content/fonts/oswald-latin.woff2") format("woff2"); font-style:normal; font-weight:500 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+20AC; } /* --------------------------------------------------------------------------- SITE RENGI — varsayilan palet ("taba") Buradaki degerler sitenin bugunku renkleridir; hicbir gorsel degisiklik yok. Alternatif paletler carikci-colors.css icinde html[data-site-color="..."] secicisiyle bu degiskenleri ezer. Admin > Site Ayarlari > Site Rengi alani etiketine data-site-color yazar. Roller: --accent* site.css bilesenleri (buton, rozet, nav cizgisi) --brand koyu zeminlerde ana vurgu (hero, footer) --brand-soft koyu zeminde acik ton / hover --brand-strong ara ton (footer buton zemini) --brand-deep acik zeminde kenarlik ve isaret rengi --brand-deeper acik zeminde en koyu ton --brand-shade koyu zeminde koyu vurgu (back-to-top hover) --brand-pale koyu zeminde soluk metin tonu --brand-muted notr-kahve kenarlik --brand-ink --brand / --brand-strong uzerindeki metin --brand-rgb rgb(var(--brand-rgb) / %x) seffaflik icin bilesenler --------------------------------------------------------------------------- */ :root { color-scheme: light; --accent: #c69a3c; --accent-hover: #e8cd84; --accent-text: #8a6520; --accent-ink: #1b1b1b; --brand: #d8a672; --brand-soft: #e7be91; --brand-strong: #c89865; --brand-deep: #b17c47; --brand-deeper: #a3723f; --brand-shade: #85603d; --brand-pale: #e6d4bd; --brand-muted: #766049; --brand-ink: #1b1b1b; --brand-rgb: 216 166 114; --ink: #1b1b1b; --anthracite: #2e2e2e; --surface: #ffffff; --surface-alt: #f6f3ed; --surface-soft: #efeae0; --text: #1b1b1b; --muted: #6e6e6e; --line: #e3ddd1; --success: #25734a; --shadow: 0 18px 48px rgba(21, 26, 28, .1); } html[data-theme="dark"] { color-scheme: dark; --accent-text: #e8cd84; --surface: #1b1b1b; --surface-alt: #141414; --surface-soft: #242424; --text: #f6f3ed; --muted: #b9b4aa; --line: #2e2e2e; --ink: #0e0e0e; --anthracite: #141414; --success: #71c99b; --shadow: 0 18px 50px rgba(0, 0, 0, .32); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--surface); color: var(--text); font-family: "IBM Plex Sans", sans-serif; -webkit-font-smoothing: antialiased; } button, select, input, textarea { font: inherit; } button, a, select { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } .container { width: min(1184px, calc(100% - 40px)); margin-inline: auto; } .skip-link { position: fixed; left: 12px; top: -80px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 10px 14px; } .skip-link:focus-visible { top: 12px; } .utility { background: #111619; color: #d7dadd; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.08); } .utility-inner { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 22px; } .utility-rate { display: flex; align-items: center; gap: 11px; min-width: 0; } .rate-pulse { position: relative; width: 8px; height: 8px; flex: 0 0 auto; } .rate-dot { position: absolute; inset: 0; border-radius: 50%; background: #62c792; box-shadow: 0 0 8px rgba(98,199,146,.65); } .rate-pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid rgba(98,199,146,.6); animation: rate-ping 2.6s ease-out infinite; } .rate-badge { flex: 0 0 auto; font: 700 9px/1 "Oswald", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #7be0ab; border: 1px solid rgba(123,224,171,.32); border-radius: 999px; padding: 4px 7px 3px; } .rate-copy { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .rate-name { color: #8f989d; font: 600 10px "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase; } .rate-value { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .015em; } .rate-value.is-bumped { animation: rate-bump .55s ease; } .rate-trend { display: inline-flex; align-items: center; gap: 3px; font: 600 10px "IBM Plex Sans", sans-serif; color: #62c792; } .rate-trend.down { color: #e0956b; } .rate-note { color: #737d82; font-size: 10px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.1); } @keyframes rate-ping { 0% { transform: scale(.55); opacity: .9; } 70%, 100% { transform: scale(2); opacity: 0; } } @keyframes rate-bump { 30% { color: var(--accent); transform: translateY(-1px); } } .controls { display: flex; align-items: center; gap: 18px; } .preference-group { display: flex; align-items: center; gap: 8px; } .preference-label { color: #778187; font: 600 9px "Oswald", sans-serif; letter-spacing: .13em; text-transform: uppercase; } .segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #333c41; background: #1b2226; border-radius: 6px; box-shadow: inset 0 1px 2px rgba(0,0,0,.25); } .seg-btn { min-width: 37px; height: 26px; border: 0; border-radius: 3px; background: transparent; color: #899297; padding: 0 8px; cursor: pointer; font: 600 10px "IBM Plex Sans", sans-serif; letter-spacing: .04em; transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease; } .seg-btn:hover { color: #fff; } .seg-btn:active { transform: scale(.92); } .seg-btn.active { background: #353e43; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.06); } .seg-btn.currency-option { min-width: 48px; } .seg-btn.active .currency-symbol { color: var(--accent); } .theme-toggle { width: 58px; height: 32px; padding: 3px; border: 1px solid #333c41; border-radius: 17px; background: #1b2226; color: #929b9f; cursor: pointer; display: flex; align-items: center; justify-content: space-between; position: relative; } .theme-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #f7f6f4; box-shadow: 0 2px 7px rgba(0,0,0,.38); transition: translate .22s ease, background .22s ease; } html[data-theme="dark"] .theme-toggle::after { translate: 26px 0; background: var(--accent); } .theme-icon { width: 24px; height: 24px; display: grid; place-items: center; position: relative; z-index: 1; font-size: 12px; } .theme-icon.sun { color: #202629; } html[data-theme="dark"] .theme-icon.sun { color: #737d82; } html[data-theme="dark"] .theme-icon.moon { color: #151a1c; } .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: transform .32s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, background .28s ease; } .site-header.is-scrolled { background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 10px 30px rgba(21,26,28,.09); } .site-header.is-hidden { transform: translateY(-100%); } .header-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; transition: height .28s ease; } .site-header.is-scrolled .header-inner { height: 62px; } .brand img { transition: width .28s ease; } .site-header.is-scrolled .brand img { width: 124px; } .brand { display: inline-flex; flex: 0 0 auto; } .brand img { width: 142px; display: block; } html[data-theme="dark"] .brand-light { display: none; } html:not([data-theme="dark"]) .brand-dark { display: none; } .main-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; } .nav-link { position: relative; padding-block: 28px; font: 600 13px "Oswald", sans-serif; letter-spacing: .055em; text-transform: uppercase; color: var(--text); transition: color .2s ease; } .nav-link:hover, .nav-link.active { color: var(--accent-text); } .nav-link::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 3px; background: var(--accent); transition: left .26s cubic-bezier(.2,.75,.25,1), right .26s cubic-bezier(.2,.75,.25,1); } .nav-link:hover::after, .nav-link.active::after { left: 0; right: 0; } .header-actions { display: flex; align-items: center; gap: 9px; } .icon-btn { min-width: 40px; height: 40px; border: 1px solid var(--line); background: var(--surface); color: var(--text); display: inline-grid; place-items: center; cursor: pointer; position: relative; transition: border-color .2s ease, transform .2s ease, background .2s ease; } .icon-btn:hover { border-color: var(--text); transform: translateY(-1px); } .icon-btn:active { transform: translateY(0); } .icon-btn svg { width: 20px; height: 20px; display: block; flex: none; } .icon-cart { color: inherit; } .count { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; border-radius: 10px; display: grid; place-items: center; padding-inline: 4px; background: var(--accent); color: var(--accent-ink); font: 600 10px "Oswald", sans-serif; } .count-pop { animation: count-pop .42s cubic-bezier(.2,1.4,.4,1); } @keyframes count-pop { 0% { transform: scale(1); } 45% { transform: scale(1.5); } 100% { transform: scale(1); } } .menu-button { display: none; } .btn { position: relative; overflow: hidden; min-height: 44px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 11px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font: 600 13px "Oswald", sans-serif; letter-spacing: .06em; text-transform: uppercase; border-radius: 2px; transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; } .btn > * { position: relative; z-index: 1; } .btn::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-18deg); transition: left .6s ease; pointer-events: none; } .btn:hover { border-color: var(--text); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(21,26,28,.1); } .btn:hover::after { left: 140%; } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-dark { background: var(--ink); border-color: var(--ink); color: #fff; } .btn-block { width: 100%; } .eyebrow { margin: 0 0 10px; color: var(--accent-text); font: 600 12px "Oswald", sans-serif; letter-spacing: .2em; text-transform: uppercase; } .display, .title, .card-title { margin: 0; font-family: "Oswald", sans-serif; line-height: 1.06; text-transform: uppercase; } .display { font-size: clamp(42px, 5vw, 68px); } .title { font-size: clamp(30px, 3vw, 44px); } .lead { color: var(--muted); font-size: 17px; line-height: 1.7; } .muted { color: var(--muted); } .section { padding-block: 74px; } .section-soft { background: var(--surface-alt); } .section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .order-progress { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); list-style:none; gap:16px; padding:0; margin:28px 0; } .order-progress li { border-top:3px solid var(--line); padding:16px 0; display:grid; align-content:start; gap:8px; color:var(--muted); } .order-progress li.reached { border-color:var(--accent); color:var(--ink); } .order-step-number { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:50%; } .reached .order-step-number { background:var(--accent); color:#151a1c; border-color:var(--accent); } .order-progress small { font-size:12px; } @media(max-width:700px) { .order-progress { grid-template-columns:1fr 1fr; } } .hero { overflow: hidden; background: var(--ink); color: #fff; position: relative; } .hero::before { content: ""; position: absolute; right: -130px; top: -150px; width: 620px; height: 620px; background: radial-gradient(circle, rgba(198,154,60,.3), transparent 68%); } .hero::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: repeating-linear-gradient(#c69a3c 0 9px, transparent 9px 18px); opacity: .72; } .hero-inner { min-height: 610px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; position: relative; } .hero .lead { color: #bec4c7; max-width: 590px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .hero-art { min-height: 440px; position: relative; display: grid; place-items: center; } .hero-emblem { width: min(340px, 72%); opacity: .96; filter: drop-shadow(0 28px 35px rgba(0,0,0,.35)); } .hero-chip { position: absolute; background: #fff; color: #151a1c; padding: 14px 18px; box-shadow: var(--shadow); } .hero-chip.top { right: 5%; top: 16%; } .hero-chip.bottom { left: 4%; bottom: 13%; } .hero-chip b { display: block; font: 700 23px "Oswald"; } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .trust-card { padding: 24px; border: 1px solid var(--line); background: var(--surface); transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease; } .trust-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .trust-icon { color: var(--accent-text); font-size: 24px; display: inline-block; transition: transform .3s ease; } .trust-card:hover .trust-icon { transform: scale(1.15) translateY(-2px); } .trust-card p { color: var(--muted); font-size: 13px; line-height: 1.6; } .products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .product-card { background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: transform .28s cubic-bezier(.2,.75,.25,1), box-shadow .28s ease, border-color .28s ease; } .product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-bottom-color: var(--accent); } .product-image { aspect-ratio: 1; background: linear-gradient(145deg, var(--surface-alt), var(--surface-soft)); display: grid; place-items: center; position: relative; overflow: hidden; } .product-image img { width: 42%; opacity: .19; transition: transform .4s cubic-bezier(.2,.75,.25,1), opacity .4s ease; } .product-card:hover .product-image img { transform: scale(1.09) rotate(-1.5deg); opacity: .3; } .product-card .card-title a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; } .product-card:hover .card-title a { background-size: 100% 2px; } .product-kind { position: absolute; color: var(--muted); font: 600 11px "Oswald"; letter-spacing: .1em; text-transform: uppercase; } .sale { position: absolute; left: 11px; top: 11px; background: var(--accent); color: var(--accent-ink); padding: 5px 8px; font: 600 10px "Oswald"; } .favorite { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } .product-body { padding: 17px; } .product-meta { min-height: 38px; color: var(--muted); font-size: 12px; line-height: 1.45; } .product-footer { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .product-body > .btn { margin-top: 16px; } .price { color: var(--accent-text); font: 700 22px "Oswald"; } .stock { color: var(--success); font-size: 11px; } .product-catalog-section { padding-top: 24px; } .page-hero { background: var(--ink); color: #fff; padding-block: 55px; } .page-hero .lead { color: #b8bec1; max-width: 680px; margin-bottom: 0; } .filter-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; } .filter { border: 1px solid var(--line); color: var(--text); background: var(--surface); padding: 9px 13px; cursor: pointer; } .filter.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .detail-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: start; } .detail-image { min-height: 590px; background: linear-gradient(145deg, var(--surface-alt), var(--surface-soft)); display: grid; place-items: center; border: 1px solid var(--line); } .detail-image img { width: 42%; opacity: .26; } .detail-price { display: flex; align-items: baseline; gap: 12px; padding-block: 20px; border-block: 1px solid var(--line); } .detail-price .price { font-size: 36px; } .size-row { display: flex; gap: 8px; margin-block: 12px 24px; } .size { width: 46px; height: 42px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } .size.active { background: var(--ink); color: #fff; border-color: var(--ink); } .feature-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 24px; } .feature { background: var(--surface-alt); padding: 14px; font-size: 12px; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .story-art { min-height: 420px; background: var(--anthracite); display: grid; place-items: center; } .story-art img { width: 210px; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; } .stat { border-left: 3px solid var(--accent); padding-left: 14px; } .stat b { display: block; font: 700 30px "Oswald"; } .contact-grid, .cart-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 48px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { width: 100%; min-height: 48px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 12px 13px; outline: none; } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(198,154,60,.18); } textarea.field { resize: vertical; min-height: 130px; } .full { grid-column: 1 / -1; } .info-list { display: grid; gap: 18px; } .info-item { border-bottom: 1px solid var(--line); padding-bottom: 15px; } .contact-card { position:relative; max-width:1000px; margin-inline:auto; padding:clamp(28px,4vw,48px); gap:22px; border:1px solid var(--line); border-top:4px solid var(--accent); background:var(--surface); box-shadow:var(--shadow); } .contact-card::after { content:"ÇK"; position:absolute; right:26px; bottom:-22px; pointer-events:none; color:color-mix(in srgb,var(--accent) 8%,transparent); font:700 120px/1 "Oswald",sans-serif; } .contact-card .field { position:relative; z-index:1; display:grid; min-height:0; gap:8px; padding:0; border:0; background:transparent; } .contact-card .field label { color:var(--text); font:600 12px/1.2 "IBM Plex Sans",sans-serif; } .contact-card .field input,.contact-card .field textarea { width:100%; min-width:0; border:1px solid var(--line); border-radius:2px; outline:0; background:var(--surface-alt); color:var(--text); padding:13px 14px; transition:border-color .2s ease,box-shadow .2s ease,background .2s ease; } .contact-card .field input { min-height:50px; } .contact-card .field textarea { min-height:170px; resize:vertical; } .contact-card .field input:focus,.contact-card .field textarea:focus { border-color:var(--accent); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); } .contact-card > .btn { z-index:1; grid-column:1/-1; justify-self:start; min-width:210px; } .contact-card > .form-status { z-index:1; margin:0; min-height:20px; } .cart-grid { grid-template-columns: 1.45fr .65fr; align-items: start; } .cart-item { display: grid; grid-template-columns: 100px 1fr auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: center; } .cart-thumb { width: 100px; height: 100px; background: var(--surface-soft); display: grid; place-items: center; } .cart-thumb img { width: 45px; opacity: .3; } .summary { padding: 24px; background: var(--surface-alt); position: sticky; top: 130px; } .summary-row { display: flex; justify-content: space-between; gap: 12px; padding-block: 9px; } .summary-total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 16px; font-size: 18px; } .empty { text-align: center; padding: 70px 20px; border: 1px solid var(--line); } .account-card { width: min(520px, 100%); margin-inline: auto; padding: 36px; border: 1px solid var(--line); box-shadow: var(--shadow); } .account-card .field { margin-top: 12px; } .checkout-steps { display: grid; grid-template-columns: repeat(4,1fr); margin-bottom: 32px; } .checkout-step { padding: 13px; border-bottom: 2px solid var(--line); color: var(--muted); font: 600 12px "Oswald"; text-transform: uppercase; } .checkout-step.active { border-color: var(--accent); color: var(--accent-text); } .site-footer { background: var(--anthracite); color: #d1d5d7; padding: 54px 0 24px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 34px; } .footer-brand { width: 150px; } .footer-title { color: #fff; font: 600 13px "Oswald"; text-transform: uppercase; letter-spacing: .08em; } .footer-links { display: grid; gap: 9px; color: #aab0b4; font-size: 13px; } .footer-links a { transition: color .2s ease, transform .2s ease; } .footer-links a:hover { color: var(--accent-hover); transform: translateX(4px); } .copyright { border-top: 1px solid #3a4246; margin-top: 36px; padding-top: 20px; color: #858d92; font-size: 11px; } .mobile-panel { display: none; } .toast { position: fixed; right: 22px; bottom: 22px; z-index: 90; translate: 0 120px; opacity: 0; background: var(--ink); color: #fff; border-left: 3px solid var(--accent); padding: 14px 18px; box-shadow: var(--shadow); transition: translate .34s cubic-bezier(.2,1.3,.4,1), opacity .24s ease; } .toast.show { translate: 0; opacity: 1; } /* Editorial home and corporate storytelling */ .paper-section { position:relative; overflow:hidden; background:var(--surface); } .paper-section::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; background:linear-gradient(90deg,transparent 0 49.9%,color-mix(in srgb,var(--line) 34%,transparent) 50%,transparent 50.1%); } .paper-section > .container { position:relative; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin-bottom:34px; padding-bottom:22px; border-bottom:1px solid var(--line); } .section-index { display:block; margin-bottom:8px; color:var(--accent-text); font:600 11px/1 "Oswald",sans-serif; letter-spacing:.18em; text-transform:uppercase; } .section-heading h2 { margin:0; font:700 clamp(32px,4vw,50px)/1 "Oswald",sans-serif; letter-spacing:-.02em; text-transform:uppercase; } .text-link,.card-link { display:inline-flex; align-items:center; gap:8px; font:600 12px/1.2 "IBM Plex Sans",sans-serif; } .text-link span,.card-link span { color:var(--accent-text); transition:transform .2s ease; } .text-link:hover span,.card-link:hover span { transform:translate(2px,-2px); } .story-feature { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr); min-height:410px; margin-bottom:20px; border:1px solid var(--line); background:var(--surface); box-shadow:0 14px 38px rgba(27,27,27,.06); } .story-feature-visual,.story-image { position:relative; isolation:isolate; display:block; overflow:hidden; background-color:var(--anthracite); background-position:center; background-size:cover; } .story-feature-visual::after,.story-image::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(180deg,rgba(17,22,25,.02) 38%,rgba(17,22,25,.88) 100%); transition:background-color .28s ease; } .story-feature:hover .story-feature-visual::after,.story-card:hover .story-image::after { background-color:rgba(198,154,60,.08); } .story-feature-visual { min-height:410px; } .story-number { position:absolute; left:22px; top:18px; z-index:2; color:rgba(255,255,255,.88); font:700 46px/1 "Oswald",sans-serif; } .image-caption,.story-image > span { position:absolute; left:20px; bottom:18px; z-index:2; max-width:calc(100% - 82px); padding:7px 10px; background:var(--accent); color:#17120a; font:700 10px/1 "IBM Plex Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; } .story-feature-content { display:flex; min-width:0; flex-direction:column; justify-content:center; padding:clamp(30px,4vw,54px); } .story-feature-content h3 { margin:22px 0 14px; overflow-wrap:anywhere; font:700 clamp(30px,3.2vw,46px)/1.08 "Oswald",sans-serif; letter-spacing:-.02em; } .story-feature-content > p { margin:0; overflow-wrap:anywhere; color:var(--muted); font-size:15px; line-height:1.75; } .article-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:32px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; } .article-footer a { color:var(--text); font-weight:600; } .article-footer b { color:var(--accent-text); margin-left:5px; } .story-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; } .story-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; border:1px solid var(--line); background:var(--surface); transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease; } .story-card:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--accent) 72%,var(--line)); box-shadow:var(--shadow); } .story-image { aspect-ratio:16/10; transition:transform .35s ease; } .story-card:hover .story-image { transform:scale(1.015); } .story-image > i { position:absolute; right:16px; top:13px; z-index:2; color:#fff; font:700 24px/1 "Oswald",sans-serif; font-style:normal; text-shadow:0 2px 12px rgba(0,0,0,.35); } .story-card > .article-tags { margin:20px 20px 0; } .story-card > h3 { margin:15px 20px 10px; overflow-wrap:anywhere; font:700 24px/1.2 "Oswald",sans-serif; } .story-card > p { margin:0 20px; overflow-wrap:anywhere; color:var(--muted); font-size:13px; line-height:1.65; } .story-card > .card-link { margin:auto 20px 22px; padding-top:22px; color:var(--text); } .blog-card-video-preview { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; } .photo-petersburg { background-image:linear-gradient(145deg,#30363a,#111619); } .photo-kazan { background-image:linear-gradient(145deg,#50452d,#17191a); } .photo-winter { background-image:linear-gradient(145deg,#4c5659,#1b2225); } .photo-baikal { background-image:linear-gradient(145deg,#263b43,#111619); } .category-grid { display: grid; grid-template-columns: 1.15fr .85fr .85fr; grid-template-rows: 220px 220px; gap: 16px; } .category-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); padding: 26px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } .category-card:first-child { grid-row: 1 / 3; background: var(--anthracite); color: #f6f3ed; } .category-card:nth-child(4) { grid-column: 2 / 4; } .category-card::before { content: attr(data-index); position: absolute; right: 18px; top: 5px; font: 700 88px "Oswald"; color: color-mix(in srgb, var(--accent) 16%, transparent); line-height: 1; } .category-card::after { content: ""; position: absolute; left: 26px; top: 26px; width: 36px; height: 2px; background: var(--accent); transition: width .28s ease; } .category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent); } .category-card:hover::after { width: 82px; } .category-card p { max-width: 420px; margin-bottom: 0; color: var(--muted); font-size: 13px; } .category-card:first-child p { color: #b9b4aa; } .craft-section { position: relative; overflow: hidden; background: var(--anthracite); color: #f6f3ed; } .craft-section::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(198,154,60,.35) 1px, transparent 1px), linear-gradient(90deg, rgba(198,154,60,.35) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent); } .process-grid { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 38px; counter-reset: step; } .process-card { counter-increment: step; padding: 28px; border-left: 1px solid #434343; min-height: 220px; } .process-card::before { content: "0" counter(step); color: var(--accent); font: 600 12px "Oswald"; letter-spacing: .15em; } .process-card h3 { margin-top: 48px; } .process-card p { color: #b9b4aa; font-size: 13px; line-height: 1.7; } .metrics-band { background: var(--surface-alt); border-block: 1px solid var(--line); } .metrics-grid { display: grid; grid-template-columns: repeat(4,1fr); } .metric { padding: 34px 26px; border-left: 1px solid var(--line); } .metric:last-child { border-right: 1px solid var(--line); } .metric strong { display: block; color: var(--accent-text); font: 700 42px "Oswald"; line-height: 1; } .metric span { color: var(--muted); font-size: 12px; } .quote-panel { display: grid; grid-template-columns: .72fr 1.28fr; border: 1px solid var(--line); background: var(--surface); } .quote-mark { min-height: 290px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 700 150px/1 Georgia,serif; } .quote-copy { padding: 48px; display: flex; flex-direction: column; justify-content: center; } .quote-copy blockquote { margin: 0; font: 500 clamp(22px,2.4vw,34px)/1.35 "Oswald"; text-transform: uppercase; } .cta-panel { position: relative; overflow: hidden; background: var(--ink); color: #f6f3ed; padding: 58px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .cta-panel::after { content: "ÇK"; position: absolute; right: 4%; top: 50%; translate: 0 -50%; font: 700 170px "Oswald"; color: rgba(198,154,60,.08); pointer-events: none; } .about-hero { position: relative; overflow: hidden; background: var(--surface-alt); border-bottom: 1px solid var(--line); } .about-hero-grid { min-height: 560px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 50px; } .corporate-page .about-hero { background:var(--anthracite); color:#f6f3ed; } .corporate-page .about-hero .lead { color:#c3c6c7; } .corporate-page .about-monogram { background:var(--ink); border:1px solid rgba(198,154,60,.2); } .about-monogram { min-height: 420px; position: relative; display: grid; place-items: center; background: var(--anthracite); overflow: hidden; } .about-monogram::before { content: ""; position: absolute; width: 350px; height: 350px; border: 1px solid rgba(198,154,60,.28); border-radius: 50%; animation: slow-spin 22s linear infinite; } .about-monogram::after { content: ""; position: absolute; width: 285px; height: 285px; border: 1px dashed rgba(232,205,132,.28); border-radius: 50%; animation: slow-spin 18s linear infinite reverse; } .about-monogram img { width: 190px; position: relative; z-index: 1; } .about-intro { align-items:start; } .about-copy { line-height:1.8; } .about-approach-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:clamp(34px,5vw,68px); } .about-production-image { display:block; min-height:480px; overflow:hidden; border:1px solid var(--line); background:var(--surface-soft); } .about-production-image img { width:100%; height:100%; min-height:480px; object-fit:cover; filter:saturate(.72) contrast(1.04); } .material-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:28px; } .material-card { padding:22px; border:1px solid var(--line); border-top:3px solid var(--accent); background:var(--surface); } .material-card > span { color:var(--accent-text); font:600 11px "Oswald"; letter-spacing:.14em; } .material-card h3 { margin:18px 0 8px; font-size:18px; } .material-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; } .about-section-lead { max-width:480px; margin:0; } .about-section-lead.light { color:#b9b4aa; } .timeline { position: relative; margin-top: 42px; } .timeline::before { content: ""; position: absolute; left: 112px; top: 0; bottom: 0; width: 1px; background: var(--line); } .timeline-item { display: grid; grid-template-columns: 88px 1fr; gap: 50px; position: relative; padding-bottom: 38px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-era { color: var(--accent-text); font: 700 18px "Oswald"; text-align: right; } .timeline-content { position: relative; padding: 0 0 4px 28px; } .timeline-content::before { content: ""; position: absolute; left: -32px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--surface); border: 1px solid var(--accent); } .timeline-content h3 { margin-bottom: 8px; } .timeline-content p { color: var(--muted); margin: 0; line-height: 1.75; } .purpose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .purpose-card { position: relative; min-height: 330px; padding: 38px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); } .purpose-card:nth-child(2) { background: var(--anthracite); color: #f6f3ed; border-color: var(--anthracite); } .purpose-card::after { content: attr(data-letter); position: absolute; right: -8px; bottom: -48px; color: color-mix(in srgb, var(--accent) 14%, transparent); font: 700 220px "Oswald"; line-height: 1; } .purpose-card p { position: relative; z-index: 1; color: var(--muted); line-height: 1.8; max-width: 490px; } .purpose-card:nth-child(2) p { color: #b9b4aa; } .values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .value-card { padding: 28px; border-top: 3px solid var(--accent); background: var(--surface); box-shadow: 0 8px 24px rgba(27,27,27,.05); } .value-card span { color: var(--accent-text); font: 600 12px "Oswald"; } .value-card p { color: var(--muted); font-size: 13px; line-height: 1.7; } .corporate-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; } .corporate-gallery figure { position:relative; aspect-ratio:4/3; margin:0; overflow:hidden; border:1px solid var(--line); background:var(--surface-soft); } .corporate-gallery img { width:100%; height:100%; object-fit:cover; filter:saturate(.7); transition:transform .4s ease,filter .4s ease; } .corporate-gallery figcaption { position:absolute; right:12px; bottom:12px; left:12px; padding:9px 11px; background:rgba(17,22,25,.88); color:#fff; font:600 11px "Oswald"; letter-spacing:.08em; text-transform:uppercase; } .corporate-gallery figure:hover img { transform:scale(1.045); filter:saturate(1); } .sector-heading { margin-top:38px; } .sector-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; } .sector-grid > div { display:grid; min-height:76px; place-items:center; padding:14px; border:1px solid var(--line); background:var(--surface); text-align:center; font:600 13px "Oswald"; text-transform:uppercase; transition:border-color .2s ease,transform .2s ease; } .sector-grid > div:hover { transform:translateY(-3px); border-color:var(--accent); } .reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.75,.25,1); } .reveal.is-visible { opacity: 1; transform: none; } .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .stagger.is-visible > * { opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(2) { transition-delay: .08s; } .stagger.is-visible > *:nth-child(3) { transition-delay: .16s; } .stagger.is-visible > *:nth-child(4) { transition-delay: .24s; } @keyframes slow-spin { to { transform: rotate(360deg); } } @media (max-width: 980px) { .main-nav, .header-actions .account-link { display: none; } .menu-button { display: inline-grid; } .mobile-panel.open { display: grid; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; } body.menu-open { overflow: hidden; } .hero-inner, .detail-grid, .split, .contact-grid, .cart-grid { grid-template-columns: 1fr; } .hero-inner { padding-block: 60px; } .hero-art { min-height: 330px; } .hero-media-only .hero-art { min-height: 480px; } .products-grid { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: repeat(2, 1fr); } .summary { position: static; } .category-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .category-card, .category-card:first-child, .category-card:nth-child(4) { grid-column: auto; grid-row: auto; min-height: 240px; } .process-grid, .metrics-grid, .values-grid { grid-template-columns: repeat(2,1fr); } .about-hero-grid { grid-template-columns: 1fr; padding-block: 60px; } .about-approach-grid { grid-template-columns:1fr; } .about-production-image,.about-production-image img { min-height:380px; } .corporate-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .sector-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .story-feature { grid-template-columns:1fr; } .story-feature-visual { min-height:340px; } .story-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .story-card:last-child { grid-column:1/-1; } } @media (max-width: 620px) { .container { width: min(100% - 28px, 1184px); } .utility-inner { min-height: 44px; padding-block: 5px; gap: 8px; } .rate-note, .rate-name, .preference-label, .rate-badge, .rate-trend { display: none; } .rate-copy { gap: 0; } .controls { margin-left: auto; gap: 7px; } .preference-group { gap: 0; } .seg-btn { min-width: 32px; padding-inline: 6px; } .seg-btn.currency-option { min-width: 41px; } .theme-toggle { width: 54px; } html[data-theme="dark"] .theme-toggle::after { translate: 22px 0; } .header-inner { height: 64px; } .brand img { width: 116px; } .hero-inner { min-height: auto; gap: 25px; } .hero-art { min-height: 260px; } .hero-media-only .hero-art { min-height: 380px; } .hero-chip { font-size: 11px; padding: 10px 12px; } .products-grid, .trust-grid, .footer-grid, .form-grid, .stats, .feature-list, .category-grid, .process-grid, .metrics-grid, .values-grid, .purpose-grid, .quote-panel { grid-template-columns: 1fr; } .process-card { border-left: 0; border-top: 1px solid #434343; min-height: auto; } .process-card h3 { margin-top: 24px; } .metric, .metric:last-child { border: 0; border-top: 1px solid var(--line); } .quote-mark { min-height: 150px; } .quote-copy { padding: 30px; } .cta-panel { padding: 38px 24px; align-items: flex-start; flex-direction: column; } .about-monogram { min-height: 340px; } .about-production-image,.about-production-image img { min-height:280px; } .material-grid,.corporate-gallery { grid-template-columns:1fr; } .sector-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .timeline::before { left: 79px; } .timeline-item { grid-template-columns: 62px 1fr; gap: 32px; } .timeline-content { padding-left: 20px; } .timeline-content::before { left: -21px; } .section { padding-block: 52px; } .section-head { align-items: start; flex-direction: column; } .section-heading { align-items:flex-start; flex-direction:column; margin-bottom:24px; } .story-feature { min-height:0; } .story-feature-visual { min-height:250px; } .story-feature-content { padding:26px 22px; } .story-feature-content h3 { margin-top:18px; font-size:28px; } .story-feature-content .article-tags,.story-card > .article-tags { flex-wrap:wrap; justify-content:flex-start; } .story-feature-content .article-tags time,.story-card > .article-tags time { flex-basis:100%; } .story-card > h3 { font-size:22px; } .article-footer { align-items:flex-start; flex-direction:column; margin-top:24px; } .story-grid { grid-template-columns:1fr; } .story-card:last-child { grid-column:auto; } .cart-item { grid-template-columns: 78px 1fr; } .cart-thumb { width: 78px; height: 78px; } .cart-item > .price { grid-column: 2; } .checkout-steps { grid-template-columns: repeat(2,1fr); } .account-card { padding: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal, .stagger > * { opacity: 1; transform: none; } } /* CMS public shell */ .commerce-only { display:none!important; }.ecommerce-enabled .commerce-only { display:flex!important; }.ecommerce-enabled .catalog-only { display:none!important; } .catalog-enabled .detail-price,.catalog-enabled [data-add-cart] { display:none!important; } .hero-slides { display:grid; }.hero-inner[data-hero-slide] { grid-area:1/1; opacity:0; pointer-events:none; transition:opacity .35s ease; }.hero-inner[data-hero-slide].active { opacity:1; pointer-events:auto; }.hero-art picture { position:absolute; inset:28px; z-index:2; }.hero-product { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 28px 24px rgba(0,0,0,.18)); }.hero-slider-controls { position:absolute; right:max(24px,calc((100vw - 1184px)/2)); bottom:24px; z-index:3; display:flex; gap:8px; }.hero-slider-controls button { width:44px; height:44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; } .hero-inner.hero-text-only { grid-template-columns: minmax(0, 780px); justify-content: center; text-align: center; } .hero-text-only .hero-copy { display: grid; justify-items: center; } .hero-text-only .hero-actions { justify-content: center; } .hero-inner.hero-media-only { grid-template-columns: 1fr; max-width: none; padding-inline: 0; } .hero-media-only .hero-art { min-height: 610px; width: 100%; } .hero-media-only .hero-art picture { inset: 0; } .hero-media-only .hero-product { object-fit: cover; filter: none; } .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0e1011; z-index: 2; } .hero-split .hero-video { border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .hero-inner[data-hero-slide], .hero-inner .reveal { transition: none; transform: none; } .hero-inner .reveal { opacity: 1; } } .skip-link { position:fixed; top:8px; left:8px; z-index:1000; translate:0 -150%; padding:10px 14px; background:var(--accent); color:#17120a; font-weight:700; } .skip-link:focus-visible { translate:0; } .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; } .honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; opacity:0!important; } .header-sentinel { height:1px; } .main-nav > a { position:relative; padding:29px 0; color:var(--text); font:600 13px "Oswald",sans-serif; letter-spacing:.04em; text-transform:uppercase; } .main-nav > a::after { content:""; position:absolute; right:0; bottom:19px; left:0; height:2px; background:var(--accent); scale:0 1; transform-origin:left; transition:scale .2s ease; } .main-nav > a:hover::after,.main-nav > a.active::after { scale:1; } .main-nav > a:hover,.main-nav > a.active { color:var(--accent-text); } .seg-btn { display:grid; place-items:center; color:#899297; text-decoration:none; } /* Künye bloğu: ticaret unvanı, MERSİS, vergi ve ticaret odası bilgileri. Alan sayısı değişken olduğu için auto-fit; boş alanlar hiç basılmaz. */ .footer-legal { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:18px 30px; margin:34px 0 0; padding-top:24px; border-top:1px solid #343b3f; } .footer-legal > div { min-width:0; } .footer-legal dt { margin-bottom:6px; color:#77817f; font:600 9px "Oswald",sans-serif; letter-spacing:.18em; text-transform:uppercase; } .footer-legal dd { margin:0; color:#c3c9cb; font-size:12px; line-height:1.6; overflow-wrap:anywhere; } /* Künye varken iki ardışık ayraç çizgisi birbirine yapışmasın. */ .footer-legal-wrap + .footer-bottom { margin-top:26px; } .footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:36px; padding-top:22px; border-top:1px solid #343b3f; color:#8f989d; font-size:12px; } .newsletter-form { display:grid; grid-template-columns:1fr auto; gap:8px; } .newsletter-form input { min-width:0; border:1px solid #42494d; background:#20272b; color:#fff; padding:0 12px; font:inherit; } .newsletter-form .form-status { grid-column:1/-1; margin:0; min-height:20px; font-size:12px; } .form-status.success { color:#67d9aa; }.form-status.error { color:#ff9a9a; } /* CMS page and blog views */ .dynamic-page,.blog-detail { min-height:60vh; } .cms-page-hero,.inner-hero,.blog-detail-header { position:relative; overflow:hidden; padding:80px 0; border-bottom:1px solid var(--line); background:var(--surface-alt); } .inner-hero-content,.blog-detail-hero { position:relative; z-index:1; } .inner-hero h1,.blog-detail h1,.cms-page-hero h1 { max-width:900px; margin:12px 0 18px; color:var(--ink); font:700 clamp(44px,7vw,86px)/.98 "Oswald",sans-serif; letter-spacing:-.025em; text-transform:uppercase; } .inner-hero h1 em { color:var(--accent); font-style:normal; } .inner-hero p,.blog-detail-summary,.cms-page-lead { max-width:700px; color:var(--muted); font-size:17px; line-height:1.75; } .marquee-word { position:absolute; right:-30px; bottom:-38px; color:color-mix(in srgb,var(--accent) 9%,transparent); font:700 clamp(90px,17vw,250px)/1 "Oswald"; pointer-events:none; } .blog-archive,.blog-detail-body,.blog-after,.cms-page-section { padding:72px 0; } .filter-bar { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:30px; } .filter-button { border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:10px 14px; cursor:pointer; font:600 12px "IBM Plex Sans"; } .filter-button span { color:var(--muted); margin-left:5px; }.filter-button.active { border-color:var(--accent); background:var(--accent); color:#17120a; } .archive-grid,.latest-posts-grid,.blog-related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; } .archive-card,.latest-post-card,.blog-related-card { border:1px solid var(--line); background:var(--surface); overflow:hidden; } .archive-card-wide { grid-column:span 2; }.archive-image,.latest-post-image,.blog-related-image { display:block; aspect-ratio:16/10; background:var(--surface-alt) center/cover no-repeat; position:relative; } .archive-image > span,.archive-image > i,.video-badge { position:absolute; z-index:1; }.archive-image > span { left:14px; top:14px; padding:5px 8px; background:var(--accent); color:#17120a; font-size:11px; font-weight:700; }.archive-image > i { right:14px; top:12px; color:#fff; font:700 22px "Oswald"; }.video-badge { right:12px; bottom:12px; padding:5px 8px; background:#111619; color:#fff; font-size:10px; } .archive-content,.latest-post-content { padding:20px; }.archive-content h2,.latest-post-content h3 { margin:8px 0; font:600 24px/1.15 "Oswald"; }.archive-content p { color:var(--muted); font-size:14px; }.article-tags { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; text-transform:uppercase; }.is-hidden { display:none!important; } .blog-detail-hero-grid,.blog-detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:50px; }.blog-detail-crumb { display:flex; justify-content:space-between; margin-bottom:25px; }.blog-detail-facts { display:grid; align-content:end; gap:12px; }.blog-detail-facts div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:10px; font-size:12px; }.blog-detail-facts span { color:var(--muted); }.blog-detail-cover,.blog-video-shell { width:100%; aspect-ratio:16/8; object-fit:cover; border:1px solid var(--line); }.blog-video iframe,.blog-video video { width:100%; aspect-ratio:16/9; border:0; }.blog-detail-layout { grid-template-columns:250px minmax(0,760px); justify-content:center; margin-top:48px; }.blog-detail-sidebar { display:grid; align-content:start; gap:12px; }.blog-side-card,.blog-share-card { padding:18px; border:1px solid var(--line); }.blog-share-links { display:flex; gap:8px; margin-top:10px; }.blog-share-links a { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--line); }.rich-content { color:var(--ink); font-size:17px; line-height:1.8; overflow-wrap:anywhere; }.rich-content h2,.rich-content h3 { font-family:"Oswald"; line-height:1.15; }.rich-content img { width:100%; height:auto; }.rich-content table { width:100%; border-collapse:collapse; }.rich-content th,.rich-content td { border:1px solid var(--line); padding:10px; }.rich-content blockquote { margin:28px 0; border-left:3px solid var(--accent); padding:10px 22px; font-size:1.2em; }.blog-post-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:55px; }.blog-nav-card { padding:22px; border:1px solid var(--line); }.blog-nav-card-next { text-align:right; }.blog-related-card { padding-bottom:18px; }.blog-related-card > span:not(.blog-related-image),.blog-related-card > strong { display:block; margin:12px 16px 0; }.blog-empty { padding:70px 20px; border:1px dashed var(--line); text-align:center; } .cms-page-body { padding:70px 0; }.cms-page-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:40px; }.rich-content .page-hero:first-child { margin-top:-70px; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .blog-share-links button { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--line); background:var(--surface); color:var(--ink); cursor:pointer; } @media (max-width:900px) { .archive-grid,.latest-posts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.blog-detail-hero-grid,.blog-detail-layout,.cms-page-layout { grid-template-columns:1fr; }.blog-detail-sidebar { grid-template-columns:repeat(2,1fr); }.archive-card-wide { grid-column:span 2; } } @media (max-width:640px) { .archive-grid,.latest-posts-grid,.blog-related-grid { grid-template-columns:1fr; }.archive-card-wide { grid-column:auto; }.blog-detail-sidebar { grid-template-columns:1fr; }.blog-post-nav { grid-template-columns:1fr; }.newsletter-form { grid-template-columns:1fr; }.newsletter-form input { min-height:44px; }.footer-bottom { align-items:flex-start; flex-direction:column; }.inner-hero,.blog-detail-header,.cms-page-hero { padding:55px 0; } } /* Site içi görsel önizleme */ .media-zoomable { position:relative; cursor:zoom-in; } .media-zoomable::after { content:""; position:absolute; top:14px; right:14px; z-index:4; width:46px; height:46px; border:1px solid rgb(255 255 255 / 55%); border-radius:50%; background:rgb(17 22 25 / 78%) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.8' cy='10.8' r='6.3'/%3E%3Cpath d='m15.5 15.5 4.2 4.2'/%3E%3C/svg%3E") center/21px 21px no-repeat; box-shadow:0 8px 24px rgb(0 0 0 / 24%); opacity:0; transform:translateY(-5px); transition:opacity .2s ease,transform .2s ease,background-color .2s ease; pointer-events:none; } .media-zoomable:hover::after,.media-zoomable:focus-visible::after { opacity:1; transform:translateY(0); } .media-zoomable:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } .media-lightbox { width:min(94vw,1500px); max-width:none; height:min(92vh,980px); max-height:none; margin:auto; padding:0; border:0; overflow:visible; background:transparent; color:#f7f3eb; } .media-lightbox::backdrop { background:rgb(8 11 11 / 88%); backdrop-filter:blur(8px); } .media-lightbox-frame { position:relative; display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; width:100%; height:100%; padding:62px 24px 34px; } .media-lightbox img { display:block; width:auto; max-width:100%; height:auto; max-height:100%; object-fit:contain; border-radius:4px; background:#151918; box-shadow:0 24px 80px rgb(0 0 0 / 55%); } .media-lightbox p { max-width:min(760px,90vw); margin:16px 0 0; color:#d7d6d0; font-size:13px; line-height:1.5; text-align:center; } .media-lightbox-close { position:absolute; top:6px; right:8px; z-index:2; width:44px; height:44px; padding:0; border:1px solid #6b706d; border-radius:50%; background:#171c1b; color:transparent; font-size:0; line-height:0; cursor:pointer; transition:background .2s ease,border-color .2s ease,transform .2s ease; } .media-lightbox-close::before,.media-lightbox-close::after { content:""; position:absolute; top:50%; left:50%; width:18px; height:1.5px; border-radius:2px; background:#fff; } .media-lightbox-close::before { transform:translate(-50%,-50%) rotate(45deg); } .media-lightbox-close::after { transform:translate(-50%,-50%) rotate(-45deg); } .media-lightbox-close:hover { border-color:var(--accent); background:#252b29; transform:scale(1.06); } .media-lightbox-close:focus-visible { outline:3px solid var(--accent); outline-offset:3px; } body.has-media-lightbox { overflow:hidden; } @media(max-width:600px) { .media-zoomable::after { top:10px; right:10px; width:40px; height:40px; opacity:.88; }.media-lightbox { width:100vw; height:100dvh; }.media-lightbox-frame { padding:64px 14px 26px; }.media-lightbox-close { top:10px; right:14px; } } @media(hover:none) { .media-zoomable::after { opacity:.88; transform:none; } } @media(prefers-reduced-motion:reduce) { .media-zoomable::after,.media-lightbox-close { transition:none; } } /* Cerez bildirimi: sayfanin altina sabitlenir, ilk ziyarette JS ile acilir. Modal degildir; sayfa okunmaya devam edebilir (bkz. js/cookie-consent.js). */ .cookie-banner { position:fixed; right:0; bottom:0; left:0; z-index:95; border-top:1px solid var(--line); background:var(--surface); box-shadow:0 -10px 34px rgb(0 0 0 / .16); } .cookie-banner-inner { display:flex; align-items:center; justify-content:space-between; gap:22px; max-width:1200px; margin:0 auto; padding:18px 22px; } .cookie-banner-copy { min-width:0; } .cookie-banner-title { margin:0 0 4px; font:600 14px "Oswald",sans-serif; letter-spacing:.06em; text-transform:uppercase; } .cookie-banner-copy p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; } .cookie-banner-copy a { color:var(--accent-text); text-decoration:underline; } /* Iki dugme esit genislik ve esit agirlikta: KVKK Cerez Rehberi reddetmeyi zorlastiran ("karanlik") tasarimi kabul etmiyor. */ .cookie-banner-actions { display:flex; flex-shrink:0; gap:10px; } .cookie-banner-actions .btn { flex:1 0 auto; min-width:175px; } .cookie-preferences-link { min-height:44px; border:0; background:none; color:#b8bec0; font:400 12px/1.4 "IBM Plex Sans",sans-serif; cursor:pointer; text-decoration:underline; } .cookie-preferences-link:hover { color:#f7f3eb; } .cookie-preferences-link:focus-visible { outline:2px solid var(--accent); outline-offset:4px; } @media(max-width:720px) { .cookie-banner-inner { flex-direction:column; align-items:stretch; padding:16px; }.cookie-banner-actions { flex-direction:column; } } /* Yasal sayfalar (KVKK, gizlilik, cerez, mesafeli satis). Govde .rich-content stillerini kullanir; asagidakiler yalnizca kunye blogu ve meta satirlaridir. */ .legal-content h2 { margin:38px 0 10px; font-size:22px; } .legal-content h3 { margin:26px 0 8px; font-size:17px; } .legal-content ul { padding-left:22px; } .legal-content li { margin-bottom:8px; } .legal-content table { margin:18px 0; font-size:15px; } .legal-content th { background:color-mix(in srgb, var(--line) 45%, transparent); text-align:left; } .legal-meta { margin:0; color:var(--muted); font-size:13px; } .legal-note { margin:18px 0; border-left:3px solid var(--accent); padding:12px 18px; background:color-mix(in srgb, var(--accent) 8%, transparent); font-size:15px; } .legal-party { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px 28px; margin:18px 0 26px; border:1px solid var(--line); padding:22px; } .legal-party > div { min-width:0; } .legal-party dt { margin-bottom:5px; color:var(--muted); font:600 9px "Oswald",sans-serif; letter-spacing:.18em; text-transform:uppercase; } .legal-party dd { margin:0; font-size:14px; line-height:1.6; overflow-wrap:anywhere; } @media(max-width:720px) { .legal-content table { display:block; overflow-x:auto; } } /* --------------------------------------------------------------------------- MOBIL ACILIR MENU PublicMenu bileseni baglantilari duz olarak basar (nav-link sinifi yok), bu yuzden secicilerin tamami dogrudan .mobile-panel > a uzerinden kurulur. Aktif sayfa: taba solt seridi + taba metin + hafif taba zemin; boylece hem acik hem koyu temada hangi sayfada oldugumuz net gorunur. --------------------------------------------------------------------------- */ .mobile-panel { gap:0; } /* Panel artik kenardan kenara duz bir liste degil, basliktan inen bir yaprak: alt koseleri yuvarlatilmis, satirlar ic bosluk icinde birer hap. */ .mobile-panel.open { padding:10px 10px 12px; border-top:1px solid var(--line); border-radius:0 0 18px 18px; background:var(--surface); box-shadow:0 26px 46px rgba(21,26,28,.16); animation:mobile-panel-drop .26s cubic-bezier(.2,.75,.25,1); } .mobile-panel > a { position:relative; display:flex; align-items:center; min-height:54px; /* Sagda chevron, solda isaret seridi icin yer birakiliyor. */ padding:0 42px 0 34px; border-radius:12px; color:var(--text); font:600 14px "Oswald",sans-serif; letter-spacing:.06em; text-transform:uppercase; transition:color .18s ease, background .18s ease; } /* .nav-link sinifli hesap/sepet baglantilari ::after'i masaustu alt cizgisi olarak kuruyor; burada ayni pseudo yon oku olarak yeniden tanimlaniyor, bu yuzden devralinan left/right/bottom/background degerleri sifirlaniyor. */ .mobile-panel.open > a::after { content:""; position:absolute; left:auto; right:18px; top:50%; bottom:auto; width:7px; height:7px; background:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor; border-radius:1px; opacity:.3; translate:0 -50%; rotate:-45deg; transition:opacity .18s ease, translate .18s ease; } /* Soldaki isaret seridi her satirda soluk duruyor, hover'da uzuyor, aktif sayfada en uzun ve kalin hali; kartvizitteki "—" tireyle ayni dil. */ .mobile-panel > a::before { content:""; position:absolute; top:50%; left:14px; width:6px; height:2px; background:var(--accent); border-radius:2px; opacity:.3; translate:0 -50%; transform-origin:left; transition:width .22s cubic-bezier(.2,.75,.25,1), height .22s ease, opacity .18s ease; } .mobile-panel > a:hover, .mobile-panel > a:focus-visible { color:var(--accent-text); background:color-mix(in srgb, var(--accent) 9%, transparent); } .mobile-panel > a:hover::before, .mobile-panel > a:focus-visible::before { width:12px; opacity:1; } .mobile-panel.open > a:hover::after, .mobile-panel.open > a:focus-visible::after { opacity:.75; translate:3px -50%; } .mobile-panel > a.active { color:var(--accent-text); background:color-mix(in srgb, var(--accent) 14%, transparent); } .mobile-panel > a.active::before { width:18px; height:3px; opacity:1; } .mobile-panel.open > a.active::after { opacity:.6; } @keyframes mobile-panel-drop { from { opacity:0; translate:0 -10px; } to { opacity:1; translate:0 0; } } /* Satirlar panelle birlikte tek blok halinde degil, sirayla giriyor. backwards: gecikme suresince baslangic karesi uygulanir, aksi halde satirlar once tam gorunur olup sonra animasyona baslardi. */ @keyframes mobile-item-in { from { opacity:0; translate:0 -7px; } to { opacity:1; translate:0 0; } } .mobile-panel.open > a { animation:mobile-item-in .32s cubic-bezier(.2,.75,.25,1) backwards; } .mobile-panel.open > a:nth-child(1) { animation-delay:.04s; } .mobile-panel.open > a:nth-child(2) { animation-delay:.08s; } .mobile-panel.open > a:nth-child(3) { animation-delay:.12s; } .mobile-panel.open > a:nth-child(4) { animation-delay:.16s; } .mobile-panel.open > a:nth-child(5) { animation-delay:.20s; } .mobile-panel.open > a:nth-child(6) { animation-delay:.24s; } .mobile-panel.open > a:nth-child(7) { animation-delay:.28s; } .mobile-panel.open > a:nth-child(n+8) { animation-delay:.32s; } /* Hamburger ikonu: acikken carpiya doner. Buton 44px: dokunma hedefi icin onerilen alt sinir (eskiden 40px idi). Yuvarlatma 10px ile ust seritteki .exchange-card ile ayni dili konusuyor. Olcu yalnizca .menu-button'a verilseydi yanindaki sepet butonu 40px kalip hizasiz gorunurdu; bu yuzden header'daki tum ikon butonlarina uygulaniyor. */ .header-actions .icon-btn { min-width:44px; height:44px; border-radius:10px; } .menu-button .menu-icon { position:relative; display:block; width:20px; height:14px; } .menu-button .menu-icon i { position:absolute; left:0; width:100%; height:2px; border-radius:2px; background:currentColor; /* Cizgiler kendi merkezleri etrafinda donsun; varsayilan kose degil. */ transform-origin:center; transition:translate .28s cubic-bezier(.2,.75,.25,1), rotate .28s cubic-bezier(.2,.75,.25,1), opacity .16s ease; } .menu-button .menu-icon i:nth-child(1) { top:0; } .menu-button .menu-icon i:nth-child(2) { top:6px; } .menu-button .menu-icon i:nth-child(3) { top:12px; } /* Hover/odak: notr gri kutu yerine temanin vurgu rengine geciyor. color-mix ile zemin yalnizca bir tik tonlaniyor, blok gibi dolmuyor. */ .menu-button:hover { border-color:var(--accent); color:var(--accent-text); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); } .menu-button:focus-visible { border-color:var(--accent); color:var(--accent-text); } body.menu-open .menu-button { border-color:var(--accent); color:var(--accent-text); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); } body.menu-open .menu-button .menu-icon i:nth-child(1) { translate:0 6px; rotate:45deg; } body.menu-open .menu-button .menu-icon i:nth-child(2) { opacity:0; } body.menu-open .menu-button .menu-icon i:nth-child(3) { translate:0 -6px; rotate:-45deg; } @media (prefers-reduced-motion: reduce) { .mobile-panel.open { animation:none; } .mobile-panel.open > a { animation:none; } .mobile-panel > a::before, .mobile-panel.open > a::after, .menu-button .menu-icon i { transition:none; } } /* Bag/gidis oku: eski U+2197 ok karakterinin yerine gecen inline SVG ikon. currentColor ile boyanir, satir yuksekligine gore olceklenir ve uzerine gelindiginde hafifce kayar. */ .ico-arrow { width:1.05em; height:1.05em; flex:none; vertical-align:-.12em; transition:transform .25s ease; } :is(a,button,.btn):hover .ico-arrow, :is(a,button,.btn):focus-visible .ico-arrow { transform:translate(2px,-2px); } @media (prefers-reduced-motion: reduce) { .ico-arrow { transition:none; } }