:root{--ink:#17241d;--forest:#14271e;--cream:#f4f1ea;--paper:#fbfaf7;--line:#dedbd2;--muted:#737970;--coral:#ef6a4b;--sage:#9eba9d;--amber:#e6a950;--marka-zemin:#13271e} *{box-sizing:border-box} html{background:var(--cream)} body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}[hidden]{display:none!important} .app-frame{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:244px;padding:28px 18px 20px;background:var(--forest);color:#f6f3ec;display:flex;flex-direction:column;z-index:10} .brand{display:flex;align-items:center;gap:11px;padding:0 10px;font-size:18px;letter-spacing:-.04em}.brand>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--marka-zemin);color:#fff;font-size:11px;letter-spacing:-.06em} /* Rozet zemini kenar çubuğuyla aynı tonda; ikon doğrudan zeminin üstünde duruyormuş gibi görünür. Delikler zemin rengiyle boyanır, kesip çıkarılmış etkisi verir. */ .marka-isareti svg{display:block} .marka-isareti .sayfa{fill:currentColor} .marka-isareti .delik{fill:var(--marka-zemin)} .nav-title{margin:38px 12px 10px;color:#789083;font-size:10px;font-weight:800;letter-spacing:.14em}.nav-title.second{margin-top:28px}.nav-link{min-height:46px;padding:0 12px;border-radius:10px;display:flex;align-items:center;gap:12px;color:#aebdb4;font-size:14px;font-weight:650;margin:3px 0}.nav-link:hover{background:#1b3327;color:#fff}.nav-link.active{background:#f3f0e9;color:var(--ink)}.nav-link small{margin-left:auto;font-size:10px;opacity:.7}.nav-link.muted{opacity:.48;cursor:default}.nav-mark{width:22px;text-align:center;font-size:17px} .sidebar-bottom{margin-top:auto}.integrations-mini{border:1px solid #2e4639;border-radius:12px;padding:12px 13px;display:grid;grid-template-columns:1fr auto;gap:10px;font-size:11px;color:#b7c5bc}.integrations-mini span{display:flex;align-items:center;gap:7px}.integrations-mini small{color:#789083}.mini-dot{width:7px;height:7px;border-radius:50%;display:inline-block}.mini-dot.trendyol{background:#ef6a4b}.mini-dot.opencart{background:#63aab8}.mini-dot.mysql{background:#4f9ac7}.mini-dot.pending{background:#e6a950}.pulse-dot.pending{background:#e6a950;box-shadow:0 0 0 5px rgba(230,169,80,.14)} .profile{display:flex;align-items:center;gap:10px;padding:18px 6px 0}.profile>span{width:34px;height:34px;background:#294235;border-radius:50%;display:grid;place-items:center;font-size:11px}.profile div{display:flex;flex-direction:column;gap:2px;font-size:12px}.profile small{color:#7f9588}.profile b{margin-left:auto;color:#74877c}.content-area{margin-left:244px;min-height:100vh}.mobile-bar{display:none} .page-shell{max-width:1440px;margin:0 auto;padding:38px 44px 60px}.page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.eyebrow{margin:0 0 8px;color:#858a82;font-size:12px;font-weight:800;letter-spacing:.12em}h1{margin:0;font-size:38px;line-height:1;letter-spacing:-.055em;font-weight:750}.header-copy{margin:10px 0 0;color:var(--muted);font-size:16px}.header-actions{display:flex;gap:10px} .button{border:1px solid var(--line);border-radius:10px;height:42px;padding:0 16px;cursor:pointer;font-size:14px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;white-space:nowrap}.button-secondary{background:var(--paper);color:var(--ink)}.button-primary{background:var(--ink);border-color:var(--ink);color:#fff}.button-mark{font-size:19px;line-height:1;margin:0;position:relative;top:-1px}.button:hover{transform:translateY(-1px)} .sync-banner{min-height:58px;border:1px solid #cfd8ca;background:#eef3eb;border-radius:12px;display:flex;align-items:center;justify-content:space-between;padding:10px 17px;margin-bottom:16px}.sync-copy,.sync-copy>div{display:flex;align-items:center}.sync-copy>div{align-items:flex-start;flex-direction:column;gap:3px;font-size:14px}.sync-copy span{color:#728078;font-size:12px}.pulse-dot{width:9px;height:9px;background:#4a8a63;box-shadow:0 0 0 5px rgba(74,138,99,.12);border-radius:50%;margin-right:14px}.channel-health{display:flex;gap:20px;font-size:13px;color:#667168}.channel-health span{display:flex;align-items:center;gap:7px} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:13px}.stat-card{min-height:152px;padding:18px;border-radius:13px;color:var(--ink);display:flex;flex-direction:column;border:1px solid rgba(25,40,31,.08)}.stat-card.coral{background:#f7cabb}.stat-card.green{background:#1b3729;color:#fff}.stat-card.sage{background:#cddcc9}.stat-card.amber{background:#f1d9ac}.stat-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700}.stat-arrow{font-size:18px;opacity:.55}.stat-card>strong{margin-top:auto;font-size:33px;letter-spacing:-.045em}.stat-card small{margin-top:5px;opacity:.58;font-size:12px} .dashboard-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:13px;margin-bottom:13px}.lower-grid{grid-template-columns:1.25fr 1fr}.panel{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:20px;min-width:0}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}.panel-heading h2{margin:0;font-size:19px;letter-spacing:-.025em}.sales-panel .panel-heading h2{font-size:28px}.positive-chip,.count-badge{background:#e0ecdc;color:#3b7653;border-radius:999px;padding:6px 8px;font-size:11px;font-weight:800} .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .period-picker{display:flex;gap:8px;align-items:center} .period-picker select{appearance:none;background:#e0ecdc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233b7653' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center/9px 6px;color:#3b7653;border:0;border-radius:999px;padding:6px 26px 6px 11px;font:inherit;font-size:11px;font-weight:800;cursor:pointer} .period-picker select:hover{background-color:#d3e3ce} .period-picker select:focus-visible{outline:2px solid #3b7653;outline-offset:2px}.count-badge{min-width:26px;text-align:center;background:#f3dfd6;color:#af503b} .chart{height:150px;display:flex;align-items:flex-end;gap:8px;border-bottom:1px solid var(--line);padding-top:10px;position:relative}.chart>span{flex:1;min-width:5px;position:relative;cursor:default;display:flex;flex-direction:column-reverse;background:#e9ece7;border-radius:3px 3px 0 0} /* Kısa barların da kolay hedeflenmesi için görünmez, tam yükseklikte isabet alanı. */ .chart>span::before{content:'';position:absolute;left:-4px;right:-4px;bottom:0;height:150px} .chart>span:focus-visible{outline:2px solid #3b7653;outline-offset:2px} .chart-tip{position:absolute;bottom:100%;left:50%;transform:translate(-50%,-6px);margin-bottom:2px;background:#1d2621;color:#fff;padding:7px 10px;border-radius:7px;font-size:12px;line-height:1.45;white-space:nowrap;text-align:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease;z-index:5;box-shadow:0 6px 18px rgba(0,0,0,.18)} .chart-tip b{display:block;font-weight:600;font-size:11px;color:#b9c6bd;letter-spacing:.01em} .chart-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1d2621} .chart>span:hover .chart-tip,.chart>span:focus-visible .chart-tip{opacity:1;visibility:visible;transform:translate(-50%,0)} /* Kenardaki barlarda ipucu panelden taşmasın. */ .chart>span:first-child .chart-tip{left:0;transform:translate(0,-6px)} .chart>span:first-child:hover .chart-tip,.chart>span:first-child:focus-visible .chart-tip{transform:translate(0,0)} .chart>span:first-child .chart-tip::after{left:18px} .chart>span:last-child .chart-tip{left:auto;right:0;transform:translate(0,-6px)} .chart>span:last-child:hover .chart-tip,.chart>span:last-child:focus-visible .chart-tip{transform:translate(0,0)} .chart>span:last-child .chart-tip::after{left:auto;right:18px;transform:none}.chart-labels{display:flex;justify-content:space-between;margin-top:8px;color:#92958f;font-size:11px}.channel-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);margin-top:18px;padding-top:15px}.channel-breakdown>div{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;font-size:13px}.channel-breakdown span{display:flex;gap:7px;align-items:center;color:#6c746e}.channel-breakdown strong{font-size:15px}.channel-breakdown small{grid-column:2;color:#969a94;text-align:right} .alert-panel{background:#f8f3ec}.alert-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;border-top:1px solid #e6e0d7;padding:15px 0}.alert-row:first-of-type{border-top:0}.alert-row>span:nth-child(2){display:flex;flex-direction:column;gap:4px}.alert-row strong{font-size:14px}.alert-row small{color:#858a83;font-size:12px}.alert-row b{font-weight:500;color:#8f938c}.alert-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#dbe8d8;color:#477458;font-size:18px;font-weight:700}.alert-icon.warm{background:#f2d2c7;color:#bd5d45}.alert-icon.pale{background:#eddfbd;color:#976f2a} .text-button{border:0;background:none;color:#667169;padding:0;font-size:12px;font-weight:750;cursor:pointer}.order-list,.seller-list{display:flex;flex-direction:column}.order-row{display:grid;grid-template-columns:1fr auto auto 112px;gap:18px;align-items:center;padding:11px 0;border-top:1px solid #ebe7df}.order-row:first-child,.seller-row:first-child{border-top:0}.order-id{display:flex;align-items:center;gap:10px}.order-id>span{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;background:#f0ded5;color:#bd5b43;font-size:12px;font-weight:900}.order-id>div,.seller-row>div{display:flex;flex-direction:column;gap:3px}.order-row strong,.seller-row strong{font-size:13px}.order-row small,.seller-row small{color:#92968f;font-size:11px}.status-pill{justify-self:end;min-width:94px;text-align:center;padding:6px 8px;border-radius:999px;background:#edf0eb;color:#65726a;font-size:11px;font-weight:750}.status-pill.hazirlaniyor,.status-pill.yeni{background:#dcebd9;color:#497357}.status-pill.onay-bekliyor{background:#f2e4c7;color:#8c672b}.status-pill.kargoda{background:#d9e9ec;color:#417681}.status-pill.iptal{background:#eee9e4;color:#8a827a}.status-pill.iade{background:#f3dfd6;color:#a4553a}.seller-row{display:grid;grid-template-columns:28px 36px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid #ebe7df}.rank{color:#a1a39e;font-size:12px;font-weight:800}.product-swatch{width:34px;height:34px;border-radius:8px}.seller-value{text-align:right} /* Kart sayısı sütun sayısına bölünmediğinde son kart tek başına ve kenarlıkları uyumsuz kalıyordu. Esnek düzende satırlar boşluk bırakmadan geriliyor; ayırıcılar da 1px gap + zemin ile veriliyor, böylece nth-child düzeltmelerine gerek kalmıyor. */ .product-summary{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:13px} .product-summary>div{flex:1 1 150px;padding:15px 18px;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:12px}.product-summary span{color:#7f847d;font-size:12px}.product-summary strong{font-size:16px}.table-panel{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden} .table-tools{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px;border-bottom:1px solid var(--line)}.search-box{width:min(390px,42vw);height:40px;border:1px solid var(--line);border-radius:9px;background:#fff;display:flex;align-items:center;padding:0 12px;gap:8px}.search-box:focus-within{border-color:#74907d;box-shadow:0 0 0 3px rgba(49,95,71,.08)}.search-box span{color:#979a94;font-size:20px}.search-box input{width:100%;border:0;outline:0;color:var(--ink);font-size:13px;background:transparent}.filters{display:flex;gap:8px}.filters select{height:40px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 30px 0 11px;color:#565f58;font-size:12px;outline:0} .bulk-bar{min-height:46px;padding:0 17px;background:#e8efe5;display:flex;align-items:center;gap:18px;font-size:12px;border-bottom:1px solid #d6e1d2}.bulk-bar button{border:0;background:none;color:#37634a;cursor:pointer;font-size:12px}.bulk-bar button:last-child{margin-left:auto;color:#727c74}.bulk-ipucu{color:#5c6a60;font-size:11px} /* Ana sayfadaki sipariş satırında küçük kalem görselleri. Siparişler sayfasındaki 50px'lik hâlinin dar sürümü: burada satır yüksekliği sabit ve yanında tutar ile durum rozeti var. */ /* Rozet görselin sağına 5px taşıyor; tutarla arasını açmak için o taşma kadar ek boşluk bırakılır, yoksa sayı rozete yapışık duruyor. */ .kalem-gorselleri.kucuk{margin-right:8px} .kalem-gorselleri.kucuk .product-thumb{width:30px;height:30px} .kalem-gorselleri.kucuk>b,.kalem-gorselleri.kucuk .kalem-gorsel>b{width:17px;height:17px;font-size:9px;right:-5px;top:-5px} .kalem-gorselleri.kucuk .kalem-fazlasi{font-size:11px} /* Giriş ekranındaki "beni hatırla" seçimi. */ .hatirla-secim{display:flex;align-items:flex-start;gap:9px;margin:-4px 0 4px;cursor:pointer;font-size:13px} .hatirla-secim input{margin-top:2px;accent-color:#284d39} .hatirla-secim span{display:flex;flex-direction:column;gap:2px} .hatirla-secim small{color:#7d8279;font-size:11px} /* Set içerikleri ekranı. Parçalar tablo yerine kart ızgarasında: bir sette 8 satır olabiliyor ve her satırda tek okunması gereken şey stok kodu. */ .set-aday,.set-kayit{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:12px 0} .set-baslik{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px} .set-baslik strong{display:block;font-size:15px;letter-spacing:.03em} .set-baslik small{color:#8b8f89;font-size:12px} .set-parcalar{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px} .set-parca{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--line); border-radius:9px;background:var(--paper);cursor:pointer} .set-parca.tanimli{cursor:default} .set-parca span{display:flex;flex-direction:column;min-width:0} .set-parca strong{font-size:13px;letter-spacing:.03em} .set-parca small{color:#8b8f89;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .set-parca form{margin-left:auto} .set-parca button{border:0;background:none;color:#a2a8a0;cursor:pointer;font-size:16px;line-height:1;padding:2px 4px} .set-parca button:hover{color:#b4533e} .set-ekle{display:flex;align-items:center;gap:9px;margin-top:12px} .set-ekle label{color:#8a8f87;font-size:10px;font-weight:800;letter-spacing:.1em} .set-ekle input{flex:0 1 190px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:#fff} /* Model bazında adet paneli. Set satışları içeriğine bölünerek eklenir. */ .model-tablo .kaynak{color:#8b8f89;font-size:12px;font-variant-numeric:tabular-nums} .model-tablo .kaynak b{color:var(--ink);font-weight:700} .model-toplam{display:flex;align-items:baseline;gap:8px;margin:0 0 14px;color:#6c746e;font-size:14px} .model-toplam strong{color:var(--ink);font-size:22px;font-variant-numeric:tabular-nums} /* Gönderim sürerken düğmeler soluklaşır ve tıklanamaz görünür; asıl engel JavaScript'te, bu yalnızca kullanıcıya bekleme durumunu anlatır. */ .form-actions .button{transition:opacity .15s} form.gonderiliyor .form-actions .button{opacity:.55;pointer-events:none}.table-wrap{overflow-x:auto}table{width:100%;min-width:940px;border-collapse:collapse}th{height:42px;padding:0 12px;background:#f6f4ef;border-bottom:1px solid var(--line);text-align:left;color:#8a8f87;font-size:11px;letter-spacing:.02em;font-weight:750;white-space:nowrap}td{height:70px;padding:0 12px;border-bottom:1px solid #ebe8e1;font-size:13px}tbody tr:hover{background:#faf8f3}.check-cell{width:42px;text-align:center}.check-cell input{accent-color:#284d39} .product-cell{display:flex;align-items:center;gap:11px;min-width:210px}.product-cell>div{display:flex;flex-direction:column;gap:4px}.product-cell strong{font-size:13px}.product-cell small{color:#92968e;font-size:11px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.product-thumb{width:38px;height:38px;border-radius:8px;position:relative;overflow:hidden;flex:none}img.urun-gorseli{object-fit:cover;display:block} th[data-sort]{padding:0}.siralama{display:flex;align-items:center;gap:6px;width:100%;height:42px;padding:0 12px;border:0;background:none;cursor:pointer;color:inherit;font:inherit;font-size:11px;font-weight:750;letter-spacing:.02em;white-space:nowrap;text-align:left}a.siralama{color:#8a8f87}.siralama:hover{background:#efece5;color:var(--ink)}.siralama.aktif{color:var(--ink)}.siralama-ok{color:#b3b7ae;font-size:13px;line-height:1}.siralama.aktif .siralama-ok{color:#5b7f68} .gorsel-onizleme{display:flex;align-items:center;gap:12px}.gorsel-onizleme .product-thumb{width:52px;height:52px}.gorsel-onizleme small{color:#8b8f89;font-size:12px;line-height:1.5}.product-thumb i{position:absolute;width:18px;height:24px;border-radius:8px 8px 5px 5px;background:rgba(255,255,255,.48);left:10px;top:8px;transform:rotate(-7deg)}.channel-tags{display:flex;gap:5px}.channel-tag{width:18px;height:18px;border-radius:6px;display:grid;place-items:center;font-size:11px;font-weight:900}.channel-tag.trend,.channel-tag.open{background:transparent}.channel-tag img{width:18px;height:18px;display:block}.price-cell{font-weight:650} /* Fark türetilmiş bir değer; fiyatların önüne geçmesin diye daha soluk. Yön ok yerine işaretle veriliyor, renk tek başına anlam taşımıyor. */ .fark-cell{white-space:nowrap} .fiyat-farki{font-size:12px;font-weight:750;color:#7f847d;font-variant-numeric:tabular-nums} .fiyat-farki.artı{color:#3c6a4d} .fiyat-farki.eksi{color:#a2452e}.stock-value{display:inline-grid;place-items:center;min-width:30px;height:27px;border-radius:7px;background:#eef2eb;color:#395d47;font-weight:800}.stock-value.low{background:#f3ddd5;color:#b6533d} /* Fiziksel stok depodaki fiili miktar, sanal stok pazaryerine gönderilen sayı. İki sütun yan yana ve aynı görünüyordu. */ .stock-value.fiziksel{background:#f1e6d9;color:#483a34;font-weight:800;padding:4px;height:auto;min-height:27px} .product-status{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;font-weight:700}.product-status i{width:6px;height:6px;border-radius:50%}.product-status.ok{color:#477258}.product-status.ok i{background:#5b926e}.product-status.critical{color:#a06f25}.product-status.critical i{background:#d49b3f}.product-status.error{color:#b4533e}.product-status.error i{background:#d96a50}.row-menu{border:0;background:none;color:#81877f;cursor:pointer;font-weight:800}.empty-state{padding:55px;text-align:center;display:flex;flex-direction:column;gap:6px}.empty-state span{color:#8b8f89;font-size:13px}.table-footer{min-height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:#8a8e87;font-size:11px}.table-footer div{display:flex;align-items:center;gap:5px}.table-footer button,.table-footer strong{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:7px;display:grid;place-items:center;color:#5f6861}.table-footer button{cursor:pointer}.table-footer button:disabled{opacity:.4}.table-footer strong{background:var(--forest);color:#fff;border-color:var(--forest)} .toast{position:fixed;right:24px;bottom:24px;max-width:380px;padding:13px 16px;border-radius:10px;background:var(--forest);color:#fff;box-shadow:0 12px 35px rgba(14,30,21,.2);font-size:13px;z-index:50} .setup-page{display:grid;place-items:center;min-height:100vh}.setup-card{max-width:680px;width:100%;padding:38px}.setup-card h1{margin-bottom:18px}.setup-card p{color:var(--muted);line-height:1.65}.setup-card code{display:block;margin:22px 0;padding:16px 18px;border-radius:9px;background:var(--forest);color:#f7f4ed;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.setup-card .setup-note{font-size:13px;margin-bottom:0} .auth-body{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--forest)}.auth-shell{width:100%;max-width:430px}.auth-card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:32px 30px;box-shadow:0 22px 60px rgba(8,20,14,.28)}.auth-brand{display:flex;align-items:center;gap:11px;padding:0;margin-bottom:26px;font-size:19px;letter-spacing:-.04em;color:var(--ink)}.auth-card h1{font-size:26px;margin:0 0 8px}.auth-intro{margin:0 0 22px;color:var(--muted);font-size:14px;line-height:1.65} .auth-alert{border-radius:9px;padding:11px 13px;margin:0 0 18px;font-size:13px;line-height:1.55}.auth-alert.error{background:#f7ddd4;border:1px solid #e9c4b7;color:#a2452e}.auth-alert.notice{background:#e3ede0;border:1px solid #c9ddc6;color:#3c6a4d} .auth-form{display:flex;flex-direction:column;gap:15px}.field{display:flex;flex-direction:column;gap:6px}.field label{font-size:11px;font-weight:800;letter-spacing:.12em;color:#7d827b}.field input{height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 12px;font-size:15px;color:var(--ink);outline:0}.field input:focus{border-color:#74907d;box-shadow:0 0 0 3px rgba(49,95,71,.08)}.field small{color:#8b8f89;font-size:12px}.auth-form .button{width:100%;height:46px;margin-top:6px}.auth-form .button:hover{transform:none}.auth-foot{margin:22px 0 0;color:#8b8f89;font-size:12px;line-height:1.7}.auth-foot code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#5f6861} .geri-baglantisi{color:#7d8279;font-weight:800;letter-spacing:.02em}.geri-baglantisi:hover{color:var(--ink)} .form-alert{border-radius:10px;padding:13px 16px;margin:0 0 16px;font-size:14px;line-height:1.55}.form-alert.ok{background:#e3ede0;border:1px solid #c9ddc6;color:#3c6a4d}.form-alert.error{background:#f7ddd4;border:1px solid #e9c4b7;color:#a2452e}.form-alert strong{display:block;margin-bottom:6px;font-size:14px}.form-alert ul{margin:0;padding-left:18px}.form-alert li{margin-top:3px} .form-panel{margin-bottom:13px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.form-grid .field.wide{grid-column:1/-1}.form-panel .field input[readonly]{background:#f2efe8;color:#6d736b}.form-panel .field input[type=color]{padding:4px;height:44px;cursor:pointer} .kanal-satiri{display:grid;grid-template-columns:200px minmax(0,240px) auto;align-items:end;gap:16px;padding:14px 0;border-top:1px solid #ebe7df}.kanal-satiri:first-of-type{border-top:0}.kanal-secim{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:650;padding-bottom:12px;cursor:pointer}.kanal-secim input{width:17px;height:17px;accent-color:#284d39;cursor:pointer}.kanal-secim span{display:flex;align-items:center;gap:8px}.kanal-satiri .product-status{padding-bottom:14px} .form-note{margin:16px 0 0;padding-top:14px;border-top:1px solid #ebe7df;color:#8b8f89;font-size:13px;line-height:1.6} .form-actions{display:flex;justify-content:flex-end;gap:10px;padding:4px 0 40px}.form-actions .button{min-width:130px;display:inline-grid;place-items:center} /* Metin yerine ikon: dokunma hedefi 32px kare, renk koyu gri — açık gri 3:1'in altında kalıyor ve ikon tek başına anlam taşıdığı için grafik kontrastı şart. Ad aria-label'da. */ a.row-menu{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;color:#4a5148;text-decoration:none} a.row-menu:hover{background:#eceee9;color:var(--ink)} a.row-menu:focus-visible{outline:2px solid var(--forest);outline-offset:2px} a.row-menu svg{display:block} .table-tools .filters .button{height:40px;font-size:12px}.filtre-temizle{align-self:center;padding:0 4px}.tarih-hucresi{color:#6f756e;white-space:nowrap}.kanal-adi{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:#5c635b;font-weight:650} .table-footer a{width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:7px;display:grid;place-items:center;color:#5f6861}.table-footer a:hover{border-color:#9aa79d;color:var(--ink)} .detay-baslik{padding:18px 18px 0;margin-bottom:14px} .toplam-satiri{border-top:1px solid var(--line);padding:14px 18px;display:flex;flex-direction:column;gap:7px;align-items:flex-end;font-size:13px}.toplam-satiri>div{display:flex;gap:22px;align-items:baseline;min-width:270px;justify-content:space-between}.toplam-satiri span{color:#7f847d}.toplam-satiri .fark span,.toplam-satiri .fark strong{color:#a06f25}.toplam-satiri .genel{border-top:1px solid #e6e2da;padding-top:8px;font-size:15px}.toplam-satiri .genel strong{font-size:17px} .form-note.tek-basina{border-top:0;padding-top:0;margin-top:16px} .sorun-paneli{background:#f8f3ec;border:1px solid #e6d9c8;border-radius:12px;margin-bottom:13px;overflow:hidden}.sorun-paneli summary{cursor:pointer;padding:14px 17px;display:flex;align-items:baseline;gap:12px;font-size:14px;color:#8a5f2a}.sorun-paneli summary::-webkit-details-marker{display:none}.sorun-paneli summary::before{content:'!';width:20px;height:20px;flex:none;border-radius:50%;background:#e6c79b;color:#7a5320;display:grid;place-items:center;font-weight:800;font-size:13px;align-self:center}.sorun-paneli summary span{color:#a0885f;font-size:12px}.sorun-paneli[open] summary{border-bottom:1px solid #e6d9c8} .sorun-paneli ul{margin:0;padding:10px 17px 14px;list-style:none}.sorun-paneli li{display:grid;grid-template-columns:130px 90px 1fr;gap:12px;align-items:baseline;padding:7px 0;border-top:1px solid #efe6d9;font-size:13px;color:#6f6a62}.sorun-paneli li:first-child{border-top:0}.sorun-paneli li a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:#8a5f2a}.sorun-paneli li a:hover{text-decoration:underline}.sorun-paneli li em{font-style:normal;color:#96917f;font-size:12px} .kanal-kartlari{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:13px;margin-bottom:13px}.kanal-karti{padding:18px 20px}.kanal-basligi{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid #ebe7df;margin-bottom:13px}.kanal-basligi .kanal-adi{font-size:16px;font-weight:750;color:var(--ink)} .kanal-aciklama{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.kanal-aciklama code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#f1eee7;padding:1px 5px;border-radius:4px;font-size:12px} .senkron-satiri{display:grid;grid-template-columns:80px auto 1fr auto auto;gap:12px;align-items:baseline;padding:7px 0;font-size:13px}.senkron-tur{color:#7f847d;font-weight:700}.senkron-zaman{color:var(--ink);white-space:nowrap}.senkron-sayilar{color:#8b8f89;font-size:12px}.senkron-sayilar b{color:#a06f25}.senkron-yok{color:#a8a49b;font-style:italic;grid-column:2/5} /* Eşitle düğmesi satırın sonunda; ızgara hizasını bozmasın diye form kendi başına bir sütun, düğme de satır yüksekliğine oturuyor. */ .esitle-form{grid-column:5;margin:0;align-self:center} .esitle-dugmesi{padding:5px 11px;font-size:12px;white-space:nowrap}.senkron-mesaj{margin:0 0 8px 92px;padding:8px 11px;border-radius:7px;background:#f8f3ec;color:#8a5f2a;font-size:12px;line-height:1.6} .kuru-etiket{background:#eae5db;color:#7c7568;border-radius:999px;padding:3px 8px;font-size:11px;font-weight:700} .button-tehlike{background:#a4452e;border-color:#a4452e;color:#fff}.button-tehlike:hover{background:#8f3a25;border-color:#8f3a25} .senkron-bilgi{color:#95998f;font-size:12px;white-space:nowrap}.kanal-uyarisi{margin:0 0 12px;padding:9px 12px;border-radius:8px;background:#f6ddd4;border:1px solid #e9c4b7;color:#a2452e;font-size:13px;line-height:1.5} .form-panel .field select{height:44px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:0 34px 0 12px;font-size:15px;color:var(--ink);outline:0;appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7d827b 50%),linear-gradient(135deg,#7d827b 50%,transparent 50%);background-position:calc(100% - 17px) 20px,calc(100% - 12px) 20px;background-size:5px 5px;background-repeat:no-repeat}.form-panel .field select:focus{border-color:#74907d;box-shadow:0 0 0 3px rgba(49,95,71,.08)} .alan-basligi{margin:0 0 10px;color:#7d827b;font-size:11px;font-weight:800;letter-spacing:.12em}.alan-basligi span{font-weight:600;letter-spacing:0;text-transform:none;color:#9aa094} .kanal-secim-grubu{margin-top:20px;padding-top:16px;border-top:1px solid #ebe7df;display:flex;flex-wrap:wrap;gap:22px}.kanal-secim-grubu .alan-basligi{width:100%;margin:0}.kanal-secim-grubu .kanal-secim{padding-bottom:0} .ok-hucresi{width:36px;text-align:center;color:#a0a49c}.yeni-deger{color:#2f5d43;font-weight:800} .atlanan-liste{padding:16px 18px;border-top:1px solid var(--line);background:#faf8f3}.atlanan-liste ul{margin:0;padding-left:18px;color:#7f847d;font-size:13px;line-height:1.9}.atlanan-liste strong{color:#5f6861;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.atlanan-liste .form-note{border-top:0;padding-top:8px;margin:0} .logout-form{margin-left:auto;display:flex}.logout-button{border:0;background:none;padding:4px 0 4px 8px;color:#7f9588;font-size:10px;font-weight:750;cursor:pointer}.logout-button:hover{color:#fff}.mobile-bar .logout-button{color:#cbd8d0;font-size:11px;padding:0} @media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.dashboard-grid,.lower-grid{grid-template-columns:1fr}} @media(max-width:900px){.form-grid{grid-template-columns:1fr}.kanal-satiri{grid-template-columns:1fr;align-items:stretch;gap:10px}.kanal-secim{padding-bottom:0}.kanal-satiri .product-status{padding-bottom:0}} @media(max-width:760px),(max-height:500px){.sidebar{display:none}.content-area{margin-left:0;padding-top:62px}.mobile-bar{position:fixed;inset:0 0 auto;height:62px;background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:20}.mobile-bar .brand{padding:0;font-size:15px}.mobile-bar .brand>span{width:30px;height:30px}.mobile-bar nav{display:flex;gap:16px;font-size:11px}.page-shell{padding:25px 16px 45px}.page-header{align-items:flex-start;flex-direction:column}.header-actions{width:100%}.header-actions .button{flex:1}.sync-banner{align-items:flex-start;gap:12px;flex-direction:column}.stats-grid{grid-template-columns:1fr 1fr}.stat-card{min-height:128px;padding:15px}.stat-card>strong{font-size:26px}.panel{padding:16px}.order-row{grid-template-columns:1fr auto}.order-row>.status-pill,.order-row>.kalem-gorselleri{display:none}.table-tools{align-items:stretch;flex-direction:column}.search-box{width:100%}.filters select{width:50%}.products-page h1{font-size:34px}.toast{right:16px;bottom:16px;left:16px}} @media(max-width:420px){.stats-grid{grid-template-columns:1fr}.stat-card{min-height:112px}.product-summary>div{flex-basis:100%}.seller-row{grid-template-columns:24px 34px 1fr}.seller-value{display:none!important}} /* --- Fiziksel / sanal stok ------------------------------------------- */ .esitle-cell{width:34px;padding-left:0;padding-right:0;text-align:center} .esitle{background:none;border:1px solid var(--line);border-radius:7px;width:26px;height:26px;line-height:1; font-size:14px;color:#6c746e;cursor:pointer;transition:background .12s ease,color .12s ease,border-color .12s ease} .esitle:hover:not(:disabled){background:#e0ecdc;border-color:#3b7653;color:#3b7653} .esitle:focus-visible{outline:2px solid #3b7653;outline-offset:2px} .esitle:disabled{opacity:.28;cursor:default} /* Fiziksel sütunun yeni zemininde eski amber 3,79:1'e düşüyordu; 13px kalın metin için 4,5 gerekiyor. Koyultuldu: 4,95:1. */ .stock-value.acikta{color:#8f5417} .acikta-mark{display:inline-block;margin-left:4px;font-style:normal;font-weight:800;color:#c2761f} .channel-tag.haric{background:#eeece6;color:#9b9a92;font-weight:800;font-size:11px;display:inline-grid;place-items:center} .product-status.depleted{color:#b4533e} /* --- Yığılmış satış grafiği ------------------------------------------- */ /* Segmentler kanal renginde; üst üste binerek günün toplamını verir. */ .chart-seg{display:block;width:100%;min-height:0;transition:height .18s ease,opacity .18s ease} .chart-seg.trendyol{background:#315f47} .chart-seg.opencart{background:#b7cbb2} .chart-bar>.chart-seg:last-of-type{border-radius:3px 3px 0 0} .chart-bar:hover .chart-seg{filter:brightness(1.08)} /* Kanal gizlendiğinde segment sıfırlanır, sütun kalan kanala göre küçülür. */ .chart-seg[hidden]{display:block!important;height:0!important} /* Boş gün: ince bir taban çizgisi kalsın ki sütun sırası okunabilsin. */ .chart-tip em{display:flex;align-items:center;gap:6px;font-style:normal;font-size:12px;justify-content:flex-start} .chart-tip em .mini-dot{flex:none} .chart-tip u{display:block;margin-top:5px;padding-top:5px;border-top:1px solid rgba(255,255,255,.18);text-decoration:none;font-size:11px;color:#b9c6bd} .chart-tip em[hidden]{display:none!important} /* Lejant filtresi */ .kanal-filtre{background:none;border:0;padding:0;display:flex;align-items:center;gap:7px;color:#6c746e;font:inherit;font-size:13px;cursor:pointer;transition:opacity .15s ease} .kanal-filtre:hover{color:var(--ink)} .kanal-filtre:focus-visible{outline:2px solid #3b7653;outline-offset:3px;border-radius:4px} .kanal-filtre[aria-pressed="false"]{opacity:.38;text-decoration:line-through} .sales-panel .channel-breakdown .mini-dot.trendyol, .chart-tip .mini-dot.trendyol{background:#315f47} .sales-panel .channel-breakdown .mini-dot.opencart, .chart-tip .mini-dot.opencart{background:#b7cbb2} /* --- Başlık ve menü yazı tipi ----------------------------------------- */ /* Gövde metni Inter kalır; Outfit yalnızca menü ve başlıklarda kullanılır. Font yüklenemezse Inter'a düşer, düzen bozulmaz. */ .brand, .nav-title, .nav-link, .mobile-bar, h1, h2, h3, .eyebrow, .stat-top, .stat-card > strong, .panel-heading h2 { font-family: 'Outfit', Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* --- Son eşitleme şeridi ---------------------------------------------- */ .senkron-seridi{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:-14px 0 20px;font-size:12px;color:#8b918a} .senkron-seridi>span{font-weight:800;letter-spacing:.08em;font-size:10px;text-transform:uppercase;color:#a3a8a1} .senkron-seridi em{display:inline-flex;align-items:center;gap:6px;font-style:normal} .senkron-seridi b{font-weight:650;color:#5f665f} /* --- Raporlar ---------------------------------------------------------- */ .rapor-filtre{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px 18px;margin-bottom:13px} .rapor-filtre label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#7d837c} .rapor-filtre span{font-weight:800;letter-spacing:.06em;font-size:10px;text-transform:uppercase;color:#a3a8a1} .rapor-filtre select,.rapor-filtre input{border:1px solid var(--line);border-radius:9px;height:38px;padding:0 11px;background:#fff;color:var(--ink);font-size:14px} .rapor-filtre select:focus-visible,.rapor-filtre input:focus-visible{outline:2px solid #3b7653;outline-offset:1px} .rapor-filtre .button{margin-left:auto} /* Haftanın günleri: çubuk en yüksek güne göre ölçekli, en iyi gün vurgulu. */ /* Sipariş satırındaki ürün görselleri: küçük kare + sağ altta adet rozeti. */ /* Toplama listesi. Depoda okunacak: kod ve adet iri, gerisi ikincil. */ .toplama-modal{width:min(620px,calc(100vw - 32px))} .toplama-eylem{display:flex;align-items:center;gap:8px} .toplama-ozet{margin:0 0 14px;color:#6c746e;font-size:14px} .toplama-ozet strong{color:var(--ink);font-size:16px} .toplama-tablosu .product-cell strong{font-size:15px;letter-spacing:.03em} .toplama-tablosu .product-cell small{color:#8b8f89} .toplama-adet{font-size:20px;font-variant-numeric:tabular-nums} .adet-kirilim{display:block;color:#8b8f89;font-size:11px;white-space:nowrap;margin-top:1px} /* Genel table{min-width:940px} bu dar modalde adet sütununu ekran dışına itiyordu; toplama listesinde okunması gereken asıl sayı o. table-layout:fixed olmadan uzun ürün adı hücreyi genişletip adedi yine dışarı itiyordu; sabit yerleşimde ad kırpılır, sayı yerinde kalır. */ /* .rapor-tablo.cari daha sonra table-layout:auto diyor; bu tablo o sınıfı da taşıdığı için seçici iki sınıfla yazılmalı, yoksa eziliyor. */ table.rapor-tablo.toplama-tablosu{min-width:0;width:100%;table-layout:fixed} table.rapor-tablo.toplama-tablosu th.sayi,table.rapor-tablo.toplama-tablosu td.sayi{width:76px} .toplama-tablosu .product-cell{min-width:0} .toplama-tablosu .product-cell>div{min-width:0} .toplama-tablosu .product-cell strong, .toplama-tablosu .product-cell small{display:block;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .toplama-tablosu .stok-yetersiz{background:#fdf3ef} /* Hazırlandı işareti: yalnızca ekranda geçerli, kayıt yapılmaz. Sipariş hazırlarken hangi satırın toplandığını anlık göstermek için var; sayfa yenilenince ya da modal kapanınca sıfırlanır. */ .toplama-modal .toplama-satir{cursor:pointer;user-select:none} .toplama-satir.hazir{background:#eef3ec} .toplama-satir.hazir .product-cell{opacity:.5} .toplama-satir.hazir .toplama-adet{opacity:.5} .toplama-satir.hazir .product-cell strong::after{content:' ✓';color:#5b926e;opacity:1} .stok-uyari{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px; border-radius:50%;background:#c2553a;color:#fff;font-size:10px;font-weight:800; vertical-align:middle} /* Kesin eksik değil, "rafı kontrol et": stok sıfırlandı ama düşüm 0'ın altına inmediği için panel eksik olup olmadığını bilemiyor. Kırmızı uyarıyla karışmasın diye amber. */ .stok-uyari.kontrol{background:#c99a3f} .dugme-rozet{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px; margin-left:7px;border-radius:99px;background:rgba(255,255,255,.22);font-size:11px;font-weight:800} /* Listenin yazdırma kopyası. Ekranda hiç görünmez; modaldaki Yazdır düğmesi bunu altına taşıyıp html'e .yazdir-toplama ekler. Modal yazdırılamıyor: showModal() onu üst katmana alıyor ve tarayıcılar üst katmanı kâğıda basmıyor — sonuç boş sayfaydı. Sınıf koşulu şart: bu stil sayfası tüm panelde ortak, koşulsuz yazılsaydı etiket sayfası yazdırılırken de her şeyi gizlerdi. */ .toplama-yazdir{display:none} .toplama-yazdir-baslik{margin:0 0 14px;font-size:20px;display:flex; justify-content:space-between;align-items:baseline;gap:12px} .toplama-yazdir-baslik span{font-size:13px;font-weight:500;color:#6c746e} @media print{ html.yazdir-toplama body>*:not(.toplama-yazdir){display:none!important} html.yazdir-toplama .toplama-yazdir{display:block!important} html.yazdir-toplama #toplama-modal::backdrop{display:none} html.yazdir-toplama .toplama-yazdir .table-wrap{overflow:visible} html.yazdir-toplama .toplama-yazdir .toplama-tablosu{min-width:0} } /* Sipariş satırı 50px görselleri taşıyor; genel 70px dar kalıyordu. Yalnızca bu tabloya uygulanır, ürün listesi 70px'te kalsın. */ .siparis-tablosu td{height:80px} .kalem-gorselleri{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .kalem-gorsel{position:relative;display:inline-flex;line-height:0} .kalem-gorsel .product-thumb{width:50px;height:50px;border-radius:10px} /* Adet rozeti tam daire: genişlik ve yükseklik eşit, yatay dolgu yok. Sağ ÜSTTE durur. Tek adet açık, birden fazlası koyu mavi; böylece çok adetli sipariş listeye bakarken hemen ayırt edilir. Üç basamaklı adette punto küçülür, yoksa daire ovale dönerdi. */ .kalem-gorsel>b{position:absolute;right:-6px;top:-6px;width:22px;height:22px; border-radius:50%;color:#fff;font-size:11px;font-weight:800; display:grid;place-items:center;line-height:1;border:2px solid var(--paper); font-variant-numeric:tabular-nums} .kalem-gorsel>b.tekil{background:#4a6fbd} .kalem-gorsel>b.coklu{background:#26418f} .kalem-gorsel>b.uzun{font-size:9px;letter-spacing:-.02em} .kalem-fazlasi{display:inline-grid;place-items:center;min-width:32px;height:32px;padding:0 6px; border-radius:99px;background:#eceee9;color:#5f6861;font-size:13px;font-weight:800} .kalem-yok{color:#a8a49b} /* Sipariş numarası detaya gider; ayrı bir "Detay" sütunu yerine. */ .siparis-no{font-size:14px;font-weight:800;color:var(--ink);text-decoration:none} .siparis-no:hover{color:var(--forest);text-decoration:underline} .siparis-no:focus-visible{outline:2px solid var(--forest);outline-offset:2px;border-radius:4px} /* Notu olan sipariş listede belli olsun; üstüne gelince tam metin çıkar. */ .not-rozeti{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:2px 8px; border-radius:99px;background:#f7eddb;border:1px solid #e6d5b4;color:#755527; font:inherit;font-size:10px;font-weight:800;letter-spacing:.04em;vertical-align:middle; cursor:help} .not-rozeti::before{content:'';width:5px;height:5px;border-radius:50%;background:#c99a3f} .not-rozeti:hover,.not-rozeti:focus-visible{background:#f0e2c8;border-color:#d9c295} .not-rozeti:focus-visible{outline:2px solid var(--forest);outline-offset:2px} /* İpucu gövdeye bağlı ve sabit konumlu: tablo sarmalayıcısındaki overflow, mutlak konumlu bir kutuyu kırpardı. */ .not-ipucu{position:absolute;z-index:60;max-width:340px;padding:10px 13px;border-radius:10px; background:var(--ink);color:#f4f1ea;font-size:13px;line-height:1.55; white-space:pre-line;box-shadow:0 10px 26px rgba(20,39,30,.24);pointer-events:none} /* Sipariş notu kartı: sayfada kaybolmasın diye amber şerit. */ .siparis-notu{margin:0 0 13px;padding:14px 16px;border-radius:12px; background:#f7eddb;border:1px solid #e6d5b4;border-left:4px solid #c99a3f} .siparis-notu-basi{display:flex;align-items:baseline;gap:10px;margin-bottom:6px} .siparis-notu-basi strong{font-size:12px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:#755527} .siparis-notu-basi small{color:#9a7f4d;font-size:12px} .siparis-notu p{margin:0;color:#5c4a24;font-size:14px;line-height:1.6} /* Not formu. textarea hiç biçimlendirilmemişti; tarayıcı varsayılanı tek aralıklı yazı tipi ve çıplak kenarlık veriyordu. */ .not-formu>summary{display:flex;align-items:baseline;gap:10px;cursor:pointer; font-size:14px;font-weight:750;color:#5f7a68;list-style:none} .not-formu>summary::-webkit-details-marker{display:none} .not-formu>summary>span::before{content:'+';display:inline-block;width:14px;font-weight:800} .not-formu[open]>summary>span::before{content:'–'} .not-formu>summary small{color:#9aa098;font-size:12px;font-weight:400} .not-formu>summary:hover{color:var(--ink)} .not-formu form{max-width:620px;margin-top:12px} .not-formu textarea{display:block;width:100%;min-height:96px;resize:vertical; padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:#fff; font-family:inherit;font-size:14px;line-height:1.6;color:var(--ink);outline:0} .not-formu textarea:focus{border-color:#74907d;box-shadow:0 0 0 3px rgba(49,95,71,.08)} .not-formu textarea::placeholder{color:#a8a49b} .not-formu-alt{display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:10px;flex-wrap:wrap} .not-formu-alt small{color:#8b8f89;font-size:12px} .not-paneli{padding-top:16px;padding-bottom:16px} .gun-dagilimi{display:grid;gap:10px} .gun-satiri{display:grid;grid-template-columns:78px minmax(80px,1fr) auto auto 34px; align-items:center;gap:12px;font-size:13px} .gun-ad{color:#6c746e;font-weight:700} .gun-cubuk{height:8px;border-radius:99px;background:#eceee9;overflow:hidden} .gun-cubuk i{display:block;height:100%;border-radius:99px;background:#8aa894} .gun-satiri.en-iyi .gun-cubuk i{background:var(--forest)} .gun-satiri.en-iyi .gun-ad{color:var(--ink)} .gun-satiri strong{font-variant-numeric:tabular-nums} .gun-satiri small{color:#8b8f89;font-size:12px;white-space:nowrap} .gun-satiri b{text-align:right;color:#6c746e;font-size:12px} .dagilim-satiri{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)} .dagilim-satiri:last-child{border-bottom:0} .dagilim-satiri>span{display:flex;align-items:center;gap:8px;font-size:14px;color:#4e554e} .dagilim-satiri strong{font-size:16px;text-align:right} .dagilim-satiri small{grid-column:1/-1;color:#969a94;font-size:12px} .dagilim-cubuk{grid-column:1/2;height:7px;border-radius:99px;background:#e9ece7;overflow:hidden} .dagilim-cubuk i{display:block;height:100%;border-radius:99px} .dagilim-cubuk i.trendyol{background:#315f47} .dagilim-cubuk i.opencart{background:#b7cbb2} .dagilim-satiri b{font-size:13px;color:#6c746e;text-align:right} .rapor-tablo{width:100%;border-collapse:collapse;font-size:14px} .rapor-tablo th{text-align:left;font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#9aa098;font-weight:800;padding:0 10px 9px;border-bottom:1px solid var(--line)} .rapor-tablo td{padding:11px 10px;border-bottom:1px solid #eef0ec;vertical-align:middle} .rapor-tablo tr:last-child td{border-bottom:0} .rapor-tablo .sayi{text-align:right;white-space:nowrap} .rapor-tablo th:not(:first-child):not(:nth-child(2)){text-align:right} .rapor-tablo .sira{color:#b6bab3;font-variant-numeric:tabular-nums} .rapor-tablo .alt-metin{display:block;color:#969a94;font-size:13px;margin-top:2px} /* Çok sütunlu rapor grafiğinde sütunlar panele sığsın. */ .chart-yogun{overflow:visible} .chart-yogun>span{min-width:0} /* Rapor tablolarında ürün adı sütunu sabit genişlik alır; yoksa uzun adlar sayı sütunlarını panelin dışına iter ve yatay kaydırma gerekir. */ .rapor-tablo{table-layout:fixed} .rapor-tablo.cok-satan col,.rapor-tablo.stok col{width:auto} .rapor-tablo.cok-satan th:nth-child(1),.rapor-tablo.cok-satan td:nth-child(1){width:34px} .rapor-tablo.cok-satan th:nth-child(3),.rapor-tablo.cok-satan td:nth-child(3), .rapor-tablo.cok-satan th:nth-child(4),.rapor-tablo.cok-satan td:nth-child(4), .rapor-tablo.cok-satan th:nth-child(5),.rapor-tablo.cok-satan td:nth-child(5){width:74px} .rapor-tablo.cok-satan th:nth-child(6),.rapor-tablo.cok-satan td:nth-child(6){width:92px} .rapor-tablo.stok th:nth-child(2),.rapor-tablo.stok td:nth-child(2){width:72px} .rapor-tablo.stok th:nth-child(3),.rapor-tablo.stok td:nth-child(3){width:124px} /* Uzun ürün adı satırı taşırmasın, üç nokta ile kesilsin. */ .rapor-tablo .product-cell{min-width:0} .rapor-tablo .product-cell>div{min-width:0} .rapor-tablo .product-cell strong,.rapor-tablo .product-cell small, .rapor-tablo td>strong,.rapor-tablo .alt-metin{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Ürün listesi için konan genel min-width rapor tablolarını panelden taşırıyordu; rapor tabloları kapsayıcılarına sığar. */ .rapor-tablo{min-width:0} .rapor-tablo .kanal-baslik{display:inline-flex;align-items:center;justify-content:flex-end;width:100%} .rapor-tablo .kanal-baslik img{width:16px;height:16px;display:block} .devamini-gor{width:100%;margin-top:14px} /* Kanal rozeti: ikon varsa görsel, yoksa baş harf. */ .kanal-rozet{width:31px;height:31px;border-radius:8px;display:grid;place-items:center;background:#f4f2ed;flex:none} .kanal-rozet img{width:22px;height:22px;display:block;border-radius:5px} .kanal-rozet.yazi{background:#f0ded5;color:#bd5b43;font-size:12px;font-weight:900} /* Ana paneldeki çok satanlar listesinde ürün görseli. */ .seller-row .product-thumb{width:38px;height:38px;border-radius:9px;flex:none} /* --- Tedarik & Cari Hesap --- */ /* Genel rapor tablosu başlıkları konumlarına göre hizalanıyordu; cari tablolarında sayı sütunları sabit değil, bu yüzden hizalama th'nin kendi sınıfından okunur. */ .rapor-tablo.cari th{text-align:left} .rapor-tablo.cari th.sayi{text-align:right} .rapor-tablo.cari{table-layout:auto} .rapor-tablo.cari tfoot td{border-top:1px solid var(--line);border-bottom:0;padding-top:12px;font-weight:750} .cari-ad{display:block;color:inherit;text-decoration:none} .cari-ad strong{display:block;font-size:14px} .cari-ad small{display:block;color:#969a94;font-size:13px;margin-top:2px} .cari-ad:hover strong{text-decoration:underline} /* Borcu kapanmış satır sessiz kalsın, açık borç göze çarpsın. */ .borc-tutar{font-variant-numeric:tabular-nums;color:#969a94} .borc-tutar.acik{color:#a2452e;font-weight:800} .button-mini{height:30px;padding:0 11px;font-size:12px;border-radius:8px} .button-mini:hover{transform:none} /* Alım formundaki ürün satırları */ .rapor-tablo.alim-satirlari{table-layout:auto} .rapor-tablo.alim-satirlari th{text-align:left} .rapor-tablo.alim-satirlari td{padding:7px 6px} .rapor-tablo.alim-satirlari input{width:100%;min-width:0;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 10px;font:inherit;font-size:14px;background:var(--paper);color:var(--ink)} .rapor-tablo.alim-satirlari th:nth-child(3),.rapor-tablo.alim-satirlari td:nth-child(3){width:88px} .rapor-tablo.alim-satirlari th:nth-child(4),.rapor-tablo.alim-satirlari td:nth-child(4){width:118px} .rapor-tablo.alim-satirlari th:nth-child(5),.rapor-tablo.alim-satirlari td:nth-child(5){width:104px;text-align:right} .rapor-tablo.alim-satirlari th:nth-child(6),.rapor-tablo.alim-satirlari td:nth-child(6){width:44px} .satir-toplami{font-variant-numeric:tabular-nums;color:#6c746e} .alim-alt{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;flex-wrap:wrap} .alim-toplam{font-size:13px;color:#6c746e} .alim-toplam strong{font-size:19px;color:var(--ink);margin-left:8px} /* Ödeme satırındaki sil düğmesi tabloyu genişletmesin. */ .rapor-tablo.cari td form{margin:0} /* --- Tedarik ürün tanımları --- */ .olcu-rozet{display:inline-block;background:#eef0ec;border:1px solid var(--line);border-radius:7px;padding:2px 8px;font-size:12px;font-weight:750;color:#4f5a52;margin:0 4px 3px 0;font-variant-numeric:tabular-nums} .olcu-secim{display:flex;flex-wrap:wrap;gap:8px} .olcu-kutu{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:9px 13px;cursor:pointer;background:var(--paper);font-size:13px;font-weight:700} .olcu-kutu:has(input:checked){border-color:var(--ink);background:#eef0ec} .olcu-kutu input{margin:0} /* Görseli olmayan tanımda kırık ikon yerine sessiz bir kutu. */ .tedarik-bos{background:#eef0ec;border:1px solid var(--line)} .pasif-satir{opacity:.55} .satir-islem{display:flex;gap:6px;justify-content:flex-end;align-items:center} .satir-islem form{margin:0} /* Başlık içindeki ikinci satır (ör. "KDV hariç") büyük harf düzenini bozmasın. */ .rapor-tablo th small{display:block;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:#b6bab3;margin-top:2px} /* Alım satırındaki seçim kutuları metin alanlarıyla aynı yükseklikte. */ .rapor-tablo.alim-satirlari select{width:100%;min-width:0;height:38px;border:1px solid var(--line);border-radius:9px;padding:0 8px;font:inherit;font-size:14px;background:var(--paper);color:var(--ink)} .rapor-tablo.alim-satirlari th:nth-child(2),.rapor-tablo.alim-satirlari td:nth-child(2){width:96px} .rapor-tablo.alim-satirlari th:nth-child(4),.rapor-tablo.alim-satirlari td:nth-child(4){width:88px} .rapor-tablo.alim-satirlari th:nth-child(5),.rapor-tablo.alim-satirlari td:nth-child(5){width:118px} .rapor-tablo.alim-satirlari th:nth-child(6),.rapor-tablo.alim-satirlari td:nth-child(6){width:104px;text-align:right} .rapor-tablo.alim-satirlari th:nth-child(7),.rapor-tablo.alim-satirlari td:nth-child(7){width:44px} /* Dosya seçme alanı. Tarayıcının varsayılan düğmesi kutunun üstüne yapışıyordu: file girdisinin içeriği satır kutusuna göre değil, kendi satır yüksekliğine göre hizalanıyor. Flex ile dikeyde ortalanır. */ .form-panel .field input[type=file]{display:flex;align-items:center;gap:12px;padding:0 8px 0 8px;font-size:13px;color:#7d827b;cursor:pointer} .form-panel .field input[type=file]::file-selector-button{ height:32px;padding:0 14px;margin:0;border:1px solid var(--line);border-radius:8px; background:var(--paper);color:var(--ink);font:inherit;font-size:13px;font-weight:750; cursor:pointer;line-height:1;flex:none} .form-panel .field input[type=file]::file-selector-button:hover{background:#eef0ec;border-color:#c9cdc6} .form-panel .field input[type=file]:focus{border-color:#74907d;box-shadow:0 0 0 3px rgba(49,95,71,.08)} /* Firma renk noktası. Tablolarda aynı tedarikçinin satırlarını göz taraması ile ayırmak için; renk kayıttan gelir, her ekranda aynıdır. */ .firma-nokta{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;flex:none;vertical-align:middle;position:relative;top:-1px} .page-header h1 .firma-nokta{width:13px;height:13px;margin-right:11px;top:-3px} .cari-ad strong{display:flex;align-items:center} /* Alım detayı hesap dökümü. Her hareket tipi hem RENKLİ SOL ŞERİT hem de METİN ETİKETİ taşır: renk tek başına anlam taşısaydı renk körlüğünde alım ile ödeme ayırt edilemezdi. alım kalemi → nötr, şeritsiz (tablonun gövdesi) alım toplamı → koyu yeşil (borcu doğuran tutar) ödeme → açık yeşil, eksi tutar (borcu azaltan hareket) kalan borç → mercan (açıksa), nötr (kapandıysa) */ .hareket-etiket{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em; text-transform:uppercase;padding:3px 9px;border-radius:6px;background:#eef0ec;color:#4f5a52} .rapor-tablo.cari .hareket.alim td:first-child{box-shadow:inset 3px 0 0 #dfe3dc} .rapor-tablo.cari tfoot .ara-toplam td{border-top:1px solid var(--line);border-bottom:0;padding-top:14px;font-size:17px} .rapor-tablo.cari tfoot .ara-toplam td:first-child{box-shadow:inset 3px 0 0 #315f47} .rapor-tablo.cari tfoot .ara-toplam .hareket-etiket{background:none;padding-left:0;color:var(--ink);font-size:14px} .rapor-tablo.cari tfoot .ara-toplam strong{font-size:18px;color:var(--ink)} .rapor-tablo.cari tfoot .odeme-satiri td{border:0;padding:8px 10px;color:#3c6a4d;font-size:15px;background:#f2f6f1} .rapor-tablo.cari tfoot .odeme-satiri td:first-child{box-shadow:inset 3px 0 0 #7ba888} .rapor-tablo.cari tfoot .odeme-satiri .hareket-etiket{background:#dce8dc;color:#3c6a4d} .rapor-tablo.cari tfoot .odeme-satiri small{color:#66736a;font-style:italic} .rapor-tablo.cari tfoot .odeme-satiri form{margin:0} .rapor-tablo.cari tfoot .odeme-satiri .button-mini{height:24px;padding:0 8px;font-size:12px} .odeme-etiket{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rapor-tablo.cari tfoot .kalan-satiri td{border-top:1px solid var(--line);border-bottom:0;padding:14px 10px;font-weight:750;font-size:18px} .rapor-tablo.cari tfoot .kalan-satiri.acik td{background:#fbeee8} .rapor-tablo.cari tfoot .kalan-satiri.acik td:first-child{box-shadow:inset 3px 0 0 #bd5b43} .rapor-tablo.cari tfoot .kalan-satiri.acik .hareket-etiket{background:#ab4b32;color:#fff} /* Firmasız (her firmada çıkan) ürün tanımı. */ .genel-etiket{font-size:11px;font-weight:750;color:#9aa098;background:#f1f0ec;border-radius:6px;padding:2px 8px} /* Tedarikçi seçilmeden ürün satırı doldurulamaz. */ .rapor-tablo.alim-satirlari select:disabled{background:#f2f1ed;color:#a8ada6;cursor:not-allowed} /* 2 — tedarikçi listesi az satırlı; okunaklılık için gövde 2px büyük. */ .rapor-tablo.tedarikci-listesi{font-size:16px} .rapor-tablo.tedarikci-listesi td{padding:13px 10px} .rapor-tablo.tedarikci-listesi .cari-ad strong{font-size:16px} .rapor-tablo.tedarikci-listesi .cari-ad small{font-size:15px} /* 5 — hesap dönemleri. Açık hesap üstte ve vurgulu; kapanmışlar soluk kalır ki bakışta hangi borcun sürdüğü belli olsun. */ .hesap-donemi{margin-bottom:13px} .hesap-donemi.acik{border-color:#e6cdc2;box-shadow:0 0 0 1px #f0dcd3} .hesap-donemi:not(.acik) .panel-heading .eyebrow{color:#b6bab3} .hesap-donemi:not(.acik) .rapor-tablo{opacity:.82} /* İade satırı: para değil mal hareketi. Ödemeyle karışmasın diye amber şerit ve zemin kullanılır; etiket metni de ayrımı taşır. */ .rapor-tablo.cari tfoot .iade-satiri td{border:0;padding:8px 10px;color:#755527;font-size:15px;background:#faf3e8} .rapor-tablo.cari tfoot .iade-satiri td:first-child{box-shadow:inset 3px 0 0 #d9a75c} .rapor-tablo.cari tfoot .iade-satiri .hareket-etiket{background:#f0e2cb;color:#755527} .rapor-tablo.cari tfoot .iade-satiri small{color:#8d7a5c;font-style:italic} .rapor-tablo.cari tfoot .iade-satiri form{margin:0} .rapor-tablo.cari tfoot .iade-satiri .button-mini{height:24px;padding:0 8px;font-size:12px} /* İade formunda kalan borcu aşan toplam anında belli olsun. */ .alim-toplam strong.asildi,.alim-toplam.asildi strong{color:#a2452e} /* Tablolar başlıklarla aynı yazı ailesini kullanır; stok kodları eskiden monospace geliyordu ve satır içinde farklı bir tipografi gibi duruyordu. */ .rapor-tablo, .rapor-tablo .product-cell small, .rapor-tablo input, .rapor-tablo select{font-family:'Outfit',Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} .rapor-tablo .product-cell strong{font-size:14px} .rapor-tablo .product-cell small{font-size:12px;letter-spacing:.01em} /* Ödeme ve iade satırındaki tarih/yöntem açıklaması tutardan geri planda kalsın: tfoot'un 750 kalınlığı bu metinde fazla ağır duruyordu. */ .rapor-tablo.cari tfoot .odeme-satiri .odeme-etiket, .rapor-tablo.cari tfoot .iade-satiri .odeme-etiket{font-size:13px;font-weight:550} /* Listeden "#iade" ile gelindiğinde panel kendini belli etsin; aksi hâlde sayfa altına atlayınca hangi panelin hedeflendiği anlaşılmıyor. */ #iade:target{border-color:#e0c9a6;box-shadow:0 0 0 3px rgba(217,167,92,.22)} /* Modal. Panelle aynı kağıt zemin ve köşe yarıçapı; native kullanılıyor ki Esc, odak hapsi ve arka plan engeli tarayıcıdan gelsin. */ .modal{width:min(760px,calc(100vw - 32px));max-height:calc(100vh - 64px);padding:22px 24px;border:1px solid var(--line); border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 24px 60px rgba(20,39,30,.22)} .modal::backdrop{background:rgba(20,39,30,.42)} .modal-baslik{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px; padding-bottom:14px;border-bottom:1px solid var(--line)} .modal-baslik h2{margin:0;font-size:22px} .modal-baslik .eyebrow{margin:0 0 4px} .modal .form-panel{margin:0;padding:0;border:0;background:none;box-shadow:none} /* Açıklama satırı ile ilk alanın etiketi birbirine yapışıyordu. */ .modal>.form-note{margin:0 0 16px} .modal .form-actions{margin-top:18px} /* Ana panel akış listeleri: sipariş numarası öne çıksın, çok satanlarda ürün adı geri planda kalsın — ikisi aynı kuralı paylaşıyordu. */ .order-row strong{font-family:'Outfit',Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:15px} .seller-row strong{font-size:12px} /* Tedarik başlığındaki açıklama satırı diğer sayfalardan uzun; küçültülür. */ .supply-header .header-copy{font-size:12px} /* ===================== MOBİL DÜZEN ===================== */ /* Mobil menü düğmesi. Dokunma hedefi 44×44'ün altına inmesin. */ .mobil-menu-dugmesi{display:none;width:44px;height:44px;border:0;background:none;padding:10px; cursor:pointer;flex-direction:column;justify-content:space-between} .mobil-menu-dugmesi span{display:block;height:2px;background:#f6f3ec;border-radius:2px;transition:transform .18s,opacity .18s} .mobil-menu-dugmesi[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)} .mobil-menu-dugmesi[aria-expanded="true"] span:nth-child(2){opacity:0} .mobil-menu-dugmesi[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)} .mobil-menu,.mobil-ortu{display:none} body.menu-acik{overflow:hidden} @media(max-width:760px),(max-height:500px){ .mobile-bar{height:58px} .mobil-menu-dugmesi{display:flex} /* Menü SOLDAN kayarak açılır: masaüstündeki kenar çubuğu da solda, aynı içerik aynı taraftan gelsin. Düğme de solda, tetikleyici ile açılan yön uyuşsun diye. */ /* Çubuk çekmecenin üstünde kalır: kapatma (X) düğmesi görünür ve dokunulabilir olmalı, yoksa menüyü kapatmanın tek yolu örtüye dokunmak olurdu. İçerik bu yüzden çubuğun altından başlar. */ .mobile-bar{z-index:22} .mobil-menu{display:flex;flex-direction:column;gap:2px;position:fixed;inset:0 auto 0 0; width:min(300px,84vw);z-index:21;background:var(--forest);padding:70px 12px 22px; overflow-y:auto;box-shadow:2px 0 26px rgba(20,39,30,.28); transform:translateX(-100%);visibility:hidden; transition:transform .22s ease,visibility 0s linear .22s} .mobil-menu.acik{transform:none;visibility:visible;transition:transform .22s ease,visibility 0s} .mobil-menu .nav-link{min-height:48px;font-size:15px} /* Çekmecenin arkasındaki örtü; dokununca menü kapanır. */ .mobil-ortu{display:block;position:fixed;inset:0;z-index:20;background:rgba(20,39,30,.45)} .mobil-ortu[hidden]{display:none} /* Çubuktaki düğme markanın soluna geçti. */ .mobile-bar{justify-content:flex-start;gap:10px} /* Kenar çubuğundaki .logout-form margin-left:auto ile sağa itiliyor; menüde tam genişlik ve sola hizalı olmalı. */ .mobil-menu .logout-form{margin:10px 0 0;padding-top:14px;display:block; border-top:1px solid rgba(246,243,236,.16)} .mobil-menu .logout-button{width:100%;min-height:48px;text-align:left; font-size:15px;padding:0 12px} /* Başlık ve kabuk: telefonda 38px başlık satırı taşırıyordu. */ h1{font-size:27px;letter-spacing:-.03em} .page-shell{padding:20px 14px 40px} .header-copy{font-size:13px} .panel{padding:14px} .panel-heading{flex-direction:column;align-items:flex-start;gap:10px} /* Dokunma hedefleri: 44px altındaki her şey parmakla ıskalanıyor. */ .button{min-height:44px} .button-mini{min-height:40px;padding:0 14px;font-size:13px} .esitle{min-width:40px;min-height:40px} .row-check{width:22px;height:22px} .field input,.field select,.field textarea{font-size:16px} /* Filtre satırları alt alta; yan yana sıkışınca hiçbiri okunmuyordu. */ .rapor-filtre{flex-direction:column;align-items:stretch} .rapor-filtre label{width:100%} .rapor-filtre .button{width:100%} /* --- TABLO → KART --- Geniş tablolar telefonda yatay kaydırma gerektiriyordu; satırlar karta dönüşüp her hücre kendi başlığıyla alt alta diziliyor. Başlık metni data-label'dan gelir. */ .mobil-kart{min-width:0} .mobil-kart thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .mobil-kart tbody tr{display:block;margin-bottom:12px;padding:12px;border:1px solid var(--line); border-radius:12px;background:var(--paper)} .mobil-kart tbody td{display:flex;align-items:center;justify-content:space-between;gap:14px; height:auto;min-height:38px;padding:6px 0;border-bottom:1px solid #f0ede6;text-align:left} .mobil-kart tbody tr td:last-child{border-bottom:0;padding-bottom:0} .mobil-kart tbody td::before{content:attr(data-label);flex:none;color:#8a8f87;font-size:12px; font-weight:750;letter-spacing:.02em} .mobil-kart tbody td[data-label=""]::before, .mobil-kart tbody td:not([data-label])::before{content:none} /* Etiketsiz hücreler (işlem düğmeleri) tam genişlik alsın. */ .mobil-kart tbody td:not([data-label]){justify-content:flex-end;flex-wrap:wrap} .mobil-kart .sayi{text-align:right} .mobil-kart .product-cell{min-width:0;justify-content:flex-end;text-align:right} .mobil-kart tfoot td{display:flex;justify-content:space-between} /* Modal telefonda tam ekrana yakın olsun. */ .modal{width:calc(100vw - 20px);max-height:calc(100vh - 40px);padding:16px} .modal-baslik h2{font-size:19px} /* Grafik sütunları dar ekranda okunmuyor; ipucu dokunmayla açılır. */ .chart{height:150px} } @media(max-width:420px){ h1{font-size:24px} .stat-card>strong{font-size:23px} .header-actions{flex-direction:column} .header-actions .button{width:100%} } @media(max-width:760px),(max-height:500px){ /* Üç filtre kutusu %50 genişlikte sıkışıp metinleri kesiliyordu. */ .filters{flex-direction:column;width:100%} .filters select{width:100%} /* iOS, yazı boyu 16px'in ALTINDA olan bir alana dokunulunca sayfayı kendiliğinden yakınlaştırıyor ve kullanıcı elle geri çıkmak zorunda kalıyor. Tek çözümü alanın yazı boyunu 16px'e çekmek. */ .search-box input, .filters select, .form-panel .field input, .form-panel .field select, .form-panel .field textarea{font-size:16px} /* Kanal etiketleri ve eşitleme düğmesi kart içinde sağa yaslansın. */ .mobil-kart .channel-tags{justify-content:flex-end} /* Masaüstü tablosunda bu hücreler sabit genişlikli (42px); kartta satırın tamamını kaplamalı, yoksa ayırıcı çizgi yarım kalıyor. */ .mobil-kart .check-cell, .mobil-kart .esitle-cell{width:auto;justify-content:space-between;text-align:left} } @media(max-width:760px),(max-height:500px){ /* Dar ekranda stok sütunu düşer; toplarken gereken kod ve adet. */ .toplama-tablosu th:last-child,.toplama-tablosu td:last-child{display:none} .toplama-tablosu .product-cell .product-thumb{width:34px;height:34px} table.rapor-tablo.toplama-tablosu th.sayi,table.rapor-tablo.toplama-tablosu td.sayi{width:60px} .not-formu-alt{flex-direction:column;align-items:stretch} .not-formu-alt .button{width:100%} .not-ipucu{max-width:calc(100vw - 24px)} /* Kart görünümünde görseller etiketle çakışmasın diye sağa yaslanır. */ .kalem-gorselleri{justify-content:flex-end} /* Gün satırı 5 sütun; 375px'te sığmıyor. Pay yüzdesi düşürülüyor, çünkü aynı bilgi çubuğun uzunluğunda zaten var. */ .gun-satiri{grid-template-columns:70px 1fr auto;gap:6px 10px} .gun-satiri small{grid-column:2/-1;white-space:normal} .gun-satiri b{display:none} /* Senkron satırı 4 sütunlu ızgara; 375px'te sütunlar taşıyordu. */ .senkron-satiri{grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0; border-bottom:1px solid #f0ede6} .senkron-satiri>*:nth-child(3){grid-column:1/-1} /* Dar ekranda düğme kendi satırında ve tam genişlikte; 12px'lik bir düğmeyi sayıların yanına sıkıştırmak dokunma hedefini küçültürdü. */ .senkron-yok{grid-column:1/-1} .esitle-form{grid-column:1/-1;margin-top:6px} .esitle-dugmesi{width:100%;padding:9px 12px;font-size:13px} /* Mesaj kutusunun soldaki 92px boşluğu masaüstündeki "Ürünler/Siparişler" sütununun hizası; o sütun mobilde yok, boşluk da olmamalı. */ .senkron-mesaj{margin-left:0} .senkron-sayilar{font-size:12px;line-height:1.5} .kanal-karti{padding:14px} } @media(max-width:760px),(max-height:500px){ /* Kalan küçük hedefler: sayfalama okları (28px), grafik kanal filtresi ve "Raporu aç" bağlantısı. Parmakla 28px ıskalanıyor. */ .table-footer button,.table-footer a{min-width:44px;min-height:44px} .table-footer{flex-direction:column;gap:12px;align-items:stretch;text-align:center} .kanal-filtre{min-height:36px;padding:0 10px} .text-button{min-height:36px;padding:6px 0} } /* Hareketi azaltılmış tercihinde çekmece kaymadan görünür. */ @media(prefers-reduced-motion:reduce){ .mobil-menu{transition:none} .mobil-menu-dugmesi span{transition:none} } /* ===== Kutu etiketleri ve stok sayımı ===== */ .etiket-sayfasi{display:grid;grid-template-columns:repeat(var(--etiket-sutun,3),1fr);gap:6px;margin-top:16px} .etiket{display:flex;align-items:center;gap:10px;padding:8px;border:1px dashed #c9ccc4;border-radius:8px;background:#fff} .etiket-qr svg{display:block;width:78px;height:78px} .etiket-metin{min-width:0} .etiket-metin strong{display:block;font-size:12px;line-height:1.25;color:#111; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .etiket-metin span{display:block;margin-top:3px;font-size:12px;font-weight:800;letter-spacing:.04em;color:#333} /* Sayım ekranı telefonda tek elle kullanılıyor: alan büyük, düğme geniş. */ .sayim-karti{max-width:520px} .sayim-urun{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)} /* Doğru kutuyu saydığını görselden teyit ediyor; liste boyutu burada küçük kalıyor. */ .sayim-urun .product-thumb{width:56px;height:56px} .sayim-urun strong{display:block;font-size:16px;line-height:1.3} .sayim-urun small{display:block;margin-top:3px;color:#8a8f87;font-size:13px;letter-spacing:.03em} .sayim-mevcut{display:flex;gap:10px;margin:14px 0 18px} .sayim-mevcut span{flex:1;display:flex;flex-direction:column;gap:2px;padding:11px 13px;border-radius:10px; background:#eef1ec;font-size:12px;color:#6c746e} .sayim-mevcut b{font-size:22px;color:var(--ink)} .sayim-alani{height:64px!important;font-size:30px!important;font-weight:800;text-align:center; letter-spacing:.02em;font-variant-numeric:tabular-nums} /* Mükerrer ürün şeridi: hata değil, bekleyen bir karar — amber ton. */ .form-alert.uyari{background:#f7eddb;border:1px solid #e6d5b4;color:#755527} .birlesme-serit{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .birlesme-serit strong{display:inline;margin:0} .birlesme-eski{color:#a2452e;text-decoration:line-through;letter-spacing:.03em} .sayim-sanal{margin-top:16px} /* Depoda eldivenle dokunuluyor; kutu genel formlardakinden büyük. */ .sayim-sanal input{width:22px;height:22px} .sayim-sanal-not{margin:6px 0 0} /* Ana sayfadaki sipariş satırında tarih. Liste ordered_at'e göre sıralı; tarih görünmeyince sıralamanın neye göre olduğu anlaşılmıyordu. */ .order-row .siparis-tarihi{color:#a4a89f;font-variant-numeric:tabular-nums} /* Alım kaydına sonradan eklenen ürün satırı. Rozet yalnızca satırın tarihi alımın tarihinden farklıysa basılır; ürün adının yanında durur ki satıra bakan "bu ne zaman geldi" sorusunu tabloyu terk etmeden yanıtlasın. 11px kalın metin büyük sayılmaz, kontrast 4,5 üstünde (5,9:1). */ .sonradan-rozet{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px; background:#f3ecdd;border:1px solid #e0d2b4;color:#7a5b23; font:inherit;font-size:11px;font-weight:750;letter-spacing:.02em;white-space:nowrap; vertical-align:middle;position:relative;top:-1px} /* Tıklanabilir özet kartı. Bağlantı olduğu belli olsun ama kart görünümü bozulmasın: altı çizili mavi bağlantı yerine kartın kendisi kalkıyor. */ a.stat-card{text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease} a.stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(25,40,31,.13)} a.stat-card:focus-visible{outline:2px solid var(--forest);outline-offset:3px} a.stat-card.green:focus-visible{outline-color:#cddcc9} a.stat-card:hover .stat-arrow{opacity:.9} /* Kanal sekmeleri yalnızca mobilde; masaüstünde açılır kutu kalıyor. Temel kural ile mobil kuralı BİRLİKTE duruyor: temel kural dosyanın sonunda, mobil kuralı yukarıdaki bloklarda kalsaydı sıra gereği temel kural onu ezer ve sekmeler mobilde hiç görünmezdi. */ .kanal-sekmeleri{display:none} .kanal-sekme{flex:1;min-width:0;text-align:center;padding:9px 10px;border:1px solid var(--line); border-radius:9px;background:#fff;color:#5c635b;font-size:13px;font-weight:750; text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kanal-sekme.aktif{background:var(--forest);border-color:var(--forest);color:#fff} .kanal-sekme:focus-visible{outline:2px solid var(--forest);outline-offset:2px} @media(max-width:760px),(max-height:500px){ .kanal-sekmeleri{display:flex;gap:8px;width:100%} .filters .kanal-secimi{display:none} } /* Dönem karşılaştırma rozeti. Kart zeminleri dört farklı renk (biri koyu), bu yüzden rozet kendi beyaz zeminini taşır; yoksa yeşil kartta okunmazdı. */ .fark-rozet{display:inline-flex;align-items:center;padding:2px 8px;border-radius:99px; background:#fff;border:1px solid rgba(25,40,31,.12); font:inherit;font-size:11px;font-weight:800;letter-spacing:.01em;white-space:nowrap} .fark-rozet.iyi{color:#2f6b45} .fark-rozet.kotu{color:#a8452a} .fark-rozet.notr{color:#6c746e} .kiyas-notu{margin:-4px 0 16px;color:#8b8f89;font-size:12px} .kiyas-notu strong{color:#5c635b;font-weight:750} /* Kanalların kendi yönetim panellerine kısayol. Kenar çubuğunun koyu zemininde duruyor; nav bağlantılarından ayrılsın diye çerçeveli. */ .kanal-panelleri{display:grid;gap:6px;margin-bottom:10px} .kanal-paneli{display:flex;align-items:center;gap:9px;padding:9px 12px; border:1px solid #2e4639;border-radius:10px;color:#cfdcd4; font-size:12px;font-weight:650;text-decoration:none} .kanal-paneli:hover{background:#20382b;border-color:#3d5a49;color:#fff} .kanal-paneli:focus-visible{outline:2px solid #cddcc9;outline-offset:2px} .kanal-paneli span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kanal-paneli b{font-size:12px;color:#7d9587;font-weight:600} .kanal-paneli:hover b{color:#cfdcd4} .mobil-menu .kanal-panelleri{margin:12px 0} /* Değiştirilemeyen form alanı (ör. tedarikçi sayfasından gelindiğinde sabitlenen firma). Girdi kutusuyla aynı yüksekliği korur ki ızgara hizası bozulmasın; devre dışı bir