/* ========================================================================== Denop — tema.css (tek stil dosyası) Açık tema · grafit/çelik zemin + çivit vurgu (#4f46e5) · Nortica başlık, Gyokz metin. Sayfalar yalnız bu dosyadaki sınıfları kullanır; bileşen vitrini: ortak/ornek.html İçindekiler 1. Fontlar 12. Form alanları 2. Token'lar 13. Modal, onay, alt panel 3. Temel 14. Toast, ipucu balonu, açılır menü 4. Yardımcı sınıflar 15. Boş durum, çubuk, açıklama notu, üst şerit 5. Sayfa iskeleti 16. Takvim 6. Düğmeler 17. Kabuk: ortak parçalar 7. Kart, KPI, özet kutusu 18. Kabuk: Hafif (üst çubuk + alt sekme çubuğu) 8. Rozet, etiket 19. Kabuk: Kapsamlı (yan menü + çekmece + FAB) 9. Tablo + mobil kart 20. Belge (A4 çıktı / önizleme) 10. Liste, tanımlar 21. Yazdır 11. Çipler, sekmeler, arama 22. Vitrin (ornek.html) ========================================================================== */ /* 1. Fontlar ---------------------------------------------------------------- */ @font-face{font-family:"Gyokz";src:url("../fontlar/Gyokz-400-Regular.otf") format("opentype");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Gyokz";src:url("../fontlar/Gyokz-500-Medium.otf") format("opentype");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Gyokz";src:url("../fontlar/Gyokz-600-SemiBold.otf") format("opentype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Gyokz";src:url("../fontlar/Gyokz-700-Bold.otf") format("opentype");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Nortica";src:url("../fontlar/NorticaTypeface-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Nortica";src:url("../fontlar/NorticaTypeface-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap} /* 2. Token'lar (§7.1) -------------------------------------------------------- */ :root{ color-scheme: light; /* Grafit / çelik */ --grafit-950:#15181b; --grafit-900:#1c1f23; --grafit-800:#262a2f; --grafit-700:#343a40; --celik-600:#4a525a; --celik-500:#5f676f; --celik-450:#8a9299; --celik-400:#9aa1a8; --celik-300:#c5cad0; --celik-200:#dde1e5; --celik-100:#eceff2; --celik-50:#f6f7f9; --beyaz:#ffffff; /* Denop vurgu rengi (çivit) — vurgu zemininde BEYAZ metin (--vurgu-ustu), koyu menüde --vurgu-acik */ --vurgu:#4f46e5; --vurgu-koyu:#4338ca; --vurgu-derin:#3730a3; --vurgu-metin:#4338ca; --vurgu-acik:#a5b4fc; --vurgu-ustu:#ffffff; --vurgu-zemin:#eef0ff; --vurgu-cizgi:#c7cdfb; /* Durum (uyarı TURUNCU: altınla karışmasın) */ --basari:#2e7d4f; --basari-metin:#276b43; --basari-zemin:#e8f3ec; --basari-cizgi:#bcdcc8; --uyari:#c2610c; --uyari-metin:#9a4a06; --uyari-zemin:#fdf0e4; --uyari-cizgi:#f0c9a3; --hata:#c0392b; --hata-metin:#c0392b; --hata-zemin:#fbeae8; --hata-cizgi:#efbab4; --hata-hale:rgba(192,57,43,.18); --bilgi:#2f6f8f; --bilgi-metin:#2f6f8f; --bilgi-zemin:#e8f1f5; --bilgi-cizgi:#c5dbe6; --sayim:#6b4fa0; --sayim-zemin:#f0ecf7; --sayim-cizgi:#d5cbe8; /* Anlamsal katman */ --zemin:var(--celik-100); --yuzey:var(--beyaz); --yuzey-2:var(--celik-50); --metin:var(--grafit-900); --metin-2:var(--celik-600); --metin-3:var(--celik-500); --cizgi:var(--celik-200); --cizgi-2:var(--celik-300); --cerceve-form:var(--celik-450); --odak:var(--vurgu-derin); --odak-hale:rgba(79,70,229,.28); --menu-zemin:var(--grafit-900); --menu-metin:#d5d9de; --menu-metin-2:var(--celik-400); --menu-aktif:rgba(165,180,252,.14); --menu-odak:var(--vurgu-acik); /* Fontlar */ --font-baslik:"Nortica", "Gyokz", system-ui, sans-serif; --font-metin:"Gyokz", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-rakam:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif; /* Yazı boyları (§7.2) */ --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:24px; --fs-kpi:28px; --fs-hero:40px; /* Boşluk, köşe, gölge */ --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b5:20px; --b6:24px; --b8:32px; --b10:40px; --b14:56px; --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px; --r-tam:999px; --golge-1:0 1px 2px rgba(28,31,35,.06); --golge-2:0 6px 20px rgba(28,31,35,.12); --golge-3:0 20px 60px rgba(28,31,35,.30); /* Kabuk ölçüleri */ --ust-cubuk:60px; --alt-cubuk:64px; --yan-menu:248px; --yan-dar:64px; --icerik-hafif:1100px; --icerik-kapsamli:1440px; --kenar:32px; /* OzelSelect (dropdown.js) teması */ --dd-vurgu:var(--vurgu-derin); --dd-vurgu-zemin:var(--vurgu-zemin); --dd-vurgu-metin:var(--vurgu-metin); --dd-cerceve:var(--cerceve-form); --dd-kirmizi:var(--hata); --dd-z:250; --dd-font:inherit; --dd-radius:var(--r-sm); --dd-cerceve-kalinlik:1px; --dd-kalinlik:400; --dd-punto:var(--fs-base); --dd-ic-bosluk:0 12px; --dd-metin:var(--grafit-900); --dd-soluk:var(--celik-500); --dd-cizgi:var(--celik-200); --dd-liste-punto:14px; --dd-golge:var(--golge-2); /* Katmanlar */ --z-baslik:10; --z-menu:30; --z-altcubuk:40; --z-fab:45; --z-modal:100; --z-takvim:200; --z-onay:300; --z-toast:400; } @media (max-width:1279px){:root{--kenar:24px}} @media (max-width:1023px){:root{--kenar:20px;--ust-cubuk:56px}} @media (max-width:767px){ :root{--kenar:16px;--fs-md:15px;--fs-base:16px;--fs-xl:19px;--fs-2xl:21px;--fs-kpi:24px;--fs-hero:30px} } /* 3. Temel ------------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} body{margin:0;min-height:100vh;background:var(--zemin);color:var(--metin);font-family:var(--font-metin);font-size:var(--fs-base);line-height:1.5;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent} body.katman-acik{overflow:hidden} h1,h2{font-family:var(--font-baslik);line-height:1.25;margin:0;color:var(--grafit-900);font-weight:600;letter-spacing:.01em} h1{font-size:var(--fs-2xl);font-weight:700} h2{font-size:var(--fs-lg)} h3,h4{font-family:var(--font-metin);font-weight:600;line-height:1.3;margin:0;color:var(--grafit-900)} h3{font-size:16px} h4{font-size:14px} p{margin:0} a{color:var(--vurgu-metin);text-underline-offset:2px} a:hover{color:var(--vurgu-derin)} img,svg{max-width:100%} img{height:auto} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} hr{border:0;border-top:1px solid var(--cizgi);margin:var(--b4) 0} pre,code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:13px} pre{margin:0;padding:12px 14px;background:var(--grafit-900);color:#e6e8eb;border-radius:var(--r-md);overflow:auto;max-width:100%;line-height:1.55} code{background:var(--celik-100);padding:1px 5px;border-radius:4px} pre code{background:none;padding:0} :focus{outline:none} :focus-visible{outline:2px solid var(--odak);outline-offset:2px;box-shadow:0 0 0 5px var(--odak-hale)} ::selection{background:var(--vurgu-zemin);color:var(--grafit-900)} [hidden]{display:none !important} .ikon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle} .ikon.k14{width:14px;height:14px} .ikon.k16{width:16px;height:16px} .ikon.k18{width:18px;height:18px} .ikon.k24{width:24px;height:24px} .ikon.k32{width:32px;height:32px} .ikon.k48{width:48px;height:48px;stroke-width:1.4} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} } /* Para ve sayı: Gyokz'da tabular rakam yok → sistem rakam yığını (§7.2) */ .para,.sayi,td[data-sayi],th[data-sayi]{font-family:var(--font-rakam);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap} td.para,td.sayi,td[data-sayi],th[data-sayi],th.para,th.sayi{text-align:right} .eksi{color:var(--hata-metin)} .arti{color:var(--basari-metin)} /* 4. Yardımcı sınıflar ------------------------------------------------------- */ .yigin{display:flex;flex-direction:column;gap:12px} .yigin.sik{gap:6px} .yigin.genis{gap:20px} .satir{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .satir.sarmasiz{flex-wrap:nowrap} .satir.ust{align-items:flex-start} .arala{justify-content:space-between} .yigin>*,.satir>*,.izgara-2>*,.izgara-3>*,.izgara-4>*,.kart-izgara>*,.form-izgara>*,.kpi-serit>*,.ozet-kutulari>*{min-width:0} .genislet{flex:1 1 auto;min-width:0} .izgara-2,.izgara-3,.izgara-4{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)} @media (min-width:768px){ .izgara-2{grid-template-columns:repeat(2,minmax(0,1fr))} .izgara-3{grid-template-columns:repeat(3,minmax(0,1fr))} .izgara-4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1024px){.izgara-4{grid-template-columns:repeat(4,minmax(0,1fr))}} .bosluk-ust-1{margin-top:4px}.bosluk-ust-2{margin-top:8px}.bosluk-ust-3{margin-top:12px} .bosluk-ust-4{margin-top:16px}.bosluk-ust-5{margin-top:24px}.bosluk-ust-6{margin-top:32px} .bosluk-alt-2{margin-bottom:8px}.bosluk-alt-3{margin-bottom:12px}.bosluk-alt-4{margin-bottom:16px} .metin-sag{text-align:right}.metin-orta{text-align:center} .soluk{color:var(--metin-3)} .kucuk{font-size:var(--fs-sm)} .kalin{font-weight:700} .buyuk-harf{text-transform:uppercase;letter-spacing:.06em;font-size:var(--fs-xs);font-weight:600} .renk-hata{color:var(--hata-metin)}.renk-basari{color:var(--basari-metin)}.renk-uyari{color:var(--uyari-metin)} .renk-bilgi{color:var(--bilgi-metin)}.renk-vurgu{color:var(--vurgu-metin)} .tasma-kes{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .sarmasiz{white-space:nowrap} .gizli-metin{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .yalniz-mobil{display:none} @media (max-width:767px){.yalniz-mobil{display:revert}.mobilde-gizle{display:none !important}} .baglanti-sade{color:inherit;text-decoration:none} .baglanti-sade:hover{color:var(--vurgu-metin);text-decoration:underline} .ayrac{height:1px;background:var(--cizgi);margin:12px 0;border:0} /* 5. Sayfa iskeleti (§7.4) -------------------------------------------------- */ .icerik{width:100%;margin:0 auto;padding:var(--b6) var(--kenar) var(--b10);min-width:0} .sayfa-baslik{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:20px} .sayfa-baslik>:first-child{flex:1 1 320px;min-width:0} .sayfa-aciklama{margin-top:4px;color:var(--metin-2);font-size:var(--fs-sm)} .sayfa-ust-bilgi{font-size:var(--fs-sm);color:var(--metin-3);margin-bottom:4px;font-weight:500} .sayfa-eylemler{display:flex;flex-wrap:wrap;gap:8px;align-items:center} @media (max-width:599px){.sayfa-eylemler{width:100%}.sayfa-eylemler>.dugme{flex:1 1 auto}} .bolum{margin-top:24px} .bolum-baslik{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .filtre-cubugu{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:16px;min-width:0} .filtre-cubugu>*{min-width:0} .filtre-cubugu>.cipler{flex:1 1 auto} .filtre-cubugu .dd,.filtre-cubugu select{min-width:170px;max-width:100%} .filtre-cubugu .sag{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap} .sonuc-sayisi{font-size:var(--fs-sm);color:var(--metin-3)} .kpi-serit{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px} .kpi-serit.alti{grid-template-columns:repeat(6,minmax(0,1fr))} @media (max-width:1279px){.kpi-serit.alti{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:767px){.kpi-serit,.kpi-serit.alti{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}} /* Şerit sütunu çocuk sayısından gelir (.kpi-serit ve .ozet-kutulari): auto-fit 1024 px'te 3+1, 4+1 gibi yetim kutu bırakıyordu. 2 → 2 · 3 → 3 · 4 → 900 px altı 2×2, üstü 4 · 5 → 1024 px altı 3+2 (tam genişlik), üstü 5 · 6 → 1280 px altı 3×2, üstü 6 · mobil 2 sütun, tek kalan tam genişlik */ @media (min-width:768px){ :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))} :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(6):last-child){grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:768px) and (max-width:1023px){ :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))} :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(5):last-child)>*{grid-column:span 2} :is(.kpi-serit,.ozet-kutulari):has(>:nth-child(5):last-child)>:nth-child(n+4){grid-column:span 3} } @media (min-width:900px){:is(.kpi-serit,.ozet-kutulari):has(>:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:1024px){:is(.kpi-serit,.ozet-kutulari):has(>:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}} @media (min-width:1280px){:is(.kpi-serit,.ozet-kutulari):has(>:nth-child(6):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}} @media (max-width:767px){:is(.kpi-serit,.ozet-kutulari)>:last-child:nth-child(odd){grid-column:1/-1}} .kart-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .kart-izgara>.tam-genis{grid-column:1/-1} @media (max-width:767px){.kart-izgara{grid-template-columns:minmax(0,1fr)}} .alt-toplam{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end;align-items:baseline;padding:12px 16px;background:var(--celik-50);border:1px solid var(--cizgi);border-radius:var(--r-md);font-size:var(--fs-sm);margin-top:12px;color:var(--metin-2)} .alt-toplam b,.alt-toplam strong{color:var(--metin);font-family:var(--font-rakam);font-variant-numeric:tabular-nums} .form-onaylar{display:flex;flex-direction:column;gap:8px} .form-genel-hata{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:var(--r-sm);background:var(--hata-zemin);color:var(--hata-metin);border:1px solid var(--hata-cizgi);font-size:var(--fs-sm)} .bu-ay-satiri{display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;padding:10px 14px;margin-top:12px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-md);font-size:var(--fs-sm);color:var(--metin-2)} .bu-ay-satiri b{color:var(--metin);font-family:var(--font-rakam)} /* 6. Düğmeler --------------------------------------------------------------- */ .dugme{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--cerceve-form);background:var(--yuzey);color:var(--metin);font-family:var(--font-metin);font-size:15px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;user-select:none;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s;max-width:100%} .dugme:hover{color:var(--metin)} .dugme .ikon{width:18px;height:18px} .dugme.birincil{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-ustu)} .dugme.birincil:hover{background:var(--vurgu-koyu);border-color:var(--vurgu-koyu);color:var(--vurgu-ustu)} .dugme.ikincil{background:var(--yuzey);border-color:var(--cerceve-form);color:var(--metin)} .dugme.ikincil:hover{border-color:var(--vurgu-derin);background:var(--vurgu-zemin)} .dugme.hayalet{background:transparent;border-color:transparent;color:var(--metin-2)} .dugme.hayalet:hover{background:var(--celik-100);color:var(--metin)} .dugme.tehlike{background:var(--hata);border-color:var(--hata);color:#fff} .dugme.tehlike:hover{background:#a83224;border-color:#a83224;color:#fff} .dugme.tehlike-hayalet{background:transparent;border-color:transparent;color:var(--hata-metin)} .dugme.tehlike-hayalet:hover{background:var(--hata-zemin)} .dugme.koyu{background:transparent;border-color:rgba(255,255,255,.3);color:#eef0f2} .dugme.koyu:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5);color:#fff} .dugme.kucuk{height:32px;padding:0 12px;font-size:13px;gap:6px} .dugme.kucuk .ikon{width:16px;height:16px} .dugme.buyuk{height:48px;padding:0 20px;font-size:16px} .dugme.tam{width:100%} .dugme:disabled,.dugme[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none} .dugme[aria-busy="true"]{pointer-events:none;opacity:.85} .donen{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:don .7s linear infinite;flex:none} @keyframes don{to{transform:rotate(360deg)}} .ikon-dugme{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--metin-2);cursor:pointer;flex:none;text-decoration:none} .ikon-dugme:hover{background:var(--celik-100);color:var(--metin)} .ikon-dugme.cerceveli{border-color:var(--cerceve-form);background:var(--yuzey)} .ikon-dugme.kucuk{width:32px;height:32px} .ikon-dugme:disabled{opacity:.45;cursor:not-allowed} .dugme-grubu{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:var(--z-fab);width:56px;height:56px;border-radius:50%;border:0;background:var(--vurgu);color:var(--vurgu-ustu);box-shadow:0 8px 22px rgba(28,31,35,.28);display:inline-flex;align-items:center;justify-content:center;cursor:pointer} .fab:hover{background:var(--vurgu-koyu)} .fab .ikon{width:26px;height:26px;stroke-width:2.2} .fab.statik{position:static;box-shadow:var(--golge-2)} @media (max-width:1023px){ body[data-surum="hafif"] .dugme:not(.kucuk){height:48px} body[data-surum="hafif"] .ikon-dugme:not(.kucuk){width:48px;height:48px} } /* 7. Kart, KPI, özet kutusu ------------------------------------------------- */ .kart{background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-md);box-shadow:var(--golge-1);padding:var(--b5);min-width:0} .kart-baslik{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:12px;flex-wrap:wrap} .kart-baslik h2{font-size:var(--fs-lg)} .kart-baslik .kart-alt-baslik{font-size:var(--fs-sm);color:var(--metin-3);width:100%;margin-top:-6px} .kart-baglanti{font-size:13px;font-weight:600;color:var(--vurgu-metin);text-decoration:none;white-space:nowrap} .kart-baglanti:hover{text-decoration:underline} .kart.dolgusuz{padding:0;overflow:hidden} .kart.dolgusuz>.kart-baslik{padding:16px 20px 0} .kart.dolgusuz>.kart-govde{padding:0 20px 16px} .kart-alt{border-top:1px solid var(--cizgi);margin-top:16px;padding-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between} .kart.vurgu{border-left:3px solid var(--vurgu)} .kart.hata{border-left:3px solid var(--hata)} .kart.uyari{border-left:3px solid var(--uyari)} .kart+.kart{margin-top:16px} .kart-izgara>.kart+.kart,.izgara-2>.kart+.kart,.izgara-3>.kart+.kart{margin-top:0} @media (max-width:767px){.kart{padding:16px}.kart.dolgusuz>.kart-baslik{padding:14px 16px 0}.kart.dolgusuz>.kart-govde{padding:0 16px 14px}} details.kart>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px} details.kart>summary::-webkit-details-marker{display:none} details.kart>summary h2{font-size:var(--fs-lg)} details.kart>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--metin-3);border-bottom:2px solid var(--metin-3);transform:rotate(45deg);transition:transform .15s;margin-right:4px;flex:none} details.kart[open]>summary{margin-bottom:12px} details.kart[open]>summary::after{transform:rotate(-135deg)} .kpi{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;background:var(--yuzey);border:1px solid var(--cizgi);border-radius:var(--r-md);box-shadow:var(--golge-1);text-decoration:none;color:inherit;overflow:hidden;min-width:0} a.kpi{transition:border-color .15s,box-shadow .15s} a.kpi:hover{border-color:var(--vurgu-cizgi);box-shadow:var(--golge-2);color:inherit} a.kpi::after{content:"›";position:absolute;right:12px;top:12px;color:var(--celik-400);font-size:18px;line-height:1} .kpi-etiket{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--metin-2);padding-right:14px} .kpi-deger{font-family:var(--font-metin);font-weight:700;font-size:var(--fs-kpi);line-height:1.1;color:var(--grafit-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums} .kpi-alt{font-size:var(--fs-sm);color:var(--metin-2);line-height:1.35} .kpi.hata::before,.kpi.uyari::before,.kpi.basari::before,.kpi.bilgi::before,.kpi.vurgu::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px} .kpi.hata::before{background:var(--hata)} .kpi.hata .kpi-deger{color:var(--hata-metin)} .kpi.uyari::before{background:var(--uyari)} .kpi.uyari .kpi-deger{color:var(--uyari-metin)} .kpi.basari::before{background:var(--basari)} .kpi.bilgi::before{background:var(--bilgi)} .kpi.vurgu::before{background:var(--vurgu)} @media (max-width:767px){.kpi{padding:12px}} .ozet-kutulari{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} @media (max-width:767px){.ozet-kutulari{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}} .ozet-kutusu{padding:12px 14px;border:1px solid var(--cizgi);border-radius:var(--r-md);background:var(--yuzey);min-width:0} .ozet-etiket{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--metin-3)} .ozet-deger{display:block;font-family:var(--font-rakam);font-variant-numeric:tabular-nums;font-size:19px;font-weight:700;color:var(--grafit-900);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ozet-alt{display:block;font-size:var(--fs-sm);color:var(--metin-3);margin-top:2px} .ozet-kutusu.hata .ozet-deger{color:var(--hata-metin)} .ozet-kutusu.uyari .ozet-deger{color:var(--uyari-metin)} .ozet-kutusu.basari .ozet-deger{color:var(--basari-metin)} /* 8. Rozet, etiket ---------------------------------------------------------- */ .rozet{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--r-tam);border:1px solid var(--cizgi-2);background:var(--celik-50);color:var(--celik-600);font-family:var(--font-metin);font-size:12px;font-weight:600;line-height:1;white-space:nowrap;vertical-align:middle;max-width:100%} .rozet .ikon{width:13px;height:13px;stroke-width:2} .rozet.notr{background:var(--celik-50);color:var(--celik-600);border-color:var(--cizgi-2)} .rozet.basari{background:var(--basari-zemin);color:var(--basari-metin);border-color:var(--basari-cizgi)} .rozet.uyari{background:var(--uyari-zemin);color:var(--uyari-metin);border-color:var(--uyari-cizgi)} .rozet.hata{background:var(--hata-zemin);color:var(--hata-metin);border-color:var(--hata-cizgi)} .rozet.bilgi{background:var(--bilgi-zemin);color:var(--bilgi-metin);border-color:var(--bilgi-cizgi)} .rozet.vurgu{background:var(--vurgu-zemin);color:var(--vurgu-metin);border-color:var(--vurgu-cizgi)} .rozet.sayim{background:var(--sayim-zemin);color:var(--sayim);border-color:var(--sayim-cizgi)} .rozet.dolu.hata{background:#a3281c;border-color:#a3281c;color:#fff} .rozet.dolu.basari{background:var(--basari);border-color:var(--basari);color:#fff} .rozet.dolu.vurgu{background:var(--vurgu);border-color:var(--vurgu);color:var(--vurgu-ustu)} .rozet.buyuk{height:26px;padding:0 10px;font-size:13px} .etiket{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);background:var(--celik-100);color:var(--celik-600);font-size:12px;font-weight:500;white-space:nowrap} .etiketler{display:flex;flex-wrap:wrap;gap:4px} .menu-rozet{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-tam);background:var(--celik-500);color:#fff;font-family:var(--font-rakam);font-size:11px;font-weight:700;line-height:1} .menu-rozet.hata{background:var(--hata);color:#fff} .menu-rozet.uyari{background:var(--uyari);color:#fff} .menu-rozet.bilgi{background:var(--bilgi);color:#fff} .menu-rozet.vurgu{background:var(--vurgu);color:var(--vurgu-ustu)} .surum-rozeti{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:var(--r-xs);font-size:10.5px;font-weight:700;letter-spacing:.1em;line-height:1;white-space:nowrap} .surum-rozeti.hafif{background:var(--celik-100);color:var(--grafit-900)} .surum-rozeti.kapsamli{background:var(--vurgu);color:var(--vurgu-ustu)} .demo-rozeti{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--r-xs);border:1px dashed var(--vurgu-acik);color:var(--vurgu-acik);font-size:10.5px;font-weight:700;letter-spacing:.12em;white-space:nowrap;cursor:help;background:transparent} .demo-rozeti.acik-zemin{color:var(--vurgu-metin);border-color:var(--vurgu-koyu)} /* 9. Tablo + mobil kart dönüşümü -------------------------------------------- */ /* position:relative → th içindeki .gizli-metin (absolute) kaydırma kabının dışına konumlanıp sayfayı yana taşırmaz */ .tablo-kap{position:relative;container:tablo / inline-size;overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%} .tablo{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md);background:var(--yuzey)} .tablo caption{text-align:left} .tablo th{background:var(--celik-50);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--metin-2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--cizgi-2);white-space:nowrap;vertical-align:bottom} .tablo th[data-sayi],.tablo th.para,.tablo th.sayi{text-align:right} .tablo td{padding:11px 12px;border-bottom:1px solid var(--cizgi);vertical-align:middle} .tablo tbody tr:last-child td{border-bottom:0} .tablo tbody tr:hover td{background:var(--celik-50)} .tablo tr.tiklanir{cursor:pointer} .tablo tr.tiklanir:focus-visible{outline:2px solid var(--odak);outline-offset:-2px;box-shadow:none} .tablo tfoot td{font-weight:700;background:var(--celik-50);border-top:1px solid var(--cizgi-2);border-bottom:0} .tablo th .sirala{all:unset;display:inline-flex;align-items:center;gap:4px;cursor:pointer;border-radius:4px;text-transform:inherit;letter-spacing:inherit} .tablo th .sirala:focus-visible{outline:2px solid var(--odak);outline-offset:2px} .tablo th .sirala .ikon{width:13px;height:13px;opacity:.4} .tablo th[aria-sort="ascending"] .sirala .ikon,.tablo th[aria-sort="descending"] .sirala .ikon{opacity:1;color:var(--vurgu-derin)} .tablo th[aria-sort="descending"] .sirala .ikon{transform:scaleY(-1)} .tablo th[data-sayi] .sirala{flex-direction:row-reverse} .tablo .hucre-alt{display:block;font-size:var(--fs-sm);color:var(--metin-3);margin-top:2px;font-weight:400} /* Sayı hücresinde yalnız ana değer tek satır; alt satır ("matrah ₺…", "₺… kapandı") sarar, sütunu gereksiz genişletmez */ .tablo td[data-sayi] .hucre-alt:not(.sarmasiz){white-space:normal} .tablo .hucre-baslik{font-weight:600;color:var(--metin);text-decoration:none} .tablo a.hucre-baslik:hover{color:var(--vurgu-metin);text-decoration:underline} .tablo td.eylem,.tablo td[data-rol="eylem"]{text-align:right;white-space:nowrap} .tablo td.eylem .dugme+.dugme,.tablo td[data-rol="eylem"] .dugme+.dugme{margin-left:6px} .tablo tr.iptal td{color:var(--metin-3)} .tablo tr.iptal td:not([data-rol="eylem"]){text-decoration:line-through;text-decoration-color:var(--celik-400)} .tablo tr.kritik td:first-child{box-shadow:inset 3px 0 0 var(--hata)} .tablo tr.uyari td:first-child{box-shadow:inset 3px 0 0 var(--uyari)} .tablo tr.secili td{background:var(--vurgu-zemin)} .tablo tr.yeni td{animation:yeniSatir 1.5s ease-out} @keyframes yeniSatir{from{background:var(--vurgu-zemin)}to{background:transparent}} .tablo tr.grup-baslik td{background:var(--celik-100);font-weight:700;font-size:13px;color:var(--metin-2)} .tablo tr.bos-satir td{padding:0;border:0} .tablo tr.bos-satir:hover td{background:none} .tablo.sik td{padding:8px 10px} .tablo.sik th{padding:8px 10px} .tablo-kap.kaydir .tablo{min-width:720px} .kart>.tablo-kap.tasan{margin:0 -20px -20px;width:calc(100% + 40px);max-width:none;border-top:1px solid var(--cizgi)} @media (max-width:767px){.kart>.tablo-kap.tasan{margin:0 -16px -16px;width:calc(100% + 32px)}} /* Dar kapta (≤1000 px) öncelik 3 sütunları gizlenir; 641–900 px'te öncelik 2 de gizlenir ve hücre iç boşluğu daralır (1024 px'te tam yan menüyle kap ~690 px); ≤640 px'te satırlar karta dönüşür (öncelik 2 kartta yine görünür) */ @container tablo (max-width:1000px){.tablo [data-oncelik="3"]{display:none}} @container tablo (min-width:641px) and (max-width:900px){ .tablo [data-oncelik="2"]{display:none} .tablo th,.tablo td{padding-left:8px;padding-right:8px} } @container tablo (max-width:640px){ .tablo:not(.kartsiz){background:transparent;border-collapse:collapse} .tablo:not(.kartsiz) thead{display:none} .tablo:not(.kartsiz),.tablo:not(.kartsiz)>tbody,.tablo:not(.kartsiz)>tfoot{display:block;width:100%} /* Sağ sütun (tutar/rozet) en çok yarı genişlik: uzun rozet sol sütunu ezmez; nowrap tutar yine sığar */ .tablo:not(.kartsiz) tr{display:grid;grid-template-columns:minmax(0,1fr) fit-content(50%);grid-auto-flow:row dense;gap:4px 12px;padding:12px 14px;border:1px solid var(--cizgi);border-radius:var(--r-md);background:var(--yuzey);margin:0 0 8px;min-height:64px;align-items:center} .tablo:not(.kartsiz) td{display:block;padding:0;border:0;grid-column:1/-1;min-width:0;text-align:left;white-space:normal} .tablo:not(.kartsiz) tbody tr:hover td{background:none} .tablo:not(.kartsiz) td[data-rol="baslik"]{grid-column:1;font-weight:600} .tablo:not(.kartsiz) td[data-rol="tutar"]{grid-column:2;text-align:right;font-weight:600;white-space:nowrap} .tablo:not(.kartsiz) td[data-rol="ikincil"]{grid-column:1;font-size:13px;color:var(--metin-2)} .tablo:not(.kartsiz) td[data-rol="rozet"]{grid-column:2;justify-self:end;text-align:right} .tablo:not(.kartsiz) td[data-rol="rozet"] .rozet{white-space:normal;height:auto;min-height:22px;line-height:1.25;padding-top:2px;padding-bottom:2px;text-align:right} .tablo:not(.kartsiz) td[data-rol="eylem"]{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:4px;white-space:normal} .tablo:not(.kartsiz) td[data-rol="eylem"] .dugme+.dugme{margin-left:0} .tablo:not(.kartsiz) td[data-oncelik="3"]{display:none} .tablo:not(.kartsiz) td:empty{display:none} /* Boş data-etiket ": " basmaz (eski "content:none" kuralı özgüllükte yeniliyordu) */ .tablo:not(.kartsiz) td[data-etiket]:not([data-etiket=""]):not([data-rol])::before, .tablo:not(.kartsiz) td[data-etiket]:not([data-etiket=""])[data-rol="ikincil"]::before{content:attr(data-etiket) ": ";color:var(--metin-3);font-size:12px;font-weight:500} /* Durum şeridi kartın tamamında (hücrede kalırsa yalnız ilk satırda görünür) */ .tablo:not(.kartsiz) tr.kritik{box-shadow:inset 3px 0 0 var(--hata)} .tablo:not(.kartsiz) tr.uyari{box-shadow:inset 3px 0 0 var(--uyari)} .tablo:not(.kartsiz) tr.kritik td:first-child,.tablo:not(.kartsiz) tr.uyari td:first-child{box-shadow:none} .tablo:not(.kartsiz) tfoot tr{background:var(--celik-50)} .tablo:not(.kartsiz) tfoot td{background:none} .tablo:not(.kartsiz) tr.bos-satir{display:block;border:0;background:none;padding:0} .tablo:not(.kartsiz) tr.grup-baslik{display:block;background:var(--celik-100);min-height:0;padding:8px 12px} } /* 10. Liste, tanımlar -------------------------------------------------------- */ .liste{list-style:none;margin:0;padding:0} .liste-oge,.liste>li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--cizgi);min-height:56px;min-width:0} .liste-oge:last-child,.liste>li:last-child{border-bottom:0} .liste-ana{flex:1 1 auto;min-width:0} .liste-baslik{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--metin);text-decoration:none} a.liste-baslik:hover{color:var(--vurgu-metin)} .liste-alt{display:block;font-size:var(--fs-sm);color:var(--metin-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .liste-yan{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:right} .liste-eylem{display:flex;gap:6px;flex:none} .liste-ikon{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;flex:none;background:var(--celik-100);color:var(--metin-2)} .liste-ikon.basari{background:var(--basari-zemin);color:var(--basari)} .liste-ikon.uyari{background:var(--uyari-zemin);color:var(--uyari)} .liste-ikon.hata{background:var(--hata-zemin);color:var(--hata)} .liste-ikon.vurgu{background:var(--vurgu-zemin);color:var(--vurgu-derin)} .liste-ikon.bilgi{background:var(--bilgi-zemin);color:var(--bilgi)} @media (max-width:1023px){body[data-surum="hafif"] .liste-oge,body[data-surum="hafif"] .liste>li{min-height:64px}} @media (max-width:479px){ .liste-oge.sarar{flex-wrap:wrap}.liste-oge.sarar .liste-eylem{width:100%;justify-content:flex-end} /* İkonlu satır: ikon solda iki satır boyunca; ad + alt satır (tam metin) sağ sütunda, altında tutar/rozet ve eylemler */ .liste-oge.sarar:has(>.liste-ikon){display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px 12px;align-items:start} .liste-oge.sarar:has(>.liste-ikon)>.liste-ikon{grid-row:1 / span 2} .liste-oge.sarar:has(>.liste-ikon)>:not(.liste-ikon){grid-column:2} .liste-oge.sarar:has(>.liste-ikon) .liste-alt{white-space:normal} .liste-oge.sarar:has(>.liste-ikon)>.liste-yan{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;text-align:left} } .tanimlar{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 16px;margin:0;font-size:var(--fs-md)} .tanimlar dt{color:var(--metin-3);font-weight:500} .tanimlar dd{margin:0;min-width:0;overflow-wrap:anywhere} .tanimlar.iki-sutun{grid-template-columns:minmax(0,130px) minmax(0,1fr) minmax(0,130px) minmax(0,1fr)} @media (max-width:899px){.tanimlar.iki-sutun{grid-template-columns:minmax(0,130px) minmax(0,1fr)}} @media (max-width:479px){.tanimlar,.tanimlar.iki-sutun{grid-template-columns:minmax(0,1fr);gap:2px}.tanimlar dt{margin-top:8px;font-size:12px}} /* 11. Çipler, sekmeler, arama ---------------------------------------------- */ /* (a) Filtre çipi:
…
…
*/ .modal-fon{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;padding:24px;background:rgba(21,24,27,.55)} .modal-fon.acik{display:flex;animation:fonGir .15s ease-out} .modal-fon.onay-fon{z-index:var(--z-onay)} @keyframes fonGir{from{opacity:0}to{opacity:1}} .modal{position:relative;display:flex;flex-direction:column;width:100%;max-width:600px;max-height:calc(100dvh - 48px);background:var(--yuzey);border-radius:var(--r-lg);box-shadow:var(--golge-3);overflow:hidden;animation:modalGir .18s ease-out} .modal.dar{max-width:440px} .modal.genis{max-width:880px} .modal.cok-genis{max-width:1120px} @keyframes modalGir{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} .modal>form{display:flex;flex-direction:column;min-height:0;flex:1 1 auto} .modal-baslik{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 12px 12px 20px;border-bottom:1px solid var(--cizgi);flex:none} .modal-baslik>div{min-width:0;padding-top:6px} .modal-baslik h2{font-size:var(--fs-xl);line-height:1.25} .modal-alt-baslik{font-size:var(--fs-sm);color:var(--metin-3);margin-top:2px} .modal-kapat{width:44px;height:44px;margin:-4px -2px 0 0;font-size:18px} .modal-govde{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px} .modal-alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--cizgi);background:var(--yuzey-2);flex:none} .modal-alt>.bosluk{flex:1 1 auto} .modal-alt>.sol{margin-right:auto} /* Pencere içi doğrulama uyarısı (DN.toast(…,'uyari') pencere açıkken buraya düşer): alt çubukta, düğmelerin solunda. Yeni uyarı eskisinin yerini alır; işaretli alanlar düzelince, form sıfırlanınca ya da pencere kapanınca kalkar. */ .modal-uyari{display:flex;align-items:center;gap:6px;margin:0 auto 0 0;min-width:0;max-width:100%;color:var(--uyari-metin);font-size:13px;font-weight:600;line-height:1.35;animation:modalUyariGir .28s ease-out} .modal-uyari>.ikon{width:18px;height:18px;color:var(--uyari)} .modal-uyari>span{min-width:0} @keyframes modalUyariGir{0%{opacity:0;transform:translateX(-6px)}55%{opacity:1;transform:translateX(3px)}100%{transform:none}} .onay-penceresi .modal-govde{display:flex;flex-direction:column;gap:12px;font-size:var(--fs-base)} .onay-penceresi .onay-maddeler{margin:0;padding-left:18px;font-size:var(--fs-sm);color:var(--metin-2)} @keyframes modalAlttan{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}} @media (max-width:600px){ .modal-fon{padding:0;align-items:flex-end} .modal,.modal.genis,.modal.cok-genis{max-width:none;height:100dvh;max-height:100dvh;border-radius:0;animation:modalAlttan .22s ease-out} .modal.dar{max-width:none;height:auto;max-height:92dvh;border-radius:16px 16px 0 0} .modal-govde{padding:16px} .modal-baslik{padding:10px 8px 10px 16px} .modal-alt{padding:10px 16px calc(10px + env(safe-area-inset-bottom))} .modal-alt>.dugme{flex:1 1 auto} .modal-alt>.bosluk{display:none} .modal-alt>.sol{flex-basis:100%;margin:0} .modal-alt>.modal-uyari{flex-basis:100%;order:-1;margin:0 0 2px} } /* Alt panel (hızlı eylem, "Daha" menüsü): fona dokununca kapanır (form değildir) */ .panel-fon{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:flex-end;justify-content:center;background:rgba(21,24,27,.5)} .panel-fon.acik{display:flex;animation:fonGir .15s ease-out} .alt-panel{width:100%;max-width:560px;max-height:90dvh;overflow-y:auto;background:var(--yuzey);border-radius:18px 18px 0 0;padding:6px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--golge-3);animation:modalAlttan .22s ease-out} .alt-panel-tutamak{width:40px;height:4px;border-radius:2px;background:var(--celik-300);margin:6px auto 10px} .alt-panel-baslik{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px} .alt-panel-baslik h2{font-size:var(--fs-lg)} .alt-panel-bolum{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--metin-3);margin:16px 0 8px} .hizli-izgara{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .hizli-kutu{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:92px;padding:14px;border:1px solid var(--cizgi);border-radius:var(--r-md);background:var(--yuzey-2);color:var(--metin);font:inherit;text-align:left;text-decoration:none;cursor:pointer;min-width:0} .hizli-kutu:hover{border-color:var(--vurgu-cizgi);background:var(--vurgu-zemin);color:var(--metin)} .hizli-kutu .ikon{width:26px;height:26px;color:var(--vurgu-derin);margin-bottom:4px} .hizli-kutu b{font-size:16px;font-weight:700} .hizli-kutu small{font-size:13px;color:var(--metin-3);line-height:1.3} .hizli-kutu.giris .ikon{color:var(--basari)} .hizli-kutu.cikis .ikon{color:var(--uyari)} .panel-liste{list-style:none;margin:0;padding:0} .panel-liste a,.panel-liste button{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 6px;border:0;border-bottom:1px solid var(--cizgi);background:none;color:var(--metin);font:500 16px var(--font-metin);text-decoration:none;text-align:left;cursor:pointer} .panel-liste li:last-child a{border-bottom:0} .panel-liste a[aria-current="page"]{color:var(--vurgu-metin);font-weight:700} .panel-liste .ikon{color:var(--metin-3)} .panel-liste .menu-rozet{margin-left:auto} /* 14. Toast, ipucu balonu, açılır menü -------------------------------------- */ .toast-kap{position:fixed;right:24px;bottom:24px;z-index:var(--z-toast);display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none;max-width:calc(100vw - 32px)} .toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;width:420px;max-width:100%;padding:12px 8px 12px 14px;background:var(--grafit-900);color:#f2f3f5;border-radius:var(--r-md);box-shadow:var(--golge-2);font-size:14px;line-height:1.45;border-left:4px solid #5cc28a;animation:toastGir .2s ease-out} .toast.cikiyor{animation:toastCik .18s ease-in forwards} @keyframes toastGir{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes toastCik{to{opacity:0;transform:translateY(6px)}} .toast>.ikon{width:20px;height:20px;margin-top:1px;color:#5cc28a} .toast.hata{border-left-color:#ef7d70}.toast.hata>.ikon{color:#ef7d70} .toast.uyari{border-left-color:#f0a35c}.toast.uyari>.ikon{color:#f0a35c} .toast.bilgi{border-left-color:#7fbfdc}.toast.bilgi>.ikon{color:#7fbfdc} .toast-metin{flex:1 1 auto;min-width:0;padding-top:1px} .toast-eylem{flex:none;border:0;background:none;color:var(--vurgu-acik);font:700 14px var(--font-metin);padding:2px 8px;cursor:pointer;border-radius:4px} .toast-eylem:hover{background:rgba(255,255,255,.08)} .toast-kapat{flex:none;width:28px;height:28px;border:0;background:none;color:var(--celik-400);border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;margin-top:-3px} .toast-kapat:hover{color:#fff;background:rgba(255,255,255,.08)} .toast-kapat .ikon{width:16px;height:16px} @media (max-width:767px){ .toast-kap{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));align-items:stretch;max-width:none} .toast{width:auto} body[data-surum="kapsamli"] .toast-kap{bottom:calc(84px + env(safe-area-inset-bottom))} } @media (max-width:1023px){body[data-surum="hafif"] .toast-kap{left:16px;right:16px;align-items:stretch;bottom:calc(var(--alt-cubuk) + 12px + env(safe-area-inset-bottom))}body[data-surum="hafif"] .toast{width:auto}} /* Pencere/panel açıkken dar ekranda bildirim üstte: alttaki Kaydet düğmesini, son alanları ve alttan açılan takvimi örtmez. (Pencere içindeki doğrulama uyarısı zaten toast değil, pencerenin alt çubuğunda satır içi görünür: .modal-uyari) */ @media (max-width:767px){body.katman-acik .toast-kap{top:calc(10px + env(safe-area-inset-top));bottom:auto}} @media (max-width:1023px){body[data-surum="hafif"].katman-acik .toast-kap{top:calc(10px + env(safe-area-inset-top));bottom:auto}} /* İpucu: (balon JS ile konumlanır) */ .ipucu{position:relative;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;margin:0 0 0 4px;border-radius:50%;border:1.5px solid var(--bilgi);background:var(--yuzey);color:var(--bilgi);font:700 11px/1 Georgia,"Times New Roman",serif;font-style:italic;cursor:help;vertical-align:middle;flex:none} .ipucu::after{content:"";position:absolute;inset:-10px} .ipucu:hover,.ipucu[aria-expanded="true"]{background:var(--bilgi);color:#fff} .ipucu-balon{position:fixed;z-index:var(--z-toast);max-width:min(300px,calc(100vw - 24px));padding:8px 11px;border-radius:var(--r-sm);background:var(--grafit-900);color:#f2f3f5;font-size:13px;font-weight:400;line-height:1.45;box-shadow:var(--golge-2);pointer-events:none;animation:fonGir .12s ease-out} /* Açılır menü: