/* DHL Altınkoza — müşteri sayfası V1.2 · "kargo etiketi" tasarımı */
:root{
  --yellow:#FFCC00;
  --red:#D40511;
  --red-dk:#A8040D;
  --ink:#2A2416;
  --ink-2:#6B624C;
  --paper:#FFFDF4;
  --rule:#D9CFAE;
  --kraft:#C8A165;
  --kraft-lt:#F3E6CC;
  --cond:"Avenir Next Condensed","Roboto Condensed","Arial Narrow","Helvetica Neue",sans-serif-condensed,system-ui,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 var(--body);color:var(--ink);background:#F7F3E3}
a{color:inherit}
img{max-width:100%;display:block}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}

.announce{background:var(--red);color:#fff;text-align:center;font-weight:600;font-size:14px;padding:8px 16px}

/* ---- Sarı bant (hero) ---- */
.band{background:var(--yellow);padding:18px 18px 92px}
.band-in{max-width:480px;margin:0 auto}
.band-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1.1}
.brand img{height:34px;width:auto}
.wordmark{font:italic 900 26px/1 var(--cond);font-stretch:condensed;color:var(--red);letter-spacing:-.01em}
.wordmark b{font-weight:900;font-size:30px;letter-spacing:-.03em}
.branch{font:700 14px/1.2 var(--cond);font-stretch:condensed;color:var(--ink);margin-top:4px}
.call{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--yellow)}
.band h1{font:800 clamp(34px,10vw,46px)/.95 var(--cond);font-stretch:condensed;letter-spacing:-.01em;margin:26px 0 8px;max-width:12ch}
.band-sub{margin:0;font-size:15px;color:#4A3E10;max-width:34ch}
.left{display:inline-block;margin-left:4px;padding:1px 9px;border-radius:999px;background:var(--ink);color:var(--yellow);font:700 14px/1.6 var(--cond);font-stretch:condensed;white-space:nowrap}
.left:empty{display:none}

.page{max-width:480px;margin:-72px auto 0;padding:0 14px calc(28px + var(--safe-b))}

/* ---- Kargo etiketi ---- */
.label{position:relative;background:var(--paper);border-radius:6px;box-shadow:0 1px 0 rgba(42,36,22,.08),0 18px 40px -18px rgba(42,36,22,.45)}
.label::before{content:"";position:absolute;left:10px;right:10px;top:-6px;height:12px;background:radial-gradient(circle,#F7F3E3 0 3.5px,transparent 4px) 0 0/16px 12px repeat-x}
.label-form{padding:20px 18px 16px;position:relative}
.label-head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:3px solid var(--ink);padding-bottom:8px}
.label-head h2{margin:0;font:800 22px/1 var(--cond);font-stretch:condensed}
.label-svc{font:italic 800 15px/1 var(--cond);font-stretch:condensed;color:var(--red)}
.field{padding:12px 0;border-bottom:1px solid var(--rule)}
.flabel{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:2px}
.sender-input input{width:100%;border:0;border-bottom:2px solid var(--ink);background:transparent;font:700 24px/1.25 var(--cond);font-stretch:condensed;color:var(--ink);padding:4px 0 6px;border-radius:0}
.sender-input input::placeholder{color:#B8AD8E}
.sender-input input:focus{outline:none;border-bottom-color:var(--red)}
.sender-input input.invalid{border-bottom-color:var(--red)}
.sender-saved{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.sender-name{font:800 26px/1.15 var(--cond);font-stretch:condensed;word-break:break-word}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--red);font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.grid{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.cell{padding:12px 0}
.cell+.cell{border-left:1px solid var(--rule);padding-left:14px}
.cell b{font:800 21px/1.1 var(--cond);font-stretch:condensed;display:flex;align-items:center;gap:7px}
.cell b small{font:600 14px var(--body);color:var(--ink-2)}
.yog i{width:10px;height:10px;border-radius:50%;background:#1F9D55;flex:none}
.yog-yogun i{background:#E39A00}.yog-cok i{background:var(--red)}
.note{padding:10px 0 0}
.note summary{cursor:pointer;color:var(--ink-2);font-size:14px;font-weight:600;list-style:none}
.note summary::before{content:"+ "}
.note[open] summary::before{content:"– "}
.note textarea{display:block;width:100%;margin-top:8px;font:inherit;font-size:16px;padding:10px 12px;border:1.5px solid var(--rule);border-radius:4px;background:#fff;color:var(--ink);resize:vertical}
.note textarea:focus{outline:none;border-color:var(--ink)}
.barcode{display:flex;align-items:center;gap:12px;margin:16px 0 14px}
.barcode>span{flex:1;height:38px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px,var(--ink) 12px 13px,transparent 13px 16px)}
.barcode>em{font:700 13px/1 var(--cond);font-stretch:condensed;font-style:normal;letter-spacing:.06em;color:var(--ink-2);white-space:nowrap}
.cta{display:block;width:100%;border:0;border-radius:4px;background:var(--red);color:#fff;font:800 22px/1 var(--cond);font-stretch:condensed;letter-spacing:.01em;padding:18px;cursor:pointer;transition:background .15s,transform .1s}
.cta:hover{background:var(--red-dk)}
.cta:active{transform:translateY(1px)}
.cta[disabled]{opacity:.65;cursor:default}
.cta-ink{background:var(--ink)}
.cta-ink:hover{background:#000}
.fine{margin:10px 0 0;font-size:12.5px;color:var(--ink-2);text-align:center}
.fine .linkish{color:inherit;font-weight:600}
.form-msg{display:none;margin:0 0 10px;padding:10px 12px;border-left:4px solid var(--red);background:#FCE9EA;color:#7A0309;font-size:14px;font-weight:600}
.form-msg.show{display:block}

/* Gönderildi damgası: barkodun üstüne basılır, barkod yazısının yerini alır */
.barcode{position:relative}
.stamp{position:absolute;right:0;top:50%;display:none;flex-direction:column;align-items:center;padding:5px 12px 3px;border:4px solid var(--red);border-radius:8px;color:var(--red);transform:translateY(-50%) rotate(-8deg);pointer-events:none;background:var(--paper);box-shadow:0 0 0 4px var(--paper)}
.stamp span{font:900 26px/1 var(--cond);font-stretch:condensed;letter-spacing:.04em;text-transform:uppercase}
.stamp small{font:700 12px/1.3 var(--cond);font-stretch:condensed;letter-spacing:.04em;white-space:nowrap}
.stamp small:empty{display:none}
.label.sent .barcode>em{visibility:hidden}
.label.sent .stamp{display:flex;animation:stamp .35s cubic-bezier(.2,1.6,.4,1) both}
.label.sent .cta{background:var(--ink);opacity:1}
@keyframes stamp{from{transform:translateY(-50%) rotate(-8deg) scale(1.9);opacity:0}to{transform:translateY(-50%) rotate(-8deg) scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.label.sent .stamp{animation:none}}

/* ---- Kampanyalar ---- */
.sec{font:800 20px/1 var(--cond);font-stretch:condensed;margin:28px 2px 10px}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0 -14px;padding-left:14px;padding-right:14px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.camp{flex:0 0 84%;scroll-snap-align:start;background:#fff;border-radius:6px;padding:16px;position:relative;border:1px solid #E8DFC4;text-decoration:none;display:flex;flex-direction:column;gap:6px}
.camp h3{margin:0;font:800 21px/1.05 var(--cond);font-stretch:condensed;max-width:24ch}
.camp p{margin:0;font-size:14px;color:var(--ink-2)}
.camp small{font-size:12.5px;color:var(--ink-2);margin-top:auto}
.camp-price{background:var(--ink);color:#fff;border-color:var(--ink)}
.camp-price small{color:#CFC6AE}
.pill{align-self:flex-start;background:var(--yellow);color:var(--ink);font:800 13px/1 var(--cond);font-stretch:condensed;padding:5px 9px;border-radius:999px}
.prices{width:100%;border-collapse:collapse;margin:4px 0}
.prices th,.prices td{padding:6px 0;border-bottom:1px solid rgba(255,255,255,.14);font-weight:600;font-size:15px;text-align:left}
.prices td{text-align:right;font:800 19px/1 var(--cond);font-stretch:condensed;color:var(--yellow);white-space:nowrap}
.prices em{font-style:normal;font-size:11.5px;color:var(--yellow);font-weight:700;margin-left:4px}
.camp-ico{font-size:40px;margin-top:auto;align-self:flex-end}
.camp-link{align-self:flex-start;margin-top:4px;font-weight:700;color:var(--red)}
.camp-price .camp-link{color:var(--yellow)}
.camp-img{padding:0;overflow:hidden}
.camp-img{background:transparent;border:0;align-self:flex-start}
.camp-img img{width:100%;height:auto}

/* ---- Diğer işlemler ---- */
.rows{margin-top:18px;background:#fff;border-radius:6px;border:1px solid #E8DFC4;overflow:hidden}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:15px 16px;background:none;border:0;border-top:1px solid #EFE7D0;font:inherit;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.row:first-child{border-top:0}
.row:hover{background:#FFFBEA}
.ri{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);color:var(--ink);flex:none}
.ri svg{width:22px;height:22px}
.r-kraft .ri{background:var(--kraft);color:#fff}
.rt{flex:1;display:flex;flex-direction:column}
.rt b{font:800 19px/1.1 var(--cond);font-stretch:condensed}
.rt small{font-size:13px;color:var(--ink-2)}
.ext{color:var(--ink-2);font-size:18px}
.r-kraft::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-2);border-top:2px solid var(--ink-2);transform:rotate(45deg);margin-right:4px}

.foot{text-align:center;font-size:13px;color:var(--ink-2);margin-top:22px}
.foot p{margin:0 0 8px}
.foot a,.foot .linkish{color:inherit;font-weight:600}

/* ---- Alt sayfa (modal) ---- */
.modal{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;justify-content:center;background:rgba(42,36,22,.55)}
.modal.open{display:flex}
.sheet{width:100%;max-width:520px;max-height:92vh;overflow:auto;background:var(--paper);border-radius:14px 14px 0 0;padding:0 18px calc(18px + var(--safe-b));animation:up .25s ease}
@media (min-width:640px){.modal{align-items:center}.sheet{border-radius:10px}}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.sheet.kraft{background:var(--kraft-lt)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;padding:16px 0 10px;background:inherit;z-index:1;border-bottom:3px solid var(--ink);margin-bottom:12px}
.sheet-head h2{margin:0;font:800 26px/1 var(--cond);font-stretch:condensed}
.x{border:0;background:rgba(42,36,22,.08);width:38px;height:38px;border-radius:50%;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.amb-form{padding:0}
.lf{display:block;border:0;padding:0;margin:0 0 16px;font-size:14px;font-weight:700}
.lf legend{padding:0;margin-bottom:8px}
.lf input,.lf textarea{display:block;width:100%;margin-top:6px;font:inherit;font-size:16px;font-weight:500;padding:12px;border:1.5px solid var(--kraft);border-radius:4px;background:#fff;color:var(--ink)}
.lf input:focus,.lf textarea:focus{outline:none;border-color:var(--ink)}
.lf .invalid{border-color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.invalid span{border-color:var(--red)}
.chip{cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-block;padding:9px 13px;border:1.5px solid var(--kraft);border-radius:999px;background:#fff;font-weight:600;font-size:14px}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.chip input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.done{text-align:center;padding:10px 0}
.done-ico{width:60px;height:60px;border-radius:50%;margin:0 auto 10px;display:grid;place-items:center;background:var(--ink);color:var(--yellow);font-size:30px}
.done h3{margin:0 0 4px;font:800 24px/1.1 var(--cond);font-stretch:condensed}
.done p{margin:0 0 16px;color:var(--ink-2)}
.prose{font-size:14.5px;line-height:1.6;padding-bottom:8px}

@media (min-width:600px){
  .band-in{max-width:560px}
  .page{max-width:588px}
  .strip{overflow:visible;flex-wrap:wrap;margin:0;padding:0}
  .camp{flex:1 1 100%}
}

/* ---- Masaüstü: solda etiket + işlemler, sağda kampanyalar ---- */
@media (min-width:960px){
  .band{padding:26px 32px 110px}
  .band-in{max-width:1100px}
  .page{max-width:1164px;padding:0 32px 40px;display:grid;grid-template-columns:440px 1fr;grid-template-areas:"label camps" "rows camps" "foot foot";column-gap:40px;align-items:start}
  .label{grid-area:label}
  .rows{grid-area:rows}
  .camps{grid-area:camps;padding-top:6px}
  .foot{grid-area:foot;margin-top:36px}
  .band h1{font-size:60px;max-width:18ch;margin-top:40px}
  .band-sub{font-size:17px;max-width:60ch}
  .wordmark{font-size:30px}.wordmark b{font-size:36px}
  .sec{margin-top:0}
  .strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .camp-img{grid-column:1/-1}
}
@media (min-width:960px) and (max-height:620px){.band h1{font-size:48px}}