/* BasicOS web -- Carsi (magaza) ve basicos.mihfar.com (tanitim + yonetim) * * Tek dosya, derleme adimi yok, dis font yok. Proje bastan sona sifir * bagimlilik; bir tipografi CDN'i eklemek hem bu ilkeyi bozar hem de * mobilde ilk boyamayi gereksiz yere geciktirir. Sistem yazi tipi yigini * telefonda zaten yerel gorunuyor. * * Duzen mobil oncelikli: temel kurallar dar ekran icin yazildi, genis * ekran eklemeleri medya sorgularinda. Ters yazilirsa telefon her zaman * "kucultulmus masaustu" gibi duruyor. * * Iki site ayni sistemi paylasiyor, yalnizca vurgu rengi degisiyor: * teal, varsayilan (Carsi) mavi. */ /* ============================================================ jetonlar === */ :root { /* Notr renkler hafifce maviye kacik: saf gri ekranda oluyor. */ --zemin: #f5f7fa; --yuzey: #ffffff; --yuzey2: #eef1f6; --cizgi: #dfe4ec; --cizgi-koyu: #c9d1de; --metin: #131923; --soluk: #59647a; --sonuk: #7c879b; --vurgu: #2f6bff; --vurgu-koyu: #1d51d6; --vurgu-sis: #e8efff; --yesil: #17803d; --yesil-sis: #e4f6ea; --sari: #8a6100; --sari-sis: #fdf3da; --kirmizi: #b3242f; --kirmizi-sis:#fde9ea; --r: 12px; --r-sm: 8px; --r-lg: 18px; --golge: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04); --golge-lg: 0 4px 6px -2px rgba(16, 24, 40, .05), 0 12px 20px -4px rgba(16, 24, 40, .10); --kap: 1060px; --yazi: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", "Helvetica Neue", Arial, sans-serif; --tek: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; } body[data-site="os"] { --vurgu: #0d9488; --vurgu-koyu: #0b7a70; --vurgu-sis: #e0f5f2; } @media (prefers-color-scheme: dark) { :root { --zemin: #0d1017; --yuzey: #151a23; --yuzey2: #1d2430; --cizgi: #28303e; --cizgi-koyu: #37414f; --metin: #e9edf4; --soluk: #97a3b8; --sonuk: #6f7c91; --vurgu: #5b8cff; --vurgu-koyu: #7ba3ff; --vurgu-sis: #17243f; --yesil: #5fd57c; --yesil-sis: #12301c; --sari: #e3bd6b; --sari-sis: #2f2510; --kirmizi: #f2848d; --kirmizi-sis:#33171b; --golge: 0 1px 2px rgba(0, 0, 0, .4); --golge-lg: 0 12px 28px -8px rgba(0, 0, 0, .55); } body[data-site="os"] { --vurgu: #2dd4bf; --vurgu-koyu: #5ee7d5; --vurgu-sis: #0d2b29; } } /* ============================================================== temel === */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--zemin); color: var(--metin); font: 16px/1.6 var(--yazi); -webkit-font-smoothing: antialiased; overflow-wrap: anywhere; } a { color: var(--vurgu); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; border-radius: 4px; } img { max-width: 100%; height: auto; } /* Yan tarafa kaymasi gereken her sey kendi kutusunda kaysin; sayfanin kendisi telefonda asla yatay kaymamali. */ .kap { width: 100%; max-width: var(--kap); margin: 0 auto; padding: 0 16px; } h1, h2, h3 { line-height: 1.25; text-wrap: balance; } h1 { font-size: 26px; margin: 0 0 8px; letter-spacing: -.02em; } h2 { font-size: 20px; margin: 32px 0 12px; letter-spacing: -.01em; } h3 { font-size: 16px; margin: 20px 0 8px; } p { margin: 0 0 14px; } .aciklama { color: var(--soluk); margin: 0 0 24px; } .aciklama:last-child { margin-bottom: 0; } hr { border: 0; border-top: 1px solid var(--cizgi); margin: 32px 0; } /* ============================================================ ust bant === */ header { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top); } .ust { display: flex; align-items: center; gap: 12px; min-height: 58px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; } .marka { display: flex; align-items: center; gap: 10px; color: var(--metin); font-weight: 650; margin-right: auto; min-width: 0; } .marka:hover { text-decoration: none; } .marka small { display: block; font-weight: 400; font-size: 11px; color: var(--sonuk); letter-spacing: .01em; } .marka-isaret { width: 34px; height: 34px; border-radius: 10px; background: var(--vurgu); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex: none; } /* Menu telefonda ikinci satira dusuyor ve gerekirse kendi icinde kayiyor: "hamburger" acmak icin JavaScript gerekirdi, bu kadar az baglanti icin degmez. */ header nav { order: 3; width: 100%; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; } header nav::-webkit-scrollbar { display: none; } header nav a { color: var(--soluk); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 999px; white-space: nowrap; } header nav a:hover { text-decoration: none; background: var(--yuzey2); } header nav a.etkin { color: var(--vurgu); background: var(--vurgu-sis); } .hesap { display: flex; align-items: center; gap: 8px; font-size: 14px; flex: none; } .hesap > a:first-child { color: var(--soluk); } /* ============================================================== govde === */ main { padding: 24px 0 56px; min-height: 55vh; } main.kap { padding-left: 16px; padding-right: 16px; } .kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px; box-shadow: var(--golge); /* Icindeki genis tablo karti degil kendini kaydirsin -- telefonda sayfanin tamaminin yana kaymasi en cok bundan oluyordu. */ overflow-x: auto; } .izgara { display: grid; gap: 14px; grid-template-columns: 1fr; } .uyari { padding: 12px 14px; border-radius: var(--r-sm); margin-bottom: 20px; font-size: 15px; border: 1px solid transparent; } .uyari.kirmizi { background: var(--kirmizi-sis); border-color: var(--kirmizi); color: var(--kirmizi); } .uyari.yesil { background: var(--yesil-sis); border-color: var(--yesil); color: var(--yesil); } .rozet { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .rozet.gri { background: var(--yuzey2); color: var(--soluk); } .rozet.yesil { background: var(--yesil-sis); color: var(--yesil); } .rozet.sari { background: var(--sari-sis); color: var(--sari); } .rozet.kirmizi { background: var(--kirmizi-sis);color: var(--kirmizi); } .etiket { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--vurgu); } /* ============================================================== tablo === */ /* Genis tablo telefonda sayfayi yana kaydirmasin diye kendi kutusunda. */ .tablo-kutu { overflow-x: auto; -webkit-overflow-scrolling: touch; } table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--cizgi); } th { color: var(--sonuk); font-weight: 600; font-size: 13px; white-space: nowrap; } tr:last-child td { border-bottom: none; } td.sayi, th.sayi { text-align: right; font-variant-numeric: tabular-nums; } /* =============================================================== form === */ label { display: block; margin: 16px 0 6px; font-size: 14px; font-weight: 500; color: var(--soluk); } input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], select, textarea { width: 100%; padding: 12px 14px; background: var(--yuzey); color: var(--metin); border: 1px solid var(--cizgi-koyu); border-radius: var(--r-sm); font-family: inherit; /* 16px altinda iOS Safari odaklanildiginda sayfayi yakinlastiriyor. */ font-size: 16px; line-height: 1.4; } textarea { min-height: 120px; resize: vertical; } input[type=file] { color: var(--soluk); font-size: 15px; max-width: 100%; } input::placeholder, textarea::placeholder { color: var(--sonuk); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--vurgu); box-shadow: 0 0 0 3px var(--vurgu-sis); } .dugme, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* Dokunma hedefi en az 44px: telefonda kucuk dugme isabet ettirilemiyor. */ min-height: 44px; padding: 11px 20px; background: var(--vurgu); color: #fff; border: 1px solid transparent; border-radius: var(--r-sm); font: inherit; font-weight: 550; cursor: pointer; text-align: center; } .dugme:hover, button:hover { background: var(--vurgu-koyu); text-decoration: none; color: #fff; } .dugme:active, button:active { transform: translateY(1px); } .dugme.kucuk, button.kucuk { min-height: 36px; padding: 7px 14px; font-size: 14px; } .dugme.sessiz, button.sessiz { background: var(--yuzey); color: var(--metin); border-color: var(--cizgi-koyu); } .dugme.sessiz:hover, button.sessiz:hover { background: var(--yuzey2); color: var(--metin); } .dugme.tehlike, button.tehlike { background: var(--kirmizi); } .dugme.tehlike:hover, button.tehlike:hover { background: var(--kirmizi); filter: brightness(.92); } button.baglanti { background: none; color: var(--soluk); padding: 0; min-height: 0; font-size: 15px; border: none; } button.baglanti:hover { background: none; color: var(--metin); text-decoration: underline; } .satir-ici { display: inline; } .form-dar { max-width: 440px; } .eylemler { display: flex; gap: 10px; margin-top: 22px; align-items: center; flex-wrap: wrap; } /* Telefonda tek dugmeli formlarda dugme tam genislik: basmasi kolay. */ @media (max-width: 560px) { .form-dar button, .form-dar .dugme { width: 100%; } .eylemler > form, .eylemler > form button { width: 100%; } } /* ================================================================ kod === */ pre, code { font-family: var(--tek); font-size: 13.5px; } pre { background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: var(--r-sm); padding: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; } code { background: var(--yuzey2); padding: 2px 6px; border-radius: 5px; } pre code { background: none; padding: 0; } .liste-kutu { max-height: 260px; overflow: auto; background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: var(--r-sm); padding: 10px 14px; font-size: 13px; font-family: var(--tek); color: var(--soluk); } /* ============================================================== footer === */ footer { border-top: 1px solid var(--cizgi); padding: 24px 0 calc(24px + env(safe-area-inset-bottom)); color: var(--sonuk); font-size: 14px; background: var(--yuzey); } footer .kap { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; } footer a { color: var(--soluk); } /* ============================================================== vitrin === */ /* Magaza basi: aramanin ve magazanin ne oldugunun tek yerde durdugu bant. Onceden arama kutusu sayfanin en ustunde ciplak duruyordu; telefonda ilk goruntude magazaya dair hicbir sey yoktu. Isletim sistemi sitesindeki .kahraman ile ayni yapi, farkli palet. */ .magaza-basi { border-radius: var(--r-lg); padding: 26px 20px; margin-bottom: 22px; color: #eef3ff; background: radial-gradient(115% 130% at 12% 0%, rgba(120, 160, 255, .38) 0%, transparent 55%), linear-gradient(150deg, #21356b 0%, #182a55 55%, #131d3a 100%); } .magaza-basi h1 { margin: 0 0 6px; font-size: 24px; color: #fff; letter-spacing: -.02em; } .magaza-basi p { margin: 0 0 18px; color: #a9bce6; max-width: 52ch; } .magaza-basi .etiket { color: #93b4ff; } .magaza-basi .ara-satir { margin: 0; } .magaza-basi .ara-satir input { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22); color: #fff; } .magaza-basi .ara-satir input::placeholder { color: #93a7d1; } .magaza-basi .ara-satir input:focus { border-color: #93b4ff; box-shadow: 0 0 0 3px rgba(147, 180, 255, .22); } .magaza-basi .ara-satir button { background: #fff; color: #1b2a52; } .magaza-basi .ara-satir button:hover { background: #e6ecfb; color: #1b2a52; } .magaza-olcu { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); } .magaza-olcu span { display: flex; flex-direction: column; } .magaza-olcu b { font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; } .magaza-olcu small { font-size: 11px; color: #93a7d1; text-transform: uppercase; letter-spacing: .07em; } /* ------------------------------------------------------------- kimlik --- */ /* Giris ve kayit: sayfanin geri kalani yokken form ortada dursun. Onceden kart sol ustte asili kaliyordu ve telefonda basliksiz bir forma benziyordu. */ .kimlik { max-width: 420px; margin: 0 auto; padding: 8px 0 40px; } .kimlik-basi { text-align: center; margin-bottom: 22px; } .kimlik-basi .marka-isaret { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; margin: 0 auto 12px; } .kimlik-basi h1 { font-size: 24px; margin: 0 0 6px; } .kimlik-basi p { color: var(--soluk); margin: 0; } .kimlik .kart { padding: 22px; } .kimlik .kart label:first-of-type { margin-top: 0; } .kimlik .eylemler { margin-top: 22px; } .kimlik .eylemler button { width: 100%; } .kimlik-alt { text-align: center; color: var(--soluk); margin: 18px 0 0; font-size: 15px; } .ara-satir { display: flex; gap: 8px; margin: 0 0 16px; } .ara-satir input { flex: 1; min-width: 0; } .ara-satir button { flex: none; } .cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 24px; padding: 2px 16px 6px; } .cipler::-webkit-scrollbar { display: none; } .cip { padding: 8px 16px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); color: var(--soluk); font-size: 14px; font-weight: 500; white-space: nowrap; } .cip:hover { text-decoration: none; color: var(--metin); } .cip.etkin { background: var(--vurgu); border-color: var(--vurgu); color: #fff; } .one-cikan { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 22px; margin-bottom: 30px; box-shadow: var(--golge); } .one-cikan-ic { display: flex; gap: 18px; align-items: flex-start; } /* Esnek kutunun varsayilan min-width'i "auto": icindeki tek satirlik kurulum komutu kutuyu ekrandan tasiriyordu. min-width:0 daralmasina izin veriyor, komut kendi icinde kayiyor. */ .one-cikan-ic > * { min-width: 0; } .one-cikan .simge { border-radius: 20px; flex: none; } .one-cikan h2 { margin: 6px 0 4px; font-size: 22px; } .one-cikan p { margin: 0 0 16px; color: var(--soluk); } .kur-komut { display: inline-block; padding: 9px 13px; background: var(--yuzey2); border: 1px solid var(--cizgi); border-radius: var(--r-sm); font-family: var(--tek); font-size: 13px; color: var(--soluk); max-width: 100%; overflow-x: auto; white-space: nowrap; } .sira { margin-bottom: 30px; } .sira h2 { margin: 0 0 14px; font-size: 18px; } /* Yatay sira kenardan kenara kaysin: telefonda "devami var" hissi verir. */ .sira-kutu { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -16px; padding: 2px 16px 10px; } .sira-kutu::-webkit-scrollbar { display: none; } .sira-kutu .uyg-kart { flex: 0 0 260px; scroll-snap-align: start; } .izgara-kart { display: grid; gap: 12px; grid-template-columns: 1fr; } .uyg-kart { display: flex; gap: 14px; align-items: center; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px; color: inherit; box-shadow: var(--golge); } .uyg-kart:hover { text-decoration: none; border-color: var(--vurgu); } .uyg-kart .simge { border-radius: 13px; flex: none; } .uyg-kart-metin { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .uyg-kart-metin strong { font-size: 15px; } .uyg-kart-metin span, .uyg-kart-metin small { color: var(--soluk); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .uyg-kart-metin small { font-size: 12px; color: var(--sonuk); } .simge { background: var(--yuzey2); } .simge.yedek { display: inline-block; text-align: center; color: var(--sonuk); font-weight: 700; border-radius: 13px; } .uyg { display: flex; gap: 14px; align-items: flex-start; } .uyg .simge { border-radius: 12px; flex: none; } .uyg h3 { margin: 0 0 2px; font-size: 16px; } .uyg p { margin: 0; color: var(--soluk); font-size: 14px; } .uyg .alt { margin-top: 8px; font-size: 12px; color: var(--sonuk); display: flex; gap: 12px; } /* ==================================================== uygulama sayfasi === */ .uyg-basi { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-lg); padding: 20px; margin-bottom: 28px; box-shadow: var(--golge); } .uyg-basi .simge { border-radius: 20px; flex: none; } .uyg-basi-metin { flex: 1 1 240px; min-width: 0; } .uyg-basi h1 { margin: 0 0 4px; font-size: 24px; } .uyg-ozet { margin: 0 0 16px; color: var(--soluk); } .uyg-olcu { display: flex; gap: 22px; flex-wrap: wrap; } .uyg-olcu span { display: flex; flex-direction: column; } .uyg-olcu b { font-size: 15px; font-variant-numeric: tabular-nums; } .uyg-olcu small { color: var(--sonuk); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .uyg-basi-eylem { display: flex; flex-direction: column; gap: 8px; align-items: stretch; text-align: center; flex: 1 1 100%; } .uyg-basi-eylem .aciklama { font-size: 12px; margin: 0; } .galeri { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; margin: 0 -16px; padding: 0 16px 10px; } .galeri::-webkit-scrollbar { display: none; } .galeri img { height: 220px; width: auto; border-radius: 10px; border: 1px solid var(--cizgi); background: var(--yuzey2); scroll-snap-align: start; } .galeri a:hover img { border-color: var(--vurgu); } /* ===================================================== isletim sistemi === */ /* Kahraman bant: isletim sisteminin kendi duvar kagidi paletinden. */ .kahraman { position: relative; border-radius: var(--r-lg); padding: 40px 22px; margin-bottom: 34px; color: #eafffb; background: radial-gradient(120% 130% at 15% 0%, rgba(45, 212, 191, .35) 0%, transparent 55%), linear-gradient(155deg, #10403c 0%, #0c2b34 55%, #0a1b26 100%); overflow: hidden; } .kahraman h1 { font-size: 32px; letter-spacing: -.03em; margin: 0 0 12px; color: #fff; } .kahraman p { color: #b9d9d4; font-size: 17px; margin: 0 0 8px; max-width: 46ch; } .kahraman .etiket { color: #5eead4; } .kahraman .eylemler { margin-top: 24px; } .kahraman .dugme.sessiz { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #eafffb; } .kahraman .dugme.sessiz:hover { background: rgba(255, 255, 255, .16); color: #fff; } .kahraman-olcu { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); } .kahraman-olcu span { display: flex; flex-direction: column; } .kahraman-olcu b { font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; } .kahraman-olcu small { font-size: 11px; color: #8fbdb6; text-transform: uppercase; letter-spacing: .07em; } .ozellikler { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 34px; } .ozellik { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 20px; box-shadow: var(--golge); } .ozellik h3 { margin: 0 0 6px; font-size: 16px; } .ozellik p { margin: 0; color: var(--soluk); font-size: 15px; } .ozellik .im { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--vurgu-sis); color: var(--vurgu); font-size: 19px; margin-bottom: 14px; } /* Surum gunlugu: solda ince bir dikey cizgi, uzerinde noktalar. */ .gunluk { position: relative; padding-left: 26px; } .gunluk::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--cizgi); } .gunluk-oge { position: relative; padding-bottom: 26px; } .gunluk-oge::before { content: ""; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--yuzey); border: 2px solid var(--cizgi-koyu); } .gunluk-oge.son::before { background: var(--vurgu); border-color: var(--vurgu); } .gunluk-oge h3 { margin: 0 0 2px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .gunluk-oge .tarih { color: var(--sonuk); font-size: 13px; font-weight: 400; } .gunluk-oge p { margin: 6px 0 0; color: var(--soluk); } .indirme-kart { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 18px; box-shadow: var(--golge); margin-bottom: 14px; } .indirme-kart .bilgi { flex: 1 1 220px; min-width: 0; } .indirme-kart .bilgi strong { display: block; font-size: 16px; } .indirme-kart .bilgi span { color: var(--sonuk); font-size: 13px; font-variant-numeric: tabular-nums; } .indirme-kart .dugme { flex: none; } /* Uzun sha256 telefonda satiri patlatiyor: kendi kutusunda kaysin. */ .ozet-kod { display: block; margin-top: 6px; font-family: var(--tek); font-size: 12px; color: var(--sonuk); overflow-x: auto; white-space: nowrap; } /* ============================================================= yonetim === */ .yonetim-izgara { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-bottom: 26px; } .olcu-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--golge); } .olcu-kart b { display: block; font-size: 26px; line-height: 1.2; font-variant-numeric: tabular-nums; } .olcu-kart small { color: var(--sonuk); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .sekmeler { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--cizgi); margin: 0 -16px 22px; padding: 0 16px; } .sekmeler::-webkit-scrollbar { display: none; } .sekmeler a { padding: 12px 14px; color: var(--soluk); font-size: 15px; font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; } .sekmeler a:hover { text-decoration: none; color: var(--metin); } .sekmeler a.etkin { color: var(--vurgu); border-bottom-color: var(--vurgu); } /* ============================================================== genis === */ @media (min-width: 620px) { h1 { font-size: 30px; } .izgara { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .izgara-kart { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } .ozellikler { grid-template-columns: repeat(2, 1fr); } .yonetim-izgara { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .kahraman { padding: 52px 34px; } .kahraman h1 { font-size: 40px; } .galeri img { height: 280px; } .uyg-basi-eylem { flex: 0 0 240px; } } @media (min-width: 900px) { .kap { padding: 0 24px; } main.kap { padding-left: 24px; padding-right: 24px; } header nav { order: 0; width: auto; margin: 0; padding: 0; overflow: visible; } .marka { margin-right: 12px; } .ust { min-height: 66px; flex-wrap: nowrap; } .ozellikler { grid-template-columns: repeat(3, 1fr); } .kahraman { padding: 64px 44px; } .kahraman h1 { font-size: 46px; } .cipler, .sira-kutu, .galeri, .sekmeler { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .dugme:active, button:active { transform: none; } }