/* ============================================================= AKEN MÜHENDİSLİK — assets/css/site.css Sitenin tüm ortak stilleri. Tarayıcı bir kez indirir, önbelleğe alır. Bu dosya ELLE düzenlenir. Panelden yönetilen değerler (marka rengi, üst şerit, köşe yuvarlaklığı, logo yüksekliği) burada DEĞİL; her sayfanın bölümünde :root olarak basılır ve buradaki kuralları besler. ============================================================= */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%} body{ margin:0;font-family:'IBM Plex Sans',system-ui,sans-serif; background:var(--kagit);color:var(--gri-900); overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh; font-size:16px;line-height:1.6; } h1,h2,h3,h4{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-.02em;line-height:1.12;margin:0} h1{font-weight:800} h2,h3{font-weight:700} a{color:inherit} /* Kart, harita satırı gibi blok bağlantılarda tarayıcı varsayılanı (mavi + altı çizili) istenmez; metin rengi içeriden gelir. */ a.kart,a.kart *{text-decoration:none;color:inherit} /* Sayısal değerler — kapasite, debi, yıl, adet: hepsi veri, hepsi mono */ .veri{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} /* Bölüm etiketi: içeriğe dair bir şey söyler, süs değil */ .goz-etiketi{ font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--gri-500); display:inline-flex;align-items:center;gap:.55rem; } .goz-etiketi::before{content:'';width:1.75rem;height:1px;background:var(--marka);flex-shrink:0} ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:var(--gri-100)} ::-webkit-scrollbar-thumb{background:var(--gri-400);border-radius:0} ::-webkit-scrollbar-thumb:hover{background:var(--gri-500)} /* ── Odak görünürlüğü ─────────────────────────────────────── */ a:focus-visible,button:focus-visible,input:focus-visible, select:focus-visible,textarea:focus-visible{ outline:2px solid var(--marka);outline-offset:2px;border-radius:2px; } /* ── Kap ──────────────────────────────────────────────────── */ .kap{max-width:1180px;margin:0 auto;padding-inline:var(--olcu-4)} @media (min-width:768px){.kap{padding-inline:var(--olcu-8)}} /* ── Düğmeler ─────────────────────────────────────────────── */ .dugme{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem; padding:.85rem 1.6rem;border:1.5px solid transparent;border-radius:var(--kose); text-decoration:none;cursor:pointer;transition:background .18s,color .18s,border-color .18s; } .dugme-ana{background:var(--marka);color:#fff} .dugme-ana:hover{background:var(--marka-koyu)} .dugme-cizgi{background:transparent;color:var(--gri-900);border-color:var(--gri-200)} .dugme-cizgi:hover{border-color:var(--gri-900);background:#fff} .dugme-acik{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)} .dugme-acik:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)} /* ── Kart ─────────────────────────────────────────────────── */ .kart{ display:block;background:#fff;border:1px solid var(--gri-200); border-radius:calc(var(--kose) * .75); transition:border-color .18s,box-shadow .18s,transform .18s; } a.kart:hover{border-color:var(--marka);box-shadow:0 10px 30px -18px rgba(14,23,32,.4);transform:translateY(-2px)} /* ── Formlar ──────────────────────────────────────────────── */ .alan{ width:100%;background:#fff;border:1.5px solid var(--gri-200);border-radius:var(--kose); padding:.8rem .95rem;font-size:.92rem;font-family:inherit;color:var(--gri-900); transition:border-color .15s,box-shadow .15s; } .alan:focus{outline:none;border-color:var(--marka);box-shadow:0 0 0 3px rgba(0,151,215,.12)} .alan-hata{border-color:#dc2626} .etiket{ display:block;font-family:'IBM Plex Mono',monospace;font-size:.68rem;font-weight:500; letter-spacing:.1em;text-transform:uppercase;color:var(--gri-500);margin-bottom:.4rem; } /* ── Sayfa başlığı şeridi ─────────────────────────────────── */ .serit{ background:#fff;border-bottom:1px solid var(--gri-200); padding-block:var(--olcu-8); } /* ── Hareket ──────────────────────────────────────────────── */ /* Belirme efekti yalnızca JS varken uygulanır — JS kapalıysa içerik olduğu gibi görünür kalır (ilerleyici geliştirme). */ .js .beliren{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease} .js .beliren.gorundu{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .js .beliren{opacity:1;transform:none} } /* ── Klavye ile içeriğe atlama ────────────────────────────── */ .atla{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--marka);color:#fff;padding:.7rem 1.2rem; font-family:'Archivo',sans-serif;font-weight:600;font-size:.85rem;text-decoration:none; } .atla:focus{left:0} /* ═══ ZENGİN METİN ══════════════════════════════════════════ Panelden girilen HTML içerik (sayfa, üretim hattı, ürün açıklaması). Kap tam genişlikte durur; yalnızca düz paragraf satırı okunur uzunlukta tutulur. Galeri, görsel ve tablolar kabın tamamını kullanır. */ .metin{color:var(--gri-700);line-height:1.85;font-size:.98rem} .metin > p, .metin > ul, .metin > ol{max-width:76ch} .metin p{margin:0 0 var(--olcu-4)} .metin p:last-child{margin-bottom:0} .metin h2,.metin h3{color:var(--gri-900);margin:var(--olcu-8) 0 var(--olcu-3);max-width:76ch} .metin h2{font-size:1.25rem} .metin h3{font-size:1.05rem} .metin ul,.metin ol{margin:0 0 var(--olcu-4);padding-left:1.3rem} .metin li{margin-bottom:.4rem} .metin a{color:var(--marka)} .metin strong{color:var(--gri-900)} /* İçerik sayfası: görsel varsa metin yanında sabit bir sütunda durur */ .sayfa-duzen{display:grid;grid-template-columns:1fr;gap:var(--olcu-8)} .sayfa-gorsel{order:-1} @media (min-width:900px){ .sayfa-duzen{grid-template-columns:1fr 22rem;gap:var(--olcu-12);align-items:start} .sayfa-gorsel{order:0;position:sticky;top:6rem} } /* Satır uzunluğunu düzenin kendisi belirliyorsa ek sınıra gerek yok */ .metin-genis > p, .metin-genis > ul, .metin-genis > ol, .metin-genis h2, .metin-genis h3{max-width:none} .metin img{max-width:100%;height:auto;border-radius:calc(var(--kose) * .6)} .metin table{width:100%;border-collapse:collapse;margin:0 0 var(--olcu-4);font-size:.9rem} .metin th,.metin td{border:1px solid var(--gri-200);padding:.6rem .8rem;text-align:left} .metin th{background:var(--kagit);font-weight:600} /* ═══ GALERİ ════════════════════════════════════════════════ */ .galeri{ display:grid;gap:var(--olcu-3);margin:var(--olcu-6) 0; /* Dar ekranda en fazla 2; sütun 1 seçilmişse orada da tek kalır */ grid-template-columns:repeat(min(var(--galeri-sutun,3),2),1fr); } @media (min-width:640px){ .galeri{grid-template-columns:repeat(min(var(--galeri-sutun,3),3),1fr)} } @media (min-width:960px){ .galeri{grid-template-columns:repeat(var(--galeri-sutun,3),1fr)} } .galeri-oge{ position:relative;display:block;overflow:hidden;background:var(--gri-100); border-radius:calc(var(--kose) * .6);aspect-ratio:4/3;cursor:zoom-in; border:1px solid var(--gri-200); } /* Tek sütunda kare oran sayfayı gereksiz uzatır; geniş kırpım daha uygun */ .galeri[style*="--galeri-sutun:1"] .galeri-oge{aspect-ratio:21/9} .galeri-oge img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .4s cubic-bezier(.4,0,.2,1); } .galeri-oge:hover img{transform:scale(1.05)} .galeri-yazi{ position:absolute;left:0;right:0;bottom:0;padding:1.6rem .8rem .6rem; font-size:.78rem;color:#fff;line-height:1.4; background:linear-gradient(180deg,transparent,rgba(14,23,32,.85)); } /* ── Ön izleme şeridi ─────────────────────────────────────── */ .onizleme-serit{position:sticky;top:0;z-index:60;display:flex;align-items:center; justify-content:center;gap:.7rem;flex-wrap:wrap; padding:.6rem 1rem;background:#0e7490;color:#fff; font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.74rem; letter-spacing:.09em;text-align:center} .onizleme-serit.taslak{background:#b45309} .onizleme-serit a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .onizleme-nokta{width:.55rem;height:.55rem;border-radius:50%;background:#fff;flex-shrink:0; animation:onizleme-yanip 1.6s ease-in-out infinite} @keyframes onizleme-yanip{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){ .onizleme-nokta{animation:none} } /* ── Referans logoları ────────────────────────────────────── */ .ref-izgara{display:grid;gap:var(--olcu-4);grid-template-columns:repeat(2,1fr)} @media (min-width:560px){.ref-izgara{grid-template-columns:repeat(3,1fr)}} @media (min-width:900px){.ref-izgara{grid-template-columns:repeat(var(--ref-sutun,5),1fr)}} .ref-kart{display:flex;flex-direction:column;align-items:center;gap:.55rem; padding:var(--olcu-5) var(--olcu-4);background:#fff;text-decoration:none; border:1px solid var(--gri-200);border-radius:calc(var(--kose,8px) * .6); transition:border-color .18s,box-shadow .18s,transform .18s} a.ref-kart:hover{border-color:var(--marka);box-shadow:0 8px 22px rgba(14,23,32,.08);transform:translateY(-2px)} .ref-pasif{opacity:.72} /* Logo KIRPILMAZ — kutuya sığdırılır */ .ref-logo{display:flex;align-items:center;justify-content:center; width:100%;height:4.6rem;overflow:hidden} .ref-logo img{max-width:100%;max-height:100%;width:auto;height:auto; object-fit:contain;display:block;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s} a.ref-kart:hover .ref-logo img{filter:none;opacity:1} .ref-yazi{font-size:.8rem;font-weight:700;color:var(--gri-600);text-align:center;line-height:1.3} .ref-ad{font-size:.78rem;font-weight:600;color:var(--gri-800);text-align:center;line-height:1.35} .ref-adet{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.66rem; letter-spacing:.08em;color:var(--marka)} /* ── Kurumsal bölümler (misyon / vizyon / kalite / tarihçe) ── */ .kur-bloklar{display:grid;gap:var(--olcu-6);margin:var(--olcu-8) 0} @media (min-width:820px){.kur-bloklar{grid-template-columns:repeat(2,1fr)}} .kur-blok{background:#fff;border:1px solid var(--gri-200); border-radius:calc(var(--kose,8px) * .6);padding:var(--olcu-6) var(--olcu-6) var(--olcu-5)} .kur-blok-ust{display:flex;align-items:center;gap:.75rem;margin-bottom:var(--olcu-4); padding-bottom:var(--olcu-4);border-bottom:1px solid var(--gri-100)} .kur-blok-ikon{display:flex;align-items:center;justify-content:center; width:2.6rem;height:2.6rem;border-radius:50%;flex-shrink:0; background:color-mix(in srgb,var(--marka) 12%,#fff);color:var(--marka)} .kur-blok-baslik{font-size:1.05rem;font-weight:800;margin:0;color:var(--gri-900)} .kur-blok-metin{font-size:.92rem;line-height:1.75;color:var(--gri-700)} .kur-blok-metin > :last-child{margin-bottom:0} /* Blok sayısı TEK ise sonuncusu iki sütunu birden kaplar — yanında boş yarım kutu kalmasın (1 blok, 3 blok, 5 blok…). */ .kur-bloklar > .kur-blok:last-child:nth-child(odd){grid-column:1 / -1} .galeri-uyari{ background:#fef2f2;border:1px solid #fecaca;color:#b91c1c; padding:.6rem .9rem;border-radius:var(--kose);font-size:.85rem; } /* ── Büyütme katmanı ──────────────────────────────────────── */ #buyutec{ position:fixed;inset:0;z-index:200;display:none; align-items:center;justify-content:center; background:rgba(8,14,20,.94);padding:var(--olcu-4); } #buyutec.acik{display:flex} #buyutec img{ max-width:min(100%,1400px);max-height:82vh;object-fit:contain;display:block; border-radius:calc(var(--kose) * .5); } .buyutec-yazi{ position:absolute;left:0;right:0;bottom:1.2rem;text-align:center; color:rgba(255,255,255,.85);font-size:.85rem;padding-inline:4rem; } .buyutec-dugme{ position:absolute;display:flex;align-items:center;justify-content:center; width:2.9rem;height:2.9rem;border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);color:#fff;cursor:pointer; border-radius:var(--kose);transition:background .18s; } .buyutec-dugme:hover{background:var(--marka);border-color:var(--marka)} .buyutec-dugme svg{width:1.2rem;height:1.2rem} .buyutec-kapat{top:1.2rem;right:1.2rem} .buyutec-onceki{left:1.2rem;top:50%;transform:translateY(-50%)} .buyutec-sonraki{right:1.2rem;top:50%;transform:translateY(-50%)} .buyutec-sayac{ position:absolute;top:1.5rem;left:1.5rem; font-family:'IBM Plex Mono',monospace;font-size:.75rem;color:rgba(255,255,255,.55); } @media (max-width:640px){ .buyutec-dugme{width:2.4rem;height:2.4rem} .buyutec-onceki{left:.5rem} .buyutec-sonraki{right:.5rem} .buyutec-yazi{padding-inline:1rem;font-size:.78rem} } /* ═══ PARTNERLER ════════════════════════════════════════════ */ .partnerler{ display:grid;gap:var(--olcu-4);margin:var(--olcu-6) auto; grid-template-columns:repeat(2,1fr);align-items:center; /* Az sayıda logo tüm genişliğe yayılıp seyrek durmasın */ max-width:calc(var(--partner-sutun,5) * 15rem); } @media (min-width:640px){ .partnerler{grid-template-columns:repeat(min(var(--partner-sutun,5),3),1fr)} } @media (min-width:960px){ .partnerler{grid-template-columns:repeat(var(--partner-sutun,5),1fr)} } .partner{ display:flex;align-items:center;justify-content:center; padding:var(--olcu-4);background:#fff;border:1px solid var(--gri-200); border-radius:calc(var(--kose) * .75);min-height:5.5rem; transition:border-color .18s,box-shadow .18s; } a.partner:hover{border-color:var(--marka);box-shadow:0 8px 24px -16px rgba(14,23,32,.4)} .partner img{ max-width:100%;max-height:3.2rem;object-fit:contain;display:block; filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s; } a.partner:hover img{filter:none;opacity:1} /* ── Kayan partner şeridi (logo sayısı eşiği geçince) ─────── */ .partner-serit{ overflow:hidden;margin:var(--olcu-6) 0; /* Kenarlarda yumuşak geçiş: logolar aniden kesilmesin */ -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); } .partner-ray{ display:flex;width:max-content; animation:partner-ak var(--serit-sure,30s) linear infinite; } .partner-serit:hover .partner-ray, .partner-serit:focus-within .partner-ray{animation-play-state:paused} .partner-kume{display:flex;gap:var(--olcu-4);padding-right:var(--olcu-4)} .partner-kume .partner{width:11rem;flex:0 0 auto} @keyframes partner-ak{ from{transform:translateX(0)} to{transform:translateX(-50%)} } @media (prefers-reduced-motion:reduce){ /* Hareket istenmiyorsa şerit durur, logolar sarılarak görünür */ .partner-ray{animation:none;flex-wrap:wrap;width:100%} .partner-kume[aria-hidden="true"]{display:none} .partner-kume{flex-wrap:wrap;justify-content:center} .partner-serit{-webkit-mask-image:none;mask-image:none} } /* ═══ SLIDER ════════════════════════════════════════════════ */ .slider{ position:relative;overflow:hidden;background:var(--gri-900); height:clamp(30rem,64vh,40rem); } .slider-ray{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)} .js-kapali .slider-ray{transition:none} .slayt{ position:relative;flex:0 0 100%;width:100%;height:100%; display:flex;align-items:center;overflow:hidden; } .slayt-gorsel,.slayt-gorsel img{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;display:block; } /* Perde: soldan sağa azalan koyuluk — metin okunur, fotoğraf açıkta kalır */ .slayt-perde{ position:absolute;inset:0; background:linear-gradient(90deg, rgba(14,23,32,calc(var(--perde) + .35)) 0%, rgba(14,23,32,var(--perde)) 45%, rgba(14,23,32,calc(var(--perde) * .45)) 100%); } .slayt.sl-orta .slayt-perde{ background:linear-gradient(180deg, rgba(14,23,32,calc(var(--perde) * .5)) 0%, rgba(14,23,32,calc(var(--perde) + .2)) 100%); } .slayt.sl-sag .slayt-perde{ background:linear-gradient(270deg, rgba(14,23,32,calc(var(--perde) + .35)) 0%, rgba(14,23,32,var(--perde)) 45%, rgba(14,23,32,calc(var(--perde) * .45)) 100%); } .slayt-ic{position:relative;width:100%;z-index:2} .slayt-metin{max-width:38rem;color:#fff} .slayt.sl-orta .slayt-metin{margin-inline:auto;text-align:center} .slayt.sl-sag .slayt-metin{margin-left:auto;text-align:right} .slayt-ust{ display:inline-flex;align-items:center;gap:.55rem; font-family:'IBM Plex Mono',monospace;font-size:.7rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.75); margin-bottom:var(--olcu-4); } .slayt-ust::before{content:'';width:1.75rem;height:1px;background:var(--marka)} .slayt.sl-sag .slayt-ust{flex-direction:row-reverse} .slayt.sl-orta .slayt-ust::before{display:none} .slayt-baslik{ font-size:clamp(1.75rem,4.2vw,3rem);line-height:1.1; text-shadow:0 2px 24px rgba(0,0,0,.35); } .slayt-ac{ margin:var(--olcu-4) 0 0;font-size:1rem;line-height:1.7; color:rgba(255,255,255,.82);max-width:34rem; text-shadow:0 1px 12px rgba(0,0,0,.35); } .slayt.sl-orta .slayt-ac{margin-inline:auto} .slayt.sl-sag .slayt-ac{margin-left:auto} .slayt-dugmeler{display:flex;flex-wrap:wrap;gap:var(--olcu-3);margin-top:var(--olcu-8)} .slayt.sl-orta .slayt-dugmeler{justify-content:center} .slayt.sl-sag .slayt-dugmeler{justify-content:flex-end} /* İçerik geçişte hafifçe belirir */ .js .slayt-metin>*{opacity:0;transform:translateY(12px)} .js .slayt.gorunur .slayt-metin>*{ opacity:1;transform:none; transition:opacity .5s ease,transform .5s ease; } .js .slayt.gorunur .slayt-metin>*:nth-child(1){transition-delay:.12s} .js .slayt.gorunur .slayt-metin>*:nth-child(2){transition-delay:.20s} .js .slayt.gorunur .slayt-metin>*:nth-child(3){transition-delay:.28s} .js .slayt.gorunur .slayt-metin>*:nth-child(4){transition-delay:.36s} /* ── Oklar ────────────────────────────────────────────────── */ .slider-ok{ position:absolute;top:50%;transform:translateY(-50%);z-index:3;border-radius:var(--kose); width:2.9rem;height:2.9rem;display:flex;align-items:center;justify-content:center; background:rgba(14,23,32,.4);border:1px solid rgba(255,255,255,.25); color:#fff;cursor:pointer;transition:background .18s,border-color .18s; } .slider-ok:hover{background:var(--marka);border-color:var(--marka)} .slider-ok svg{width:1.15rem;height:1.15rem} .slider-onceki{left:var(--olcu-4)} .slider-sonraki{right:var(--olcu-4)} /* ── Noktalar ─────────────────────────────────────────────── */ .slider-noktalar{ position:absolute;bottom:var(--olcu-6);left:50%;transform:translateX(-50%); z-index:3;display:flex;gap:.5rem; } .slider-nokta{ width:2.2rem;height:3px;padding:0;border:0;cursor:pointer; background:rgba(255,255,255,.35);transition:background .2s; } .slider-nokta:hover{background:rgba(255,255,255,.6)} .slider-nokta.etkin{background:var(--marka)} @media (max-width:900px){ .slider{height:clamp(26rem,72vh,34rem)} .slider-ok{width:2.4rem;height:2.4rem} .slider-onceki{left:.5rem} .slider-sonraki{right:.5rem} .slayt-metin{max-width:none} .slayt.sl-sag .slayt-metin{margin-left:0;text-align:left} .slayt.sl-sag .slayt-ust{flex-direction:row} .slayt.sl-sag .slayt-ac{margin-left:0} .slayt.sl-sag .slayt-dugmeler{justify-content:flex-start} .slayt-perde,.slayt.sl-sag .slayt-perde{ background:linear-gradient(180deg, rgba(14,23,32,calc(var(--perde) * .6)) 0%, rgba(14,23,32,calc(var(--perde) + .3)) 100%); } .slayt-dugmeler .dugme{flex:1 1 auto;justify-content:center} } @media (prefers-reduced-motion:reduce){ .slider-ray{transition:none} .js .slayt-metin>*{opacity:1;transform:none} } /* ═══ ÜST ŞERİT ═════════════════════════════════════════════ */ .ust-serit{background:var(--serit-zemin);color:var(--serit-metin);font-size:.78rem} .ust-ic{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; gap:var(--olcu-3);padding-block:.5rem} .ust-sol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--olcu-5)} .ust-sag{display:flex;align-items:center;gap:var(--olcu-4)} .ust-link{display:inline-flex;align-items:center;gap:.45rem;color:inherit; text-decoration:none;transition:color .15s} .ust-link:hover{color:#fff;opacity:1} .ust-ikon{width:.95rem;height:.95rem;flex-shrink:0;color:var(--marka)} /* ── Sosyal medya ─────────────────────────────────────────── */ .sosyal{display:inline-flex;align-items:center;gap:.15rem} .sosyal-link{display:inline-flex;align-items:center;justify-content:center; width:1.85rem;height:1.85rem;border-radius:999px;color:inherit;opacity:.72; transition:opacity .15s,background .15s,color .15s} .sosyal-link svg{width:.95rem;height:.95rem;display:block} .sosyal-link:hover{opacity:1;color:#fff;background:rgba(255,255,255,.12)} .alt-sosyal{display:flex;gap:.3rem;margin-top:var(--olcu-5)} .alt-sosyal .sosyal-link{width:2.2rem;height:2.2rem;border:1px solid rgba(255,255,255,.14)} .alt-sosyal .sosyal-link svg{width:1.05rem;height:1.05rem} @media (max-width:640px){ .sosyal-link{width:1.6rem;height:1.6rem} } /* ── Dil seçici (bayraklı) ────────────────────────────────── */ .dil-secici{display:flex;align-items:center;gap:.15rem} .dil-oge{ display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .45rem; border-radius:2px;text-decoration:none;color:rgba(255,255,255,.45); font-size:.68rem;font-weight:700;letter-spacing:.06em; transition:color .15s,background .15s; } .dil-oge img{ display:block;width:20px;height:14px;object-fit:cover; border:1px solid rgba(255,255,255,.28);border-radius:1px; filter:saturate(.35);opacity:.6;transition:filter .15s,opacity .15s; } .dil-oge:hover{color:#fff;background:rgba(255,255,255,.07)} .dil-oge:hover img{filter:none;opacity:1} .dil-oge.etkin{color:#fff} .dil-oge.etkin img{filter:none;opacity:1;border-color:rgba(255,255,255,.6)} @media (max-width:480px){.dil-kod{display:none}} /* ═══ ANA BAŞLIK ════════════════════════════════════════════ */ .tepe{background:var(--tepe-zemin);border-bottom:1px solid var(--tepe-cizgi);position:sticky;top:0;z-index:50} .tepe-ic{display:flex;justify-content:space-between;align-items:center; gap:var(--olcu-4);padding-block:var(--olcu-4)} .tepe-sag{display:flex;align-items:center;gap:var(--olcu-2)} .marka{text-decoration:none;flex-shrink:0;display:flex;align-items:center} .marka-gorsel{height:var(--logo-h,34px);width:auto;display:block} .marka-cizgi{width:.35rem;height:1.6rem;background:var(--marka);display:block;margin-right:.55rem} .marka-yazi{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.35rem; letter-spacing:-.03em;color:var(--tepe-metin);white-space:nowrap} @media (min-width:960px) and (max-width:1339px){ .marka-yazi{font-size:1.12rem} } /* Menü uzun olduğunda logo da bir tık küçülsün, üst çubuk tek satır kalsın */ @media (min-width:960px) and (max-width:1339px){ .marka-gorsel{height:calc(var(--logo-h,34px) * .82)} } .marka-yazi span{opacity:.55} /* ── Ana menü ─────────────────────────────────────────────── */ .ana-nav{display:none;align-items:center;gap:var(--olcu-6)} /* Menü uzadıkça (Referanslarımız eklenince) aralık daralır, satır kırılmaz */ @media (min-width:960px) and (max-width:1279px){ .ana-nav{gap:var(--olcu-4)} } .nav-oge{position:relative} .nav-baglanti{ position:relative;display:inline-flex;align-items:center;gap:.25rem; font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem; text-decoration:none;color:var(--tepe-metin);padding-block:.35rem; white-space:nowrap; /* "Ana Sayfa" iki satıra bölünmesin */ transition:color .15s; } @media (min-width:960px) and (max-width:1279px){ .nav-baglanti{font-size:.84rem} } /* Saydamlık kullanılmıyor: hesaplanan kontrast oranını gerçekte düşürürdü */ .nav-baglanti:hover{color:var(--tepe-etkin)} .nav-baglanti.etkin{color:var(--tepe-etkin)} .nav-baglanti.etkin::after{content:'';position:absolute;left:0;right:0;bottom:-.35rem; height:2px;background:var(--tepe-etkin);border-radius:2px} .nav-ok{width:.8rem;height:.8rem;transition:transform .18s;opacity:.6} .nav-oge:hover .nav-ok,.nav-oge:focus-within .nav-ok{transform:rotate(180deg)} /* ── Açılır alt menü ──────────────────────────────────────── */ .alt-menu{ position:absolute;top:calc(100% + .9rem);left:-1rem;z-index:60; min-width:15rem;max-width:min(24rem,calc(100vw - 2rem)); background:#fff;border:1px solid var(--gri-200); border-radius:var(--kose);overflow:hidden; box-shadow:0 18px 45px -20px rgba(14,23,32,.45); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .18s ease,transform .18s ease,visibility .18s; } /* Fare menüye giderken boşlukta kaybolmasın */ .alt-menu::before{content:'';position:absolute;top:-.9rem;left:0;right:0;height:.9rem} .nav-oge:hover .alt-menu,.nav-oge:focus-within .alt-menu{ opacity:1;visibility:visible;transform:none; } .alt-menu-ic{padding:var(--olcu-4) var(--olcu-5)} .alt-grup-baslik{ display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--gri-500); text-decoration:none;margin-bottom:.7rem;padding-bottom:.5rem; border-bottom:1px solid var(--gri-100);transition:color .15s; } .alt-grup-baslik:hover{color:var(--marka)} .alt-baglanti{ display:block;padding:.5rem 0;font-size:.86rem;color:var(--gri-700); text-decoration:none;transition:color .15s,padding-left .15s;line-height:1.4; white-space:nowrap; } .alt-baglanti:hover{color:var(--marka);padding-left:.3rem} .alt-menu-tumu{ display:block;padding:.75rem var(--olcu-6);background:var(--kagit); border-top:1px solid var(--gri-100);font-family:'Archivo',sans-serif; font-weight:600;font-size:.78rem;color:var(--marka);text-decoration:none; } .alt-menu-tumu:hover{background:var(--marka-sis)} .ikon-dugme{ display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem; border-radius:var(--kose); color:var(--tepe-metin);background:transparent;border:0;cursor:pointer; transition:background .15s; } .ikon-dugme:hover{background:var(--tepe-hover)} .teklif-dugme{display:none;background:var(--teklif-zemin);color:var(--teklif-metin);white-space:nowrap} .teklif-dugme:hover{background:var(--teklif-hover);color:var(--teklif-metin)} /* ── Mobil menü ───────────────────────────────────────────── */ #mobil-menu{max-height:0;overflow:hidden;transition:max-height .35s ease; background:var(--tepe-zemin);border-top:1px solid var(--tepe-cizgi)} #mobil-menu.acik{max-height:min(78vh,60rem);overflow-y:auto} .mobil-nav{padding-block:var(--olcu-2) var(--olcu-4)} .mobil-baglanti{ display:block;padding:.8rem 0;font-family:'Archivo',sans-serif;font-weight:700; font-size:.95rem;text-decoration:none;color:var(--tepe-metin); border-bottom:1px solid var(--tepe-cizgi); } .mobil-baglanti.etkin{color:var(--tepe-etkin)} .mobil-alt-baslik{ display:block;padding:.6rem 0 .3rem .8rem;font-family:'IBM Plex Mono',monospace; font-size:.66rem;letter-spacing:.1em;text-transform:uppercase; color:var(--tepe-metin);opacity:.55;text-decoration:none; } .mobil-alt{ display:block;padding:.5rem 0 .5rem 1.5rem;font-size:.85rem; color:var(--tepe-metin);text-decoration:none; border-left:2px solid var(--tepe-cizgi);margin-left:.8rem; } .mobil-alt:hover{color:var(--tepe-etkin)} @media (min-width:1024px){ .ana-nav{display:flex} .teklif-dugme{display:inline-flex;padding:.65rem 1.2rem;font-size:.82rem} .mobil-ac{display:none} } @media (max-width:640px){ input,select,textarea{max-width:100%;min-width:0;font-size:16px} .flex>*{min-width:0} }