/*
 * ================================================================
 *  PORKI — Metin2 Yardımcısı  |  styles.css
 *  Tüm seçiciler #porki-app scope'u altında yazılmıştır.
 *  Custom property isimleri --porki- ön ekini kullanır.
 *  WordPress teması çakışmalarını önlemek için tam izolasyon.
 * ================================================================
 */

/* ----------------------------------------------------------------
   RESET  (sadece #porki-app içi)
---------------------------------------------------------------- */
#porki-app,
#porki-app *,
#porki-app *::before,
#porki-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font: inherit;
  vertical-align: baseline;
}

/* ----------------------------------------------------------------
   CUSTOM PROPERTIES — DARK MODE (varsayılan)
---------------------------------------------------------------- */
#porki-app {
  /* Arka planlar */
  --porki-bg           : #212121;
  --porki-bg-card      : #292929;
  --porki-bg-panel     : #252525;
  --porki-bg-input     : #303030;
  --porki-bg-overlay   : rgba(0, 0, 0, 0.65);

  /* Kenarlıklar */
  --porki-border       : #2a2520;
  --porki-border-hover : #4a4030;

  /* Aksanlar */
  --porki-gold         : #FBBC04;
  --porki-gold-light   : #FDD835;
  --porki-gold-glow    : rgba(251, 188, 4, 0.15);
  --porki-red          : #E8605A;
  --porki-red-dark     : #C04840;
  --porki-red-glow     : rgba(232, 96, 90, 0.18);
  --porki-blue         : #60A0D0;
  --porki-blue-glow    : rgba(96, 160, 208, 0.18);

  /* Metin */
  --porki-text-primary : #E0DCD8;
  --porki-text-sec     : #C0BBB5;
  --porki-text-dim     : #605850;

  /* Hazır durumu */
  --porki-ready-bg     : #182018;
  --porki-ready-border : #5A9A50;
  --porki-ready-color  : #78C068;
  --porki-ready-glow   : rgba(120, 192, 104, 0.15);

  /* Tasarım tokenları */
  --porki-radius       : 12px;
  --porki-radius-sm    : 8px;
  --porki-shadow       : 0 4px 24px rgba(0, 0, 0, 0.55);
  --porki-shadow-card  : 0 2px 12px rgba(0, 0, 0, 0.45);
  --porki-transition   : 0.25s ease;
  --porki-font         : 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ----------------------------------------------------------------
   CUSTOM PROPERTIES — LIGHT MODE
---------------------------------------------------------------- */
#porki-app.porki-light {
  --porki-bg           : #F2F2F2;
  --porki-bg-card      : #FFFFFF;
  --porki-bg-panel     : #E8E8E8;
  --porki-bg-input     : #FFFFFF;
  --porki-border       : #D0D0D0;
  --porki-border-hover : #A0A0A0;
  --porki-gold         : #D4A000;
  --porki-gold-light   : #E8B800;
  --porki-gold-glow    : rgba(212, 160, 0, 0.12);
  --porki-red          : #C04038;
  --porki-red-dark     : #A03028;
  --porki-red-glow     : rgba(192, 64, 56, 0.12);
  --porki-blue         : #3878A8;
  --porki-blue-glow    : rgba(56, 120, 168, 0.12);
  --porki-text-primary : #1A1A1A;
  --porki-text-sec     : #555555;
  --porki-text-dim     : #AAAAAA;
  --porki-ready-bg     : #E8F0E8;
  --porki-ready-border : #488840;
  --porki-ready-color  : #386830;
  --porki-ready-glow   : rgba(56, 104, 48, 0.12);
  --porki-shadow       : 0 4px 18px rgba(0, 0, 0, 0.06);
  --porki-shadow-card  : 0 2px 8px rgba(0, 0, 0, 0.04);
  --porki-bg-overlay   : rgba(0, 0, 0, 0.04);
}

/* ----------------------------------------------------------------
   ROOT CONTAINER
---------------------------------------------------------------- */
#porki-app {
  font-family      : var(--porki-font);
  background-color : var(--porki-bg);
  color            : var(--porki-text-primary);
  width            : 100%;
  max-width        : 720px;
  margin-left      : auto;
  margin-right     : auto;
  display          : flex;
  flex-direction   : column;
  align-items      : stretch;
  padding-bottom   : 48px;
  transition       : background-color var(--porki-transition), color var(--porki-transition);
}

#porki-app.porki-expanded {
  position   : fixed;
  top        : 0;
  left       : 0;
  width      : 100vw;
  max-width  : none;
  height     : 100vh;
  overflow-y : auto;
  z-index    : 999999;
  margin     : 0;
}

/* ================================================================
   HEADER
================================================================ */
#porki-app .porki-header {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 18px 16px 14px;
  background      : linear-gradient(160deg, var(--porki-bg-panel) 0%, var(--porki-bg) 100%);
  border-bottom   : 1px solid var(--porki-border);
  position        : relative;
}

#porki-app .porki-header::after {
  content    : '';
  position   : absolute;
  bottom     : 0;
  left       : 10%;
  right      : 10%;
  height     : 1px;
  background : linear-gradient(90deg, transparent, var(--porki-gold-glow), transparent);
}

#porki-app .porki-header-title {
  display     : flex;
  align-items : center;
  gap         : 10px;
}

#porki-app .porki-logo {
  width        : 42px;
  height       : 42px;
  object-fit   : contain;
  flex-shrink  : 0;
  filter       : drop-shadow(0 0 6px var(--porki-gold-glow));
  transition   : filter var(--porki-transition), transform var(--porki-transition);
}

#porki-app .porki-logo:hover {
  filter    : drop-shadow(0 0 12px var(--porki-gold-glow));
  transform : scale(1.06);
}

#porki-app .porki-title {
  font-size   : 20px;
  font-weight : 800;
  color       : var(--porki-gold);
  line-height : 1.15;
  letter-spacing: 0.4px;
}

#porki-app .porki-title-sub {
  display        : block;
  font-size      : 10px;
  font-weight    : 500;
  color          : var(--porki-text-sec);
  text-transform : uppercase;
  letter-spacing : 1.5px;
  margin-top     : 2px;
}

#porki-app .porki-header-actions {
  display     : flex;
  align-items : center;
  gap         : 8px;
  flex-shrink : 0;
}

#porki-app .porki-darkmode-btn {
  background    : var(--porki-bg-card);
  border        : 1px solid var(--porki-border) !important;
  border-radius : 50% !important;
  width         : 38px;
  height        : 38px;
  font-size     : 18px;
  color         : #ffffff;
  cursor        : pointer;
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
  transition    : all var(--porki-transition);
  line-height   : 1;
}

#porki-app .porki-darkmode-btn:hover {
  border-color : var(--porki-gold) !important;
  box-shadow   : 0 0 10px var(--porki-gold-glow);
  transform    : rotate(18deg) scale(1.05);
}

#porki-app.porki-light .porki-darkmode-btn {
  color : #1a1a1a;
}

/* ================================================================
   PANEL TOGGLE WRAP + BUTTON
================================================================ */
#porki-app .porki-panel-toggle-wrap {
  padding : 14px 16px 0;
}

#porki-app .porki-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  gap             : 8px;
  width           : 100%;
  cursor          : pointer;
  transition      : all var(--porki-transition);
  border-radius   : var(--porki-radius) !important;
  font-family     : var(--porki-font);
  font-weight     : 600;
  letter-spacing  : 0.4px;
  line-height     : 1;
  text-decoration : none;
}

#porki-app .porki-btn--toggle {
  padding      : 11px 16px;
  background   : var(--porki-bg-card);
  border       : 1px solid var(--porki-gold) !important;
  color        : var(--porki-gold);
  font-size    : 14px;
}

#porki-app .porki-btn--toggle:hover {
  background : var(--porki-gold);
  color      : var(--porki-bg);
  box-shadow : 0 0 14px var(--porki-gold-glow);
}

#porki-app .porki-btn--toggle.porki-panel-open {
  border-radius : var(--porki-radius) var(--porki-radius) 0 0 !important;
  border-bottom-color : var(--porki-bg-panel) !important;
}

#porki-app .porki-toggle-arrow {
  display    : inline-block;
  font-size  : 10px;
  transition : transform var(--porki-transition);
}

#porki-app .porki-toggle-arrow.porki-open {
  transform : rotate(180deg);
}

/* ================================================================
   ADMIN PANEL (accordion)
================================================================ */
#porki-app .porki-admin-panel {
  overflow   : hidden;
  max-height : 0;
  transition : max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
               opacity 0.28s ease;
  opacity    : 0;
  margin     : 0 16px;
}

#porki-app .porki-admin-panel.porki-open {
  max-height : 1000px;
  opacity    : 1;
}

#porki-app .porki-admin-inner {
  background    : var(--porki-bg-panel);
  border        : 1px solid var(--porki-gold);
  border-top    : none !important;
  border-radius : 0 0 var(--porki-radius) var(--porki-radius);
  padding       : 20px;
  display       : flex;
  flex-direction: column;
  gap           : 16px;
}

/* ----------------------------------------------------------------
   FORM ELEMENTS
---------------------------------------------------------------- */
#porki-app .porki-form-group {
  display        : flex;
  flex-direction : column;
  gap            : 7px;
}

#porki-app .porki-label {
  font-size      : 11px;
  font-weight    : 700;
  color          : var(--porki-text-sec);
  text-transform : uppercase;
  letter-spacing : 0.9px;
}

#porki-app .porki-label-optional {
  font-size      : 10px;
  font-weight    : 400;
  text-transform : none;
  color          : var(--porki-text-dim);
  letter-spacing : 0;
}

#porki-app .porki-input,
#porki-app .porki-textarea {
  background    : var(--porki-bg-input);
  border        : 1px solid var(--porki-border) !important;
  border-radius : var(--porki-radius-sm) !important;
  color         : var(--porki-text-primary);
  padding       : 9px 12px;
  font-size     : 14px;
  font-family   : var(--porki-font);
  width         : 100%;
  transition    : border-color var(--porki-transition),
                  box-shadow var(--porki-transition);
}

#porki-app .porki-input:focus,
#porki-app .porki-textarea:focus {
  border-color : var(--porki-gold) !important;
  box-shadow   : 0 0 0 3px var(--porki-gold-glow);
  outline      : none;
}

#porki-app .porki-input::placeholder,
#porki-app .porki-textarea::placeholder {
  color : var(--porki-text-dim);
}

#porki-app .porki-input--error {
  border-color : var(--porki-red) !important;
  box-shadow   : 0 0 0 3px var(--porki-red-glow);
  animation    : porki-shake 0.38s ease;
}

#porki-app .porki-textarea {
  resize     : vertical;
  min-height : 60px;
}

/* Number input — spinners kaldırıldı */
#porki-app .porki-input--number {
  width         : 72px !important;
  text-align    : center;
  padding-left  : 6px;
  padding-right : 6px;
  -moz-appearance    : textfield;
  -webkit-appearance : textfield;
}

#porki-app .porki-input--number::-webkit-inner-spin-button,
#porki-app .porki-input--number::-webkit-outer-spin-button {
  -webkit-appearance : none;
  margin             : 0;
}

/* Radio group */
#porki-app .porki-radio-group {
  display : flex;
  gap     : 10px;
}

#porki-app .porki-radio-label {
  display       : flex;
  align-items   : center;
  gap           : 6px;
  font-size     : 13px;
  font-weight   : 600;
  color         : var(--porki-text-sec);
  cursor        : pointer;
  padding       : 8px 16px;
  border-radius : 20px !important;
  border        : 1px solid var(--porki-border) !important;
  background    : var(--porki-bg-input);
  transition    : all var(--porki-transition);
  user-select   : none;
}

#porki-app .porki-radio-label:has(.porki-radio:checked) {
  border-color : var(--porki-gold) !important;
  background   : var(--porki-bg-card);
  color        : var(--porki-gold);
  box-shadow   : 0 0 8px var(--porki-gold-glow);
}

#porki-app .porki-radio {
  accent-color : var(--porki-gold);
  width        : 14px;
  height       : 14px;
  cursor       : pointer;
}

#porki-app .porki-radio-icon {
  font-size : 14px;
}

/* Soğuma süresi inputları */
#porki-app .porki-cooldown-inputs {
  display     : flex;
  align-items : flex-start;
  gap         : 8px;
}

#porki-app .porki-cooldown-input-wrap {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 5px;
}

#porki-app .porki-input-unit {
  font-size   : 10px;
  color       : var(--porki-text-dim);
  font-weight : 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#porki-app .porki-cooldown-sep {
  font-size   : 22px;
  font-weight : 700;
  color       : var(--porki-text-dim);
  padding-top : 4px;
}

/* Ekle butonu */
#porki-app .porki-btn--add {
  padding    : 12px 16px;
  background : linear-gradient(135deg, var(--porki-red), var(--porki-red-dark));
  border     : 1px solid var(--porki-red) !important;
  color      : #fff;
  font-size  : 15px;
  margin-top : 4px;
}

#porki-app .porki-btn--add:hover {
  background : linear-gradient(135deg, #d04040, var(--porki-red));
  box-shadow : 0 0 18px var(--porki-red-glow);
  transform  : translateY(-2px);
}

#porki-app .porki-btn--add:active {
  transform : translateY(0);
}

/* ================================================================
   CARD LIST
================================================================ */
#porki-app .porki-card-list {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
  padding        : 16px;
}

/* ================================================================
   CARD
================================================================ */
#porki-app .porki-card {
  background    : var(--porki-bg-card);
  border        : 1px solid var(--porki-border) !important;
  border-radius : var(--porki-radius) !important;
  box-shadow    : var(--porki-shadow-card);
  display       : flex;
  flex-direction: column;
  gap           : 12px;
  padding       : 16px 16px 16px 20px;
  position      : relative;
  overflow      : hidden;
  animation     : porki-fadeInDown 0.32s ease;
  transition    : border-color var(--porki-transition),
                  box-shadow var(--porki-transition);
}

/* Sol renkli şerit */
#porki-app .porki-card::before {
  content       : '';
  position      : absolute;
  top           : 0;
  left          : 0;
  width         : 5px;
  height        : 100%;
  border-radius : 10px 0 0 10px;
}

#porki-app .porki-card--boss::before,
#porki-app .porki-card--gorev::before {
  background : var(--porki-card-color, var(--porki-red));
}

/* Ready (hazır) durumu */
#porki-app .porki-card.porki-card--ready {
  border-color     : var(--porki-ready-border) !important;
  background       : var(--porki-ready-bg);
  animation        : porki-pulse 1.8s ease-in-out infinite;
}

#porki-app .porki-card.porki-card--ready::after {
  content    : '';
  position   : absolute;
  inset      : 0;
  border-radius : var(--porki-radius);
  box-shadow : inset 0 0 20px var(--porki-ready-glow);
  pointer-events : none;
}

/* ---- Card Header ---- */
#porki-app .porki-card-header {
  display         : flex;
  align-items     : flex-start;
  justify-content : space-between;
  gap             : 8px;
}

#porki-app .porki-card-title-row {
  display     : flex;
  align-items : center;
  gap         : 8px;
  flex-wrap   : wrap;
}

#porki-app .porki-card-name {
  font-size   : 16px;
  font-weight : 700;
  color       : var(--porki-text-primary);
  line-height : 1.2;
}

#porki-app .porki-badge {
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : 1px;
  text-transform : uppercase;
  padding        : 3px 8px;
  border-radius  : 20px !important;
  line-height    : 1;
}

#porki-app .porki-badge--boss {
  background : var(--porki-red);
  color      : #fff;
}

#porki-app .porki-badge--gorev {
  background : var(--porki-blue);
  color      : #fff;
}

/* Delete button */
#porki-app .porki-btn-delete {
  background    : transparent;
  border        : 1px solid var(--porki-border) !important;
  border-radius : 50% !important;
  width         : 28px;
  height        : 28px;
  min-width     : 28px;
  font-size     : 13px;
  color         : var(--porki-text-dim);
  cursor        : pointer;
  display       : flex;
  align-items   : center;
  justify-content: center;
  flex-shrink   : 0;
  transition    : all var(--porki-transition);
  line-height   : 1;
  padding       : 0;
}

#porki-app .porki-btn-delete:hover {
  background   : var(--porki-red);
  border-color : var(--porki-red) !important;
  color        : #fff;
  box-shadow   : 0 0 8px var(--porki-red-glow);
}

/* ---- Note ---- */
#porki-app .porki-card-note {
  font-size     : 12px;
  font-style    : italic;
  color         : var(--porki-text-sec);
  background    : var(--porki-bg);
  border-left   : 3px solid var(--porki-border) !important;
  padding       : 6px 10px;
  border-radius : 0 var(--porki-radius-sm) var(--porki-radius-sm) 0 !important;
  line-height   : 1.4;
}

/* ---- Times ---- */
#porki-app .porki-card-times {
  display        : flex;
  flex-direction : column;
  gap            : 5px;
}

#porki-app .porki-time-row {
  display     : flex;
  align-items : baseline;
  gap         : 8px;
  font-size   : 13px;
}

#porki-app .porki-time-label {
  color     : var(--porki-text-sec);
  min-width : 130px;
  flex-shrink: 0;
  font-size : 12px;
}

#porki-app .porki-time-value {
  color                : var(--porki-text-primary);
  font-weight          : 600;
  font-variant-numeric : tabular-nums;
}

#porki-app .porki-time-row--reentry {
  align-items  : center;
  margin-top   : 2px;
  margin-bottom: 2px;
}

#porki-app .porki-time-value--reentry {
  font-size            : 20px;
  font-weight          : 800;
  color                : var(--porki-card-color, var(--porki-gold));
  letter-spacing       : 0.5px;
  text-shadow          : 0 0 12px var(--porki-gold-glow);
}

/* ---- Timer Row ---- */
#porki-app .porki-card-timer-row {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 8px;
  flex-wrap       : wrap;
  padding-top     : 4px;
  border-top      : 1px solid var(--porki-border) !important;
}

#porki-app .porki-timer-block {
  display        : flex;
  flex-direction : column;
  gap            : 2px;
}

#porki-app .porki-timer-label {
  font-size      : 10px;
  color          : var(--porki-text-dim);
  text-transform : uppercase;
  letter-spacing : 0.6px;
  font-weight    : 600;
}

#porki-app .porki-timer-display {
  font-size            : 24px;
  font-weight          : 800;
  color                : var(--porki-card-color, var(--porki-gold));
  letter-spacing       : 1.5px;
  font-variant-numeric : tabular-nums;
  transition           : color var(--porki-transition);
  line-height          : 1;
}

#porki-app .porki-timer-display.porki-timer--ready {
  color : var(--porki-ready-color);
}

/* ---- Status Badge ---- */
#porki-app .porki-status-badge {
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  padding       : 5px 13px;
  border-radius : 20px !important;
  font-size     : 12px;
  font-weight   : 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  white-space   : nowrap;
}

#porki-app .porki-status--waiting {
  background   : var(--porki-bg);
  border       : 1px solid var(--porki-border) !important;
  color        : var(--porki-text-sec);
}

#porki-app .porki-status--ready {
  background   : var(--porki-ready-bg);
  border       : 1px solid var(--porki-ready-border) !important;
  color        : var(--porki-ready-color);
  animation    : porki-glow-ready 1.8s ease-in-out infinite;
}

/* ---- Progress Bar ---- */
#porki-app .porki-progress-wrap {
  width         : 100%;
  height        : 5px;
  background    : var(--porki-bg);
  border-radius : 4px !important;
  overflow      : hidden;
  margin-top    : -4px;
}

#porki-app .porki-progress-fill {
  height        : 100%;
  width         : 100%;
  background    : var(--porki-card-color, var(--porki-gold));
  border-radius : 4px !important;
  transition    : width 0.95s linear;
}

/* ---- Timer Actions (reset + badge) ---- */
#porki-app .porki-card-timer-actions {
  display        : flex;
  flex-direction : column;
  align-items    : flex-end;
  gap            : 6px;
}

#porki-app .porki-btn-reset {
  background     : var(--porki-bg);
  border         : 1px solid var(--porki-border) !important;
  border-radius  : var(--porki-radius-sm) !important;
  color          : var(--porki-text-sec);
  cursor         : pointer;
  font-size      : 11px;
  font-weight    : 700;
  padding        : 5px 10px;
  white-space    : nowrap;
  transition     : all var(--porki-transition);
  font-family    : var(--porki-font);
  letter-spacing : 0.4px;
  text-transform : uppercase;
  display        : flex;
  align-items    : center;
  gap            : 4px;
  line-height    : 1;
}

#porki-app .porki-btn-reset:hover {
  background   : var(--porki-card-color, var(--porki-gold));
  border-color : var(--porki-card-color, var(--porki-gold)) !important;
  color        : #fff;
  box-shadow   : 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ================================================================
   COLOR PICKER (form)
================================================================ */
#porki-app .porki-color-picker {
  display   : flex;
  flex-wrap : wrap;
  gap       : 9px;
}

#porki-app .porki-swatch {
  width         : 30px;
  height        : 30px;
  border-radius : 50% !important;
  background    : var(--porki-swatch-color);
  border        : 2px solid transparent !important;
  cursor        : pointer;
  transition    : all var(--porki-transition);
  box-shadow    : 0 2px 6px rgba(0, 0, 0, 0.45);
  padding       : 0;
  flex-shrink   : 0;
}

#porki-app .porki-swatch:hover {
  transform    : scale(1.18);
  border-color : rgba(255, 255, 255, 0.65) !important;
}

#porki-app .porki-swatch--active {
  border-color : #fff !important;
  box-shadow   : 0 0 0 3px var(--porki-swatch-color), 0 2px 6px rgba(0, 0, 0, 0.45);
  transform    : scale(1.12);
}

/* ================================================================
   PRESET PALETTE
================================================================ */

/* Preset toggle butonu — admin toggle ile aynı base stili taşır
   ama farklı accent rengi (gold yerine mavi-mor tonu) */
#porki-app .porki-btn--preset-toggle {
  padding      : 11px 16px;
  background   : var(--porki-bg-card);
  border       : 1px solid var(--porki-border) !important;
  color        : var(--porki-text-sec);
  font-size    : 14px;
}

#porki-app .porki-btn--preset-toggle:hover {
  background   : var(--porki-bg-panel);
  border-color : var(--porki-border-hover) !important;
  color        : var(--porki-text-primary);
}

#porki-app .porki-btn--preset-toggle.porki-panel-open {
  border-radius : var(--porki-radius) var(--porki-radius) 0 0 !important;
  border-bottom-color : var(--porki-bg-panel) !important;
}

#porki-app .porki-preset-wrap {
  padding : 10px 16px 0;
}

/* İç toggle wrap ekstra yatay padding eklemesin;
   preset-wrap'in kendi padding'i zaten hizayı sağlar */
#porki-app .porki-preset-wrap .porki-panel-toggle-wrap {
  padding-left  : 0;
  padding-right : 0;
}

/* Accordion alanı */
#porki-app .porki-preset-panel {
  overflow   : hidden;
  max-height : 0;
  opacity    : 0;
  transition : max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
               opacity 0.25s ease;
  margin     : 0;
}

#porki-app .porki-preset-panel.porki-open {
  max-height : 600px;
  opacity    : 1;
}

#porki-app .porki-preset-inner {
  background    : var(--porki-bg-panel);
  border        : 1px solid var(--porki-border);
  border-top    : none !important;
  border-radius : 0 0 var(--porki-radius) var(--porki-radius);
  padding       : 14px 16px 16px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
}

/* Bölüm başlığı (Patronlar / Görevler) */
#porki-app .porki-preset-section-label {
  font-size      : 10px;
  font-weight    : 700;
  color          : var(--porki-text-dim);
  text-transform : uppercase;
  letter-spacing : 1.2px;
  padding-bottom : 4px;
  border-bottom  : 1px solid var(--porki-border);
  margin-top     : 4px;
}

#porki-app .porki-preset-section-label:first-child {
  margin-top : 0;
}

/* Grid */
#porki-app .porki-preset-grid {
  display        : flex;
  flex-direction : column;
  gap            : 6px;
}

/* Her preset satırı */
#porki-app .porki-preset-row {
  display         : flex;
  align-items     : center;
  gap             : 9px;
  padding         : 8px 12px;
  background      : var(--porki-bg-input);
  border          : 1px solid var(--porki-border) !important;
  border-radius   : var(--porki-radius-sm) !important;
  transition      : border-color var(--porki-transition),
                    background var(--porki-transition);
}

#porki-app .porki-preset-row--active {
  border-color : var(--porki-border-hover) !important;
  background   : var(--porki-bg-card);
  opacity      : 0.65;
}

/* Renk noktası */
#porki-app .porki-preset-dot {
  width         : 10px;
  height        : 10px;
  border-radius : 50% !important;
  flex-shrink   : 0;
  box-shadow    : 0 0 5px currentColor;
}

/* İkon */
#porki-app .porki-preset-icon {
  font-size   : 14px;
  line-height : 1;
  flex-shrink : 0;
}

/* Ad */
#porki-app .porki-preset-name {
  font-size   : 13px;
  font-weight : 600;
  color       : var(--porki-text-primary);
  flex        : 1;
  white-space : nowrap;
  overflow    : hidden;
  text-overflow: ellipsis;
}

/* Soğuma süresi */
#porki-app .porki-preset-cd {
  font-size            : 11px;
  color                : var(--porki-text-dim);
  font-variant-numeric : tabular-nums;
  white-space          : nowrap;
  font-weight          : 600;
}

/* Başlat / Aktif butonu */
#porki-app .porki-preset-btn {
  padding        : 5px 13px;
  border-radius  : 16px !important;
  font-size      : 11px;
  font-weight    : 700;
  cursor         : pointer;
  white-space    : nowrap;
  flex-shrink    : 0;
  font-family    : var(--porki-font);
  letter-spacing : 0.4px;
  transition     : all var(--porki-transition);
  border         : 1px solid var(--porki-gold) !important;
  background     : transparent;
  color          : var(--porki-gold);
  line-height    : 1;
}

#porki-app .porki-preset-btn:hover:not(:disabled) {
  background : var(--porki-gold);
  color      : var(--porki-bg);
  box-shadow : 0 0 10px var(--porki-gold-glow);
}

#porki-app .porki-preset-btn--active,
#porki-app .porki-preset-btn:disabled {
  border-color : var(--porki-border) !important;
  color        : var(--porki-text-dim);
  cursor       : default;
  background   : transparent;
}

/* ================================================================
   EMPTY STATE
================================================================ */
#porki-app .porki-empty-state {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 8px;
  padding        : 60px 16px;
  transition     : opacity var(--porki-transition);
}

#porki-app .porki-empty-state.porki-hidden {
  display : none;
}

#porki-app .porki-empty-icon {
  font-size : 52px;
  opacity   : 0.35;
  animation : porki-float 3s ease-in-out infinite;
}

#porki-app .porki-empty-text {
  font-size   : 15px;
  color       : var(--porki-text-sec);
  font-weight : 600;
}

#porki-app .porki-empty-hint {
  font-size : 12px;
  color     : var(--porki-text-dim);
}

/* ================================================================
   TAB BAR
================================================================ */
#porki-app .porki-tab-bar {
  display          : flex;
  align-items      : stretch;
  position         : relative;
  background       : var(--porki-bg-panel);
  border-bottom    : 1px solid var(--porki-border);
  padding          : 0 8px;
  gap              : 2px;
  overflow-x       : auto;
  scrollbar-width  : none;
}

#porki-app .porki-tab-bar::-webkit-scrollbar {
  display : none;
}

/* Altta kayan aktif çizgi */
#porki-app .porki-tab-indicator {
  position         : absolute;
  bottom           : 0;
  height           : 2px;
  background       : var(--porki-gold);
  border-radius    : 2px 2px 0 0 !important;
  transition       : left 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                     width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow       : 0 0 8px var(--porki-gold-glow);
  pointer-events   : none;
}

#porki-app .porki-tab {
  display          : flex;
  align-items      : center;
  gap              : 6px;
  padding          : 11px 16px 12px;
  background       : transparent;
  border           : none !important;
  border-bottom    : 2px solid transparent !important;
  color            : var(--porki-text-sec);
  font-size        : 13px;
  font-weight      : 600;
  font-family      : var(--porki-font);
  cursor           : pointer;
  white-space      : nowrap;
  flex-shrink      : 0;
  transition       : color var(--porki-transition),
                     background var(--porki-transition);
  letter-spacing   : 0.3px;
  position         : relative;
}

#porki-app .porki-tab:hover {
  color      : var(--porki-text-primary);
  background : var(--porki-bg-overlay);
}

#porki-app .porki-tab--active {
  color : var(--porki-gold);
}

#porki-app .porki-tab-icon {
  font-size   : 15px;
  line-height : 1;
}

#porki-app .porki-tab-label {
  line-height : 1;
}

/* ================================================================
   TAB PANELS
================================================================ */
#porki-app .porki-tab-panel {
  display : none;
}

#porki-app .porki-tab-panel--active {
  display   : block;
  animation : porki-tabFadeIn 0.22s ease;
}

/* ================================================================
   BİLGİLENDİRME SEKMESI
================================================================ */
#porki-app .porki-info-wrap {
  display        : flex;
  flex-direction : column;
  gap            : 12px;
  padding        : 16px;
}

#porki-app .porki-info-card {
  border-radius : var(--porki-radius) !important;
  padding       : 16px 18px;
  display       : flex;
  flex-direction: column;
  gap           : 10px;
  border        : 1px solid transparent !important;
  animation     : porki-fadeInDown 0.28s ease;
}

#porki-app .porki-info-card--warn {
  background   : rgba(251, 188, 4, 0.06);
  border-color : rgba(251, 188, 4, 0.20) !important;
}

#porki-app .porki-info-card--danger {
  background   : rgba(232, 96, 90, 0.06);
  border-color : rgba(232, 96, 90, 0.20) !important;
}

#porki-app .porki-info-card--tip {
  background   : rgba(120, 192, 104, 0.06);
  border-color : rgba(120, 192, 104, 0.20) !important;
}

#porki-app .porki-info-card-header {
  display     : flex;
  align-items : center;
  gap         : 9px;
}

#porki-app .porki-info-icon {
  font-size  : 20px;
  line-height: 1;
  flex-shrink: 0;
}

#porki-app .porki-info-title {
  font-size   : 14px;
  font-weight : 700;
  color       : var(--porki-text-primary);
  line-height : 1.2;
}

#porki-app .porki-info-text {
  font-size   : 13px;
  color       : var(--porki-text-sec);
  line-height : 1.65;
}

#porki-app .porki-info-text strong {
  color       : var(--porki-gold);
  font-weight : 700;
}

#porki-app .porki-info-list {
  list-style  : none;
  display     : flex;
  flex-direction: column;
  gap         : 7px;
  padding-left: 2px;
}

#porki-app .porki-info-list li {
  font-size   : 13px;
  color       : var(--porki-text-sec);
  line-height : 1.5;
  display     : flex;
  gap         : 6px;
}

#porki-app .porki-info-list strong {
  color       : var(--porki-text-primary);
  font-weight : 700;
}

/* ================================================================
   OKEY SEKMESİ
================================================================ */
#porki-app .porki-okey-wrap {
  display        : flex;
  flex-direction : column;
  gap            : 24px;
  padding        : 20px 16px;
}

#porki-app .porki-okey-board {
  display        : flex;
  flex-direction : column;
  gap            : 14px;
  overflow       : visible;
}

#porki-app .porki-okey-row {
  display                    : flex;
  gap                        : clamp(3px, 1.5vw, 8px);
  justify-content            : center;
  overflow-y                 : visible;
  padding-top                : 8px;
  padding-bottom             : 8px;
}

#porki-app .porki-okey-row::-webkit-scrollbar {
  height : 4px;
}

#porki-app .porki-okey-row::-webkit-scrollbar-track {
  background : transparent;
}

#porki-app .porki-okey-row::-webkit-scrollbar-thumb {
  background    : var(--porki-border);
  border-radius : 4px;
}

/* ── Sekme mini kart ikonu ──────────────────── */
#porki-app .porki-tab-okey-icon {
  display    : flex;
  gap        : 2px;
  align-items: center;
  font-size  : 0;
  line-height: 1;
}

#porki-app .porki-mini-card {
  width        : 8px;
  height       : 12px;
  border-radius: 2px !important;
  border       : 1px solid rgba(255, 255, 255, 0.35) !important;
  flex-shrink  : 0;
}

#porki-app .porki-mini-card--red {
  background : linear-gradient(150deg, #e83535, #b81818);
}

#porki-app .porki-mini-card--yellow {
  background : linear-gradient(150deg, #f5cc32, #c88a14);
}

#porki-app .porki-mini-card--blue {
  background : linear-gradient(150deg, #3a80e8, #1842c0);
}

#porki-app .porki-okey-card {
  position      : relative;
  width         : clamp(36px, 10vw, 62px);
  height        : clamp(52px, 14vw, 88px);
  border-radius : clamp(6px, 1.5vw, 10px) !important;
  cursor        : pointer;
  display       : flex;
  align-items   : center;
  justify-content : center;
  flex-shrink   : 1;
  min-width     : 0;
  user-select   : none;
  transition    : transform 0.15s ease, filter 0.22s ease, box-shadow 0.15s ease;
  border        : 3px solid transparent !important;
  outline       : none;
}

/* Dekoratif iç çerçeve */
#porki-app .porki-okey-card::before {
  content       : '';
  position      : absolute;
  inset         : clamp(2px, 0.8vw, 5px);
  border-radius : clamp(3px, 0.8vw, 5px);
  border        : 2px dashed rgba(255, 255, 255, 0.45) !important;
  pointer-events: none;
  transition    : border-color 0.22s ease;
}

/* ── Kırmızı satır ─────────────────────────── */
#porki-app .porki-okey-card--red {
  background  : linear-gradient(150deg, #e83535 0%, #b81818 100%);
  border-color: #ff9090 !important;
  box-shadow  : 0 2px 5px rgba(0, 0, 0, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* ── Sarı satır ────────────────────────────── */
#porki-app .porki-okey-card--yellow {
  background  : linear-gradient(150deg, #f5cc32 0%, #c88a14 100%);
  border-color: #ffe070 !important;
  box-shadow  : 0 2px 5px rgba(0, 0, 0, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ── Mavi satır ────────────────────────────── */
#porki-app .porki-okey-card--blue {
  background  : linear-gradient(150deg, #3a80e8 0%, #1842c0 100%);
  border-color: #80b8ff !important;
  box-shadow  : 0 2px 5px rgba(0, 0, 0, 0.30),
                inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* Numara */
#porki-app .porki-okey-num {
  font-size   : clamp(16px, 5vw, 28px);
  font-weight : 900;
  color       : #ffffff;
  text-shadow : 0 1px 3px rgba(0, 0, 0, 0.30);
  line-height : 1;
  position    : relative;
  z-index     : 1;
}

/* Hover — sadece aktif kartlar */
#porki-app .porki-okey-card:not(.porki-okey-card--inactive):hover {
  transform  : translateY(-4px) scale(1.05);
  z-index    : 5;
  position   : relative;
}

/* Focus */
#porki-app .porki-okey-card:focus-visible {
  outline       : 2px solid #fff !important;
  outline-offset: 2px;
}

/* İnaktif (tıklanmış / deaktif) */
#porki-app .porki-okey-card--inactive {
  background  : linear-gradient(150deg, #484848 0%, #2e2e2e 100%) !important;
  border-color: #606060 !important;
  box-shadow  : none !important;
}

#porki-app .porki-okey-card--inactive::before {
  border-color : rgba(255, 255, 255, 0.10) !important;
}

#porki-app .porki-okey-card--inactive:hover {
  transform : translateY(-2px) scale(1.02);
}

/* Başlık */
#porki-app .porki-okey-title {
  text-align    : center;
  font-size     : 26px;
  font-weight   : 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  display       : flex;
  justify-content: center;
  align-items   : baseline;
  gap           : 0;
  padding-bottom: 6px;
  line-height   : 1;
}

#porki-app .porki-okey-title-gap {
  width : 10px;
  display: inline-block;
}

#porki-app .porki-okey-title-r {
  color       : #e83535;
  text-shadow : 0 1px 4px rgba(200, 30, 30, 0.40);
}

#porki-app .porki-okey-title-y {
  color       : #e8b800;
  text-shadow : 0 1px 4px rgba(200, 160, 0, 0.40);
}

#porki-app .porki-okey-title-b {
  color       : #2e72e0;
  text-shadow : 0 1px 4px rgba(30, 80, 200, 0.40);
}

/* Sıfırla butonu */
#porki-app .porki-btn--okey-reset {
  padding      : 11px 16px;
  background   : var(--porki-bg-card);
  border       : 1px solid var(--porki-border) !important;
  color        : var(--porki-text-sec);
  font-size    : 13px;
  max-width    : 200px;
  width        : 200px;
  margin       : 0 auto;
}

#porki-app .porki-btn--okey-reset:hover {
  border-color : var(--porki-border-hover) !important;
  color        : var(--porki-text-primary);
  background   : var(--porki-bg-input);
}

/* ================================================================
   COMING SOON (boş sekmeler)
================================================================ */
#porki-app .porki-coming-soon {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 10px;
  padding        : 72px 16px;
}

#porki-app .porki-coming-soon-icon {
  font-size : 48px;
  opacity   : 0.4;
  animation : porki-float 3s ease-in-out infinite;
}

#porki-app .porki-coming-soon-text {
  font-size   : 18px;
  font-weight : 700;
  color       : var(--porki-text-sec);
}

#porki-app .porki-coming-soon-hint {
  font-size : 13px;
  color     : var(--porki-text-dim);
}

/* ================================================================
   NOT DEFTERİ
================================================================ */
#porki-app .porki-notes-wrap {
  display        : flex;
  flex-direction : column;
  gap            : 0;
  padding        : 16px;
}

/* ---- Form ---- */
#porki-app .porki-notes-form {
  display        : flex;
  flex-direction : column;
  gap            : 10px;
  background     : var(--porki-bg-panel);
  border         : 1px solid var(--porki-border) !important;
  border-radius  : var(--porki-radius) !important;
  padding        : 16px;
  margin-bottom  : 16px;
}

#porki-app .porki-notes-title-input {
  font-size   : 15px;
  font-weight : 600;
}

#porki-app .porki-notes-textarea {
  min-height  : 90px;
  resize      : vertical;
  font-size   : 13px;
  line-height : 1.55;
}

#porki-app .porki-notes-form-actions {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  flex-wrap       : wrap;
  gap             : 10px;
}

#porki-app .porki-notes-color-row {
  display     : flex;
  align-items : center;
  gap         : 10px;
}

#porki-app .porki-notes-swatches {
  display : flex;
  gap     : 7px;
}

#porki-app .porki-note-swatch {
  width         : 22px;
  height        : 22px;
  border-radius : 50% !important;
  background    : var(--porki-ns-color);
  border        : 2px solid var(--porki-border) !important;
  cursor        : pointer;
  transition    : all var(--porki-transition);
  padding       : 0;
  flex-shrink   : 0;
  box-shadow    : inset 0 0 0 1px rgba(255,255,255,0.1);
}

#porki-app .porki-note-swatch:hover {
  transform    : scale(1.2);
  border-color : rgba(255,255,255,0.5) !important;
}

#porki-app .porki-note-swatch--active {
  border-color  : var(--porki-gold) !important;
  box-shadow    : 0 0 0 2px var(--porki-gold-glow);
  transform     : scale(1.15);
}

#porki-app .porki-btn--note-add {
  padding    : 9px 18px;
  background : linear-gradient(135deg, #2a2210, #201a08);
  border     : 1px solid rgba(251, 188, 4, 0.30) !important;
  color      : #FBBC04;
  font-size  : 13px;
  font-weight: 700;
  white-space: nowrap;
}

#porki-app .porki-btn--note-add:hover {
  background : linear-gradient(135deg, #3a3018, #2a2210);
  box-shadow : 0 0 10px rgba(251, 188, 4, 0.18);
  transform  : translateY(-1px);
}

/* ---- Not listesi ---- */
#porki-app .porki-notes-list {
  display        : flex;
  flex-direction : column;
  gap            : 10px;
}

/* ---- Tek not kartı ---- */
#porki-app .porki-note-card {
  background    : var(--porki-note-bg, var(--porki-bg-card));
  border        : 1px solid var(--porki-border) !important;
  border-left   : 4px solid var(--porki-note-accent, var(--porki-gold)) !important;
  border-radius : var(--porki-radius) !important;
  padding       : 13px 14px;
  display       : flex;
  flex-direction: column;
  gap           : 7px;
  animation     : porki-fadeInDown 0.28s ease;
  transition    : border-color var(--porki-transition);
}

#porki-app .porki-note-card:hover {
  border-color : var(--porki-note-accent, var(--porki-border-hover)) !important;
}

#porki-app .porki-note-header {
  display         : flex;
  align-items     : flex-start;
  justify-content : space-between;
  gap             : 8px;
}

#porki-app .porki-note-title {
  font-size   : 14px;
  font-weight : 700;
  color       : var(--porki-note-accent, var(--porki-gold));
  line-height : 1.2;
  flex        : 1;
}

#porki-app .porki-note-meta {
  font-size  : 10px;
  color      : var(--porki-text-dim);
  white-space: nowrap;
  padding-top: 2px;
}

#porki-app .porki-note-body {
  font-size   : 13px;
  color       : var(--porki-text-primary);
  line-height : 1.6;
  white-space : pre-wrap;
  word-break  : break-word;
}

#porki-app .porki-note-actions {
  display     : flex;
  align-items : center;
  gap         : 6px;
  justify-content: flex-end;
  padding-top : 4px;
  border-top  : 1px solid var(--porki-border-hover) !important;
}

#porki-app .porki-note-btn {
  background    : transparent;
  border        : 1px solid var(--porki-border) !important;
  border-radius : var(--porki-radius-sm) !important;
  color         : var(--porki-text-dim);
  cursor        : pointer;
  font-size     : 11px;
  font-weight   : 600;
  padding       : 4px 10px;
  font-family   : var(--porki-font);
  transition    : all var(--porki-transition);
  line-height   : 1;
  display       : flex;
  align-items   : center;
  gap           : 4px;
}

#porki-app .porki-note-btn:hover {
  background   : var(--porki-bg);
  color        : var(--porki-text-primary);
  border-color : var(--porki-border-hover) !important;
}

#porki-app .porki-note-btn--delete:hover {
  background   : var(--porki-red);
  border-color : var(--porki-red) !important;
  color        : #fff;
}

/* ---- Düzenleme modu ---- */
#porki-app .porki-note-edit-wrap {
  display        : flex;
  flex-direction : column;
  gap            : 8px;
}

#porki-app .porki-note-edit-title,
#porki-app .porki-note-edit-body {
  background    : var(--porki-bg-input);
  border        : 1px solid var(--porki-gold) !important;
  border-radius : var(--porki-radius-sm) !important;
  color         : var(--porki-text-primary);
  padding       : 8px 10px;
  font-family   : var(--porki-font);
  font-size     : 13px;
  width         : 100%;
  box-sizing    : border-box;
}

#porki-app .porki-note-edit-body {
  min-height : 70px;
  resize     : vertical;
  line-height: 1.55;
}

/* ---- Boş durum ---- */
#porki-app .porki-notes-empty {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 8px;
  padding        : 52px 16px;
}

#porki-app .porki-notes-empty.porki-hidden {
  display : none;
}

#porki-app .porki-notes-empty-icon {
  font-size : 44px;
  opacity   : 0.3;
  animation : porki-float 3s ease-in-out infinite;
}

#porki-app .porki-notes-empty-text {
  font-size   : 15px;
  font-weight : 600;
  color       : var(--porki-text-sec);
}

#porki-app .porki-notes-empty-hint {
  font-size : 12px;
  color     : var(--porki-text-dim);
}


#porki-app .porki-coming-soon {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 10px;
  padding        : 72px 16px;
}

#porki-app .porki-coming-soon-icon {
  font-size : 48px;
  opacity   : 0.4;
  animation : porki-float 3s ease-in-out infinite;
}

#porki-app .porki-coming-soon-text {
  font-size   : 18px;
  font-weight : 700;
  color       : var(--porki-text-sec);
}

#porki-app .porki-coming-soon-hint {
  font-size : 13px;
  color     : var(--porki-text-dim);
}

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes porki-tabFadeIn {
  from {
    opacity   : 0;
    transform : translateY(6px);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}

@keyframes porki-fadeInDown {
  from {
    opacity   : 0;
    transform : translateY(-10px);
  }
  to {
    opacity   : 1;
    transform : translateY(0);
  }
}

@keyframes porki-fadeOutUp {
  from {
    opacity   : 1;
    transform : translateY(0);
    max-height: 400px;
  }
  to {
    opacity   : 0;
    transform : translateY(-10px);
    max-height: 0;
  }
}

@keyframes porki-pulse {
  0%, 100% {
    box-shadow    : 0 0 0 0 var(--porki-ready-glow);
    border-color  : var(--porki-ready-border) !important;
  }
  50% {
    box-shadow    : 0 0 22px 4px var(--porki-ready-glow);
    border-color  : var(--porki-ready-color) !important;
  }
}

@keyframes porki-glow-ready {
  0%, 100% {
    box-shadow : none;
  }
  50% {
    box-shadow : 0 0 10px var(--porki-ready-glow);
  }
}

@keyframes porki-shake {
  0%, 100% { transform : translateX(0); }
  18%, 54%  { transform : translateX(-5px); }
  36%, 72%  { transform : translateX(5px); }
}

@keyframes porki-float {
  0%, 100% { transform : translateY(0); }
  50%       { transform : translateY(-6px); }
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 480px) {
  #porki-app .porki-title {
    font-size : 17px;
  }

  #porki-app .porki-timer-display {
    font-size : 20px;
  }

  #porki-app .porki-time-label {
    min-width : 100px;
  }

  #porki-app .porki-cooldown-inputs {
    flex-wrap : wrap;
  }

  #porki-app .porki-radio-group {
    flex-wrap : wrap;
  }

}