/* Costarica Coffee - Mağaza stilleri (liste, ürün, sepet, sipariş) */
:root { --cr-dark: #242434; --cr-accent: #db9457; --cr-teal: #3f808b; --cr-gray: #e1e1e1; --cr-line: rgba(0,0,0,.12); }

/* ortak butonlar */
.cr-btn { display: inline-block; background: var(--cr-dark); color: var(--cr-accent); border: 2px solid var(--cr-dark); padding: 0 34px; height: 46px; line-height: 42px; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; font-family: inherit; font-weight: 600; transition: all .25s; text-align: center; }
.cr-btn:hover { background: transparent; color: var(--cr-dark); }
.cr-btn-light { background: transparent; color: var(--cr-dark); }
.cr-btn-light:hover { background: var(--cr-dark); color: var(--cr-accent); }
.cr-btn-sm { height: 34px; line-height: 30px; padding: 0 18px; font-size: 11px; }
.cr-btn-block { display: block; width: 100%; margin: 18px 0 10px; }
.cr-link { font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; }
.cr-wrap { width: min(1400px, 94vw); margin-left: calc(50% - min(1400px, 94vw) / 2); }
.cr-wrap-narrow { width: min(1100px, 94vw); margin-left: calc(50% - min(1100px, 94vw) / 2); }
.cr-shop-title { text-align: center; font-size: 22px; letter-spacing: 8px; text-transform: uppercase; font-weight: 600; margin: 50px 0 40px; }

/* üst bar sepet */
.cr-mini { position: relative; display: inline-block; vertical-align: middle; margin-right: 14px; }
.cr-mini-btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 6px; position: relative; line-height: 1; }
.cr-count { position: absolute; top: -4px; right: -6px; background: var(--cr-accent); color: var(--cr-dark); font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; line-height: 16px; border-radius: 8px; text-align: center; padding: 0 3px; }
.cr-mini-panel { position: absolute; right: -40px; top: 36px; width: 340px; max-width: 92vw; background: #fff; color: var(--cr-dark); box-shadow: 0 12px 40px rgba(0,0,0,.2); padding: 18px; z-index: 9999; text-align: left; letter-spacing: 0; text-transform: none; }
.cr-mini-panel[hidden] { display: none; }
.cr-mini-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 260px; overflow: auto; }
.cr-mini-list li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cr-line); }
.cr-mini-list img { width: 50px; height: 70px; object-fit: cover; background: var(--cr-gray); }
.cr-mini-list div { font-size: 13px; line-height: 1.4; }
.cr-mini-list span { display: block; font-size: 12px; opacity: .75; }
.cr-mini-total { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0 14px; }
.cr-mini-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-mini-actions .cr-btn { padding: 0 8px; height: 40px; line-height: 36px; font-size: 11px; letter-spacing: 1px; }

/* mağaza listesi */
.cr-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.cr-filters { display: flex; gap: 22px; flex-wrap: wrap; }
.cr-filters button { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; cursor: pointer; color: inherit; border-bottom: 2px solid transparent; opacity: .75; }
.cr-filters button:hover, .cr-filters button.active { opacity: 1; border-bottom-color: var(--cr-dark); }
.cr-sort select { min-width: 190px; }
.cr-shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 26px; margin-bottom: 100px; }
.cr-pcard { text-align: center; }
.cr-pcard[hidden] { display: none; }
.cr-pcard a { text-decoration: none; color: inherit; display: block; }
.cr-pcard .cr-pimg { background: var(--cr-gray); overflow: hidden; }
.cr-pcard img { width: 100%; display: block; aspect-ratio: 600/839; object-fit: cover; transition: transform .5s; }
.cr-pcard:hover img { transform: scale(1.04); }
.cr-pcard h3 { font-size: 17px; margin: 16px 0 6px; font-weight: 500; }
.cr-pcard .cr-pprice { font-size: 13px; }
.cr-pcard .cr-pcat { display: block; font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; opacity: .6; margin-top: 4px; }

/* ürün sayfası */
.cr-product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: start; margin: 50px auto 70px; }
.cr-product .cr-pic { background: var(--cr-gray); }
.cr-product .cr-pic img { width: 100%; display: block; }
.cr-product h1 { font-size: 30px; margin: 10px 0 14px; font-weight: 500; }
.cr-product .cr-cat { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; opacity: .6; }
.cr-product .cr-price { font-size: 20px; margin-bottom: 24px; }
.cr-product .cr-desc { line-height: 1.8; margin-bottom: 18px; }
.cr-product .cr-notes strong { display: block; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }
.cr-opt { margin: 20px 0 0; }
.cr-opt label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.cr-opt select { width: 250px; max-width: 100%; }
.cr-opt select.cr-err, .cr-f .cr-err { outline: 2px solid #c0392b; }
.cr-buy { display: flex; gap: 16px; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.cr-qty { display: inline-flex; align-items: center; border: 1px solid var(--cr-line); height: 46px; }
.cr-qty button { background: none; border: 0; width: 34px; height: 100%; cursor: pointer; font-size: 18px; color: inherit; }
.cr-qty input { width: 44px; text-align: center; border: 0 !important; background: transparent !important; padding: 0 !important; height: 100% !important; -moz-appearance: textfield; }
.cr-qty input::-webkit-outer-spin-button, .cr-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-added { margin-top: 22px; padding: 14px 16px; background: #f1f6f2; border-left: 3px solid var(--cr-teal); display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.cr-added[hidden] { display: none; }
.cr-added.cr-warn { background: #fbefee; border-left-color: #c0392b; }
.cr-added a:not(.cr-btn) { text-decoration: underline; }
.cr-section-title { text-align: center; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; font-weight: 700; margin: 0 0 30px; }
.cr-tab { width: min(900px, 94vw); margin: 0 auto 90px; margin-left: calc(50% - min(900px, 94vw) / 2); }
.cr-tab h2 { display: table; margin: 0 auto 24px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; border-bottom: 2px solid var(--cr-dark); padding-bottom: 6px; }
.cr-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; text-align: center; border-top: 1px solid var(--cr-line); padding-top: 26px; }
.cr-info strong { display: block; text-transform: uppercase; font-size: 12px; letter-spacing: 1.5px; margin-bottom: 6px; }
.cr-related { margin-bottom: 100px; }
.cr-related .cr-shop-grid { margin-bottom: 0; }

/* sepet */
.cr-page-title { text-align: center; font-size: 22px; letter-spacing: 8px; text-transform: uppercase; font-weight: 600; margin: 50px 0 40px; }
.cr-cart-head, .cr-cart-row { display: grid; grid-template-columns: 3fr 1fr 1.3fr 1fr 40px; gap: 16px; align-items: center; }
.cr-cart-head { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding: 0 0 12px; border-bottom: 2px solid var(--cr-dark); }
.cr-cart-row { padding: 18px 0; border-bottom: 1px solid var(--cr-line); }
.cr-cart-prod { display: flex; gap: 16px; align-items: center; }
.cr-cart-prod img { width: 70px; height: 98px; object-fit: cover; background: var(--cr-gray); }
.cr-cart-prod a { text-decoration: none; font-weight: 600; display: block; }
.cr-cart-prod small, .cr-sum-row small { display: block; opacity: .7; font-size: 12px; margin-top: 3px; }
.cr-remove { background: none; border: 0; font-size: 24px; cursor: pointer; color: inherit; opacity: .6; }
.cr-remove:hover { opacity: 1; }
.cr-cart-foot { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; margin: 34px 0 100px; flex-wrap: wrap; }
.cr-totals { min-width: 300px; text-align: right; }
.cr-totals > div { display: flex; justify-content: space-between; gap: 40px; font-size: 18px; margin-bottom: 8px; }
.cr-totals small { display: block; opacity: .7; margin-bottom: 16px; }
.cr-empty { text-align: center; padding: 40px 0 120px; }
.cr-empty p { margin-bottom: 24px; }
.cr-more-products { margin-bottom: 100px; }

/* sipariş */
.cr-checkout-form { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 50px; align-items: start; margin-bottom: 100px; }
.cr-checkout-form h3, .cr-done h3, .cr-iban h3 { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; margin: 0 0 18px; }
.cr-checkout-form h3:not(:first-child) { margin-top: 32px; }
.cr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.cr-f { margin-bottom: 16px; }
.cr-f.cr-full { grid-column: 1 / -1; }
.cr-f label { display: block; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; }
.cr-f input, .cr-f textarea { width: 100%; box-sizing: border-box; }
.cr-pay-opt { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border: 2px solid var(--cr-dark); cursor: pointer; font-weight: 600; }
.cr-pay-opt input { margin: 0; }
.cr-iban { background: #f6f7f6; border: 1px solid var(--cr-line); padding: 22px; margin: 14px 0; }
.cr-iban dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 14px; margin: 0 0 14px; align-items: center; }
.cr-iban dt { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .7; }
.cr-iban dd { margin: 0; }
.cr-iban-no { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cr-iban code { font-size: 16px; letter-spacing: 1px; font-weight: 600; word-break: break-all; }
.cr-copy { background: var(--cr-dark); color: var(--cr-accent); border: 0; padding: 7px 14px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; font-family: inherit; }
.cr-note { font-size: 13.5px; opacity: .85; line-height: 1.6; margin: 0; }
.cr-consent { display: flex; gap: 10px; font-size: 13.5px; margin-top: 22px; align-items: flex-start; }
.cr-consent input { margin-top: 4px; }
.cr-consent input.cr-err { outline: 2px solid #c0392b; }
.cr-summary { background: #f6f7f6; padding: 24px; border: 1px solid var(--cr-line); }
.cr-sum-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--cr-line); font-size: 14px; }
.cr-sum-total { font-size: 18px; border-bottom: 0; padding-top: 16px; }
.cr-done { text-align: center; max-width: 780px; margin: 0 auto 100px; }
.cr-done h2 { font-size: 30px; margin-bottom: 10px; }
.cr-orderno { font-size: 17px; margin-bottom: 20px; }
.cr-done .cr-iban, .cr-done .cr-summary { text-align: left; margin: 24px 0; }
.cr-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 24px 0; }

@media (max-width: 1100px) { .cr-shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .cr-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .cr-product, .cr-checkout-form { grid-template-columns: 1fr; gap: 30px; }
  .cr-info { grid-template-columns: 1fr; }
  .cr-cart-head { display: none; }
  .cr-cart-row { grid-template-columns: 1fr auto; }
  .cr-cart-prod { grid-column: 1 / -1; }
  .cr-cell[data-l]::before { content: attr(data-l) ': '; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: .7; }
  .cr-totals { text-align: left; width: 100%; }
}
@media (max-width: 520px) { .cr-grid2, .cr-iban dl { grid-template-columns: 1fr; } .cr-mini-panel { right: -80px; } }

/* üst bar üzerindeki sepet paneli */
.topbar { position: relative; z-index: 100000; }
.cr-mini-panel a.cr-btn { color: var(--cr-accent); }
.cr-mini-panel a.cr-btn:hover { color: var(--cr-dark); }
.cr-mini-panel a.cr-btn-light { color: var(--cr-dark); }
.cr-mini-panel a.cr-btn-light:hover { color: var(--cr-accent); }
.cr-mini-panel strong, .cr-mini-panel span { color: inherit; }

/* tema bağlantı/buton stillerini ezmek için */
a.cr-btn, button.cr-btn { color: var(--cr-accent) !important; background: var(--cr-dark) !important; border: 2px solid var(--cr-dark) !important; }
a.cr-btn:hover, button.cr-btn:hover { background: transparent !important; color: var(--cr-dark) !important; }
a.cr-btn-light, button.cr-btn-light { color: var(--cr-dark) !important; background: transparent !important; }
a.cr-btn-light:hover, button.cr-btn-light:hover { background: var(--cr-dark) !important; color: var(--cr-accent) !important; }
.cr-mini-panel a.cr-btn { color: var(--cr-accent) !important; }
.cr-mini-panel a.cr-btn:hover { color: var(--cr-dark) !important; }
.cr-mini-panel a.cr-btn-light { color: var(--cr-dark) !important; }
.cr-mini-panel a.cr-btn-light:hover { color: var(--cr-accent) !important; }
.cr-remove, .cr-qty button, .cr-mini-btn, .cr-filters button { background: transparent !important; border-color: transparent !important; color: inherit !important; box-shadow: none !important; }
.cr-qty button { border: 0 !important; }
.cr-copy { background: var(--cr-dark) !important; color: var(--cr-accent) !important; border: 0 !important; }
.cr-filters button { border-bottom: 2px solid transparent !important; }
.cr-filters button:hover, .cr-filters button.active { border-bottom-color: var(--cr-dark) !important; }
.cr-link { color: inherit !important; }
.cr-cart-prod a, .cr-pcard a { color: inherit !important; }

@media (max-width: 600px) {
  .cr-mini { position: static; }
  .cr-mini-panel { left: 12px; right: 12px; top: 100%; width: auto; max-width: none; }
}